Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Google Flutter From Scratch: Using Firebase Services

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Animating Widgets

Arabic (العربية/عربي) translation by Muhamad Zulfiqor (you can also view the original English article)

باستخدام Google Firebase ، وهو أحد أقوى الأنظمة الأساسية للملقمات غير المتوفر حاليًا ، يمكنك بسهولة إضافة ميزات أساسية مثل إدارة المستخدمين ، وتقارير الأعطال ، والتحليلات ، وتخزين البيانات في الوقت الفعلي ، وحتى التعلم الآلي لتطبيقات الجوال. لتتمكن من العمل مع النظام الأساسي أثناء استخدام إطار Flutter ، ستحتاج إلى FlutterFire.

فلوتيرفيري مجموعة متنامية من الإضافات رفرفة الرسمية لقاعدة. في هذا البرنامج التعليمي، سوف تظهر لك كيفية استخدامه لإضافة ثلاث خدمات قاعدة مختلفة لتطبيق رفرفة.

المتطلبات الأساسية

لمتابعة هذا البرنامج التعليمي خطوة بخطوة، وسوف تحتاج إلى:

  • الروبوت Studio 3.1.3 أو أعلى
  • رفرفة SDK 0.9.4 أو أعلى
  • رفرفة البرنامج المساعد 29.0.1 أو أعلى
  • حساب قاعدة
  • جهاز تشغيل مستوى API الروبوت 23 أو أعلى

إذا لم يكن لديك برنامج Flutter SDK أو البرنامج المساعد Flutter ، فتعرف على كيفية تثبيتهما هنا:

1. إعداد مشروع رفرفة

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

Flutter application details

لا يمكنك استخدام خدمات Firebase في هذا المشروع حتى تقوم بالتسجيل مع النظام الأساسي لـ Firebase وربطه بمشروع Firebase. على الرغم من أنه يمكنك إجراء ذلك يدويًا باستخدام المتصفح ، يمكنك توفير الكثير من الوقت والجهد باستخدام مساعد Firebase في Android Studio بدلاً من ذلك ، والذي يعمل على تنفيذ معظم الخطوات تلقائيًا.

ابدأ بفتح مشروع الروبوت الأصلية مضمن داخل المشروع رفرفة الخاص بك عن طريق الذهاب إلى أدوات > رفرفة > مفتوحة للتحرير في "الاستوديو الروبوت". عند المطالبة، تأكد من فتح المشروع في نافذة جديدة.

في النافذة الجديدة، انتقل إلى أدوات > Firebase فتح مساعد Firebase.

Firebase Assistant window

ثم انتقل إلى تحليلات > تسجيل حدث تحليلات. في الشاشة التي يتم فتح التالية، اضغط على زر الاتصال.

الآن سترى مربع حوار يطالبك بتحديد اسم المشروع الخاص بك قاعدة جديدة. اكتب اسم تفضل واضغط الاتصال إلى الزر Firebase.

Connect to Firebase dialog

عند هذه النقطة، مساعد Firebase تلقائياً إكمال عملية التسجيل وإضافة ملف يسمى جوجل-services.json، الذي يحتوي على تفاصيل التكوين الهامة، إلى المشروع الخاص بك.

لتكون قادراً على قراءة ملف JSON، ستحتاج إلى البرنامج المساعد "خدمات جوجل". حتى فتح الملف build.gradle المستوى الجذر وإضافة classpath من البرنامج المساعد داخل المقطع التبعيات:

بعد ذلك، تنشيط البرنامج المساعد بإضافة السطر التالي في نهاية الملف build.gradle مستوى التطبيق:

يمكنك الآن إغلاق النافذة الجديدة والعودة إلى المشروع رفرفة.

2-إضافة التبعيات

يحتوي FlutterFire على ملحقات Flutter المستقلة لمعظم خدمات Firebase. لإضافة الملحقات كاعتمادات في مشروع الرفرفة ، كل ما عليك القيام به هو ذكرها تحت مفتاح التبعية لملف pubspec.yaml.

التعليمة البرمجية التالية يوضح لك كيفية إضافة تبعيات لأحدث الإصدارات من الإضافات المرتبطة بخدمات التحليلات وسحابة فيرستر طقم مل:

في هذا البرنامج التعليمي، سوف يكون إنشاء تطبيق التي يمكن تفحص رموز ريال قطري وحفظ البيانات التي تتضمنها في قاعدة الغيمة. كما كنت قد خمنت، عليك أن استخدام المساعد طقم مل كوحدة فك ترميز رمز ريال قطري والمساعد "فيرستر سحابة" كواجهة لقاعدة البيانات.

بالفعل التقاط رموز ريال قطري، ومع ذلك، ستحتاج "منتقي الصورة"، البرنامج المساعد الذي يسمح لك بالتفاعل مع الكاميرا. هنا كيف يمكنك إضافته كتبعية أخرى:

بعد إضافة التبعيات، المضي قدما واضغط على زر الحصول على حزم لتثبيت كافة الوظائف الإضافية.

3-استخدام التحليلات Firebase

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

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

StreamView of Firebase console

4-استخدام قاعدة مل كيت

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

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

إذا قمت بتشغيل التطبيق الآن، سوف تبدو مثل هذا:

App displaying a single button

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

بمجرد التقاط صورة، يمكنك تمرير إلى الفئة باركوديديتيكتور مل طقم للكشف عن رموز ريال قطري قد يحتوي على. للحصول على مثيل من الفئة، استخدم الأسلوب ()barcodeDetector للفئة فيريباسيفيسيون.

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

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

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

التعليمة البرمجية التالية يوضح لك كيفية إنشاء القطعة اليرتديالوج بسيطة بعد الحاجيات النص للعنوان والمحتويات، والقطعة فلاتبوتون التي يمكن الضغط لاستبعاده:

يمكنك تشغيل التطبيق الآن وحاول مسح بعض رموز ريال قطري.

Successfully scanning a QR code

5-استخدام فيرستر سحابة

سحابة فيرستر هو NoSQL قاعدة بيانات يمكن أن تستخدم لتخزين بيانات التطبيق الخاص بك في مجموعة النظراء. ويوفر البرنامج المساعد فلوتيرفيري الفئات التي تسمح لك بإجراء عمليات CRUD عليه بشكل غير متزامن.

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

Welcome screen of Cloud Firestore

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

Security rules configuration

وأخيراً، اضغط على زر تمكين لإنشاء قاعدة البيانات.

مرة أخرى في "استوديو الروبوت"، يمكنك الحصول على مرجع إلى قاعدة البيانات باستخدام الحقل مثيل الفئة فيرستر. وبناء على ذلك، أضف التعليمات البرمجية التالية إلى القطعة عديمي الجنسية:

أثناء استخدام "سحابة فيرستر"، يجب تخزين كافة البيانات الخاصة بك داخل المستندات. وعلاوة على ذلك، يجب أن ينتمي كل مستند إلى مجموعة. لإنشاء أو مرجع مجموعة، يجب استخدام أسلوب ()collection، التي تتوقع سلسلة تحديد اسم المجموعة.

بمجرد الوصول إلى مجموعة، يمكنك استدعاء أسلوب ()add لإضافة مستند إليها.

التعليمة البرمجية التالية، التي يمكنك إضافة الحق قبل استدعاء الدالة ()showDialog، يوضح لك كيفية إنشاء مستند جديد — واحد يحتوي على قيمة رمز ريال قطري الخام وطابع زمني — وإضافتها إلى مجموعة المسماة qr_codes:

إذا قمت بتشغيل التطبيق مرة أخرى ومسح رمز ريال قطري مع ذلك، سوف تكون قادرة على الاطلاع على محتويات رمز ريال قطري في وحدة قاعدة الآن.

Cloud Firestore contents

الاستنتاج

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

لمعرفة المزيد عن رفرفة وقاعدة، الرجوع إلى الوثائق الرسمية.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.