Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React Native
Code

كود التطبيق مع غرافكل، تطبيق أوس أبسينك ذوالتفاعل الاصلي: التطبيق

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

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

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

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

نظرة عامة على أسلوب التطبيق وبنية المجلد

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

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

سيكون لدينا أيضا مجلد الأصول لحفظ الصور لدينا.

folder structure

إنشاء وتكوين رد فعل العميل الأصلي

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

أولا، أنشأنا تطبيق رد فعل أصلي جديد باستخدام المعرض أيضاً.

حالما ينشئ المشروع حديثاً، قمنا بتثبيت تبعياتنا. من أجل وظيفة غرافكل و أبسينك، استخدمنا التبعيات التالية:

كما استخدمنا التبعيات التالية لتصميم واجهة المستخدم:

أيضا، تم تثبيت مكتبة أيقونات موجهة، وربطناها:

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


يحتفظ ملف التكوين هذا معلومات عميل أبسينك التي نحتاجها لإنشاء عميل جديد.

تكوين المزود والمخزن

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

التعليمات البرمجية التالية هي ملف App.js الجديد، والذي هو المكون الرئيسى المستورد من نقطة الوصول index.js لدينا.

في هذا الملف، نقوم بإعداد عميل أبسينك جديد باستخدام مجموعة من منشئ أوسابسينكلينت من أوس-أبسينك وكذلك التكوين في ملف أوس-export.js الذي يوفر عنوان ورل ل أبي غرافكل ،المنطقة، ونوع المصادقة و مفتاح المصادقة أبي.

عندئذ نلتف الى نقطة الدخول الرئيسية لدينا، ملف Tabs.js الذي سوف يحفظ علامة التبويب الملاحة لدينا، في أبولوبروفيدر ويمرر العميل أبسينك كما يدعم العميل. نحن أيضا نلتف على مكون علامات التبويب في مكون المسح الذي نستورده من أوس-أبسينك-رد فعل. وسيأكد ذلك من أننا قد قرأنا من وحدة تخزين غير متزامنة وأعدنا مسح ذاكرة التخزين المؤقت قبل عرض واجهة المستخدم.

الآن لدينا التطبيق سوف يكون قادراً على الاستعلام عن البيانات من وجهة نظر أبسينك لدينا، وأيضا لأداء التحولات والاشتراكات!

التنقل

نقطة الدخول الرئيسية من التطبيق هو الملاحة المبوبة، نفذت في ملف Tabs.js مع رد الفعل الملاحة.

ما قمنا به هنا هو إنشاء وتصدير ملاحة مبوبة مع علامتي التبويب. وهما:

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

المكونات القابلة لإعادة الاستخدام

هذا التطبيق يحتوي على عنصر واحد فقط قابل لإعادة الاستخدام، تكستينبوت مخصص. وبما أننا سوف ننسخ هذا النمط ووظائفه مرارا وتكرارا، قررنا جعله مكونه الخاص. يتم تنفيذ عنصر الإدخال في Input.js.

هذا التطبيق يحتوي على عنصر واحد فقط قابل لإعادة الاستخدام، تكستينبوت مخصص. وبما أننا سوف ننسخ هذا النمط ووظائفه مرارا وتكرارا، قررنا جعله مكونه الخاص. يتم تنفيذ عنصر الإدخال في Input.js.

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

للقيام بذلك، جعلنا المدن.جس انها مخزن الملاحة، و City.js المكون الذي ننتقل إليه عند اختيار المدينة. عند النقر على مدينة في المدن، فإننا نقوم بتمرير اسمها والمعرف كدعائم للمدينة.

Cities.js.

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

City.js

في هذا المكون، اجتزنا المدينة كدعائم من الملاحة (متاح كـ (props.navigation.state.params.city). نستخدم قيمة معرف المدينة لجلب قائمة المواقع للمدينة المختارة باستخدام استعلام قائمة المواقع. نشترك في مواقع جديدة بطريقة مماثلة لاشتراكنا في المدن الجديدة في مدن.جس، وذلك باستخدام الاشتراك اشتراك بموقع جديد. كما نقوم بتوفير وظائف الاستجابة المتفائلة والتحديث عند إضافة مدينة جديدة. استجابة متفائلة

إضافة مدن

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

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

التحولات، والاستعلامات، والاشتراكات

التحولات، والاستفسارات، والاشتراكات هي وظائف أساسية لدمجها مع أبي غرافكل لدينا. في التطبيق لدينا، يتم تنفيذ هذه الوظيفة في ملفات City.js، City.js، و AddCity.js باستخدام عميل أبسينك.

لنلق نظرة فاحصة على كيفية تنفيذ التحولات والاستعلامات والاشتراكات في الشفرة.

الاستفسارات

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

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

الآن لدينا إمكانية الوصول إلى مجموعة المدن من خادم غرافكل لدينا باعتباره الدعامة. يمكننا استخدام هذا.props.cities لتعيين أكثر من مجموعة من المدن الداخلة من غرافكل.

التحولات

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

جديد يمكننا استيراد هذا التحول (جنبا إلى جنب مع مساعدين أبولو) في ملف AddCity.js واستخدامه في مكون:

الآن، لدينا إمكانية الوصول إلى دعامة تدعى أون أدد، حيث اجتزنا كائن نود أن نرسله إلى التحول!

الاشتراكات

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

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

الآن يمكننا استيراد وإرفاق الاشتراك في Cities.js  لقد نظرنا بالفعل في كيفية الحصول على المدن من أبي لدينا. دعونا الآن نقوم بتحديث هذه الوظيفة للاشتراك في التغييرات الجديدة وتحديث مجموعةالمدن عند إضافة مدينة جديدة.

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

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

واجهة المستخدم متفائلة

ماذا لو كنا لا نريد أن ننتظر الاشتراك حتى يعيد معظم البيانات حتى تاريخه من أبي لدينا من أجل تحديث واجهة المستخدم لدينا؟

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

يمكننا أن نفعل ذلك بسهولة باستخدام عدد قليل من التقنيات والوظائف.

دعونا نقوم بتحديث إضافة تحول مدينة إلى ما يلي (يمكنك عرض هذا الرمز في ملف المصدر AddCity.js):

هنا، أضفنا خاصيتين جديدتين إلى كائن وسيطة وظيفة التحويل:

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

استنتاج

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

وإنني أتطلع إلى ابتكار أكثر من ذلك في هذا الفضاء، ولا يمكنني أن أنتظر لأرى ماذا سنرى في عام 2018!

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

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

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

وفي هذه الأثناء، تحقق من بعض من الدروس الأصلية لرد الفعل الاخرى هنا على إنفاتو توتس +!

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.