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](https://docs.amplify.aws/cli/start/install/)), 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.](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) Diagram menunjukkan arsitektur berikut: 1. Amazon Cognito mengautentikasi pengguna aplikasi dan mengizinkan mereka untuk mengakses aplikasi. 1. Untuk membuat dan mengambil data, AWS AppSync menggunakan GraphQL API untuk berinteraksi dengan aplikasi frontend dan tabel DynamoDB backend. ## Alat **Layanan AWS** + [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) 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](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) 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](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) menyediakan otentikasi, otorisasi, dan manajemen pengguna untuk aplikasi web dan seluler. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) 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-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Untuk menggunakan file sampel, ikuti instruksi di bagian **Epics** dari pola ini. ## Epik ### Buat dan jalankan aplikasi React Native Anda | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Siapkan lingkungan pengembangan React Native. | Untuk instruksi, lihat [Menyiapkan lingkungan pengembangan](https://reactnative.dev/docs/next/environment-setup) dalam dokumentasi React Native. | Pengembang aplikasi | | Buat dan jalankan aplikasi seluler ToDoList React Native di iOS Simulator. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Pengembang aplikasi | ### Inisialisasi lingkungan backend baru untuk aplikasi | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat layanan backend yang diperlukan untuk mendukung aplikasi di Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) dokumentasi Amplify Dev Center.`amplify init`Perintah menyediakan sumber daya berikut dengan menggunakan [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html): [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Pengembang aplikasi | ### Tambahkan autentikasi Amazon Cognito ke aplikasi Amplify React Native | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat layanan otentikasi Amazon Cognito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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
`amplify add auth`Perintah 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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 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)
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. | `withAuthenticator`HOC 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](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) di Amplify Dev Center. Juga, [komponen tingkat tinggi dalam dokumentasi](https://reactjs.org/docs/higher-order-components.html) React.[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**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);
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:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Anda juga dapat membuka [konsol Amazon Cognito](https://console.aws.amazon.com/cognito/) dan memeriksa apakah pengguna baru telah dibuat di **Identity Pool** atau tidak. | Pengembang aplikasi | ### Connect AWS AppSync API dan database DynamoDB ke aplikasi | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat database AWS AppSync API dan DynamoDB. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Untuk penyiapan ToDoList aplikasi yang digunakan dalam pola ini, terapkan konfigurasi contoh berikut.
**Contoh pengaturan konfigurasi AWS AppSync API**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-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Kemudian, integrasikan kode contoh ke lingkungan lokal Anda.
Kode contoh yang disediakan dalam file **App.js** repositori melakukan hal berikut:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Pengembang aplikasi | ## Sumber daya terkait + [AWS Amplify](https://aws.amazon.com/amplify/) + [Amazon Cognito](https://aws.amazon.com/cognito/) + [AWS AppSync](https://aws.amazon.com/appsync/) + [Amazon DynamoDB](https://aws.amazon.com/dynamodb/) + [Bereaksi](https://reactjs.org/) (Dokumentasi React)