متطلبات
لمتابعة هذا البرنامج التعليمي، ستحتاج إلى حساب Google للوصول إلى Firebase. إذا كان هذا هو مقدمتك إلى Firebase، فلا تقلق لأننا سنتناول جميع الخطوات معًا.
تثبيت Firebase CLI
الخطوة الأولى لاستضافة تطبيق الويب Flutter الخاص بنا مجانًا هي تثبيت Firebase CLI. توفر Firebase CLI مجموعة متنوعة من الأدوات لإدارة وعرض ونشر مشاريع Firebase. صفحة تنزيل Firebase CLI https://firebase.google.com/docs/cli .
في صفحة التنزيل، سترى أن لديك خيار تحديد نظام التشغيل الخاص بك. في حالتي، أستخدم جهازًا يعمل بنظام Windows، لذا سأنتقل إلى ملف Firebase CLI الثنائي لنظام Windows.
بمجرد اختيار طريقة التثبيت، تأكد من إمكانية فتح Firebase CLI.
إذا اتبعت نفس النهج الموضح في لقطة الشاشة أعلاه، فيمكنك الانتقال إلى مجلد التنزيلات والنقر نقرًا مزدوجًا فوقه firebase-tools-instant-win.exe.
قد يحذرك Windows من أنه لا يثق في Firebase .exeلأنه لا يوجد ناشر معتمد. نظرًا لأننا قمنا بتنزيل Firebase .exeمن موقع Firebase الرسمي، فلا داعي للقلق.
بعد فتح Firebase CLI، ستلاحظ أن CLI لا يزال يحتاج إلى بعض الوقت لإعداد نفسه.
سيخبرك Firebase CLI عند الانتهاء.
بمجرد الانتهاء يمكننا الانتقال إلى المصادقة.
تسجيل الدخول إلى Firebase CLI
بعد الإعداد الأولي، ستستمر واجهة سطر الأوامر (CLI) تلقائيًا في محاولة مساعدتك في تسجيل الدخول إلى حساب Google الخاص بك.
أولاً، سيسألك عما إذا كنت تريد السماح لـ Firebase بجمع معلومات الاستخدام وتقارير الأخطاء الخاصة بـ CLI وEmulator. اتخذ قرارك واضغط على Enter.
بعد ذلك، سيبدأ CLI في التحقق مما إذا كنت مصادقًا أم لا.
بعد ذلك بفترة وجيزة، سيتم فتح المتصفح الخاص بك لإجراء عملية مصادقة Google. إذا لم يكن الأمر كذلك، فيمكنك فتح الرابط المعطى من CLI في المتصفح الخاص بك.
إذا تم إلغاء عملية المصادقة لأي سبب من الأسباب، فيمكنك إعادة بدئها مرة أخرى باستخدام firebase loginالأمر.
مع فتح المتصفح، دعنا نستمر في عملية مصادقة Google.
أولاً، يتعين علينا اختيار الحساب.
بعد ذلك، نحتاج إلى تأكيد رغبتنا في السماح لـ Google بمشاركة بعض بيانات حسابنا مع Firebase CLI.
بعد النقر فوق "متابعة" ، يطلب Firebase CLI الآن السماح بذلك.
إذا قمت بالنقر فوق "السماح"، فستظهر لك رسالة النجاح التالية في متصفحك.
بالإضافة إلى ذلك، إذا قمنا بالتحقق من Firebase CLI، فستجد أننا نجحنا في المصادقة.
بعد المصادقة، يمكننا الاستمرار في إنشاء مشروع Firebase.
إنشاء مشروع Firebase لاستضافة تطبيقات الويب Flutter
يمكننا إنشاء مشروع عبر Firebase CLI أو تطبيق الويب Firebase. لقد حاولت القيام بذلك باستخدام Firebase CLI، ولكن للأسف، تعطل لأنه لا يقبل شروط Firebase تلقائيًا. ومع ذلك، من السهل جدًا أيضًا إنشاء مشروع جديد باستخدام تطبيق الويب Firebase.
أولاً، علينا الانتقال إلى الصفحة الرئيسية لـ Firebase https://firebase.google.com/ . في الصفحة الرئيسية، يوجد زر "الانتقال إلى وحدة التحكم" والذي يتعين علينا النقر فوقه.
بمجرد دخولنا إلى وحدة التحكم، يمكننا النقر فوق زر إنشاء مشروع .
بعد ذلك، يمكننا ملء اسم المشروع وقبول شروط Firebase.
سيسألك Firebase الآن عما إذا كنت تريد ربط مشروعك الجديد بخدمة Google Analytics. اتخذ قرارك وانقر على " متابعة" .
عندما توافق على ربط مشروعك بخدمة Google Analytics، سيكون لديك بضعة خيارات يجب عليك اتخاذها لإكمال تكوين خدمة Google Analytics. بعد اتخاذ هذه الخيارات، يمكنك النقر فوق إنشاء مشروع .
بعد النقر فوق "إنشاء مشروع" ، سيستغرق Firebase بعض الوقت لإعداد كل شيء، وبمجرد الانتهاء، سترى الشاشة التالية.
وأخيرًا، بعد النقر فوق "متابعة" ، ستلاحظ أن مشروعك قد تم إنشاؤه.
الآن بعد أن تم إنشاء مشروع Firebase الخاص بنا، أصبحنا نقترب من استضافة تطبيق ويب Flutter.
ربط Firebase CLI مع Firebase
بعد إنشاء مشروع Firebase بنجاح، يمكننا المتابعة عن طريق ربط Firebase CLI بمشروع Firebase الخاص بنا.
داخل CLI الخاص بنا يمكننا تنفيذ الأمر التالي:
firebase experiments:enable webframeworks
سيسمح لنا هذا باستضافة تطبيقات الويب Flutter.
بعد ذلك، يتعين علينا الانتقال إلى مجلد مشروعنا:
أولاً، نقوم بتنفيذ الأمر التالي لرؤية الدليل الحالي:
cd
ثانيًا، نقوم بتنفيذ الأمر التالي للانتقال إلى المجلد الذي يوجد به مشروع Flutter الخاص بك. تأكد من عدم تحديد مجلد المشروع نفسه، سنفعل ذلك في خطوة لاحقة. لا تنس تعديل مسار المجلد بمسارك الخاص.
cd \Users\tijnv\Documents\OnlyFlutter\posts\04_21_2024_create_privacy_policyثانيًا، نقوم بتنفيذ الأمر التالي للانتقال إلى المجلد الذي يوجد به مشروع Flutter الخاص بك. تأكد من عدم تحديد مجلد المشروع نفسه، سنفعل ذلك في خطوة لاحقة. لا تنس تعديل مسار المجلد بمسارك الخاص.
cd \Users\tijnv\Documents\OnlyFlutter\posts\04_21_2024_create_privacy_policy
في لقطة الشاشة أدناه، يمكنك رؤية الناتج الذي تلقيناه من خلال تنفيذ كلا الأمرين.
بمجرد أن نكون داخل المسار الصحيح، يمكننا تنفيذ الأمر التالي:
firebase init hostingبمجرد أن نكون داخل المسار الصحيح، يمكننا تنفيذ الأمر التالي:
firebase init hosting
سيؤدي هذا الأمر إلى بدء عملية الاستضافة. ستأخذنا عملية الاستضافة عبر خطوتين تتطلبان منا اتخاذ خيارات. الخيار الأول الذي يتعين علينا اتخاذه هو تأكيد رغبتنا في الاستمرار.
بعد ذلك، يتعين علينا ربط دليل المشروع هذا بمشروع Firebase. نظرًا لأننا قمنا بالفعل بإنشاء مشروع Firebase، فيمكننا اختيار استخدام مشروع موجود .
بعد اتخاذ قرارنا، سيُطلب منك تحديد المشروع. بعد تحديد المشروع، تأكد من موافقتك على استخدام إطار عمل ويب. وأخيرًا، أدخل اسم المجلد الدقيق لمشروع Flutter الخاص بك للتأكد من تحديده كدليل الجذر.
إذا كان الدليل المحدد صحيحًا، فسوف يكتشف Firebase تلقائيًا أنه تطبيق Flutter. بعد ذلك، سيُطلب منك تحديد منطقة.
أخيرًا، سيطلب منك CLI إعداد عمليات البناء والنشر التلقائية باستخدام GitHub. بتحديد "لا" ، يتم إكمال إعداد الاستضافة.
نشر تطبيق Flutter Web الخاص بنا
بعد إتمام كل الخطوات المذكورة أعلاه، يمكننا أخيرًا استضافة تطبيق الويب Flutter، وذلك من خلال تنفيذ الأمر التالي:
firebase deployنشر تطبيق Flutter Web الخاص بنا
بعد إتمام كل الخطوات المذكورة أعلاه، يمكننا أخيرًا استضافة تطبيق الويب Flutter، وذلك من خلال تنفيذ الأمر التالي:
firebase deploy
بإمكانك متابعة عملية النشر في Firebase CLI وبمجرد الانتهاء منها ستعطينا عنوان URL للاستضافة.
إذا قمنا بلصق هذا الرابط في المتصفح فسوف ترى أن تطبيقك متصل بالإنترنت بنجاح!
بالإضافة إلى ذلك، إذا ذهبت إلى مشروعك في تطبيق الويب Firebase، فستشاهد عناوين URL المتاحة وسيكون لديك خيار إضافة نطاق مخصص.
إزالة تطبيق Flutter Web من الويب
بالطبع، يمكنك أيضًا تعطيل تطبيق الويب المستضاف Flutter باستخدام Firebase CLI.
firebase hosting:disableإزالة تطبيق Flutter Web من الويب
بالطبع، يمكنك أيضًا تعطيل تطبيق الويب المستضاف Flutter باستخدام Firebase CLI.
firebase hosting:disable
إذا قمت بتنفيذ الأمر أعلاه، فسوف يؤدي ذلك إلى تعطيل استضافة Firebase للموقع.
إذا كنت تريد إعادة تشغيله مرة أخرى، يمكنك دائمًا تنفيذه firebase deployمرة أخرى.
خاتمة
في هذه المقالة، تعلمت كيفية استضافة تطبيقات الويب Flutter باستخدام Firebase. في البداية، قد يبدو الأمر وكأنه عمل شاق، ولكن بمجرد التعرف على الخطوات، يمكن إنجازه في غضون 5 دقائق. ميزة أخرى لاستخدام Firebase هي أنه يدعم Flutter بشكل مباشر. ناهيك عن أنه يمكنك إضافة نطاقك الخاص مجانًا.
