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.

Prasyarat

Untuk membuat dan memperbarui cetak biru kustom, Anda harus telah menyelesaikan tugas sebagai berikut: Siapkan dan masuk ke CodeCatalyst

• 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 Menciptakan ruang, Memberikan izin ruang kepada pengguna, dan Peran administrator ruang.

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/.

2. Di CodeCatalyst konsol, arahkan ke ruang tempat Anda ingin membuat cetak biru.

3. Pilih Pengaturan untuk menavigasi ke pengaturan ruang.

4. Di tab Pengaturan ruang, pilih Blueprints dan pilih Create blueprint.

5. 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

6. 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.

7. Pilih Buat cetak biru.

8. 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.

9. 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.

10. Pilih Create Dev Environment dan kemudian pilih AWS Cloud9 (di browser).

11. Pertahankan pengaturan default dan pilih Buat.

12. Di AWS Cloud9 terminal, navigasikan ke direktori proyek cetak biru Anda dengan menjalankan perintah berikut:

    cd react-app-blueprint

13. static-assetsFolder 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

14. 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.

15. 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.

2. Pilih alur kerja blueprint-release.

3. Anda dapat melihat alur kerja memiliki tindakan untuk membangun dan mempublikasikan cetak biru.

4. Di bawah Lari terbaru, pilih tautan jalankan alur kerja untuk melihat proses dari perubahan kode yang Anda buat.

5. 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.

2. Pilih Pengaturan, lalu pilih Blueprints.

3. Pilih react-app-blueprint, lalu pilih Tambahkan ke katalog.

4. 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.

2. Pilih Blueprints Space, lalu pilih. react-app-blueprint

   catatan

   Setelah cetak biru dipilih, Anda dapat melihat isi file cetak biru. README.md

3. Pilih Selanjutnya.

4. 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.

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-blueprintproyek yang dibuat diTutorial: Membuat dan memperbarui aplikasi React.

2. Buka Lingkungan Pengembang yang dibuat diTutorial: Membuat dan memperbarui aplikasi React.

   1. Di panel navigasi, pilih Kode, lalu pilih Lingkungan Dev.

   2. Dari tabel, temukan Lingkungan Dev, lalu pilih Buka di AWS Cloud9 (di browser).

3. 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

4. Arahkan ke static-assets folder dengan menjalankan perintah berikut:

   cd /projects/react-app-blueprint/static-assets

5. 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

6. Di navigasi sebelah kiri, klik dua kali hello-world.txt file untuk membukanya di editor, dan tambahkan konten berikut:

   Hello, world!

   Simpan file tersebut.

7. 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.

2. Pilih Pengaturan, lalu pilih Blueprints.

3. Pilih react-app-blueprint, lalu pilih Kelola versi katalog.

4. 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 Ini memastikan Anda memiliki perubahan dan perbaikan terbaru yang diperlukan untuk memenuhi praktik terbaik.

1. Di CodeCatalyst konsol, navigasikan ke react-app-projectproyek yang dibuat diLangkah 4: Buat proyek dengan cetak biru.

2. Di panel navigasi, pilih Cetak biru.

3. Pilih Perbarui cetak biru di kotak info.

4. Di panel perubahan Kode sisi kanan, Anda dapat melihat hello-world.txt dan package.json memperbarui.

5. 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, lihat Meninjau permintaan tarik dan Menggabungkan permintaan tarik.

1. Di tabel Blueprints, temukan cetak biru. Di kolom Status, pilih Permintaan tarik tertunda, lalu pilih tautan ke permintaan tarik terbuka.

2. Tinjau permintaan tarik, lalu pilih Gabung.

3. 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 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.

2. Di bawah File, Anda dapat melihat hello-world.txt file yang dibuat di fileLangkah 5: Perbarui cetak biru.

3. 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.