انشاء تطبيق WEB باستخدام Flutter و Firebase

اطار عمل Flutter يدعم العديد من الانظمة ومنها ايضا دعم تطبيقات الويب, في هذا الدرس سنقوم بتجهيز مشروع جديد او اذا لديك مشروع قائم لتشغيله على المتصفح. يجب عليك التحويل لاصدار beta لأن الويب مازال في قيد التطوير.

تثبيت نسخة Beta :

اذا اردت العمل على دعم نسخة الويب لمشروع جديد او مشروع قائم تحتاج الى تحويل sdk الى نسخة beta عن طريق تفعيل هذا الامر في terminal وتحميله وتثبيته.

 flutter channel beta
 flutter upgrade
 flutter config --enable-web

اخر سطر في الامر السابق هو لتفعيل الويب واذا اردت التأكد اذا تم التثبيت ةالتفعيل بنجاح قم بتشغيل امر.

flutter devices

عند تشغيل هذا الامر سيقوم بطابعة chrome وسيفتح متصفح كروم عند تشغيل التطبيق.

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.129

قم باعادة تشغيل محرر الاكواد حتى تظهر لديك خيارات التشغيل الجديدة٫

انشاء تطبيق جديد:

يمكنك انشاء تطبيق جديد باستخدام IDE او باستخدام موجه الاوامر terminal او cmd وجميع الطريقيتن تقدم نفس الخدمة. بعد انشاء التطبيق الجديد قم بتفعيل الامر التالي لشتغيل التطبيق في chrome :

flutter run -d chrome

او من قائمد التشغيل في IntelliJ Idea قم بتحديد الجهاز من القائمة المنسدلة للتشغيل وهو chrome.

تفعيل الويب لمشروع سابق:

اذا اردت تفعيل الويب لمشروع قائم كل ماعليك فعله هو القيام بتفعيل هذا الامر في المسار الرئيسي للمشروع.

flutter create .

بناء التطبيق:

اذا اردت انشاء نسخة اطلاق للمشروع فسنقوم بتفعيل هذا الامر في المسار الرئيسي للمشروع

flutter build web

نسخة الاطلاق تستخدم dartjs بدلا عن استخدام dartdevc لتقدم لك ملف javascript واحد باسم main.dart.js. ستجد جميع ملفات الويب والملفات المساعدة جميعها في مسار /build/web. وسيكون المحتوى مثل التالي:

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

اذا اردت الاطلاع على نسخة الاطلاق لمشروع الويب استخدم مثلا python -m http.server 8000 على نفسر المار الخاص بنسخة الاطلاق /build/web وافتح المتصفح واكتب هذا الرابط localhost:8000 سيظهر لك الشكل النهائي لمشروعك. اذا اردت تحديث المشروع تحتاج الى بناء التطبيق مرة اخرى لانك لست في وضع التطوير الان٫.

نشر التطبيق :

سنقوم باستخدام Firebase hosting لنشر تطبيق الويب لدينا وللقيام بذلك تحتاج الى تثبيت Firebase CLI

curl -sL https://firebase.tools | bash

الان سنقوم بتشغيل التطبيق في البيئة المحلية للتحقق من ان جميع الامور تمام

firebase serve --only hosting

اذا اصبحت متاكد من ان جميع الهام في تطبيق تعمل بشكل سليم الان تستطيع ارسال التطبيق الى النشر مباشرة باستخدام امر.

firebase deploy

انشاء تطبيق متجاوب لجميع الشاشات Flutter

الان اصبح لديك مشروع يعمل على الويب وايضا على الاجهزة تستطيع التعديل واعادة النشر في اي وقت ويوجد الكثير من الخدمات غير فيربيس تقدم Hosting لصفحات الويب الثابتة٫.