جوجل Stitch و Antigravity: كود بضغطة زر!

مقدمة: عصر الذكاء الاصطناعي والـ Vibe Coding

أطيب تحياتي وأهلاً وسهلاً بيكم يا جماعة. بصراحة، مهما اتكلمنا ومهما عملنا، خلاص موضوع الذكاء الاصطناعي والـ Vibe Coding بقى أمر واقع وموجود حوالينا في كل حتة.

النهاردة هنشوف موقعين جامدين جداً من جوجل: الأول اسمه Stitch والتاني اسمه Antigravity. وهنخليهم يتكلموا مع بعض. Stitch ده بيولد لك واجهة موقع أو تطبيق موبايل، كل اللي بنعمله إننا بنديله وصف بسيط (Prompt) وهو بيطلع لنا الواجهة. وبعدين هنحول الواجهة دي لكود شغال، وممكن كمان لقواعد بيانات. الربط بينهم بصراحة تحفة وهتنبهروا إزاي بيسهل الدنيا. يلا بينا، من غير تأخير كتير، نبتدي على طول!

جولة سريعة على الموقع بتاعنا (نحمسي.net)

زي ما أنتوا شايفين دلوقتي، الموقع لايف وتقدروا تزوروه على n7msy.net. كل اللي شايفينه في الموقع ده، أنا ما كتبتش سطر كود واحد فيه! مش الكود بس، ده حتى التصميم كله بالذكاء الاصطناعي بالكامل.

• الصفحة الرئيسية: شايفين الـ “هيرو سكشن” ده والحركات اللي فيه، والسلايدر اللي بيعرض الكتب؟ كل ده جاهز.
• صفحات داخلية: لو دوسنا على “عرض الكل” هتلاحظوا إن فيه صفحة تانية، ودي كمان معموله بالذكاء الاصطناعي.
• كتاب اليوم: عندنا “كتاب مختار اليوم”. لو دوسنا “ابدأ القراءة”، هياخدني لصفحة الكتاب وهبدأ أقرا على طول.
• تصنيفات الكتب: فيه “الأكثر قراءة”، “أحدث الإصدارات”، “اختيارات اليوم”. وكل واحدة من دول ممكن أروح على “عرض الكل” وأشوف تفاصيلها.
• صفحة تفاصيل الكتاب: لو رحت مثلاً للأكثر قراءة وعملت “عرض الكل”، هلاقي نتائج مقترحة: صورة الكتاب، العنوان، المصدر أو الناشر، التقييم بتاعه، والسعر. لو ضغطت على أي كتاب، هياخدني لصفحة خاصة بيه فيها: “إضافة للمفضلة”، “مشاركة على السوشيال ميديا”، معلومات عن اللغة، نظرة عامة، تفاصيل الكتاب، والمراجعات (لو فيه). وكمان فيه رابط لشراء الكتاب ورابط للقراءة لو متاح مجاني أو جزء منه.
• البحث: لو رجعت لورا، هلاقي زرار البحث. لو كتبت مثلاً “هامسون”، هتلاحظوا إنه بيبحث وأنا بكتب! ولما بيجيب النتائج، لو دخلت على الكتاب، بيديني نفس المعلومات.
• سجل البحث والمكتبة: هتلاحظوا إن عمليات البحث الأخيرة بتتحفظ. ولو رحت على “مكتبتي”، هلاقي الكتب اللي ضفتها للمفضلة هناك. لو ضفت رواية تانية للمفضلة من الرئيسية، هتظهر في مكتبتي.
• التصفح والتصنيفات: في قسم “التصفح”، بيقسم لي الكتب لتصنيفات: روايات، واقعية، للأطفال، وكل تصنيف بيوريني عدد الكتب اللي فيه.

مصدر البيانات: Google Books API

ممكن حد يسألني دلوقتي: “يا نور، النتائج دي جاية منين؟” كل النتائج دي مافيش ولا كتاب منها موجود على السيرفر بتاعي، كلها جاية من Google Books API.

الموقع ده ممكن نخليه يشتغل كتطبيق موبايل بنفس الأزرار اللي تحت، أو كديسك توب. الفكرة الأساسية مش بس البرمجة، لكن كمان الـ UI/UX اللي شايفينها دي، اللي هي من جوجل Stitch، برضه بالذكاء الاصطناعي. أنا بس قلتله يصمم التصميم ده، وممكن بعدين نستخدمه عشان يولد الكود.

Stitch: بديل Figma بالذكاء الاصطناعي

Stitch لوحده برنامج وموقع رائع بيصمم لك الـ UI، وهو بديل حقيقي لـ Figma. ممكن كمان تعدل فيه اللي أنت عايزه. فما بالكم بقى إننا ممكن نولد الحاجات دي بالذكاء الاصطناعي أو نربطها بـ Antigravity زي ما هنشوف النهاردة، عشان يقرا كل المشاريع اللي عندنا ويحولها من كلام وصور لبرمجة حقيقية.

استضافة الموقع: Node.js على Hostinger بدون VPS

قبل ما نبتدي، الموقع ده شغال Node.js، وإزاي Node.js بقى أونلاين ومن غير VPS؟ طبعاً أنا بستخدم Hostinger للموضوع ده. لو رحنا على الـ Pricing عندهم، مش عايزين الـ VPS، عايزين الـ Web Hosting العادي، وبالتحديد خطط الـ Business.

خشوا على الموقع واتصفحوه، ويلا بينا نكمل ونشوف بالتفصيل إزاي هنعمل الموقع ده أو أي موقع شبهه.

البداية الصحيحة: اقتراحات الـ API من ChatGPT

عشان نبدأ صح، رحت لـ ChatGPT وقولتله: “اديني اقتراحات لموقع إنترنت بيقدم كتب باللغة العربية عن طريق الـ API”. شوفوا إداني إيه:

طبعاً، هنروح للخيار الأول والأسهل اللي هو Google Books API.

استكشاف Google Books API

لما فتحت الـ URL، لاحظت إن من مليون كتاب، عملنا فلترة. لقينا نوع الكتاب، الـ ID بتاعه، الـ Self-link عشان ناخد الـ API للكتاب ده بس. شايفين عنوان الكتاب والاسم؟ ولو شوفنا الكتاب نفسه، هنلاقي الـ Preview Link. لو ضغطنا عليه، هيفتح الكتاب وهيديني فعلاً معاينة. وكمان فيه الـ Buy أو الـ Read Link، صفحات كتير ممكن نقراها، وفيه رابط الشراء بسعر معين. اللي يهمني في الموضوع ده إن الـ API بيقدم معلومات كاملة جداً للكتب اللي أنا عايزها. ممتاز جداً، هو ده الـ API اللي هستخدمه!

توليد الـ Prompt لتصميم الواجهة في Stitch

عشان أريح نفسي من كتابة الـ Prompt، رحت لـ ChatGPT تاني وقولتله: “عايزك تكتبلي Prompt موجه لجوجل Stitch، اللي هو الموقع اللي هنستخدمه النهاردة عشان يولد لي واجهة التطبيقات. بـ Prompt واحد بس ممكن يولد لي الواجهات.”

شايفين؟ حتى الـ Prompt مش عايز أكتبه! بس أنا عايز الفكرة العامة والرئيسية. إداني Prompt طويل جداً، “Design Prompt” مش عارف إيه، “Goal”، “Style: bookish feel, clean, elegant”. هاخد كل ده وأعمله Copy وأروح لموقع Stitch.

Stitch بيولد الواجهة في ثواني!

حطيت الـ Prompt في Stitch، بس انتبهوا، أول 3 سطور دول كانوا من ChatGPT مش عايزهم، وآخر سطور تبع “if you want” برضه هلغيهم. هنستخدم الـ Flash 3، ومباشرةً بدأ يقرا الـ Prompt كله بالكامل، وبيعمل دلوقتي “Planning” (تخطيط). بيقولي الوقت المتوقع حوالي 40 ثانية، 30 ثانية. يا جماعة لحظات الانتظار دي من أصعب اللحظات! أنت دلوقتي عشان تصمم موقع زي ده محتاج أيام عشان تصمم الواجهات وتشتغل بكسل بكسل، لكن دلوقتي الخمس دقايق انتظار دول تحسهم سنين!

النتيجة النهائية: بصراحة، أنا لو قعدت أيام مش هيطلع معايا تصميم زي ده. مش الفكرة في التصميم نفسه، أكيد أي حد قادر يعمل التصميم ده، لكن لاحظوا إن كل الصفحات جاهزة، كل حاجة جاهزة. حتى لو رحت هنا هلاقي الأيقونات، حتى الـ Font الجميل اللي بيستخدمه، التقييمات، كل حاجة عايزها موجودة. شايفين بيعملهولي على أساس إنه موبايل أبلكيشن. مش هعمل أي حاجة، طبعاً ممكن نعمل تعديلات اللي إحنا عايزينه في Stitch، بس مش هعمل أي حاجة إضافية. هتجه مباشرةً عشان نولد الموقع ده تاني بالذكاء الاصطناعي.

Antigravity: محرر الأكواد بالذكاء الاصطناعي

عشان كده، هروح لـ Antigravity. إيه هو Antigravity ده؟ هو بالظبط زي Visual Studio Code لو اشتغلتوا عليه، بس بيستخدم الذكاء الاصطناعي. فيه منكم بيستخدم Cursor أو برامج تانية، أنا بستخدم Antigravity لأنه أكتر مجانية ومن جوجل في النهاية. لو عايزين تعرفوا معلومات أكتر عنه، فيه فيديو في صندوق الوصف بيشرحه بالتفصيل.

ربط Antigravity بـ Stitch

هروح للثلاث نقط دول، وبعدين لـ “MCP Servers”، وهبحث عن Stitch عشان ينزله. هقوله “Install”، وهيطلب مني هنا “Stitch API Key”. هفتح الموقع وهروح مباشرةً لـ “Create API” هنا، وهنسخ الـ API. لاحظوا إنه مش ظاهر دلوقتي، لما أقف عليه هيطلعلي “Copy API”. هنرجع لـ Antigravity، أحط الـ API وأقوله “Save”. ولاحظوا إنه لوحده بيربط بـ Stitch بتاعي.

الخطوة اللي بعدها: أول حاجة خلينا نتأكد إنه شايف كل المواقع في Stitch أو كل التصاميم. عشان كده هقوله “List all projects in Stitch projects”. لاحظوا هنا راح وعمل “List projects” وخد الـ Prompt ده من عنده من هنا، وعندي مشروع واحد وده الـ ID بتاعه. تمام، هو ده اللي أنا عايزه. يبقى هو قادر يدخل على Stitch بتاعي.

توليد الـ Prompt لـ Antigravity عشان يكتب الكود

عشان كده، ممكن أقوله هنا إنه ينفذلي المشروع ده. بس لاحظوا إني لغاية دلوقتي ما عملتش الـ Folder بتاعي. عشان كده هقوله “Open Folder” وهعمل Folder وهسميه “Stitch Antigravity” (الاسم ده براحتكم). هقوله “Open”، ودلوقتي بقى عندي الـ Folder موجود، وموصل بالمشاريع.

هنا ممكن أكتب الـ Prompt بشكل عادي، أو ممكن أسأل ChatGPT تاني. عشان كده رجعت لـ ChatGPT وقولتله: “تم توليد المشروع في Stitch، وهو عبارة عن 5 صفحات.” طبعاً أنا بفترض إن ChatGPT ما عندوش معرفة إيه هو Stitch، ما يعرفش إيه اللي عملناه جوه Stitch، عشان كده بشرحله الموقع.

يلا بينا نشوف الـ Prompt اللي هيطلعهولي.

قام بتوليد “Prompt for Antigravity”. لاحظوا هنا بيقولي “استخدم React Native”. طبعاً React Native ده لتطبيق الموبايل، وإحنا مش بنعمل موبايل أبلكيشن، بنعمل للويب. لو أنت بتعمل موبايل أبلكيشن ده موضوع تاني، بس حالياً مش هقدر أوريهولك في الـ Tutorial. عشان كده قولتله: “الموقع تم توليده على شكل تطبيق موبايل، لكن سيتم عرضه على الديسك توب. هنا استخدام React Native خطأ.” هقوله يعدل الـ Prompt.

قام بإعادة كتابة الـ Prompt. والله Prompt طويل جداً، أنا قراءته تعبتني! فما بالكم إني أكتبه من البداية أو أبرمج الموقع بالكامل. لاحظوا الـ Prompt ده كله بيديني تفاصيل كاملة، حتى الـ IDs والموبايل بوك. وعملتله إضافة صغيرة: “ChatGPT, you are connected to Stitch. Use project ID: [هنا حطيت الـ Project ID بتاعي] والباقي زي ما هو تقريباً.” لاحظوا هنا خاف مني ChatGPT: “Do not use React Native.” لا أنا مش للدرجة دي! بس بينبه Antigravity إنه ما يستخدمش React Native. هيستخدم الـ Vite (React + TypeScript عن طريق الـ Vite ممتاز جداً). الراوتر v6، هيستخدم Tailwind والـ RTL عشان يكون باللغة العربية (Arabic First UI). يا سلام! بعدين الـ Brand Color إداله اللون الأزرق، وخلفية بيضاء. الباقي مش مهم. بيقوله استخدم Google Books API ولازم يكون صارم على اللغة العربية، يولد 20 كتاب عشان ما يكونش فيه ضغط على الـ API. وكمان بيقوله خزن الـ API جوه الـ Environment. لما تكونوا بتعرفوا برمجة، الكلام ده كله واضح بالنسبة لكم، أما اللي ما يعرفش أي حاجة في البرمجة، فهذه طلاسم، ومع ذلك مش مشكلة حالياً.

مش هطول عليكم أكتر، خليني ننفذ وهنشوف إيه اللي هيطلعهولي Antigravity.

تنفيذ الكود والخطوات الأولى

خلص حالياً. هنشوف أول حاجة عندنا هنا الـ “Walkthrough” اللي هو الحاجات اللي هيعملها. طبعاً حط لنفسه، أنا بس عايز أوريكوا الـ “Scaffold” اللي عمله. يعني أنا لو عايز أعمل حاجة زي دي، ما اعرفش يمكن أسابيع أو شهور. شوفوا كتب الـ API، وحطلي الأساسيات، الـ Hooks، كل حاجة بالتفصيل! أنتم متخيلين إنه كتب الـ Hooks؟ أنا فيه Tutorials مسجلها 3 ساعات بس بعلمكم إيه هي الـ Hooks، وهو كتب وعمل كل حاجة!

طيب، خلينا نشوف النتيجة. بيقولي أعمل إيه هنا؟ “npm install” و “npm run dev”. عشان كده هدوس Ctrl + J على الكيبورد عشان يفتح لي الـ Terminal، وهقوله “npm install” عشان ينزل لي كل الـ Packages اللي موجودين في Node.js، اللي موجودين طبعاً في الـ Package.json.

إعداد مفتاح Google Books API

بس قبل ما نبدأ، عايزكم تنتبهوا لحاجة، إنه هنا بيقولي “Vite Google Books API Key”. يعني لو رحت هنا للـ .env، هنا أنا عايز أحط الـ API Key بتاع جوجل بوكس. عشان كده هروح لجوجل وهبحث عن “Google Console”. طبعاً ممكن تبحثوا مباشرةً عن “Google Books”، بس لازم تبحثوا عن نتيجة الـ Console هنا، لأن كل دول معلومات مش النتيجة الأولى. “Cloud Console”، هروح للـ console.cloud.google.com. هنا ابحثوا عن “Books” عشان ياخدني للـ Books API، وهقوله من هنا “Enable”.

لاحظوا هنا، أنا لسه في المشروع الأخير اللي عملناه زمان. ممكن تغيروا المشروع أو تعملوا مشروع جديد، الموضوع ده مش مهم حالياً. أنا غيرت لـ “نور حمصي” عشان أستخدمه بعدين. بعدين هنروح للـ “Credentials” هنا. مش عارف إذا كانت باينة معاكم، هكبرها. هنروح للـ “Credentials” هنا في المكان ده، وهقوله “إضافة Key”. فينها؟ “Create Credentials”، عايز API Key. هسميه هنا “Google Books” أو “Arabic Books”، ومش عايز عليه أي قيود “Restrictions”، هخليه “Public”. طبعاً لو مشروع حقيقي، أكيد لازم تعملوا عليه قيود، سواء على API أو على Strict معينة. هقوله “Close” وده الـ API بتاعي. هنسخ الـ Key وهنعمل الـ Key في المكان ده، ونرجع مباشرةً لـ Antigravity ونعمل “لصق”. ودلوقتي بقينا جاهزين.

تشغيل التطبيق وتصحيح الأخطاء

إحنا عملنا “npm install”، ودلوقتي عايز أقوله “npm run dev” عشان يفتح لي الموقع. هيفتحه على الـ Port 5173. Ctrl + Click عشان يفتح لي المشروع. ومفيش أي حاجة طبعاً. سهل جداً. هنروح ندوس F12 ونروح للـ Console عشان نشوف إيه الخطأ. الخطأ ده نفسه هعمله Copy، وهقوله “Copy to Console”. بعدين هرجع لـ Antigravity. غالباً ده خطأ TypeScript، لأنه هنا لاحظوا الـ Types. هقوله “Enter” عشان يصلح لي الخطأ. طبعاً راح وعدل الـ Types في كل الملفات. هقوله “Accept Changes”. نرجع لصفحتنا، نعمل تحديث، وكمان ظهر عندي أخطاء. طبعاً أخطاء ليها علاقة بالـ API، أعتقد هنا الـ CORS Options، لأنه لاحظوا بيطلب مني Google API أو بسبب (برجع أقولكم) الـ CORS، إنه بيطلب هنا من الـ Localhost اللي هو عملياً مش HTTPS. أنا بطلب من Google API، بس بنفس الطريقة هقوله “Copy to Console” ونرجع لـ Antigravity وخليه هو يحل لي كل المشاكل.

مرة تانية، “Accept All”. نرجع هنا، نعمل تحديث، والمفروض دلوقتي يا سلام! جاب لي الكتب اللي أنا عايزها.

الموقع المحلي الجاهز: جولة أخيرة

خلينا نشوف النتيجة النهائية. لاحظوا هنا، عندي الترويسة، عندي “الأكثر قراءة” وبيجيبلي إياهم من الـ API. “أحدث الإصدارات”، “إصدارات اليوم”. بيديني صفحة للتصفح. لاحظوا فيه شوية مشاكل في التصميم، بس كلها ممكن تتحل. البحث، ممكن أبحث. ولاحظوا هنا بيديني نتائج. لو بحثنا عن “عالم” مثلاً، أو خليني أعمل كده “عالم”، فالمفروض يجيب لي البحث. يا سلام! “علماء”، “عالم جديد”، “الإمام العالم”، بيجيب لي إياهم طبعاً من الـ API كلهم.

لنجرب ندخل على أي واحد منهم. يا سلام! جاب لي المعلومات، التقييم العربي، السعر بتاعه، نظرة عامة، التفاصيل، المراجعات (الـ Reviews لو موجودين). “قراءة الآن”، لو فتحت القراءة، أخدني لصفحة القراءة. ولو “شراء الكتاب”، أخدني لصفحة الشراء. ممتاز! طبعاً ده كله المفروض ياخدني على الموبايل. لو أنا بفتح على الموبايل، ممكن أحط هنا طبعاً في الـ “Favorite”. إيه يعني؟ يعني لو رجعت هنا، رحت على “مكتبتي”، هلاقي عندي كتابين موجودين. “قائمة القراءة” تم تحميلها. لو رحنا على “قواعد العشق”، أخدني على “ثلاثية غرناطة”. فيه مشكلة هنا عندي. “حياة الفكر” دي أخدني عليها بشكل صحيح. لاحظتوا؟ طبعاً زي كده، يعني هنا دلوقتي إحنا عندنا بياخدني لمكان تاني، ده معناه إن فيه مشكلة في الـ (ليس الـ API) في الـ Hook بتاع الـ Books. يعني أنا كمبرمج أعرف إن فيه حاجة معينة بتحصل، بس كل ده ممكن يتحل قصاد اللي بتشوفوه في النهاية.

لو رحنا هنا “الأكثر قراءة” وعملنا “عرض الكل”، تمام. بيديني، ولاحظوا هنا بيحتفظلي بآخر عمليات البحث. طبعاً لو عملنا تحديث للصفحة، بيحتفظلي بالعمليات. ليه؟ لأن كل العمليات دي موجودة جوه الـ Application. فينها؟ دي جوه الـ Application Local Storage. لو رحنا لهنا غالباً تماماً، موجودين في المكان ده. طبعاً ده معناه إن المعلومات المحفوظة هنا دائمة، طالما الجلسة دي (الـ Session) اللي أنا فيها، دول بيروحوا. طبعاً عشان نعمل حاجة، لازم نستخدم أي قواعد بيانات. أفضل قواعد بيانات ممكن نستخدمها في المكان ده هو الـ Supabase.

الـ Supabase مجانية إلى حد ما، يعني في أغلب استخدامنا هي مجانية، بس فيه حد معين. لاحظوا هنا، مجاني لحد 50 ألف Active User في الشهر. ما أتوقعش نوصل للمكان ده. من هنا بنبدأ في حاجة اسمها الشركات، يعني أنت هنا بدأت تنتفع فبتاخد. إحنا مالناش دعوة دلوقتي بالموضوع ده. بوريكم إننا بنعمل مشروع، إزاي عايزين نعمل المشروع؟ بنفس الطريقة، هناخد من هنا الـ API وناخد كل حاجة ونروح لـ Antigravity. مش هشرحهالكم بالتفصيل أكيد، لأنه مرة تانية، الفكرة الواضحة بقت إن كل حاجة بنعملها بـ Antigravity بالذكاء الاصطناعي.

تحسين الواجهة: من الموبايل للديسك توب وتحديات الـ Vibe Coding

لو فكرت أحول الـ Application ده للديسك توب، يعني عشان يبقى موقع إنترنت، حولهولي لتطبيق. وهنشوف، هروح أشرب فنجان قهوة وارجع لكم، بما إننا عدينا ميعاد الفطار.

خلص! هنقوله “Accept All” ونرجع لهنا. نعمل تحديث. المفروض يغير، إن شاء الله ما أكونش بوظت الموقع. أي لا، ممتاز جداً. طبعاً محتاج شوية تعديلات في التصميم. أصلحناها. لاحظوا هنا “روايات خيالية”، “واقعية”. والله جميل التصنيف بالطريقة دي. بس عايز أقولكم حاجة هنا: دي واحدة من مشاكل الـ Vibe Coding. أنا رحت عشان أصلح الـ Style بشكل يدوي، بس أخد مني وقت وما كنتش أعرف فين المشكلة. دي مشكلة إني أنا ما أعرفش فين الكود. يعني دول مش ملفاتي، ده مش الكود بتاعي، أنا ما عنديش فكرة. عشان كده اللي عملته آخر حاجة إني وصلت إني أدي له صورة وقولتله: “التصفح ده بيظهر بشكل غريب، صلح الـ Style.” الحاجة دي أنا أبداً ما بفضلهاش. الحاجة دي سيئة جداً في عالم التصميم أو حتى في عالم البرمجة. لكن لو أنت بتعمل موقع زي كده عشان تتعلم أو تستفيد أو تنشئ موقع بسرعة، فأكيد مافيش أي مشكلة. لكن إنك تكون موقع فعلاً عايز تستخدمه، أكيد دي مش الطريقة المثالية عشان تشتغل بالـ Vibe Coding.

زي ما شفتوا حالياً الموقع بقى جاهز، بقينا بنشوف كل حاجة وكل التصنيفات. والله جميل الموقع، وحتى بقولكم كل الروابط والتفاصيل. قد إيه استغرق معانا؟ طبعاً أثناء التسجيل ومعالجة الأخطاء حوالي ساعة تقريباً. لكن لو فكرتك جاهزة وكل حاجة جاهزة، أتوقع إنك محتاج يعني عدة أيام بين أولاً إصلاح الأخطاء، ثانياً إنك تشغل الموقع. يعني الموقع مش بس برمجة وتصميم، فيه عدة أمور إحنا عايزين نعملها زي إننا نعمل إعلان ونعمل نشر للموقع.

نشر الموقع: Node.js على Hostinger بدون VPS

بما إن الموقع معمول بـ React، Node.js، Next أو أي برمجية تانية، حتى للـ Vue، فأغلبكم هيواجه مشكلة في الـ Deployment (إزاي يرفع الموقع على الإنترنت). طبعاً أنا مش بتكلم عن المشروع ده، بتكلم عن أي مشروع Node.js بتشتغلوه. عشان كده خليني أوريكم طريقة سهلة جداً، رخيصة جداً، مش محتاجة VPS، بحيث إن أي موقع Node.js يبقى موجود على الإنترنت. الطريقة دي موجودة حصراً على Hostinger، الـ Hosting اللي بتعامل معاه، وحصراً أيضاً على خطط الـ Business.

خطوات النشر على Hostinger (باستخدام Git)

هنروح على الـ Business Plan، هنقوله “Continue” وهنعمل حسابنا. بالنسبة لي، عندي حسابي، وهضيف موقع جديد. وهتلاحظوا عندي كل الخيارات دي. اتكلمنا في خيارات سابقة، لو بتحبوا تستعلموا عن أي حاجة، خبروني عشان أديكم روابط. إحنا عايزين الخيار الأخير “Node.js Web Application”.

1. اختيار الدومين: أول حاجة هيطلبها مني هي الدومين. لو أنت لسه مش مقرر الدومين اللي أنت عايزه، بتروح على الـ “Temporary” هنا (الدومين المؤقت) وبعدين بتقوم بالربط. أو لو أنت مختار الدومين بتاعك، فأنت بتحط دومين n7msy.net مثلاً أو الدومين اللي أنت اشتريته. انتبهوا إنك عندك دومين مجاني مع الخطة دي، يعني ما تشتريش دومين وأنت أصلاً عندك دومين مجاني. بما إن أنا عندي الدومين ده، فأنا هحط Subdomain زي ما بنعمل بالعاده. اخترت وقولتله عايز “arabooks” (يعني “arabooks.n7msy.net” للكتب العربية)، وهقوله “Next”.

2. رفع الملفات أو ربط Git: هتلاحظوا هنا بيديني خيارين: الخيار الأول إني أعمل “Upload للفايلات”، والتاني هو عن طريق الـ Git. لو عايز أعمل Upload للفايلات، هرجع هنا لـ Antigravity، هدوس Ctrl + C في الـ Terminal عشان يقفل لي الـ Terminal، هقوله “npm run build” عشان يعملي الـ Build أو النسخة النهائية. لاحظوا هنا فيه أخطاء لازم نصلحها. النسخة دي من الأخطاء، رحت بس للـ File اللي بيقولي عليه وحذفت هنا الـ “useState”. هرجع أعمل “run build” مرة تانية. وحالياً بيعمل لي الـ Files. فين الـ Files دي؟ لما نقفل، لاحظوا هنا عندي الـ “dist” (Destination) ده باخده زي ما هو، كل الـ Files دي، وبقوم بتحميلها. أنا شخصياً ما بفضلش الأسلوب ده. الأسلوب ده بس لو أنت عندك الموقع كلياً “Static” (ثابت)، يعني أنت مميزات الـ Next أو الـ React أو الـ Node.js اللي بتستخدمها مش مهمة. بفضل أنا أسلوب الـ Git. لكن لو عايز تستخدم الأسلوب ده، مرة تانية، بنروح الـ Files التلاتة دول اللي موجودين، بناخدهم، بنقوم بتحميلهم للإنترنت، وانتهى الموضوع. طبعاً فين عايزين نحملهم؟ عشان محدش يسألني، هنروح هنا للـ “Upload your files” نعمله “Continue”.

3. النشر عن طريق Git (الطريقة المفضلة): الخيار التاني اللي هنشتغل عليه هو الـ Git Repository. هروح هنا للـ Git (github.com)، هو ده اللي أنا عايزه. وهقوم بإنشاء Repository جديد هنا، هقوله “New”. ولاحظوا هنا عندي حسابي، بعدين هقوله هنا “arabooks” (الاسم اللي أنت عايزه، أنت حر فيه)، وهقوله “Create”. مش عايز “README”، كله تمام. هقوله “Create” وانتهى الموضوع. يعني بقى عندي هنا الـ Git. الـ Link اللي شايفينه هنا هقوم بنسخه. مش عايز الـ SSH، هاخد الـ Link ده. لو عملت Copy ورجعت لـ Antigravity، وراح أقوله هنا “Deploy” وهقوله هنا “Deploy this project to Git” بتاعنا (الـ Repository بتاعنا). دلوقتي غالباً هيطلب مني معلومات الدخول. لاحظوا هنا، أول حاجة أنشأها بالنسبة لي هو الـ .gitignore، بحيث إنه ما يحملش الـ node_modules ولا الـ dist ولا كل دول. ممتاز، كل ده ما لازمش يتحمل للـ Git لأنه مالوش داعي. وحالياً انتهى. هرجع للـ Chrome، هعمل هنا تحديث، والمفروض يا سلام! الملفات كلها بقت موجودة في المكان ده. على فكرة، لو عايزين الملفات، ممكن دلوقتي تروحوا على github.com/drhomsi/arabooks وتروحوا من هنا تعملوا سواء “Clone” (يعني أنت روح اعمل ده، انسخه كده وارجع لـ Antigravity وقوله “Clone URL”) فأنت ممكن توصلوا عندك، أو ممكن تعملوا لهم Download بشكل طبيعي.

4. ربط Hostinger بـ GitHub: أنا حالياً رحت لـ Hostinger مرة تانية، هقوله “Continue GitHub”. ولاحظوا هنا بيديني من مشاريعي السابقة اللي أنا عايزها. هعمله هنا تحديث. لاحظوا ما بيظهرش عندي. طيب إيه اللي أعمله؟ هرجع للـ GitHub. بروح هنا للـ Settings بتاعتنا، بعدين هنزل للـ Applications هنا في الـ Integrations. بعدين هلاقي هنا عندي Hostinger مربوط. طبعاً لو أنتم مش عاملين ربط ولا أي حاجة، فهو بس هيطلب منكم معلومات الدخول للـ GitHub ولوحده هيستورد. أنا بفترض هنا إنه يعني حصل ربط قبل كده، فنفس العملية في النهاية. هنروح هنا للـ “Configure” وهقوم بـ (لاحظوا هنا) بقدر أديه لـ Hostinger صلاحية بالدخول لكل الـ Repositories (وده ما بفضلوش طبعاً) أو ممكن أختار “Only” وهي الـ “arabooks” (فينها؟) ده الـ “arabooks”. وهقوله “Save”. هنرجع لهنا، نعمل تحديث. لو بقى عنده دخول، هقوله “Continue” عشان يتابع. والحاجة الحقيقية اللي بيعملها Hostinger دلوقتي إنه هو عمل “Clone”. زي ما قولت لكم أنا قبل شوية لما عملنا Clone في الـ GitHub، هو بيعمل Clone ويستورد الملفات. وحالياً عايز يعمل لهم “Build”. مش هغير أي حاجة أنا هنا، ما عدا إني ممكن أضيف الـ Environment هنا، الـ File الـ Import Environment ده اللي هو أصلاً موجود عندي، لأن زي ما اتفقنا الـ File ده ما بيتمش تحميله للـ GitHub. إذا فقط أضفته يا سلام! شوفوا أخد لي الـ Key والـ Value. هقوله “Finish” ومش عايز أغير أي حاجة. هقوله هنا “Deploy”. وممكن تروح تشرب فنجان القهوة بتاعك! يعني المبرمجين قبل 5 سنين (مش هقول 10 سنين)، 5 سنين لو شافوا الـ Deployment بتاع الـ Node.js بيحصل بالأسلوب ده، شيء مختلف جداً. الـ Deployment كان بالنسبة للمبرمجين لملفات الـ Node.js هو يعني زي كابوس دائم.

تصحيح نهائي للـ API وعرض الموقع المباشر

انتهى! “Go to Dashboard” عشان نشوف الموقع. أتمنى إنه يعمل وما يخذلنيش! عشان كده هدوس هنا، هقوله بالزر اليمين “افتح أيها الموقع”. يا سلام! بقى ممكن تدخلوا على الموقع في اللحظة الحالية arabooks.n7msy.net. هي التصفح وهي الروايات موجودة وهي “قواعد العشق” أخدني على “عزازيل”. فيه عندنا هنا خطأ في الـ API. “مكتبتي” لاحظوا هنا فاضية. ليه؟ لأنه أنا ما حطيتش فيها أي حاجة. بتروحوا على المكتبة التانية. أتوقع، أتوقع (لاحظوا هنا بما إنه بيكرر تقريباً نفس الكتب) أتوقع إنه فيه مشكلة في الـ API، في الـ API Key تحديداً. آه تماماً، فيه مشكلة في الـ API Key. عشان كده لاحظوا هنا Antigravity بذكاء ما خلانيش أدور لكم عليها بس لحظة. تماماً زي ما توقعت، Antigravity اللي عمله إنه راح هو عمل لوحده API خاص. يعني هي النتائج اللي بتشوفوها هنا اللي طلعت، هي مش من الـ API بتاع جوجل. طبعاً السبب مش بسبب Stitch ولا بسبب Antigravity ولا GitHub ولا Hostinger، ده تحديداً بسبب الـ API الخاص بجوجل، يبدو فيه عليه Restrictions. فلذلك برجع أقولكم Antigravity أخد “Fallback” له إنه لو الـ API بتاعك ما اشتغلش (يعني لو رحنا هنا للـ .env، لو ده ما اشتغلش أو كان فيه أي مشاكل) فلا تظهر معلومات فارغة، أظهر البيانات دي.

عرفت إيه الخطأ. لاحظوا هنا لما رحت للـ API، بيقولي إنه روح للـ Console بتاعك للرابط ده للمشروع وقم بتفعيل الـ API. إذا مجرد دخلت للرابط، نفس الشيء بالنسبة لكم، هتروحوا للـ Console وتخشوا على الـ Books API، فقط تعملوا له هنا “Enable”. ما اعرفش ليه معموله “Disable” أصلاً. ولاحظوا حالياً بعد ما قمت بتفعيله، بقى عندي كل المعلومات موجودة، وحتى الـ API هنا لو عملنا تحديث حالياً، هيصير عندي مليون موقع.

الخلاصة: ابدأ مشروعك الآن!

زي ما شفتوا حالياً الموقع بقى شغال، بقى أونلاين، ممكن تدخلوا وتشوفوه وتتصفحوه. وبتمنى إني أشوف منكم كمان نتائج، تعملوا مواقع جميلة جداً. شاركوني فيها في التعليقات، خلينا نتبادل الأفكار. بالنسبة لي، أقرب فكرة لبالي دايماً هي بتكون مكتبة. يمكن ده حلمي إني أعمل أنا موقع لمكتبة ويكون من إدارتي، سواء كتب مقروءة أو كتب مسموعة. بس بتمنى كمان أسمع منكم أفكار، إيه عندكم أفكار لمواقع؟ أفكار لتطبيقات؟ بحيث إننا نتشارك فيها وننشرها في النهاية. لو عجبكم الفيديو، ما تنسوش مشاركة الفيديو والاشتراك في القناة. ده كل شيء لليوم، باي باي.

انضم لذكاء صباعي: www.zka2soba3y.com ونادي الجينيس: www.gbc4.com. واتساب: 01157611470

About The Author

Genius

See author's posts