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

كيفية بناء GraphQL ServerQL واجهات برمجة التطبيقات  REST APIs باستخدام AWS تضخيم

by
Difficulty:IntermediateLength:LongLanguages:

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

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

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

إضافة GraphQL API

دعونا ننظر في كيفية إضافة أوس AppSync جرافقل API لمشروعنا والبدء في استخدام ذلك من ضمن مشروعنا.

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

لإضافة جرافقل API لمشروعنا، نحن نستخدم الأمر التالي:

ستطالب بالإجابة على بعض الأسئلة التكوين. حدد الخيارات التالية:

  • نوع الخدمة: GraphQL
  • اسم API: توتسجرافقلابي
  • نوع الترخيص: مفتاح API
  • مخطط جرافقل المشروح: N
  • تسترشد إنشاء المخطط: Y
  • ما يناسب المشروع الخاص بك؟ كائن واحد مع الحقول (مثل "تودو" مع معرف واسم، ووصف)
  • هل تريد تحرير المخطط الآن؟ Y

عند مطالبتك بذلك، تحديث المخطط بما يلي، ثم قم بحفظ الملف:

وهذا يخلق فقط نوع بيانات مفرد – مطعم – مع معرف المطلوبة والحقول الاسم، فضلا عن وصف اختياري.

المقبل، دعونا دفع التحديثات على حسابنا:

الآن، وقد تم إنشاء API!

ما الذي حدث للتو هنا؟ استخدم AWS Amplify مكتبة GraphQL Transform المدمجة لإنشاء واجهة برمجة تطبيقات GraphQL كاملة ، بما في ذلك المخطط الإضافي ومحللات البيانات ومصدر البيانات.

لعرض جديد أوس AppSync API في أي وقت بعد إنشائها، يمكنك الانتقال إلى لوحة المعلومات في https://console.aws.amazon.com/appsync وانقر فوق API الذي تم إنشاؤه للتو (تأكد من أنه تم تعيين المنطقة الخاصة بك بشكل صحيح). من داخل لوحة AppSync أوس، يمكنك عرض تكوين API وأداء الاستعلامات والطفرات في API.

تنفيذ الطفرات جرافقل

وبعد ذلك، دعونا تتفاعل مع API من "طلبنا الرد".

أول شيء نود القيام به هو خلق طفرة. في GraphQL ، تكون الطفرات المكافئة لعمليات PUT و PUSH و DELETE الخاصة بـ REST. نظرًا لأننا لا نمتلك أي بيانات حتى الآن في قاعدة البيانات الخاصة بنا ، سنقوم بإنشاء طفرة لإنشاء عنصر مطعم جديد.

للقيام بذلك ، سنقوم باستيراد API و graphqlOperation من AWS Amplify ، وتحديد طفرة ، ثم تنفيذ الطفرة.

دعونا ننظر إلى مثال على التطبيق الذي ينفذ طفرة. في App.js ، نقوم أولاً باستيراد React ، و CSS التطبيق الخاص بنا ، ومكونات AWS Amplify الضرورية.

بعد ذلك ، نحدد طفرة لإنشاء مطعم. نحدد أن التحوّل يقبل اسمًا ووصفًا ويسمى createRestaurant. تم تعريف هذه الطفرة تلقائيًا عندما أنشأنا مخطط Restaurant أعلاه. لاحظ أن الطفرة محددة في GraphQL - وهي لغة استعلام خاصة بالنطاق.

الآن، ونحن إنشاء مكون التطبيق لدينا.

المقبل، لا يزال داخل عنصر App، نحن تعريف دالة لتنفيذ الطفرة. وهذا ينفذ الطفرة باستدعاء API.graphql، ويمر في الطفرة والبيانات.

ثم أننا تقديم المكون، ربط وظائف معالج والطفرة تغير لدينا.

وأخيراً، نقوم بتصدير مكونات App، مع مصادقة.

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

لعرض مصدر البيانات الفعلي لمعرفة ما إذا كانت البيانات موجودة أم لا ، افتح AWS AppSync dashboard ، واختر واجهة برمجة التطبيقات ، وانقر على Data Sources في القائمة اليمنى ، ثم انقر على Resource Name. سيؤدي هذا إلى فتح الجدول "دينامودب الأمازون". في الجدول، يمكنك عرض البيانات في علامة التبويب Items.

تشغيل الاستعلامات جرافقل

وبعد ذلك، دعونا ننظر في كيف يمكن للاستعلام عن البيانات من API. سوف ننفذ هذا في ثلاث خطوات:

  1. تعريف استعلام
  2. تنفيذ الاستعلام عند تحميل التطبيق
  3. حفظ النتيجة من الاستعلام في دولتنا، وجعلها في واجهة المستخدم

أولاً، دعونا تعريف الاستعلام في عنصر جديد. مرة أخرى، نحن نستخدم لغة جرافقل لتحديد الاستعلام. نحن نستخدم استعلام listRestaurants الذي تم تحديده تلقائيًا عندما دفعنا مخطط Restaurant. يحدد المقتطف أدناه أننا نتوقع قائمة من العناصر ، تحتوي كل منها على معرف واسم ووصف.

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

سنحتاج أيضًا إلى إضافة حدث دورة حياة componentDidMount للاستعلام عن البيانات من خادم GraphQL. ستعمل طريقة async هذه على تحديث حالة المكون عند إرجاع قائمة المطعم من الخادم.

وأخيراً، سنقوم خلق مكون يقوم بتعيين الصفيف restaurants من الدولة عنصر إتش تي أم ال.

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

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

اشتراكات البيانات في الوقت الحقيقي

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

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

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

سيتم إنشاء الاشتراك في طريقة دورة حياة componentDidMount إما قبل أو بعد استعلام GraphQL الذي قمنا بإعداده بالفعل:

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

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

إنشاء واجهة برمجة تطبيقات بقية مع أوس لامدا

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

عندما أنشأنا GraphQL API ، استخدمنا amplify create api. يمنحنا هذا الأمر خيار إنشاء واجهة برمجة تطبيقات GraphQL أو واجهة برمجة تطبيقات REST. يمكن تكوين بقية API استخدام دالة إكسبريس serverless مستقل أو دالة JavaScript serverless مهيأ مسبقاً للعمل مع عمليات الأمازون دينامودب CRUD.

الخيار ونحن سوف تستخدم لهذا المعهد دالة إكسبريس serverless.

دعونا نمضي قدما وإضافة ميزة جديدة:

كالمعتاد، وهذا سوف يطلب منك ملء في بعض تفاصيل التكوين. توفير الخيارات التالية:

  • نوع الخدمة: REST
  • أدخل اسم مورد سيتم استخدامه داخل المشروع: على سبيل المثال ، amplifyrestapi
  • أدخل مساراً لنقاط النهاية بقية: مثل /people
  • لامدا المصدر: Create a new Lambda function
  • اسم دالة "لامدا أوس": amplifyrestapifunction
  • قالب الدالة: وظيفة Expressless Server (تكامل مع Gateway API Amazon)
  • تحرير دالة لامدا المحلية الآن؟ Y

الآن، سوف تكون قادراً على تحرير دالة لامدا محلياً. في الملف، سوف يحل محل الأسلوب ('app.get('/people الحالية بما يلي:

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

  • تقييد الوصول إلى API؟ نعم
  • الذي ينبغي أن يكون الوصول؟ المستخدمين المصادق عليهم فقط
  • ما هو نوع الوصول الذي تريده للمستخدمين مصادق؟ قراءة
  • إضافة مسار آخر؟ N

وقد أدى ذلك إلى إنشاء وظيفة جديدة من Lambda محليًا ، بحيث يمكننا تحديثها ودفعها إلى حسابنا حسب الحاجة. يقع رمز هذه الوظيفة lambda في amplify/backend/function/amplifyrestapi/src

والآن ، دعنا نرسل التحديثات إلى حسابنا:

الاستعلام عن REST API من العميل

الآن ، لدينا وظيفة Lambda تعمل ، ويمكننا البدء في التفاعل معها!

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

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

تحديث دالة لامدا من المبادرة القطرية

بالإضافة إلى إنشاء وظيفة جديدة لامدا، نحن أيضا تحديث لدينا دالة لامدا من المبادرة القطرية.

دعنا نغير الدالة لتصل بيانات API وجلب بدلاً من الثوابت هاردكودينج. للقيام بذلك، سوف نستخدم المكتبة axios لتقديم طلبات HTTP، ونحن سوف جلب البيانات من API حرب النجوم.

لاستخدام axios ، سنحتاج إلى التنقل لتضخيم backend/function/ amplifyrestapi/src وتثبيته هناك. يتم تثبيت Axios في مجلد مشروع Lambda ، وليس مجلد التطبيق الرئيسي ، لأنه سيتم تشغيله في جانب خادم Lambda.

والآن بعد أن يتم تثبيت axios، سنقوم بتحديث الدالة لامدا إحضار البيانات من API حرب النجوم:

الآن ، قم بحفظ الملف وتشغيل amplify push من مجلد المشروع الرئيسي لتحديث وظيفة Lambda في السحابة:

الآن، لدينا API محدث وعلى استعداد للذهاب!

عندما كنا بتحديث التطبيق، يجب أن نرى الآن البيانات التي يتم إرجاعها من API حرب النجوم.

الاستنتاج

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

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

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.