Amazon CodeCatalyst tidak lagi terbuka untuk pelanggan baru. Pelanggan yang sudah ada dapat terus menggunakan layanan ini seperti biasa. Lihat informasi yang lebih lengkap di [Cara bermigrasi dari CodeCatalyst](migration.md).
Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Tutorial: Membuat dan memperbarui aplikasi React
Sebagai penulis cetak biru, Anda dapat mengembangkan dan menambahkan cetak biru khusus ke katalog cetak biru ruang Anda. Cetak biru ini kemudian dapat digunakan oleh anggota ruang untuk membuat proyek baru atau menambahkannya ke proyek yang ada. Anda dapat terus membuat perubahan pada cetak biru Anda yang kemudian tersedia sebagai pembaruan melalui permintaan tarik.
Tutorial ini memberikan panduan dari perspektif penulis cetak biru dan perspektif pengguna cetak biru. Tutorial ini menunjukkan cara membuat cetak biru aplikasi web satu halaman React. Cetak biru tersebut kemudian digunakan untuk membuat proyek baru. Ketika cetak biru diperbarui dengan perubahan, proyek yang dibuat dari cetak biru menggabungkan perubahan tersebut melalui permintaan tarik.
**Topics**
+ [Prasyarat](#blueprint-getting-started-prerequisites)
+ [Langkah 1: Buat cetak biru khusus](#react-bluprint-tutorial-create-bp)
+ [Langkah 2: Lihat alur kerja rilis](#blueprint-getting-started-view-workflow)
+ [Langkah 3: Tambahkan cetak biru ke katalog](#blueprint-getting-started-add-to-catalog)
+ [Langkah 4: Buat proyek dengan cetak biru](#blueprint-getting-started-create-project)
+ [Langkah 5: Perbarui cetak biru](#blueprint-getting-started-update-blueprint)
+ [Langkah 6: Perbarui versi katalog cetak biru yang diterbitkan ke versi baru](#blueprint-getting-started-update-catalog-version)
+ [Langkah 7: Perbarui proyek dengan versi cetak biru baru](#blueprint-getting-started-update-project)
+ [Langkah 8: Lihat perubahan dalam proyek](#blueprint-getting-started-view-changes)
## Prasyarat
Untuk membuat dan memperbarui cetak biru kustom, Anda harus telah menyelesaikan tugas sebagai berikut: [Siapkan dan masuk ke CodeCatalystSiapkan dan masuk ke CodeCatalyst](setting-up-topnode.md)
+ Memiliki ID AWS Pembangun untuk masuk CodeCatalyst.
+ Milik ruang dan memiliki **administrator Space** atau peran **pengguna Power** yang ditetapkan untuk Anda di ruang itu. Lihat informasi selengkapnya di [Membuat ruang](spaces-create.md), [Memberikan izin ruang kepada pengguna](spaces-members.md), dan [Peran administrator ruang](ipa-role-types.md#ipa-role-space-admin).
## Langkah 1: Buat cetak biru khusus
Saat Anda membuat cetak biru kustom, sebuah CodeCatalyst proyek dibuat yang berisi kode sumber cetak biru dan alat pengembangan serta sumber daya Anda. Proyek Anda adalah tempat Anda akan mengembangkan, menguji, dan menerbitkan cetak biru.
1. Buka CodeCatalyst konsol di [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Di CodeCatalyst konsol, arahkan ke ruang tempat Anda ingin membuat cetak biru.
1. Pilih **Pengaturan** untuk menavigasi ke pengaturan ruang.
1. **Di tab **Pengaturan ruang**, pilih **Blueprints dan pilih Create blueprint**.**
1. Perbarui bidang di wizard pembuatan cetak biru dengan nilai berikut:
+ Dalam **nama Blueprint**, masukkan. `react-app-blueprint`
+ Di **Nama Tampilan Blueprint**, masukkan. `react-app-blueprint`
1. Secara opsional, pilih **Lihat kode** untuk melihat pratinjau kode sumber cetak biru untuk cetak biru Anda. Demikian juga, pilih **Lihat alur kerja** untuk melihat alur kerja yang akan dibuat dalam proyek yang membangun dan menerbitkan cetak biru.
1. Pilih **Buat cetak biru**.
1. Setelah cetak biru Anda dibuat, Anda akan dibawa ke proyek cetak biru. Proyek ini berisi kode sumber cetak biru, bersama dengan alat dan sumber daya yang Anda butuhkan untuk mengembangkan, menguji, dan mempublikasikan cetak biru. Alur kerja rilis dibuat dan secara otomatis mempublikasikan cetak biru Anda ke ruang.
1. Sekarang proyek cetak biru dan cetak biru Anda dibuat, langkah selanjutnya adalah mengkonfigurasinya dengan memperbarui kode sumber. Anda dapat menggunakan Dev Environments untuk membuka dan mengedit repositori sumber Anda langsung di browser Anda.
Di panel navigasi, pilih **Kode**, lalu pilih Lingkungan **Dev**.
1. Pilih **Create Dev Environment** dan kemudian pilih **AWS Cloud9 (di browser)**.
1. Pertahankan pengaturan default dan pilih **Buat**.
1. Di AWS Cloud9 terminal, navigasikan ke direktori proyek cetak biru Anda dengan menjalankan perintah berikut:
```
cd react-app-blueprint
```
1. `static-assets`Folder dibuat dan diisi secara otomatis saat cetak biru dibuat. Dalam tutorial ini, Anda akan menghapus folder default dan menghasilkan yang baru untuk cetak biru aplikasi reaksi.
Hapus folder static-assets dengan menjalankan perintah berikut:
```
rm -r static-assets
```
AWS Cloud9 dibangun di atas platform berbasis Linux. Jika Anda menggunakan sistem operasi Windows, Anda dapat menggunakan perintah berikut sebagai gantinya:
```
rmdir /s /q static-assets
```
1. Sekarang folder default dihapus, buat `static-assets` folder untuk cetak biru aplikasi reaksi dengan menjalankan perintah berikut:
```
npx create-react-app static-assets
```
Jika diminta, masukkan `y` untuk melanjutkan.
Aplikasi reaksi baru dibuat di `static-assets` folder dengan paket yang diperlukan. Perubahan perlu didorong ke repositori CodeCatalyst sumber jarak jauh Anda.
1. Pastikan Anda memiliki perubahan terbaru, lalu komit dan dorong perubahan ke repositori CodeCatalyst sumber cetak biru dengan menjalankan perintah berikut:
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Saat perubahan didorong ke repositori sumber cetak biru, alur kerja rilis dimulai secara otomatis. Alur kerja ini menambah versi cetak biru, membangun cetak biru, dan menerbitkannya ke ruang Anda. Pada langkah berikutnya, Anda akan menavigasi ke alur kerja rilis untuk melihat bagaimana kinerjanya.
## Langkah 2: Lihat alur kerja rilis
1. **Di CodeCatalyst konsol, di panel navigasi, pilih **CI/CD, lalu pilih Alur** kerja.**
1. Pilih alur kerja **blueprint-release**.
1. Anda dapat melihat alur kerja memiliki tindakan untuk membangun dan mempublikasikan cetak biru.
1. Di bawah **Lari terbaru**, pilih tautan jalankan alur kerja untuk melihat proses dari perubahan kode yang Anda buat.
1. Setelah proses selesai, versi cetak biru baru Anda diterbitkan. Versi cetak biru yang dipublikasikan dapat dilihat di **Pengaturan** ruang Anda, tetapi tidak dapat digunakan dalam proyek hingga ditambahkan ke katalog cetak biru ruang. Pada langkah berikutnya, Anda akan menambahkan cetak biru ke katalog.
## Langkah 3: Tambahkan cetak biru ke katalog
Menambahkan cetak biru ke katalog cetak biru ruang membuat cetak biru tersedia untuk digunakan di semua proyek dalam satu ruang. Anggota luar angkasa dapat menggunakan cetak biru untuk membuat proyek baru atau menambahkannya ke proyek yang ada.
1. Di CodeCatalyst konsol, navigasikan kembali ke ruang.
1. Pilih **Pengaturan**, lalu pilih **Blueprints**.
1. Pilih **react-app-blueprint**, lalu pilih **Tambahkan ke katalog**.
1. Pilih **Simpan**.
## Langkah 4: Buat proyek dengan cetak biru
Sekarang cetak biru ditambahkan ke katalog, itu dapat digunakan dalam proyek. Pada langkah ini, Anda akan membuat proyek dengan cetak biru yang baru saja Anda buat. Pada langkah selanjutnya, Anda akan memperbarui proyek ini dengan memperbarui dan menerbitkan versi baru cetak biru.
1. Pilih tab **Projects** dan kemudian pilih **Create project**.
1. Pilih **Blueprints Space**, lalu pilih. **react-app-blueprint**
**catatan**
Setelah cetak biru dipilih, Anda dapat melihat isi file cetak biru. `README.md`
1. Pilih **Berikutnya**.
1.
**catatan**
Isi wizard pembuatan proyek ini dapat dikonfigurasi dalam cetak biru.
Masukkan nama proyek sebagai pengguna cetak biru. Untuk tutorial ini, masukkan `react-app-project`. Untuk informasi selengkapnya, lihat [Mengembangkan cetak biru khusus untuk memenuhi persyaratan proyek](develop-bp.md).
Selanjutnya, Anda akan membuat pembaruan ke cetak biru dan menambahkan versi baru ke katalog, yang akan Anda gunakan untuk memperbarui proyek ini.
## Langkah 5: Perbarui cetak biru
Setelah cetak biru digunakan untuk membuat proyek baru atau diterapkan pada proyek yang ada, Anda dapat terus membuat pembaruan sebagai penulis cetak biru. Pada langkah ini, Anda akan membuat perubahan pada cetak biru dan secara otomatis menerbitkan versi baru ke ruang. Versi baru kemudian dapat ditambahkan sebagai versi katalog.
1. Arahkan ke **react-app-blueprint**proyek yang dibuat di[Tutorial: Membuat dan memperbarui aplikasi React](#blueprint-getting-started-tutorial).
1. Buka Lingkungan Pengembang yang dibuat di[Tutorial: Membuat dan memperbarui aplikasi React](#blueprint-getting-started-tutorial).
1. Di panel navigasi, pilih **Kode**, lalu pilih Lingkungan **Dev**.
1. Dari tabel, temukan Lingkungan Dev, lalu pilih **Buka di AWS Cloud9 (di browser)**.
1. Ketika alur kerja rilis cetak biru dijalankan, itu menambah versi cetak biru dengan memperbarui file. `package.json` Tarik perubahan itu dengan menjalankan perintah berikut di AWS Cloud9 terminal:
```
git pull
```
1. Arahkan ke `static-assets` folder dengan menjalankan perintah berikut:
```
cd /projects/react-app-blueprint/static-assets
```
1. Buat `hello-world.txt` file dalam `static-assets` folder dengan menjalankan perintah berikut:
```
touch hello-world.txt
```
AWS Cloud9 dibangun di atas platform berbasis Linux. Jika Anda menggunakan sistem operasi Windows, Anda dapat menggunakan perintah berikut sebagai gantinya:
```
echo > hello-world.text
```
1. Di navigasi sebelah kiri, klik dua kali `hello-world.txt` file untuk membukanya di editor, dan tambahkan konten berikut:
```
Hello, world!
```
Simpan file tersebut.
1. Pastikan Anda memiliki perubahan terbaru, lalu komit dan dorong perubahan ke repositori CodeCatalyst sumber cetak biru dengan menjalankan perintah berikut:
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
Mendorong perubahan memulai alur kerja rilis, yang secara otomatis akan mempublikasikan versi baru cetak biru ke ruang.
## Langkah 6: Perbarui versi katalog cetak biru yang diterbitkan ke versi baru
Setelah cetak biru digunakan untuk membuat proyek baru atau diterapkan pada proyek yang ada, Anda masih dapat memperbarui cetak biru sebagai penulis cetak biru. Pada langkah ini, Anda akan membuat perubahan pada cetak biru dan mengubah versi katalog cetak biru.
1. Di CodeCatalyst konsol, navigasikan kembali ke ruang.
1. Pilih **Pengaturan**, lalu pilih **Blueprints**.
1. Pilih **react-app-blueprint**, lalu pilih **Kelola versi katalog**.
1. Pilih versi baru, lalu pilih **Simpan**.
## Langkah 7: Perbarui proyek dengan versi cetak biru baru
Versi baru sekarang tersedia di katalog cetak biru ruang angkasa. Sebagai pengguna cetak biru, Anda dapat memperbarui versi untuk proyek yang dibuat di. [Langkah 4: Buat proyek dengan cetak biru](#blueprint-getting-started-create-project) Ini memastikan Anda memiliki perubahan dan perbaikan terbaru yang diperlukan untuk memenuhi praktik terbaik.
1. Di CodeCatalyst konsol, navigasikan ke **react-app-project**proyek yang dibuat di[Langkah 4: Buat proyek dengan cetak biru](#blueprint-getting-started-create-project).
1. Di panel navigasi, pilih **Cetak biru**.
1. Pilih **Perbarui cetak biru di kotak** info.
1. Di panel **perubahan Kode** sisi kanan, Anda dapat melihat `hello-world.txt` dan `package.json` memperbarui.
1. Pilih **Terapkan pembaruan**.
Memilih **Terapkan pembaruan** akan membuat permintaan tarik dalam proyek dengan perubahan dari versi cetak biru yang diperbarui. Untuk membuat pembaruan pada proyek, Anda harus menggabungkan permintaan tarik. Untuk informasi selengkapnya, silakan lihat [Meninjau permintaan pull](pull-requests-review.md) dan [Menggabungkan permintaan penarikan](pull-requests-merge.md).
1. Di tabel **Blueprints**, temukan cetak biru. Di kolom **Status**, pilih **Permintaan tarik tertunda**, lalu pilih tautan ke permintaan tarik terbuka.
1. Tinjau permintaan tarik, lalu pilih **Gabung**.
1. Pilih **Fast forward merge** untuk mempertahankan nilai default, lalu pilih **Merge**.
## Langkah 8: Lihat perubahan dalam proyek
Perubahan pada cetak biru sekarang tersedia di proyek Anda setelahnya. [Langkah 7: Perbarui proyek dengan versi cetak biru baru](#blueprint-getting-started-update-project) Sebagai pengguna cetak biru, Anda dapat melihat perubahan di repositori sumber.
1. Di panel navigasi, pilih **Repositori sumber**, lalu pilih nama repositori sumber yang dibuat saat proyek dibuat.
1. Di bawah **File**, Anda dapat melihat `hello-world.txt` file yang dibuat di file[Langkah 5: Perbarui cetak biru](#blueprint-getting-started-update-blueprint).
1. Pilih `hello-world.txt` untuk melihat konten file.
Manajemen siklus hidup memberi penulis cetak biru kemampuan mengelola siklus hidup pengembangan perangkat lunak secara terpusat dari setiap proyek yang berisi cetak biru tertentu. Seperti yang terlihat dalam tutorial ini, Anda dapat mendorong pembaruan ke cetak biru yang kemudian dapat digabungkan oleh proyek yang menggunakan cetak biru untuk membuat proyek baru atau menerapkannya pada proyek yang sudah ada. Untuk informasi selengkapnya, lihat [Bekerja dengan manajemen siklus hidup sebagai penulis cetak biru](lifecycle-management-dev.md).