Buat aplikasi seluler React Native tanpa server dengan menggunakan AWS Amplify - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatEpikSumber daya terkait

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Buat aplikasi seluler React Native tanpa server dengan menggunakan AWS Amplify

Deekshitulu Pentakota, Amazon Web Services

Ringkasan

Pola ini menunjukkan cara membuat backend tanpa server untuk aplikasi seluler React Native dengan menggunakan AWS Amplify dan layanan AWS berikut:

  • AWS AppSync

  • Amazon Cognito

  • Amazon DynamoDB

Setelah Anda mengonfigurasi dan menerapkan backend aplikasi dengan menggunakan Amplify, Amazon Cognito mengautentikasi pengguna aplikasi dan memberi wewenang kepada mereka untuk mengakses aplikasi. AWS AppSync kemudian berinteraksi dengan aplikasi frontend dan dengan tabel DynamoDB backend untuk membuat dan mengambil data.

catatan

Pola ini menggunakan aplikasi "ToDoList" sederhana sebagai contoh, tetapi Anda dapat menggunakan prosedur serupa untuk membuat aplikasi seluler React Native apa pun.

Prasyarat dan batasan

Prasyarat

  • Akun AWS yang aktif

  • Amplify Command Line Interface (Amplify CLI), diinstal dan dikonfigurasi

  • XCode (versi apa pun)

  • Microsoft Visual Studio (versi apa pun, editor kode apa pun, editor teks apa pun)

  • Keakraban dengan Amplify

  • Keakraban dengan Amazon Cognito

  • Keakraban dengan AWS AppSync

  • Keakraban dengan DynamoDB

  • Keakraban dengan Node.js

  • Keakraban dengan npm

  • Keakraban dengan React dan React Native

  • Keakraban dengan JavaScript dan ECMAScript 6 () ES6

  • Keakraban dengan GraphQL

Arsitektur

Diagram berikut menunjukkan contoh arsitektur untuk menjalankan backend aplikasi seluler React Native di AWS Cloud:

Alur kerja untuk menjalankan aplikasi seluler React Native dengan layanan AWS.

Diagram menunjukkan arsitektur berikut:

  1. Amazon Cognito mengautentikasi pengguna aplikasi dan mengizinkan mereka untuk mengakses aplikasi.

  2. Untuk membuat dan mengambil data, AWS AppSync menggunakan GraphQL API untuk berinteraksi dengan aplikasi frontend dan tabel DynamoDB backend.

Alat

Layanan AWS

  • AWS Amplify adalah seperangkat alat dan fitur yang dibuat khusus yang membantu pengembang web dan seluler frontend dengan cepat membangun aplikasi full-stack di AWS.

  • AWS AppSync menyediakan antarmuka GraphQL yang dapat diskalakan yang membantu pengembang aplikasi menggabungkan data dari berbagai sumber, termasuk Amazon DynamoDB, AWS Lambda, dan HTTP. APIs

  • Amazon Cognito menyediakan otentikasi, otorisasi, dan manajemen pengguna untuk aplikasi web dan seluler.

  • Amazon DynamoDB adalah layanan database NoSQL yang dikelola sepenuhnya yang menyediakan kinerja yang cepat, dapat diprediksi, dan terukur.

Kode

Kode untuk aplikasi sampel yang digunakan dalam pola ini tersedia di ios-todo-app repositori GitHub aws-amplify-react-native-. Untuk menggunakan file sampel, ikuti instruksi di bagian Epics dari pola ini.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Siapkan lingkungan pengembangan React Native.

Untuk instruksi, lihat Menyiapkan lingkungan pengembangan dalam dokumentasi React Native.

Pengembang aplikasi

Buat dan jalankan aplikasi seluler ToDoList React Native di iOS Simulator.

  1. Buat direktori proyek aplikasi seluler React Native baru di lingkungan lokal Anda dengan menjalankan perintah berikut di jendela terminal baru:

    npx react-native init ToDoListAmplify

  2. Arahkan ke direktori root proyek dengan menjalankan perintah berikut:

    cd ToDoListAmplify

  3. Jalankan aplikasi dengan menjalankan perintah berikut:

    npx react-native run-ios

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat layanan backend yang diperlukan untuk mendukung aplikasi di Amplify.

  1. Di lingkungan lokal Anda, jalankan perintah berikut dari direktori root proyek (ToDoListAmplify):

    amplify init

  2. Sebuah prompt muncul yang meminta Anda untuk memberikan informasi tentang aplikasi. Masukkan informasi yang diperlukan berdasarkan kasus penggunaan Anda. Kemudian, tekan Enter.

Untuk penyiapan ToDoList aplikasi yang digunakan dalam pola ini, terapkan konfigurasi contoh berikut.

Contoh pengaturan konfigurasi aplikasi React Native Amplify

? Name: ToDoListAmplify

? Environment: dev

? Default editor: Visual Studio Code

? App type: javascript

? Javascript framework: react-native

? Source Directory Path: src

? Distribution Directory Path: /

? Build Command: npm run-script build

? Start Command: npm run-script start

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use: default

Untuk informasi selengkapnya, lihat Membuat backend Amplify baru di dokumentasi Amplify Dev Center.

catatan

amplify initPerintah menyediakan sumber daya berikut dengan menggunakan AWS CloudFormation: 

  • Peran AWS Identity and Access Management (IAM) untuk pengguna yang diautentikasi dan tidak diautentikasi (Peran Auth dan Peran Unauth)

  • Bucket Amazon Simple Storage Service (Amazon S3) untuk penerapan (untuk contoh aplikasi pola ini, Amplify-meta.json)

  • Lingkungan backend di Amplify Hosting

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat layanan otentikasi Amazon Cognito.

  1. Di lingkungan lokal Anda, jalankan perintah berikut dari direktori root proyek (ToDoListAmplify):

    amplify add auth

  2. Muncul prompt yang meminta Anda untuk memberikan informasi tentang pengaturan konfigurasi layanan otentikasi. Masukkan informasi yang diperlukan berdasarkan kasus penggunaan Anda. Kemudian, tekan Enter.

Untuk penyiapan ToDoList aplikasi yang digunakan dalam pola ini, terapkan konfigurasi contoh berikut.

Contoh pengaturan konfigurasi layanan otentikasi

? Do you want to use the default authentication and security configuration? \ 
Default configuration
 
? How do you want users to be able to sign in? \ 
Username 

? Do you want to configure advanced settings? \ 
No, I am done
catatan

amplify add authPerintah membuat folder, file, dan file dependensi yang diperlukan dalam folder lokal (amplify) dalam direktori root proyek. Untuk pengaturan ToDoList aplikasi yang digunakan dalam pola ini, aws-exports.js dibuat untuk tujuan ini.

Pengembang aplikasi

Menerapkan layanan Amazon Cognito ke AWS Cloud.

  1. Dari direktori root proyek, jalankan perintah Amplify CLI berikut:

    amplify push

  2. Prompt untuk mengonfirmasi penerapan muncul. Masukkan Ya. Kemudian, tekan Enter.

catatan

Untuk melihat layanan yang diterapkan di project Anda, buka konsol Amplify dengan menjalankan perintah berikut:

amplify console

Pengembang aplikasi

Instal library Amplify yang diperlukan untuk React Native dan CocoaPods dependensi untuk iOS.

  1. Instal pustaka klien sumber terbuka Amplify yang diperlukan dengan menjalankan perintah berikut dari direktori root proyek:

    npm install aws-amplify aws-amplify-react-native \ amazon-cognito-identity-js @react-native-community/netinfo \ @react-native-async-storage/async-storage

  2. Instal CocoaPods dependensi yang diperlukan untuk iOS dengan menjalankan perintah berikut:

    npx pod-install

Pengembang aplikasi

Impor dan konfigurasikan layanan Amplify.

Dalam file titik masuk aplikasi (misalnya, App.js), impor dan muat file konfigurasi layanan Amplify dengan memasukkan baris kode berikut:

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

Jika Anda menerima kesalahan setelah mengimpor layanan Amplify di file titik masuk aplikasi, hentikan aplikasi. Kemudian, buka XCode dan pilih ToDoListAmplify.xcworkspace dari folder iOS proyek dan jalankan aplikasi.

Pengembang aplikasi

Perbarui file titik masuk aplikasi Anda untuk menggunakan komponen Higher-order (HOC) withAuthenticator.

catatan

withAuthenticatorHOC menyediakan alur kerja login, pendaftaran, dan lupa kata sandi di aplikasi Anda hanya dengan menggunakan beberapa baris kode. Untuk informasi selengkapnya, lihat Opsi 1: Menggunakan komponen UI pra-build di Amplify Dev Center. Juga, komponen tingkat tinggi dalam dokumentasi React.

  1. Dalam file titik masuk aplikasi (misalnya, App.js), impor withAuthenticator HOC dengan memasukkan baris kode berikut:

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

  2. Ekspor WithAuthenticator HOC dengan memasukkan kode berikut:

    export default withAuthenticator(App)

denganContoh kode HOC Authenticator

import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react-native';


const App = () => {
  return null;
};


export default withAuthenticator(App);
catatan

Di iOS Simulator, aplikasi menampilkan layar login yang disediakan oleh layanan Amazon Cognito.

Pengembang aplikasi

Uji pengaturan layanan otentikasi.

Di iOS Simulator, lakukan hal berikut:

  1. Buat akun baru di aplikasi dengan menggunakan alamat email asli. Kode verifikasi kemudian dikirim ke email yang terdaftar.

  2. Verifikasi pengaturan akun dengan menggunakan kode yang Anda terima di email verifikasi.

  3. Masukkan nama pengguna dan kata sandi yang Anda buat. Kemudian, pilih Masuk. Layar selamat datang muncul.  

catatan

Anda juga dapat membuka konsol Amazon Cognito dan memeriksa apakah pengguna baru telah dibuat di Identity Pool atau tidak.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat database AWS AppSync API dan DynamoDB.

  1. Tambahkan AWS AppSync API ke aplikasi Anda dan sediakan database DynamoDB secara otomatis dengan menjalankan perintah Amplify CLI berikut dari direktori root proyek:

    amplify add api

  2. Muncul prompt yang meminta Anda untuk memberikan informasi tentang pengaturan konfigurasi API dan database. Masukkan informasi yang diperlukan berdasarkan kasus penggunaan Anda. Kemudian, tekan Enter. Amplify CLI membuka file skema GraphQL di editor teks Anda.

Untuk penyiapan ToDoList aplikasi yang digunakan dalam pola ini, terapkan konfigurasi contoh berikut.

Contoh pengaturan konfigurasi API dan database

? Please select from one of the below mentioned services: \ 
GraphQL 

? Provide API name: todolistamplify

? Choose the default authorization type for the API \ 
Amazon Cognito User Pool

Do you want to use the default authentication and security configuration

? Default configuration How do you want users to be able to sign in? \ 
Username

Do you want to configure advanced settings? \ 
No, I am done.

? Do you want to configure advanced settings for the GraphQL API \ 
No, I am done.

? Do you have an annotated GraphQL schema? \ 
No

? Choose a schema template: \ 
Single object with fields (e.g., "Todo" with ID, name, description)

? Do you want to edit the schema now? \ 
Yes

Contoh skema GraphQL

 type Todo @model {
   id: ID!
   name: String!
   description: String
}
Pengembang aplikasi

Menerapkan AWS AppSync API.

  1. Di direktori root proyek, jalankan perintah Amplify CLI berikut:

    amplify push

  2. Muncul prompt yang meminta Anda untuk memberikan informasi lebih lanjut tentang pengaturan konfigurasi API dan database. Masukkan informasi yang diperlukan berdasarkan kasus penggunaan Anda. Kemudian, tekan Enter. Aplikasi Anda sekarang dapat berinteraksi dengan AWS AppSync API. 

Untuk penyiapan ToDoList aplikasi yang digunakan dalam pola ini, terapkan konfigurasi contoh berikut.

Contoh pengaturan konfigurasi AWS AppSync API

catatan

Konfigurasi berikut membuat GraphQL API di AppSync AWS dan tabel Todo di Dynamo DB.

 ? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - \ 
queries, mutations and subscriptions Yes
? Enter maximum statement depth \
[increase from default if your schema is deeply nested] 2
Pengembang aplikasi

Hubungkan frontend aplikasi ke AWS AppSync API.

Untuk menggunakan ToDoList aplikasi contoh yang disediakan dalam pola ini, salin kode dari file App.js di ios-todo-app GitHub repositori aws-amplify-react-native-. Kemudian, integrasikan kode contoh ke lingkungan lokal Anda.

Kode contoh yang disediakan dalam file App.js repositori melakukan hal berikut:

  • Menunjukkan formulir untuk membuat ToDo Item dengan bidang Judul dan Deskripsi

  • Menampilkan daftar item yang harus dilakukan (Judul dan Deskripsi)

  • Memposting dan mengambil data dengan menggunakan metode aws-amplify

Pengembang aplikasi

Sumber daya terkait