كيفية إنشاء تطبيق في الوقت الفعلي مع تطبيق React Native

شكرا لبيلا بوردو

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

سأستخدم ReactiveSearch Native ، وهي مكتبة مفتوحة المصدر توفر مكونات React Native UI وتبسط بناء التطبيقات التي تعتمد على البيانات.

إليك ما سأبنيه في هذه القصة:

تودو التطبيق

تحقق من التطبيق على وجبة خفيفة أو في المعرض.

ما هو رد فعل الأم؟

إليك ما تقوله المستندات:

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

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

لماذا استخدام ReactiveSearch؟ ⚛

ReactiveSearch عبارة عن مكتبة مكونات React و React Native UI مفتوحة المصدر لـ Elasticsearch وقد شاركت في تأليفها مع بعض الأشخاص الرائعين. يوفر مجموعة متنوعة من المكونات React Native التي يمكن الاتصال بأي كتلة Elasticsearch.

لقد كتبت قصة أخرى حول بناء GitHub Repo Explorer مع React و Elasticsearch والتي يمكنك الاطلاع عليها للحصول على نظرة عامة مختصرة عن Elasticsearch. حتى لو لم تكن لديك أي خبرة في Elasticsearch ، فيجب أن تكون قادرًا على المتابعة مع هذه القصة بشكل جيد.

إعداد الأشياء ⚒

سنستخدم الإصدار React Native من المكتبة هنا.

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

عرض مجموعة بيانات تطبيقي هنا. يمكنك أيضًا استنساخ هذا التطبيق الخاص بك

للإيجاز ، يمكنك استخدام مجموعة البيانات الخاصة بي مباشرة أو إنشاء واحدة لنفسك باستخدام appbase.io والتي تتيح لك إنشاء فهرس Elasticsearch مستضاف (يُعرف أيضًا باسم التطبيق).

تتم هيكلة جميع todos بالتنسيق التالي:

{
  "العنوان": "رد الفعل الأصلي" ،
  "مكتمل": صحيح ،
  "تم إنشاؤه": 1518449005768
}

مشروع البداية

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

لقد قمت بإعداد مشروع بدء التشغيل باستخدام تطبيق إنشاء رد فعل محلي في أحد فروع GitHub هنا. يمكنك تنزيل الرمز البريدي أو استنساخ الفرع الأساسي عن طريق تشغيل الأمر التالي:

بوابة استنساخ ب قاعدة https://github.com/appbaseio-apps/todos-native
  • قم بعد ذلك بتثبيت التبعيات وابدأ الرابط:
مؤتمر نزع السلاح تودوس الأم && غزل && بدء الغزل
  • بعد بدء تشغيل الرابط ، يمكنك تشغيل التطبيق على هاتفك باستخدام تطبيق Expo أو باستخدام محاكي Android أو IOS:
الإعداد الأساسي مع جميع علامات التبويب. استنساخ من هنا.

الغوص في رمز

بمجرد استنساخ الكود من الفرع الأساسي ، سترى بنية الدليل كما يلي:

التنقل
├── RootComponent.js // مكون الجذر لتطبيقنا
├── MainTabNavigator.js // Tab navigation component
شاشات
├── TodosScreen.js // يجسد TodosContainer
المكونات
├── Header.js // مكون الرأس
├── AddTodo.js // أضف تودو الإدخال
├── AddTodoButton.js // Add todo button floating
├── TodoItem.js // عنصر ما يجب عمله
├── TodosContainer.js // حاوية تودوس الرئيسية
المعهد
├── todos.js // واجهات برمجة التطبيقات لأداء عمليات الكتابة
الثوابت // جميع أنواع الثوابت المستخدمة في التطبيق
أنواع // تودو نوع ليتم استخدامها مع أنواع الدعامة
utils // يتدفق منطق الجري هنا

لنفصل ما يأتي به الإعداد الأساسي:

1. الملاحة

  • جميع التكوينات اللازمة للاتصال بـ Elasticsearch موجودة في الثوابت / Config.js.
  • نحن نستخدم TabNavigator من التنقل التفاعلي لعرض شاشة todos الكل ، النشطة والمكتملة. يتم تقديم هذا بواسطة navigation / RootComponent.js. ستلاحظ أن RootComponent يلتف كل شيء داخل مكون ReactiveBase من ReactiveSearch. يوفر هذا المكون جميع البيانات اللازمة لمكونات البحث التفاعلي التابعة. يمكنك توصيل فهرس Elasticsearch الخاص بك هنا فقط عن طريق تحديث التكوينات في الثوابت / Config.js.

يوجد منطق التنقل في navigation / MainNavigator.js. دعنا نذهب كيف يعمل. إليك مستندات التنقل في علامة التبويب إذا كنت ترغب في الإشارة إلى أي شيء.

  • تقبل وظيفة TabNavigator الوسيطتين ، الأولى هي تكوينات المسار والثانية هي تكوينات TabNavigator. في المقتطف أعلاه ، نمرر التكوينات لإظهار شريط تنقل في الأسفل وتعيين أيقونات مختلفة لكل علامة تبويب.

2. TodosScreen و TodosContainer

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

3. واجهات برمجة التطبيقات لإنشاء وتحديث وحذف تودوس

واجهات برمجة التطبيقات (APIs) لعمليات CUD على Elasticsearch موجودة في api / todos.js. أنه يحتوي على ثلاث طرق بسيطة إضافة وتحديث وتدمير التي تعمل مع أي فهرس Elasticsearch على النحو المحدد في الثوابت / Config.js. هناك نقطة مهمة يجب مراعاتها وهي أن كل عنصر يجب إنشاؤه سيكون له حقل _id فريد. يمكننا استخدام هذا الحقل _id لتحديث أو حذف ما يجب عمله.

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

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

يتيح البدء في إضافة بعض المكونات لإكمال وظيفة التطبيق.

1. إضافة تودوس

سنستخدم Fab من قاعدة أصلية لتقديم زر عائم لإضافة تودوس.

يمكنك الآن استخدام هذا المكون في المكونات / TodosContainer.js.

استيراد AddTodoButton من './AddTodoButton' ؛
...
فئة التصدير الافتراضية TodosContainer تمتد React.Component {
  يجعل() {
    إرجاع (
      <عرض النمط = {styles.container}>
        ...
        
      
    )؛
  }
}

بمجرد إضافة الزر ، سنرى شيئًا مثل هذا:

بعد إضافة AddTodoButton

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

المكونات الرئيسية المستخدمة هنا هي TextInput و Checkbox و Ionicons مع الدعائم المباشرة. نحن نستخدم العنوان ونكمل من الولاية. سنقوم بتمرير الدعائم إلى الأمام و onAdd و onCancelDelete و onBlur من المكونات / TodosContainer.js. هذه ستساعدنا في إضافة todos جديدة أو إعادة تعيين العرض إذا كنت ترغب في إلغاء إضافة todos.

الآن يمكننا تحديث المكونات / TodosContainer.js بالتغييرات المطلوبة لتقديم مكون AddTodo:

يتم تقديم مكون AddTodo داخل مكون ScrollView. نقوم أيضًا بتمرير دعامة onPress إلى AddTodoButton لتبديل الحالة وعرض مكون AddTodo بشكل مشروط على أساس this.state.addingTodo. ينشئ onAdd prop الذي تم تمريره إلى AddTodo أيضًا مهمة جديدة باستخدام واجهة برمجة تطبيقات add في api / todos.js.

بعد النقر على زر الإضافة ، سنرى الإدخال لإضافة ما يجب فعله مثل هذا:

إضافة ما يجب عمله

2. عرض تودوس

بعد الانتهاء من إضافة ما يجب عمله ، تتم إضافته إلى Elasticsearch (الذي قمنا بتكوينه في الثوابت / Config.js). يمكن عرض كل هذه البيانات في الوقت الفعلي باستخدام مكونات ReactiveSearch Native.

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

يتيح إضافة مكون ReactiveList والحصول على عرض todos لدينا. سنضيف هذا المكون إلى المكونات / TodosContainer.js والأساليب اللازمة لكي يعمل. إليك كيفية استخدام قائمة ReactiveList:

لم نقم بإضافة طريقة onAllData حتى الآن ، ولكن دعونا نفهم قليلاً عن الدعائم التي استخدمناها هنا:

  • componentId - معرف فريد للمكون.
  • defaultQuery: الاستعلام الذي سيتم تطبيقه مبدئيًا للقائمة. سنستخدم match_all لإظهار جميع todos في الحالة الافتراضية.
  • دفق: ما إذا كان سيتم دفق تحديثات النتائج الجديدة أو عرض النتائج التاريخية فقط. من خلال ضبط هذا على "صحيح" ، نستمع الآن أيضًا إلى تحديثات "تودو" المباشرة. سنضيف المنطق المتعلق بالتدفق لاحقًا.
  • onAllData - وظيفة رد اتصال تستقبل قائمة العناصر التي يجب القيام بها الحالية والبث (تودوس جديدة وأي تحديثات) وإرجاع مكون React أو JSX لعرضه. إليك كيف يبدو بناء الجملة:

يمكنك قراءة المزيد حول كل هذه الدعائم بالتفصيل في صفحة مستندات ReactiveList.

لرؤية شيء ما ، سنحتاج إلى إرجاع مكون JSX أو React من رد اتصال onAllData. لهذا ، سوف نستخدم قائمة React Native's FlatList التي تتكون من مكونات Text. في الخطوة التالية ، سنضيف مكون TodoItem المخصص.

دمج ReactiveList مع onAllData

3. إضافة TodoItem (s)

بعد ذلك ، سننشئ مكونًا منفصلاً TodoItem لإظهار كل ما يجب عمله والذي سيحتوي على جميع الترميزات الضرورية لعنصر ما يجب عمله مثل CheckBox و Text وأيقونة الحذف. هذا ينطبق على المكونات / TodoItem.js:

يحصل هذا المكون على ما يجب عمله من الدعائم الخاصة به مع onDelete و onUpdate التي تستخدم لتحديث وحذف عنصر todo على التوالي. نحن نستخدمها في الأماكن الضرورية باستخدام دعامة onPress للمكونات التي نستخدمها.

بعد ذلك ، يمكننا استيراد واستخدام المكون TodoItem في onAllData لدينا في المكونات / TodosContainer.js. سنقوم بتمرير ما يجب عمله إلى جانب أساليب واجهة برمجة التطبيقات للتحديث والتدمير التي سيتم استخدامها بواسطة مكون TodoItem.

بعد إضافة TodoItem في TodosContainer

4. تدفق تحديثات البيانات

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

في القسم السابق ، أضفنا طريقة onAllData لمكون ReactiveList. تتلقى المعلمة الثانية من onAllData تحديثات البث التي سنستخدمها دائمًا للحفاظ على تحديث todos. إليك كيفية ظهور طريقة onAllData المحدثة في المكونات / TodosContainer.js.

أسلوب mergeTodos موجود في utils / index.js. وإليك كيف يعمل:

يستقبل ملف البيانات مجموعة من الكائنات التي يجب القيام بها عند إنشائها أو حذفها أو تحديثها. إذا تم تحديث كائن ، فإنه يحتوي على مفتاح _updated تم تعيينه على true. وبالمثل ، إذا تم حذف كائن ، فإنه يحتوي على مفتاح _deleted مضبوط على true. إذا تم إنشاء كائن ، فهو لا يحتوي على أي منهما. باستخدام هذه النقاط ، أضفنا وظيفة mergeTodos.

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

روابط مفيدة

  1. تودوس التطبيق التجريبي ، وصلة المعرض ، مشروع كاتب ورمز المصدر النهائي
  2. ReactiveSearch GitHub repo ️
  3. مستندات البحث التفاعلي

آمل أن تستمتع هذه القصة. إذا كان لديك أي أفكار أو اقتراحات ، يرجى إعلامي والمتعة!

شكر خاص لـ Dhruvdutt Jadhav لمساعدتي في هذه القصة وتطبيق Todos.