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

# Buat backend untuk aplikasi Gen 1
<a name="build-backend-Gen1"></a>

Dalam tutorial ini, Anda akan mengatur CI/CD alur kerja fullstack dengan Amplify. Anda akan menerapkan aplikasi frontend ke Amplify Hosting. Kemudian Anda akan membuat backend menggunakan Amplify Studio. Terakhir, Anda akan menghubungkan backend cloud ke aplikasi frontend.

## Prasyarat
<a name="fullstack-sample-prerequisites"></a>

Sebelum Anda memulai tutorial ini, selesaikan prasyarat berikut.

**Mendaftar untuk Akun AWS**  
Jika Anda belum menjadi AWS pelanggan, Anda perlu [membuat Akun AWS](https://portal.aws.amazon.com/billing/signup#/start/email) dengan mengikuti instruksi online. Mendaftar memungkinkan Anda mengakses Amplify dan AWS layanan lain yang dapat Anda gunakan dengan aplikasi Anda.

**Buat repositori Git**  
Amplify mendukung GitHub, Bitbucket,, GitLab dan. AWS CodeCommit Dorong aplikasi Anda ke repositori Git Anda.

**Instal Amplify Command Line Interface (CLI)**  
*Untuk petunjuknya, lihat [Menginstal Amplify CLI di Dokumentasi Amplify Framework](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli).*

## Langkah 1: Menyebarkan frontend
<a name="step-1-deploy-frontend"></a>

Jika Anda memiliki aplikasi frontend yang ada di repositori git yang ingin Anda gunakan untuk contoh ini, Anda dapat melanjutkan ke instruksi untuk menerapkan aplikasi frontend.

Jika Anda perlu membuat aplikasi frontend baru untuk digunakan untuk contoh ini, Anda dapat mengikuti instruksi [Create React App](https://create-react-app.dev/docs/getting-started) dalam *dokumentasi Create React App*.

**Untuk menerapkan aplikasi frontend**

1. Masuk ke Konsol Manajemen AWS dan buka konsol [Amplify](https://console.aws.amazon.com/amplify/).

1. Di halaman **Semua aplikasi**, pilih **Aplikasi baru**, lalu **Host aplikasi web** di sudut kanan atas.

1. **Pilih penyedia GitHub, Bitbucket GitLab, atau AWS CodeCommit repositori Anda, lalu pilih Lanjutkan.**

1. Amplify mengotorisasi akses ke repositori git Anda. Untuk GitHub repositori, Amplify sekarang menggunakan fitur GitHub Apps untuk mengotorisasi akses Amplify. 

   Untuk informasi selengkapnya tentang menginstal dan mengotorisasi GitHub Aplikasi, lihat[Menyiapkan akses Amplify ke repositori GitHub](setting-up-GitHub-access.md).

1. Pada halaman **Add repository branch** lakukan hal berikut:

   1. Dalam daftar **repositori yang baru diperbarui**, pilih nama repositori yang akan dihubungkan.

   1. Dalam daftar **Branch**, pilih nama cabang repositori untuk terhubung.

   1. Pilih **Berikutnya**.

1. Pada halaman **Konfigurasi pengaturan build**, pilih **Berikutnya**.

1. Di halaman **Tinjauan**, pilih **Simpan dan deploy**. Saat penerapan selesai, Anda dapat melihat aplikasi di domain `amplifyapp.com` default.

**catatan**  
*[Untuk meningkatkan keamanan aplikasi Amplify Anda, domain amplifyapp.com terdaftar di Daftar Akhiran Publik (PSL).](https://publicsuffix.org/)* Untuk keamanan lebih lanjut, kami menyarankan Anda menggunakan cookie dengan `__Host-` awalan jika Anda perlu mengatur cookie sensitif di nama domain default untuk aplikasi Amplify Anda. Praktik ini akan membantu mempertahankan domain Anda dari upaya pemalsuan permintaan lintas situs (CSRF). Untuk informasi selengkapnya, lihat halaman [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) di Jaringan Pengembang Mozilla.

## Langkah 2: Buat backend
<a name="step-2-create-backend"></a>

Sekarang setelah Anda menerapkan aplikasi frontend ke Amplify Hosting, Anda dapat membuat backend. Gunakan petunjuk berikut untuk membuat backend dengan database sederhana dan titik akhir GraphQL API.

**Untuk membuat backend**

1. Masuk ke Konsol Manajemen AWS dan buka konsol [Amplify](https://console.aws.amazon.com/amplify/).

1. Pada halaman **Semua aplikasi**, pilih aplikasi yang Anda buat di *Langkah 1*.

1. Di beranda aplikasi, pilih tab **Lingkungan Backend**, lalu pilih **Memulai**. Ini memulai proses penyiapan untuk lingkungan **pementasan** default.

1. Setelah penyiapan selesai, pilih **Launch Studio** untuk mengakses lingkungan backend **pementasan** di Amplify Studio.

Amplify Studio adalah antarmuka visual untuk membuat dan mengelola backend Anda dan mempercepat pengembangan UI frontend Anda. Untuk informasi selengkapnya tentang Amplify Studio, lihat dokumentasi [Amplify](https://docs.amplify.aws/gen1/react/tools/console/) Studio.

Gunakan petunjuk berikut untuk membuat database sederhana menggunakan antarmuka pembuat backend visual Amplify Studio.

**Buat model data**

1. Di halaman beranda untuk lingkungan **pementasan** aplikasi Anda, pilih **Buat model data**. Ini membuka perancang model data.

1. Pada halaman **Pemodelan data**, pilih **Tambah model**.

1. Untuk judul, masukkan**Todo**.

1. Pilih **Tambahkan bidang**.

1. Untuk **nama Field**, masukkan**Description**.

   Screenshot berikut adalah contoh bagaimana model data Anda akan terlihat di desainer.  
![Amplify Studio UI untuk membuat model data.](http://docs.aws.amazon.com/id_id/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

1. Pilih **Simpan dan Terapkan**.

1. Kembali ke konsol Amplify Hosting dan penerapan lingkungan **pementasan** akan berlangsung.

Selama penerapan, Amplify Studio membuat semua resource yang AWS diperlukan di backend, termasuk AWS AppSync GraphQL API untuk mengakses data dan tabel Amazon DynamoDB untuk meng-host item Todo. Amplify digunakan CloudFormation untuk menyebarkan backend Anda, yang memungkinkan Anda menyimpan definisi backend Anda sebagai. infrastructure-as-code

## Langkah 3: Hubungkan backend ke frontend
<a name="step-3-connect-backend-to-frontend"></a>

Sekarang Anda telah menerapkan frontend dan membuat backend cloud yang berisi model data, Anda harus menghubungkannya. Gunakan petunjuk berikut untuk menarik definisi backend Anda ke project aplikasi lokal Anda dengan Amplify CLI.

**Untuk menghubungkan backend cloud ke frontend lokal**

1. Buka jendela terminal dan arahkan ke direktori root proyek lokal Anda.

1. Jalankan perintah berikut di jendela terminal, ganti teks merah dengan ID aplikasi unik dan nama lingkungan backend untuk proyek Anda.

   ```
   amplify pull --appId {{abcd1234}} --envName {{staging}}
   ```

1. Ikuti petunjuk di jendela terminal untuk menyelesaikan pengaturan proyek.

Sekarang Anda dapat mengonfigurasi proses pembuatan untuk menambahkan backend ke alur kerja penerapan berkelanjutan. Gunakan petunjuk berikut untuk menghubungkan cabang frontend dengan backend di konsol Amplify Hosting.

**Untuk menghubungkan cabang aplikasi frontend dan backend cloud**

1. Di beranda aplikasi, pilih tab **Lingkungan hosting**.

1. Temukan cabang **utama** dan pilih **Edit**.  
![Lokasi tautan Edit untuk cabang di konsol Amplify.](http://docs.aws.amazon.com/id_id/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

1. Di jendela **Edit backend target**, untuk **Lingkungan**, pilih nama backend yang akan dihubungkan. *Dalam contoh ini, pilih backend **pementasan** yang Anda buat di Langkah 2.* 

   Secara default, tumpukan penuh CI/CD diaktifkan. Hapus centang opsi ini untuk mematikan tumpukan penuh CI/CD untuk backend ini. Mematikan tumpukan penuh CI/CD menyebabkan aplikasi berjalan dalam mode *tarik saja*. Pada waktu build, Amplify secara otomatis akan menghasilkan file `aws-exports.js` saja, tanpa memodifikasi lingkungan backend Anda.

1. Selanjutnya, Anda harus menyiapkan peran layanan untuk memberikan Amplify izin yang diperlukan untuk membuat perubahan pada backend aplikasi Anda. Anda dapat menggunakan peran layanan yang ada atau membuat yang baru. Untuk petunjuk, lihat [Menambahkan peran layanan dengan izin untuk menyebarkan sumber daya backend](amplify-service-role.md).

1. **Setelah menambahkan peran layanan, kembali ke jendela **backend Edit target** dan pilih Simpan.**

1. Untuk menyelesaikan menghubungkan backend **pementasan** ke cabang **utama** aplikasi frontend, lakukan build baru proyek Anda.

   Lakukan salah satu tindakan berikut:
   + Dari repositori git Anda, tekan beberapa kode untuk memulai build di konsol Amplify.
   + Di konsol Amplify, navigasikan ke halaman detail build aplikasi dan pilih **Redeploy** versi ini.

## Langkah selanjutnya
<a name="next-steps-set-up-feature-branch-deployments"></a>

### Siapkan penerapan cabang fitur
<a name="set-up-feature-branch-deployments"></a>

Ikuti rekomendasi alur kerja kami untuk [mengatur deployment cabang fitur dengan beberapa lingkungan backend](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments).

### Buat UI frontend di Amplify Studio
<a name="create-studio-ui-components"></a>

Gunakan Studio untuk membangun UI frontend Anda dengan satu set komponen ready-to-use UI, lalu sambungkan ke backend aplikasi Anda. *Untuk informasi dan tutorial selengkapnya, lihat panduan pengguna untuk [Amplify Studio di Dokumentasi Amplify](https://docs.amplify.aws/gen1/react/tools/console/) Framework.*