Memulai dengan repositori CodeCatalyst sumber dan cetak biru Single-page aplikasi

Ikuti langkah-langkah dalam tutorial ini untuk mempelajari cara bekerja dengan repositori sumber di Amazon CodeCatalyst.

Cara tercepat untuk mulai bekerja dengan repositori sumber di Amazon CodeCatalyst adalah dengan membuat proyek menggunakan template. Saat Anda membuat proyek menggunakan template, sumber daya dibuat untuk Anda, termasuk repositori sumber yang menyertakan kode sampel. Anda dapat menggunakan repositori dan contoh kode ini untuk mempelajari cara:

• Melihat repositori sumber proyek dan menelusuri isinya

• Buat Lingkungan Pengembang dengan cabang baru tempat Anda dapat mengerjakan kode

• Ubah file, dan komit dan dorong perubahan Anda

• Buat permintaan tarik dan tinjau perubahan kode Anda dengan anggota proyek lainnya

• Lihat alur kerja untuk proyek Anda secara otomatis membangun dan menguji perubahan di cabang sumber permintaan tarik

• Gabungkan perubahan Anda dari cabang sumber Anda ke cabang tujuan dan tutup permintaan tarik

• Lihat perubahan gabungan yang dibuat dan diterapkan secara otomatis

Untuk mendapatkan hasil maksimal dari tutorial ini, undang orang lain ke proyek Anda sehingga Anda dapat bekerja sama pada permintaan tarik. Anda juga dapat menjelajahi fitur tambahan di CodeCatalyst, seperti membuat masalah dan mengaitkannya dengan permintaan tarik, atau mengonfigurasi notifikasi dan mendapatkan peringatan saat alur kerja terkait berjalan. Untuk eksplorasi lengkap CodeCatalyst, lihatMemulai tutorial.

Membuat proyek dengan cetak biru

Membuat proyek adalah langkah pertama untuk dapat bekerja sama. Anda dapat menggunakan cetak biru untuk membuat proyek Anda, yang juga akan membuat repositori sumber dengan kode sampel dan alur kerja yang secara otomatis akan membangun dan menerapkan kode Anda saat Anda mengubahnya. Dalam tutorial ini, kami akan memandu Anda melalui proyek yang dibuat dengan cetak biru Single-page aplikasi, tetapi Anda dapat mengikuti prosedur untuk proyek apa pun dengan repositori sumber. Pastikan untuk memilih peran IAM atau menambahkan peran IAM jika Anda tidak memilikinya sebagai bagian dari pembuatan proyek. Kami menyarankan Anda menggunakan peran CodeCatalystWorkflowDevelopmentRole- spaceName layanan untuk proyek ini.

Jika Anda sudah memiliki proyek, Anda dapat melompat ke depanMelihat repositori untuk proyek.

catatan

Hanya pengguna dengan peran administrator ruang atau pengguna Power yang dapat membuat proyek di CodeCatalyst. Jika Anda tidak memiliki peran ini dan Anda memerlukan proyek untuk dikerjakan untuk tutorial ini, mintalah seseorang dengan salah satu peran ini untuk membuat proyek untuk Anda dan menambahkan Anda ke proyek yang dibuat. Untuk informasi selengkapnya, lihat Memberikan akses dengan peran pengguna.

Untuk membuat proyek dengan cetak biru

1. Di CodeCatalyst konsol, navigasikan ke ruang tempat Anda ingin membuat proyek.

2. Pada dasbor ruang, pilih Buat proyek.

3. Pilih Mulai dengan cetak biru.

   Tip

   Anda dapat memilih untuk menambahkan cetak biru dengan memberikan Amazon Q persyaratan proyek Anda agar Amazon Q menyarankan cetak biru kepada Anda. Untuk informasi selengkapnya, lihat Menggunakan Amazon Q untuk memilih cetak biru saat membuat proyek atau menambahkan fungsionalitas dan Praktik terbaik saat menggunakan Amazon Q untuk membuat proyek atau menambahkan fungsionalitas dengan cetak biru. Fitur ini hanya tersedia di Wilayah AS Barat (Oregon).

   Fungsionalitas ini mengharuskan fitur AI generatif diaktifkan untuk ruang tersebut. Untuk informasi selengkapnya, lihat M engelola fitur AI generatif.

4. Dari tab CodeCatalyst cetak biru atau cetak biru ruang, pilih cetak biru, lalu pilih Berikutnya.

5. Di bawah Nama proyek Anda, masukkan nama yang ingin Anda tetapkan untuk proyek Anda dan nama sumber daya yang terkait. Nama harus unik di ruang Anda.

6. (Opsional) Secara default, kode sumber yang dibuat oleh cetak biru disimpan dalam CodeCatalyst repositori. Atau, Anda dapat memilih untuk menyimpan kode sumber cetak biru di repositori pihak ketiga. Untuk informasi selengkapnya, lihat Tambahkan fungsionalitas ke proyek dengan ekstensi di CodeCatalyst.

   penting

   CodeCatalyst tidak mendukung deteksi perubahan di cabang default untuk repositori tertaut. Untuk mengubah cabang default untuk repositori tertaut, Anda harus terlebih dahulu memutuskan tautannya dari CodeCatalyst, mengubah cabang default, dan kemudian menautkannya lagi. Untuk informasi selengkapnya, lihat Menghubun GitHub gkan repositori, repositori Bitbucket, repositori GitLab proyek, dan proyek Jira di CodeCatalyst.

   Sebagai praktik terbaik, selalu pastikan Anda memiliki versi terbaru ekstensi sebelum Anda menautkan repositori.

   Lakukan salah satu hal berikut tergantung pada penyedia repositori pihak ketiga yang ingin Anda gunakan:

   • GitHub repositori: Hubungkan GitHub akun.

     Pilih menu tar ik-turun lanjutan, pilih GitHub sebagai penyedia repositori, lalu pilih GitHub akun tempat Anda ingin menyimpan kode sumber yang dibuat oleh cetak biru.

     catatan

     Jika Anda menghubungkan GitHub akun, Anda harus membuat koneksi pribadi untuk membuat pemetaan identitas antara CodeCatalyst identitas dan GitHub identitas Anda. Untuk informasi selengkapnya, lihat Koneksi pribadi dan Mengakses GitHub sumber daya dengan koneksi pribadi.

   • Repositori Bitbucket: Hubungkan ruang kerja Bitbucket.

     Pilih menu tar ik-turun Lanjutan, pilih Bitbucket sebagai penyedia repositori, lalu pilih ruang kerja Bitbucket tempat Anda ingin menyimpan kode sumber yang dibuat oleh cetak biru.

   • GitLab repositori: Hubungkan GitLab pengguna.

     Pilih menu tar ik-turun lanjutan, pilih GitLab sebagai penyedia repositori, lalu pilih GitLab pengguna tempat Anda ingin menyimpan kode sumber yang dibuat oleh cetak biru.

7. Di bawah Sumber daya proyek, konfigurasikan parameter cetak biru. Tergantung pada cetak biru, Anda mungkin memiliki opsi untuk memberi nama sumber repositori.

8. (Opsional) Untuk melihat file definisi dengan pembaruan berdasarkan pilihan parameter proyek yang Anda buat, pilih Lihat kode atau Lihat alur kerja dari Buat pratinjau proyek.

9. (Opsional) Pilih Lihat detail dari kartu cetak biru untuk melihat detail spesifik tentang cetak biru, seperti ikhtisar arsitektur cetak biru, koneksi dan izin yang diperlukan, dan jenis sumber daya yang dibuat oleh cetak biru.

10. Pilih Buat proyek.

Halaman ikhtisar proyek terbuka segera setelah Anda membuat proyek atau menerima undangan ke proyek dan menyelesaikan proses masuk. Halaman ikhtisar proyek untuk proyek baru tidak berisi masalah terbuka atau permintaan tarik. Anda dapat secara opsional memilih untuk membuat masalah dan menetapkannya untuk diri sendiri. Anda juga dapat memilih untuk mengundang orang lain ke proyek Anda. Untuk informasi selengkapnya, lihat Membuat masalah di CodeCatalyst dan Mengundang pengguna ke proyek.

Melihat repositori untuk proyek

Sebagai anggota proyek, Anda dapat melihat repositori sumber untuk proyek tersebut. Anda juga dapat memilih untuk membuat repositori tambahan. Jika seseorang dengan peran administrator Space telah menginstal dan mengonfigurasi repositori, GitHub repositori Bitbucket, atau ekstensi GitLab repositori, Anda juga dapat menambahkan tautan ke repositori pihak ketiga di GitHub akun, ruang kerja Bitbucket, atau pengguna yang dikonfigurasi untuk ekstensi. GitLab Untuk informasi selengkapnya, lihat Membuat repositori sumber dan Mulai cepat: Menginstal ekstensi, menghubungkan penyedia, dan menautkan sumber daya di CodeCatalyst.

catatan

Untuk proyek yang dibuat dengan cetak biru Single-page aplikasi, nama default untuk repositori sumber yang berisi kode sampel adalah spa-app.

Untuk menavigasi ke repositori sumber untuk proyek

1. Arahkan ke proyek Anda, dan lakukan salah satu hal berikut:

   • Pada halaman ringkasan untuk proyek Anda, pilih repositori yang Anda inginkan dari daftar, lalu pilih Lihat repositori.

   • Di panel navigasi, pilih Kode, lalu pilih repositori Sumber. Di repositori Sumber, pilih nama repositori dari daftar. Anda dapat memfilter daftar repositori dengan mengetikkan bagian dari nama repositori di bilah filter.

2. Pada halaman beranda untuk repositori, lihat isi repositori dan informasi tentang sumber daya terkait seperti jumlah permintaan tarik dan alur kerja. Secara default, konten untuk cabang default ditampilkan. Anda dapat mengubah tampilan dengan memilih cabang yang berbeda dari daftar drop-down.

Halaman ikhtisar untuk repositori mencakup informasi tentang alur kerja dan permintaan tarik yang dikonfigurasi untuk cabang repositori ini dan file-file-nya. Jika Anda baru saja membuat proyek, alur kerja awal untuk membangun, menguji, dan menerapkan kode akan tetap berjalan, karena membutuhkan beberapa menit untuk menyelesaikannya. Anda dapat melihat alur kerja terkait dan statusnya dengan memilih nomor di bawah Alur kerja Terkait, tetapi ini membuka halaman Alur Kerja di. CI/CD Untuk tutorial ini, tetap di halaman ikhtisar dan jelajahi kode di repositori. Isi README.md file dirender pada halaman ini di bawah file repositori. Di File, isi cabang default ditampilkan. Anda dapat mengubah tampilan file untuk menampilkan konten cabang lain jika Anda memilikinya. F .codecatalyst older berisi kode yang digunakan untuk bagian lain dari proyek, seperti file YAML alur kerja.

Untuk melihat konten folder, pilih panah di sebelah nama folder untuk memperluasnya. Misalnya, pilih panah di sebelah src untuk melihat file untuk aplikasi web satu halaman yang terdapat dalam folder itu. Untuk melihat isi dari sebuah file, pilih file tersebut dari daftar. Ini akan membuka file Lihat, di mana Anda dapat menelusuri konten beberapa file. Anda juga dapat mengedit file tunggal di konsol, tetapi untuk mengedit beberapa file, Anda harus membuat Lingkungan Pengembang.

Membuat Lingkungan Pengembangan

Anda dapat menambahkan dan mengubah file dalam repositori sumber di CodeCatalyst konsol Amazon. Namun, untuk bekerja secara efektif dengan beberapa file dan cabang, sebaiknya gunakan Lingkungan Pengembang atau mengkloning repositori ke komputer lokal Anda. Dalam tutorial ini, kita akan membuat AWS Cloud9 Lingkungan Dev dengan cabang bernamadevelop. Anda dapat memilih nama cabang yang berbeda, tetapi dengan memberi nama cabangdevelop, alur kerja akan secara otomatis berjalan untuk membangun dan menguji kode Anda saat Anda membuat permintaan tarik nanti dalam tutorial ini.

Tip

Jika Anda memutuskan untuk mengkloning repositori secara lokal alih-alih atau selain menggunakan Lingkungan Dev, pastikan bahwa Anda memiliki Git di komputer lokal Anda atau bahwa IDE Anda menyertakan Git. Untuk informasi selengkapnya, lihat Menyiapkan untuk bekerja dengan repositori sumber.

Untuk membuat Lingkungan Pengembang dengan cabang baru

1. Buka CodeCatalyst konsol di https://codecatalyst.aws/.

2. Arahkan ke proyek tempat Anda ingin membuat Lingkungan Pengembang.

3. Pilih nama repositori dari daftar repositori sumber untuk proyek. Atau, di panel navigasi, pilih Kode, pilih repositori Sumber, dan pilih repositori yang ingin Anda buat Lingkungan Pengembang.

4. Pada halaman beranda repositori, pilih Buat Lingkungan Pengembang.

5. Pilih IDE yang didukung dari menu drop-down. Untuk informasi selengkapnya, lihat Lingkungan pengembangan terintegrasi yang didukung untuk Lingkungan Pengembang.

6. Pilih repositori yang akan dikloning, pilih Bek erja di cabang baru, masukkan nama cabang ke bidang Nama cabang, dan pilih cabang untuk membuat cabang baru dari menu drop-down Buat cabang dari.

7. Secara opsional, tambahkan alias untuk Lingkungan Dev.

8. Secara opsional, pilih tombol edit konfigurasi Lingkungan Dev untuk mengedit konfigurasi komputasi, penyimpanan, atau batas waktu Lingkungan Pengembang.

9. Pilih Buat. Saat Lingkungan Dev Anda sedang dibuat, kolom status Lingkungan Dev akan menampilkan Mulai, dan kolom status akan menampilkan Running setelah Lingkungan Dev dibuat. Tab baru akan terbuka dengan Lingkungan Dev Anda di IDE pilihan Anda. Anda dapat mengedit kode dan melakukan serta mendorong perubahan Anda.

Setelah Anda membuat Lingkungan Pengembang, Anda dapat mengedit file, melakukan perubahan, dan mendorong perubahan Anda ke test cabang. Untuk tutorial ini, edit konten antara <p> tag dalam App.tsx file di src folder untuk mengubah teks yang ditampilkan di halaman web. Lakukan dan dorong perubahan Anda, lalu kembali ke CodeCatalyst tab.

Untuk membuat dan mendorong perubahan dari AWS Cloud9 Lingkungan Pengembang

1. Di AWS Cloud9, perluas menu navigasi samping untuk menelusuri file. Perluassrc, dan bukaApp.tsx.

2. Buat perubahan teks di dalam <p> tag.

3. Simpan file, lalu komit dan dorong perubahan Anda dengan menggunakan menu Git. Atau, di jendela terminal, komit dan dorong perubahan Anda dengan git push perintah git commit dan.

   git commit -am "Making an example change"
   git push

   Tip

   Anda mungkin perlu mengubah direktori di terminal ke direktori repositori Git sebelum Anda berhasil menjalankan perintah Git.

Membuat permintaan pull

Anda dapat menggunakan permintaan tarik untuk meninjau perubahan kode secara kolaboratif untuk perubahan atau perbaikan kecil, penambahan fitur utama, atau versi baru perangkat lunak yang dirilis. Dalam tutorial ini, Anda akan membuat permintaan tarik untuk meninjau perubahan yang Anda buat pada test cabang dibandingkan dengan cabang utama. Membuat permintaan tarik dalam proyek yang dibuat dengan template juga akan memulai menjalankan alur kerja terkait, jika ada.

Untuk membuat permintaan tarik

1. Arahkan ke proyek Anda.

2. Lakukan salah satu tindakan berikut:

   • Di panel navigasi, pilih Kode, pilih Permintaan tarik, lalu pilih Buat permintaan tarik.

   • Pada halaman beranda repositori, pilih Lain nya, lalu pilih Buat permintaan tarik.

   • Pada halaman proyek, pilih Buat permintaan tarik.

3. Di repositori Sumber, pastikan bahwa repositori sumber yang ditentukan adalah yang berisi kode yang dikomit. Opsi ini hanya muncul jika Anda tidak membuat permintaan tarik dari halaman utama repositori.

4. Di cabang Tujuan, pilih cabang untuk menggabungkan kode setelah ditinjau.

5. Di cabang Sumber, pilih cabang yang berisi kode yang dikomit.

6. Di judul permintaan P ull, masukkan judul yang membantu pengguna lain memahami apa yang perlu ditinjau dan mengapa.

7. (Opsional) Dalam deskripsi permintaan tarik, berikan informasi seperti tautan ke masalah atau deskripsi perubahan Anda.

   Tip

   Anda dapat memilih T ulis deskripsi agar saya CodeCatalyst secara otomatis menghasilkan deskripsi perubahan yang terkandung dalam permintaan tarik. Anda dapat membuat perubahan pada deskripsi yang dibuat secara otomatis setelah Anda menambahkannya ke permintaan tarik.

   Fungsionalitas ini mengharuskan fitur AI generatif diaktifkan untuk ruang dan tidak tersedia untuk permintaan tarik di repositori tertaut. Untuk informasi selengkapnya, lihat M engelola fitur AI generatif.

8. (Opsional) Di Masalah, pilih Masalah tautan, lalu pilih masalah dari daftar atau masukkan ID-nya. Untuk memutuskan tautan masalah, pilih ikon putuskan tautan.

9. (Opsional) Di Pen injau wajib, pilih Tambahkan pengulas wajib. Pilih dari daftar anggota proyek untuk menambahkannya. Peninjau yang diperlukan harus menyetujui perubahan sebelum permintaan tarik dapat digabungkan ke cabang tujuan.

   catatan

   Anda tidak dapat menambahkan peninjau sebagai peninjau wajib dan peninjau opsional. Anda tidak dapat menambahkan diri Anda sebagai reviewer.

10. (Opsional) Di Pen injau opsional, pilih Tambahkan peninjau opsional. Pilih dari daftar anggota proyek untuk menambahkannya. Peninjau opsional tidak harus menyetujui perubahan sebagai persyaratan sebelum permintaan tarik dapat digabungkan ke cabang tujuan.

11. Tinjau perbedaan antar cabang. Perbedaan yang ditampilkan dalam permintaan tarik adalah perubahan antara revisi di cabang sumber dan basis penggabungan, yang merupakan komit kepala cabang tujuan pada saat permintaan tarik dibuat. Jika tidak ada perubahan yang ditampilkan, cabang mungkin identik, atau Anda mungkin telah memilih cabang yang sama untuk sumber dan tujuan.

12. Ketika Anda puas bahwa permintaan tarik berisi kode dan perubahan yang ingin Anda tinjau, pilih Buat.

    catatan

    Setelah Anda membuat permintaan tarik, Anda dapat menambahkan komentar. Komentar dapat ditambahkan ke permintaan tarik atau ke baris individu dalam file serta permintaan tarik keseluruhan. Anda dapat menambahkan tautan ke sumber daya, seperti file, dengan menggunakan tanda @ diikuti dengan nama file.

Anda dapat melihat informasi tentang alur kerja terkait yang dimulai dengan pembuatan permintaan tarik ini dengan memilih Ikh tis ar lalu meninjau informasi di area detail permintaan tarik di bawah Workflow run. Untuk melihat alur kerja yang dijalankan, pilih run.

Tip

Jika Anda menamai cabang Anda sesuatu selaindevelop, alur kerja tidak akan dijalankan secara otomatis untuk membangun dan menguji perubahan Anda. Jika Anda ingin mengonfigurasinya, edit file YAML untuk PullRequestBuildAndTest alur kerja aktif. Untuk informasi selengkapnya, lihat Membuat alur kerja.

Anda dapat mengomentari permintaan tarik ini dan meminta anggota proyek lain untuk mengomentarinya. Anda juga dapat memilih untuk menambahkan atau mengubah peninjau opsional atau wajib. Anda dapat memilih untuk membuat lebih banyak perubahan pada cabang sumber untuk repositori, dan melihat bagaimana perubahan yang dilakukan tersebut membuat revisi untuk permintaan tarik. Untuk informasi lebih lanjut, lihatMeninjau permintaan pull,Memperbarui permintaan penarikan,Meninjau kode dengan permintaan tarik di Amazon CodeCatalyst, danMelihat status dan detail alur kerja.

Menggabungkan permintaan penarikan

Setelah permintaan tarik ditinjau dan telah menerima persetujuan dari pengulas yang diperlukan, Anda dapat menggabungkan cabang sumbernya ke cabang tujuan di CodeCatalyst konsol. Menggabungkan permintaan tarik juga akan memulai menjalankan perubahan melalui alur kerja apa pun yang terkait dengan cabang tujuan. Dalam tutorial ini, Anda akan menggabungkan cabang pengujian menjadi main, yang akan memulai menjalankan al PushToMainDeployPipeline ur kerja.

Untuk menggabungkan permintaan tarik (konsol)

1. Di permintaan P ull, pilih permintaan tarik yang Anda buat di langkah sebelumnya. Dalam permintaan tarik, pilih Gab ung.

2. Pilih dari strategi penggabungan yang tersedia untuk permintaan tarik. Secara opsional pilih atau batalkan pilihan untuk menghapus cabang sumber setelah menggabungkan permintaan tarik, lalu pilih Gabung. Setelah penggabungan selesai, status permintaan tarik berubah menjadi Digabungkan dan tidak lagi muncul di tampilan default permintaan tarik. Tampilan default menunjukkan permintaan tarik dengan status Open. Anda masih dapat melihat permintaan tarik gabungan, tetapi Anda tidak dapat menyetujuinya atau mengubah statusnya.

   catatan

   Jika tombol Gabung tidak aktif, atau Anda melihat label Tidak dapat digabungkan, peninjau yang diperlukan belum menyetujui permintaan tarik, atau permintaan tarik tidak dapat digabungkan di CodeCatalyst konsol. Peninjau yang belum menyetujui permintaan tarik ditunjukkan oleh ikon jam di Ikhtis ar di area detail permintaan tarik. Jika semua peninjau yang diperlukan telah menyetujui permintaan tarik tetapi tombol Gab ungkan masih tidak aktif, Anda mungkin mengalami konflik penggabungan, atau Anda telah melampaui kuota penyimpanan untuk ruang tersebut. Anda dapat menyelesaikan konflik penggabungan untuk cabang tujuan di Lingkungan Pengembang, mendorong perubahan, lalu menggabungkan permintaan tarik, atau Anda dapat menyelesaikan konflik dan menggabungkan secara lokal, lalu mendorong komit yang berisi penggabungan ke CodeCatalyst. Untuk informasi selengkapnya, lihat Menggabungkan permintaan tarik (Git) dan dokumentasi Git Anda.

Melihat kode yang digunakan

Sekarang saatnya untuk melihat kode yang awalnya digunakan yang ada di cabang default, dan perubahan gabungan Anda setelah dibuat, diuji, dan diterapkan secara otomatis. Untuk melakukannya, Anda dapat kembali ke halaman ikhtisar untuk repositori dan memilih nomor di sebelah ikon alur kerja terkait, atau di panel navigasi, pilih CI/CD, lalu pilih Alur kerja.

Untuk melihat kode yang digunakan

1. Di Alu r kerja, dionPushToMainDeployPipeline, perluas Pen goperasian terbaru.

   catatan

   Ini adalah nama default alur kerja untuk proyek yang dibuat dengan cetak biru Single-page aplikasi.

2. Proses terbaru adalah yang dimulai oleh komit permintaan tarik gabungan Anda ke main cabang dan kemungkinan akan menampilkan status Sed ang berjalan. Pilih proses yang berhasil diselesaikan dari daftar untuk membuka detail proses itu.

3. Pilih Variabel. Salin nilai untuk AppURL. Ini adalah URL untuk aplikasi web halaman tunggal yang digunakan. Buka tab browser baru dan tempel nilainya untuk melihat kode yang dibuat dan digunakan. Biarkan tab terbuka.

4. Kembali ke daftar alur kerja yang dijalankan dan tunggu hingga proses terbaru selesai. Ketika itu terjadi, kembali ke tab yang Anda buka untuk melihat aplikasi web dan menyegarkan browser Anda. Anda akan melihat perubahan yang Anda buat dalam permintaan tarik gabungan.

Membersihkan sumber daya

Setelah Anda menjelajahi bekerja dengan repositori sumber dan permintaan tarik, Anda mungkin ingin menghapus sumber daya yang tidak Anda butuhkan. Anda tidak dapat menghapus permintaan tarik, tetapi Anda dapat menutupnya. Anda dapat menghapus cabang apa pun yang Anda buat.

Jika Anda tidak lagi memerlukan repositori sumber atau proyek, Anda juga dapat menghapus sumber daya tersebut. Lihat informasi yang lebih lengkap di Menghapus repositori sumber dan Menghapus proyek.