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

 كيفية بناء تطبيقات الويب Serverless مع React و مضخم AWS 

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

يتيح Amplify ميزات مثل GraphQL المُدارة (AWS AppSync) ، التخزين (Amazon S3) ، مصادقة المستخدم (Amazon Cognito) ، وظائف بدون ملقم (AWS Lambda) ، استضافة (Amazon CloudFront و Amazon S3) ، تحليلات (Amazon Pinpoint) ، وأكثر من ذلك.

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

في هذه السلسلة ، سأوضح لك كيفية إنشاء مشروع جديد لـ AWS Amplify ، وتمكين ميزات السحاب باستخدام واجهة سطر الأوامر (CLI) ، وربط تطبيق React ، والبدء في التفاعل مع الخدمات السحابية. في هذا المنشور ، سأوضح لك كيفية تنفيذ المصادقة والتخزين والاستضافة. في البرنامج التعليمي التالي ، سوف نتعلم كيفية إنشاء واجهات برمجة تطبيقات GraphQL و Serverless والتفاعل معها.

بينما يستخدم هذا البرنامج التعليمي React ، سيعمل Amplify مع أي مشروع جافا سكريبت ولديه مكونات محددة للإطار من أجل Angular و Vue و React Native و Ionic. يدعم CLI أيضًا نظامي التشغيل iOS و Android.

الشروع في العمل

إنشاء تطبيق تفاعلي جديد 

للبدء ، نحتاج أولاً إلى إنشاء تطبيق React جديد باستخدام واجهة برمجة تطبيقات CLI لإنشاء تفاعل والتغيير في الدليل الجديد:

بعد ذلك ، سنقوم بتثبيت تبعيات عميل AWS Amplify:

تثبيت وتكوين AWS Amplify  CLI

بالمقبل، سوف نحتاج إلى تثبيت CLI AWS Amplify .

الآن بعد تثبيت AWS Amplify CLI ، نحتاج إلى تهيئته لتكون قادرًا على إنشاء موارد في حساب AWS لدينا. نفعل ذلك عن طريق تشغيل الأمر تكوين تضخيم وإعداد مستخدم AWS جديد.

 يمكنك الاطلاع على مقطع فيديو قصير من هذا التهيئة على YouTube.

والآن بعد تثبيت AWS Amplify CLI وتكوينه ، قم بتشغيل الأمر amplify من سطر الأوامر الخاص بك لمعرفة الخيارات المتاحة والتأكد من تثبيت CLI بشكل صحيح.

تهيئة مشروع جديد لـ AWS Amplify

 لتهيئة مشروع مضخم AWS جديد ، سنقوم بتشغيل الأمر initify amplify:

عندما يُطلب منك ذلك ، اختر محرر النص المفضل لديك ثم قم بالتمسك بالخصائص الافتراضية لكافة الخيارات الأخرى.

وقد قام هذا الآن بتهيئة مشروع AWS Amplify جديد محليًا ، وسنرى الآن ملفًا amplify  وملفًا. aspplifyrc تم إنشاؤه في الدليل الجذري لمشروع React لدينا. تحتفظ هذه الملفات بمعلومات التهيئة حول مشروع Amplify الخاص بنا ، ولا نحتاج إلى لمسهم على الإطلاق في الوقت الحالي.

تنفيذ المصادقة

الميزة الأولى التي ستمكّنها هي مصادقة المستخدم. يمكننا تمكين الميزات في أي وقت عن طريق تشغيل  amplify add  <featurename>. فئة المصادقة هي auth ، لذا قم بتشغيل:

ردا على سؤال حول هل تريد استخدام تكوين الأمان والمصادقة الافتراضي؟، اختر "نعم".

حالما يتم إنشاء هذا، نحن بحاجة إلى تشغيل تضخيم دفع لإنشاء خدمة جديدة في حسابنا:

وردا على سؤال هل أنت متأكد من أنك تريد المتابعة؟، اختر "نعم".

بمجرد إنشاء الخدمة ، يمكنك عرض الخدمة في لوحة المعلومات في أي وقت بزيارة https://console.aws.amazon.com/cognito/users/ وبالنقر على اسم الخدمة الخاصة بك.

يمكننا أيضًا عرض جميع الخدمات الممكّنة في أي وقت بتشغيل حالة :

 ستلاحظ أيضًا ملفًا جديدًا تم إنشاؤه — aws-exports.js— في المجلد الجذري لتطبيق React. لن تحتاج إلى تحرير هذا الملف لأنه يتم التعامل معه من قِبل CLI ، ولكننا سنستخدمه في الخطوة التالية لتهيئة المشروع المحلي.

إضافة مصادقة للتطبيق التفاعلي-React -

الآن أن لدينا خدمة المصادقة التي تم إنشاؤها، يمكننا أن نبدأ في استخدامها في التطبيق التفاعلي لدينا!

 أول شيء يتعين علينا القيام به هو تكوين تطبيق React للتعرف على مشروع Amplify الخاص بنا. الطريقة التي نقوم بها هي عن طريق استدعاء Amplify.configure في جذر المشروع - بالنسبة لنا ، سيكون ذلك src / index.js.

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

باستخدام withAuthenticator المكون ذا الترتيب الاعلى

سننظر في طريقتين للتنفيذ حول مصادقة المستخدم ، ولكننا نبدأ باستخدام مكون الترتيب الأعلى مع المُصادق من مكتبة aws-amplify-react. يعمل هذا المكون على تدعيم تدفق المصادقة بأكمله في بضعة أسطر من التعليمات البرمجية وهي طريقة رائعة للتشغيل والعمل مع المكتبة.

في App.js ، استورد HOCAuthenticator أعلى الملف:

وفي الجزء السفلي ، حدّث بيان التصدير لتغليف مكون التطبيق باستخدام withAuthenticator.

لمعرفة المزيد ، اقرأ عن مكونات Amplify React المتاحة للمصادقة في الوثائق الرسمية.

اختبار تدفق المصادقة

الآن ، يمكننا تشغيل التطبيق ويجب أن نرى شاشة تسجيل الدخول:

Sign-in screen for the app

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

خيارات تسجيل الخروج

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

لاحظ أنه يمكننا أيضًا استخدام فئة Auth مباشرةً لتسجيل خروج المستخدمين:

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

استخدام فئة المصادقة

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

لنلقِ نظرة على كيفية تنفيذ اشتراك المستخدم باستخدام طريقة class signUp:

وهذا مخطط لكيف يمكن يدوياً تسجيل الدخول لمستخدم مع فئة مصادقة.

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

يمكنك معرفة المزيد حول مصادقة مع "AWS Amplify" في وثائق المشروع.

تخزين مع امازون S3

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

تمكننا AWS Amplify CLI من إنشاء مجموعات S3 وتكوينها وتحديثها وحذفها. في هذا القسم ، سننظر في كيفية إنشاء مجموعة S3 بالإضافة إلى كيفية تحميل الصور والملفات وتنزيلها إلى المجموعة.

لتمكين التخزين، يمكننا تشغيل الأمر التالي:

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

الآن تم إضافة التخزين إلى التكوين لدينا، ونحن نقم بتشغيل amplify push لخلق موارد جديدة في حسابنا:

سيؤدي ذلك إلى إنشاء وتجهيز مجموعة Amazon S3 التي يمكننا البدء في استخدامها لتخزين العناصر.

مثال على استخدام التخزين S3

إذا كنا نريد لاختبار ذلك، يمكن أن نقوم بتخزين بعض النص في ملف مثل هذا:

سيؤدي ذلك إلى إنشاء مجلد يسمى javascript في مجموعة S3 الخاصة بنا وتخزين ملف يسمى MyReactComponent.js هناك بالشفرة التي حددناها في الوسيطة الثانية لـ Storage.put.

إذا كنا نريد قراءة كل شيء من هذا المجلد، يمكننا استخدام Storage.list:

إذا أردنا قراءة ملف واحد فقط، يمكن أن نستخدم Storage.get:

إذا أردنا أن هدم كل شيء، يمكن أن نستخدم Storage.list:

العمل مع الصور

من السهل أيضا العمل مع الصور. هنا مثال على ذلك:

في الكود السابق ، نربط إدخال نموذج تحميل ملف إلى معالج الأحداث onChange. عندما يقوم المستخدم بتزويد ملف ، يتم استدعاء Storage.put لتحميل الملف إلى S3 مع نوعMIME وهو image/png .

استضافة

لنشر واستضافة التطبيق الخاص بك في أوس AWS، يمكننا استخدام فئة الاستضافة.

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

  • بالنسبة لنوع البيئة ، حدد DEV ( فقط ال S3مع HTTP).
  • اختر اسمًا فريدًا عالميًا حيث سيتم استضافة مشروعك
  • قدم اسم الفهرس وعناوين URL الخاطئة لموقع الويب —الاعتيادي عادةً index.html.

الآن، تم إعداد كل شيء، ويمكننا نشر التطبيق:

إزالة خدمات

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

إذا لم تكن متأكدًا من الخدمات التي قمت بتمكينها في أي وقت ، فيمكنك تشغيل الأمر amplify status:

تضخيم الحالة سيمنحك قائمة بالموارد الممكّنة حاليًا في تطبيقك.

الاستنتاج

يتيح نظام AWS Amplify للمطورين إمكانية إنشاء تطبيقات مكدّسة وسحابية بشكل أكثر سهولة من أي وقت مضى ، مما يسمح للمطورين بالتكرار بسرعة ، مباشرة من بيئة الواجهة الأمامية

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

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.