كيفية إنشاء تطبيق قائمة أسعار Cryptocurrency باستخدام Flutter SDK

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

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

قبل أن نبدأ ، قم بتثبيت البرنامج المساعد Flutter والمكون الإضافي Editor Flutter إذا لم تكن قد قمت بذلك بالفعل. يجب أن يكون التثبيت واضحًا ومباشرًا ، ولكن إذا واجهت مشكلات ، يمكنك ترك تعليق على هذا المنشور وسيسعدني تقديم المساعدة.

بالنسبة لهذا البرنامج التعليمي ، سأستخدم Android Studio ، لكن يمكنك أيضًا استخدام IntelliJ أو Visual Studio Code.

أيضا ، بعض الخبرة البرمجة وجوه المنحى (OOP) هو مطلوب. الاسترخاء! لا تحتاج إلى سنوات من الخبرة - إذا كنت تعرف الفئات والفصول الدراسية ، فيجب أن تكون على ما يرام.

هيا بنا نبدأ

في Android Studio أو IntelliJ ، انقر فوق قائمة "ملف" -> جديد -> مشروع رفرفة جديد. إذا لم تر خيار New Flutter Project ، فتأكد من تثبيت المكون الإضافي Flutter. إذا كنت تستخدم Visual Studio Code ، فاتبع الخطوات الموجودة هنا لإنشاء مشروع جديد.

عند فتح الصفحة ، حدد تطبيق Flutter وانقر فوق الزر "التالي".

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

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

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

عندما يتم ذلك ، يجب أن يبدو مشروعك هكذا.

تم إنشاء ملف يسمى main.dart في مجلد lib. أنه يحتوي على رمز لتطبيق تجريبي. نظرًا لأننا سنبني تطبيقنا من نقطة الصفر ، افتح الملف main.dart وحذف / امسح كل الشفرة فيه.

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

تتم كتابة تطبيقات الرفرفة في لغة البرمجة دارت. الملف main.dart هو ملف مصدر Dart (ملحق .dart). Dart اصطلاح هو تسمية الملفات المصدر باستخدام lowercase_with_underscores.

دعنا نبدأ كتابة بعض رمز دارت. سنبدأ بتقليد البرمجة: طباعة "Hello World!"

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

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

كما ترون ، فإن إنشاء الوظيفة الرئيسية أمر سهل. يحتوي السطر الثاني على إعلان الوظيفة الرئيسية: نوع الإرجاع (الفراغ) والاسم (الرئيسي). ترجع الوظيفة الرئيسية باطلة بمعنى أنها لا تُرجع أي شيء.

السطر الثالث يفعل الطباعة إلى وحدة التحكم. نحن ندعو وظيفة الطباعة ونمر حجة سلسلة لذلك. لاحظ أنه في Dart ، يمكنك استخدام علامات الاقتباس المفردة ("السلسلة") أو علامات الاقتباس المزدوجة ("السلسلة") عند الإعلان عن سلسلة حرفية.

لتشغيل الشفرة ، انقر فوق زر التشغيل الأخضر (تشغيل) أعلى Android Studio أو IntelliJ. تأكد من أن لديك جهاز فعلي متصل أو أن لديك محاكي يعمل.

بعد بدء تشغيل التطبيق بنجاح ، سترى "Hello World!" مطبوعة على وحدة التحكم.

ولكن إذا قمت بفحص جهازك أو المحاكي ، فسترى شيئًا محبطًا.

شاشة فارغة

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

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

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

تحتوي الحزمة material.dart على وظيفة تسمى runApp. يأخذ runApp عنصر واجهة مستخدم ويربطه بالشاشة. حسنا ، ما هي القطعة؟

الحاجيات

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

يأتي Flutter بالفعل مع مجموعة من الحاجيات القوية مثل النصوص والصور. تحتوي الحزمة material.dart التي استوردناها للتو على العديد من عناصر واجهة تعامل تصميم المواد التي سنستخدمها قريبًا.

دعونا نستخدم طريقة runApp الآن لإظهار "Hello World!" في منتصف شاشة الجهاز. استبدل محتوى الوظيفة الرئيسية بالرمز أدناه.

اسمحوا لي أن أشرح بعض الأشياء الجديدة في الكود أعلاه

  1. جديد: لإنشاء كائن ، عادة ما تستخدم الكلمة الأساسية الجديدة مع مُنشئ لفئة. (OOP)
  2. MaterialApp () الجديدة: هنا نقوم بإنشاء كائن عنصر واجهة مستخدم جديد يسمى MaterialApp. تقوم الأداة MaterialApp بإنشاء عدد من الأشياء المفيدة التي يحتاجها تطبيق تصميم المواد.
  3. home :: في Dart ، يمكننا تحديد اسم كل معلمة بوضوح في استدعاء الوظيفة / المنشئ. يتم عرض عنصر واجهة المستخدم الذي تم تمريره حيث يتم عرض المعلمة الرئيسية أولاً عند بدء تشغيل التطبيق بشكل طبيعي.
  4. new center (التابع: نص جديد ('Hello World!')): نحن نلتف عنصر واجهة تعامل النص داخل عنصر واجهة تعامل المركز بحيث يتم توسيط النص على الشاشة. عنصر واجهة تعامل النص هو عنصر واجهة تعامل عنصر واجهة تعامل المركز. نعم ، يمكن أن تكون متداخلة الحاجيات.

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

رائع! كنا قادرين على عرض نص قبيح يتركز على شاشة الجهاز.

الخطوات التالية

دعنا نأخذ خطوات قليلة للأمام الآن. سنحصل على أسعار التشفير من واجهة برمجة تطبيقات CoinMarketCap. ترجع API صفيف JSON. فيما يلي نموذج استجابة من واجهة برمجة التطبيقات:

سنقدم طلبًا إلى CoinMarketCap API وفك تشفير JSON من التطبيق. سيتعين علينا تضمين حزمتين جديدتين إلى ملف main.dart.

إليك نظرة عامة على الحزم الجديدة:

  1. dart: async: توفر فئة Future ، والتي سأتحدث عنها أكثر أدناه.
  2. dart: convert: يوفر متغير json الذي سنستخدمه لفك تشفير استجابة سلسلة JSON.
  3. الحزمة: http / http.dart: توفر الوظيفة التي سنستخدمها لتقديم طلبات HTTP GET.

دعنا نضيف وظيفة جديدة إلى ملف main.dart الذي يقدم طلبًا إلى واجهة برمجة تطبيقات CoinMarketCap.

دعنا نسير عبر الكود الجديد

→ المستقبل <قائمة>: نقول بشكل أساسي أن دالة getCurrency () ستعود إلى قائمة في وقت ما في المستقبل. ستقدم طلب HTTP إلى واجهة برمجة تطبيقات CoinMarketCap وإرجاع قائمة بالعملات عند الانتهاء.

دالة getCurrency () غير متزامنة. إذا كان لديك بعض تجربة جافا سكريبت ، فيمكنك التفكير في العقود المستقبلية على أنها وعود. لقد أنشأت الصور أدناه لمساعدتك في فهم العقود المستقبلية في دارت.

يقوم بوب باستدعاء الدالة غير المتزامنة askKateForBalloons () والتي تُرجع المستقبل <كرات>يمكن أن يحتفظ بوب بالمستقبليستطيع بوب معرفة متى يكتمل المستقبل

→ المتزامن وانتظر:

في انتظار التعبيرات تتيح لك كتابة التعليمات البرمجية غير المتزامنة كما لو كانت متزامنة. وظيفة http.get (url) غير متزامنة ، حيث تُرجع المستقبل <الاستجابة> فورًا عند استدعائها. نريد انتظار الرد حتى نتمكن من فك شفرة سلسلة JSON ، لكننا لا نريد أيضًا استخدام عمليات الاستدعاء القبيحة.

يقوم تعبير انتظار الانتظار بتقييم http.get (url) ، ثم تعليق الوظيفة قيد التشغيل حاليًا (getCurrency ()) حتى تصبح النتيجة جاهزة - أي ، حتى يكتمل المستقبل.

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

يمكنك قراءة المزيد حول المزامنة والانتظار في Dart هنا.

→ http.get (url): يجعل طلب HTTP GET على واجهة برمجة تطبيقات CoinMarketCap. هذه الوظيفة غير متزامنة وتُرجع المستقبل فورًا.

  1. JSON.decode (response.body): فك تشفير استجابة سلسلة JSON.

دعونا نختبر وظيفة getCurrency () التي أنشأناها للتو. نقوم بذلك عن طريق إجراء مكالمة إليه في وظيفتنا الرئيسية وطباعة القيمة التي تم إرجاعها إلى وحدة التحكم.

إذا قمت بتشغيل الكود أعلاه ، سترى استجابة API مطبوعة على وحدة التحكم.

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

في تطبيق الإنتاج ، سيتعين عليك التعامل مع فشل الشبكة. يمكنك القيام بذلك عن طريق وضع مكالمة HTTP في محاولة ... catch block.

بناء واجهة المستخدم

الآن بعد أن لدينا قائمة بالعملات ، دعنا نمضي قدمًا في إنشاء واجهة المستخدم لإظهار تلك القائمة.

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

لنقم بإنشاء عنصر واجهة مستخدم جديد يسمى CryptoListWidget. أضف الكود أدناه إلى أسفل ملف main.dart.

دعنا نتصفح الكود الجديد أعلاه:

  1. StatelessWidget: ستقوم عادةً بإنشاء تطبيقات مصغّرة هي فئات فرعية إما من StatelessWidget أو StatefulWidget ، اعتمادًا على ما إذا كانت عنصر واجهة المستخدم الخاصة بك تدير أي ولاية. نحن نستخدم StatelessWidget لأن لدينا بياناتنا بالفعل ولن نقوم بتحديثها في هذا البرنامج التعليمي.
  2. القائمة النهائية _colors: يجب أن تكون المتغيرات في StatelessWidget نهائية (بمعنى أنها ثابتة أو لا تتغير). نحن هنا نعلن عن متغير نهائي يحتوي على قائمة MaterialColors. تسطير أسفل السطر (_) قبل اسم المتغير يجعله خاصًا (لا يمكن الوصول إليه من الفئات الأخرى).
  3. CryptoListWidget (this._currency): هذا هو مُنشئ عنصر واجهة المستخدم الخاصة بنا. يقوم بتعيين قائمة العملات التي نمررها في المُنشئ إلى متغير العملات.
  4. دالة الإنشاء: تقوم طريقة الإنشاء بإرجاع عنصر واجهة مستخدم (نص) منخفض المستوى يصف كيف سيبدو.

دعنا نستبدل عنصر واجهة المستخدم Text في دالة build أعلاه بعنصر واجهة مستخدم جديد يسمى Scaffold. تطبق الأداة Scaffold بنية التصميم المرئي لتصميم المواد الأساسية. استبدل وظيفة الإنشاء أعلاه بالوظيفة الموضحة أدناه.

توفر الفئة Scaffold واجهات برمجة التطبيقات (API) لعرض الأدراج وتعويم زر إجراء وشريط سفلي ومطعم للوجبات الخفيفة وما إلى ذلك. سنضيف زر حركة عائمة لاحقًا.

يجب أن تحصل على تحذير بأن _buildBody () لم يتم تعريفه للفئة CryptoListWidget. دعنا ننتقل إلى إنشاء وظيفة _buildBody () داخل فئة CryptoListWidget.

يجب أن يكون بناء الجملة هنا مألوفًا. نحن نستخدم اثنين من الحاجيات الجديدة:

  1. حاوية القطعة: حاوية القطعة هي مجرد حاوية :) (لالحاجيات الأخرى).
  2. عنصر واجهة العمود: تقوم أداة عنصر العمود بتخطيط قائمة عناصر واجهة المستخدم الفرعية في الاتجاه الرأسي. لديها معلمة تسمى الأطفال التي تأخذ قائمة من الحاجيات.

دعنا ننشئ الدالتين اللتين دعناهما في دالة _buildBody (). أول واحد هو _getAppTitleWidget ().

تقوم هذه الوظيفة بارجاع عنصر واجهة تعامل نص عادي بنمط يجعله غامق وابيض بحجم خط 24.0.

سيبدو النص هكذا عند تشغيل التطبيق.

لا يمكننا تشغيل التطبيق بعد لأننا لم ننشئ الوظيفة الأخرى المسماة _getListViewWidget (). دعنا ننشئها بسرعة باستخدام الكود أدناه.

إرجاع _getListViewWidget () عنصر واجهة مستخدم ListView الذي يتم التفاف في عنصر واجهة مستخدم مرنة. نستخدم ListView.builder لإنشاء القائمة بسهولة. نحن نمر في itemCount الذي يخبر الباني عدد العملات لإظهار.

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

قبل أن ننشئ وظيفة _getListItemWidget () ، دعونا ننشئ العناصر الفردية لعنصر واجهة مستخدم ListView بسرعة. نريد أن يبدو كل عنصر في ListView كما يلي:

لذلك ، لدينا ثلاثة الحاجيات الرئيسية:

  1. عنصر واجهة مستدير مع الحرف الأول لاسم العملة
  2. والقطعة النص مع اسم العملة
  3. والقطعة النص مع تغير السعر والنسبة المئوية في 1 ساعة.

لنقم بإنشاء التطبيقات المصغّرة. من أجل البساطة ، قمت بإنشاء وظيفة لكل منهم. ترجع الدالة الأولى المسماة _getLeadingWidget () الرمز الدائري مع النص.

ستبدو الأداة كما يلي:

ترجع الدالة الثانية المسماة _getTitleWidget عنصر واجهة تعامل النص لاسم العملة.

تقوم الدالة الثالثة المسماة _getSubtitleWidget () بإرجاع عنصر واجهة تعامل النص لسعر العملة الحالي وتغير النسبة المئوية في ساعة واحدة.

كلتا الحالتين يجب أن تبدو كما يلي:

دعنا نلتف الحاجيات الثلاثة في شيء يسمى عنصر واجهة مستخدم ListTile. يستند عنصر واجهة مستخدم ListTile إلى وثائق قائمة تصميم المواد. هذا يظهر جميع الحاجيات الثلاثة في هذا النمط

سننشئ وظيفة جديدة تسمى _getListTile تقوم بإرجاع عنصر واجهة مستخدم ListTile.

أخيرًا ، دعنا ننشئ _getListItemWidget (). ستقوم بإرجاع عنصر واجهة مستخدم حاوية يحتوي على حشوة أعلى 5.0 ولديه عنصر واجهة مستخدم Card Card. يحتوي عنصر واجهة البطاقة على ListTile يتم إرجاعه بواسطة _getListTile وهو طفل.

سوف القطعة تبدو مثل هذا.

لقد أكملنا CryptoListWidget لدينا بنجاح. ولكن يتعين علينا تحديث الوظيفة الرئيسية لإظهار الأداة المصممة حديثًا بدلاً من عنصر واجهة المستخدم Text.

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

رائع حقا أليس كذلك؟

سيكون التطبيق الذي تراه مختلفًا قليلاً عن لقطة الشاشة أعلاه:

  1. ليس لديه زر حركة عائمة في أسفل اليمين.
  2. لون نص النسبة المئوية للتغير في ساعة واحدة هو اللون الأسود.

قررت عدم تضمينها في البرنامج التعليمي. ولكن يمكنك التحقق من مستودع جيثب المشروع لترى كيف تمكنت من تحقيقه.

يمكن تنزيل التطبيق المكتمل من هنا.

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

إذا كنت قد استمتعت بهذه القصة ، فيرجى النقر فوق الزر "مشاركة" ومساعدة الآخرين في العثور عليها.