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

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 لإنشاء تفاعل والتغيير في الدليل الجديد:

npx create-react-app amplify-web-app

cd amplify-web-app

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

yarn add aws-amplify aws-amplify-react

# or

npm install aws-amplify aws-amplify-react

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

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

npm install -g @aws-amplify/cli

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

amplify configure

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

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

amplify

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

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

amplify init

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

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

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

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

amplify add auth

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

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

amplify push

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

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

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

amplify status

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

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

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

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

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

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

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

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

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

import { withAuthenticator } from 'aws-amplify-react'

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

export default withAuthenticator(App)

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

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

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

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

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

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

export default withAuthenticator(App, { includeGreetings: true })

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

// 1. import the class
import { Auth } from 'aws-amplify'

// Sign the user out
await Auth.signOut()

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

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

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

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

// 1. Create initial state to hold user inputs
state = {username: '', password: '', email: '', phone_number: '', authCode: ''}

// 2. onChange handler for user input changes
onChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}

// 3. Function to call Auth.signUp
signUp = async () => {
  const { username, password, email, phone_number } = this.state
  await Auth.signUp({
    username, password, attributes: { phone_number, email}
  })
  console.log('successfully signed up')
}

// 4. Function to call Auth.signUp
confirmSignUp = async () => {
  const { username, authCode } = this.state
  await Auth.confirmSignUp(username, authCode)
  console.log('successfully confirmed signed up')
}

// 5. In render method, create inputs with attributes to update state
<input onChange={this.onChange} name='username' />

// 6. Create buttons to call signUp and confirmSignUp methods
<button onClick={this.signUp}>Sign Up</button>

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

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

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

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

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

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

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

amplify add storage

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

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

amplify push

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

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

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

import { Storage } from 'aws-amplify'

// create function to work with Storage
addToStorage = () => {
  Storage.put('javascript/MyReactComponent.js', `
    import React from 'react'
    const App = () => (
      <p>Hello World</p>
    )
    export default App
  `)
    .then (result => {
      console.log('result: ', result)
    })
    .catch(err => console.log('error: ', err));
}

// add click handler
<button onClick={this.addToStorage}>Add To Storage</button>

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

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

readFromStorage = () => {
  Storage.list('javascript/')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

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

readFromStorage = () => {
  Storage.get('javascript/MyReactComponent.js')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

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

readFromStorage = () => {
  Storage.list('')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

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

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

class S3ImageUpload extends React.Component {
  onChange(e) {
      const file = e.target.files[0];
      Storage.put('example.png', file, {
          contentType: 'image/png'
      })
      .then (result => console.log(result))
      .catch(err => console.log(err));
  }

  render() {
      return (
          <input
              type="file" accept='image/png'
              onChange={(e) => this.onChange(e)}
          />
      )
  }
}

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

استضافة

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

amplify add hosting

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

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

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

amplify publish

إزالة خدمات

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

amplify remove auth
amplify push

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

amplify status

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

الاستنتاج

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

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