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.
# Memodifikasi fitur cetak biru dengan wizard front-end
Wizard pemilihan cetak biru aktif dibuat CodeCatalyst secara otomatis oleh `Options` antarmuka dalam file. `blueprint.ts` Wizard front-end mendukung modifikasi dan fitur cetak biru `Options` menggunakan komentar dan tag gaya [JSDOC](https://jsdoc.app/about-getting-started.html). Anda dapat menggunakan komentar dan tag gaya JSDOC untuk melakukan tugas. Misalnya, Anda dapat memilih teks yang ditampilkan di atas opsi, mengaktifkan fitur seperti validasi input, atau membuat opsi dapat dilipat. Wizard bekerja dengan menafsirkan pohon sintaks abstrak (AST) yang dihasilkan dari TypeScript tipe dari antarmuka. `Options` Wizard mengkonfigurasi dirinya sendiri secara otomatis ke jenis yang dijelaskan sebaik mungkin. Tidak semua jenis didukung. Jenis lain yang didukung termasuk pemilih wilayah dan pemilih lingkungan.
Berikut ini adalah contoh wizard yang menggunakan komentar dan tag JSDOC dengan cetak biru: `Options`
```
export interface Options {
/**
* What do you want to call your new blueprint?
* @validationRegex /^[a-zA-Z0-9_]+$/
* @validationMessage Must contain only upper and lowercase letters, numbers and underscores
*/
blueprintName: string;
/**
* Add a description for your new blueprint.
*/
description?: string;
/**
* Tags for your Blueprint:
* @collapsed true
*/
tags?: string[];
}
```
Nama tampilan setiap opsi `Options` antarmuka muncul secara `camelCase` default. Teks biasa dalam komentar gaya JSDOC ditampilkan sebagai teks di atas opsi di wizard.
**Topics**
+ [Tag yang didukung](#supported-tags-bp)
+ [TypeScript Jenis yang didukung](#supported-typescript-bp)
+ [Berkomunikasi dengan pengguna selama sintesis](#communication-mid-synthesis)
## Tag yang didukung
Tag JSDOC berikut didukung oleh cetak biru kustom di wizard front-end. `Options`
### @inlinePolicy. /path/to/policy/file.json
+ **Membutuhkan** - Opsi untuk menjadi tipe`Role`.
+ **Penggunaan** - Memungkinkan Anda mengkomunikasikan kebijakan inline yang dibutuhkan peran. `policy.json`Jalur tersebut diharapkan berada di bawah kode sumber. Gunakan tag ini saat Anda memerlukan kebijakan khusus untuk peran.
+ **Dependensi - `blueprint-cli 0.1.12` dan** di atas
+ **Contoh** - `@inlinePolicy ./deployment-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @inlinePolicy ./path/to/deployment-policy.json
*/
cdkRole: Role[];
};
};
```
### @trustPolicy. /path/to/policy/file.json
+ **Membutuhkan** - Opsi untuk menjadi tipe`Role`.
+ **Penggunaan** - Memungkinkan Anda mengomunikasikan kebijakan kepercayaan yang dibutuhkan peran. `policy.json`Jalur tersebut diharapkan berada di bawah kode sumber. Gunakan tag ini saat Anda memerlukan kebijakan khusus untuk peran.
+ **Dependensi - `blueprint-cli 0.1.12` dan** di atas
+ **Contoh** - `@trustPolicy ./trust-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @trustPolicy ./path/to/trust-policy.json
*/
cdkRole: Role[];
};
};
```
### Ekspresi @validationRegex Regex
+ **Membutuhkan** - Opsi untuk menjadi string.
+ **Penggunaan** - Melakukan validasi input pada opsi dengan menggunakan ekspresi dan tampilan regex yang diberikan. `@validationMessage`
+ **Contoh** - `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **Rekomendasi** - Gunakan dengan`@validationMessage`. Pesan validasi kosong secara default.
### @validationMessage string
+ **Memerlukan** - `@validationRegex` atau kesalahan lain untuk meninjau penggunaan.
+ **Penggunaan** - Menampilkan pesan validasi pada `@validation*` kegagalan.
+ **Contoh** -`@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`.
+ **Rekomendasi** - Gunakan dengan`@validationMessage`. Pesan validasi kosong secara default.
### @collapsed boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Boolean yang memungkinkan suboption untuk dilipat. Jika anotasi yang diciutkan hadir, nilai defaultnya adalah true. Mengatur nilai untuk `@collapsed false` membuat bagian yang dapat dilipat yang awalnya terbuka.
+ **Contoh** - `@collapsed true`
### @displayName string
+ **Membutuhkan** - N/A
+ **Penggunaan** - Mengubah nama tampilan opsi. Mengizinkan format selain CamelCase untuk nama tampilan.
+ **Contoh** - `@displayName Blueprint Name`
### @displayName string
+ **Membutuhkan** - N/A
+ **Penggunaan** - Mengubah nama tampilan opsi. Mengizinkan format selain [CamelCase](https://en.wikipedia.org/wiki/Camel_case) untuk nama tampilan.
+ **Contoh** - `@displayName Blueprint Name`
### Nomor @defaultEntropy
+ **Membutuhkan** - Opsi untuk menjadi string.
+ **Penggunaan** - Menambahkan string alfanumerik acak dari panjang tertentu ke opsi.
+ **Contoh** - `@defaultEntropy 5`
### @placeholder string (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Mengubah placeholder bidang teks default.
+ **Contoh** - `@placeholder type project name here`
### Nomor @textArea (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Mengonversi input string menjadi komponen area teks untuk bagian teks yang lebih besar. Menambahkan angka menentukan jumlah baris. Defaultnya adalah lima baris.
+ **Contoh** - `@textArea 10`
### @hidden boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Menyembunyikan file dari pengguna kecuali pemeriksaan validasi gagal. Nilai default adalah true.
+ **Contoh** - `@hidden`
### @button boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Anotasi harus pada properti Boolean. Menambahkan tombol yang akan mensintesis sebagai true saat dipilih. Bukan toggle.
+ **Contoh** - `buttonExample: boolean;`
```
/**
* @button
*/
buttonExample: boolean;
```
### @showName boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Hanya dapat digunakan pada jenis koneksi akun. Menampilkan masukan nama tersembunyi. Default ke `default_environment`.
+ **Contoh** - `@showName true`
```
/**
* @showName true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @ showEnvironmentType boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Hanya dapat digunakan pada jenis koneksi akun. Menampilkan menu dropdown tipe lingkungan tersembunyi. Semua koneksi default ke`production`. Pilihannya adalah **Non-produksi** atau **Produksi**.
+ **Contoh** - `@showEnvironmentType true`
```
/**
* @showEnvironmentType true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @forceDefault boolean (opsional)
+ **Membutuhkan** - N/A
+ **Penggunaan** - Menggunakan nilai default yang disediakan oleh penulis cetak biru bukan nilai yang digunakan sebelumnya oleh pengguna.
+ **Contoh** - `forceDeafultExample: any;`
```
/**
* @forceDefault
*/
forceDeafultExample: any;
```
### @requires BluePrintNama
+ **Membutuhkan** - Menganotasi antarmuka. `Options`
+ **Penggunaan** - Memperingatkan pengguna untuk menambahkan ditentukan `blueprintName` ke proyek sebagai persyaratan untuk cetak biru saat ini.
+ **Contoh** - `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`
```
/*
* @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
*/
export interface Options extends ParentOptions {
...
```
### @filter regex
+ **Membutuhkan** - Menganotasi antarmuka `Selector` atau`MultiSelect`.
+ **Penggunaan** - Filter dropdown di wizard ke opsi yang cocok dengan regex yang ditentukan.
+ **Contoh** - `@filter /blueprintPackageName/`
```
/**
* @filter /myPackageName/
*/
blueprintInstantiation?: Selector;
...
```
## TypeScript Jenis yang didukung
TypeScript Jenis berikut ini didukung oleh cetak biru kustom `Options` di wizard front-end.
### Jumlah
+ **Membutuhkan** - Opsi untuk menjadi tipe`number`.
+ **Penggunaan** - Menghasilkan bidang input angka.
+ **Contoh** - `age: number`
```
{
age: number
...
}
```
### String
+ **Membutuhkan** - Opsi untuk menjadi tipe`string`.
+ **Penggunaan** - Menghasilkan bidang input string.
+ **Contoh** - `name: string`
```
{
age: string
...
}
```
### Daftar string
+ **Membutuhkan** - Opsi untuk menjadi array tipe`string`.
+ **Penggunaan** - Menghasilkan input daftar string.
+ **Contoh** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Kotak centang
+ **Membutuhkan** - Opsi untuk menjadi`boolean`.
+ **Penggunaan** - Hasilkan kotak centang.
+ **Contoh** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Radio
+ **Membutuhkan** - Opsi untuk menjadi penyatuan tiga atau lebih sedikit string.
+ **Penggunaan** - Hasilkan radio yang dipilih.
**catatan**
Ketika ada empat atau lebih item, jenis ini dirender sebagai dropdown.
+ **Contoh** - `color: 'red' | 'blue' | 'green'`
```
{
color: 'red' | 'blue' | 'green'
...
}
```
### Dropdown
+ **Membutuhkan** - Opsi untuk menjadi penyatuan empat atau lebih string.
+ **Penggunaan** - Hasilkan dropdown.
+ **Contoh** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`
```
{
runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
...
}
```
### Bagian yang dapat diperluas
+ **Membutuhkan** - Opsi untuk menjadi objek.
+ **Penggunaan** - Hasilkan bagian yang dapat diperluas. Opsi dalam objek akan bersarang di dalam bagian yang dapat diperluas di wizard.
+ **Contoh** -
```
{
expandableSectionTitle: {
nestedString: string;
nestedNumber: number;
}
}
```
### Tupel
+ **Membutuhkan** - Opsi untuk menjadi tipe`Tuple`.
+ **Penggunaan** - Hasilkan input berbayar nilai-kunci.
+ **Contoh** - `tuple: Tuple[string, string]>`
```
{
tuple: Tuple[string, string]>;
...
}
```
### Daftar Tuple
+ **Membutuhkan** - Opsi untuk menjadi array tipe`Tuple`.
+ **Penggunaan** - Menghasilkan masukan daftar Tuple.
+ **Contoh** - `tupleList: Tuple[string, string]>[]`
```
{
tupleList: Tuple[string, string]>[];
...
}
```
### Pemilih
+ **Membutuhkan** - Opsi untuk menjadi tipe`Selector`.
+ **Penggunaan** - Menghasilkan dropdown repositori sumber atau cetak biru yang diterapkan pada proyek.
+ **Contoh** - `sourceRepo: Selector`
```
{
sourceRepo: Selector;
sourceRepoOrAdd: Selector;
blueprintInstantiation: Selector;
...
}
```
### Multipilih
+ **Membutuhkan** - Opsi untuk menjadi tipe`Selector`.
+ **Penggunaan** - Menghasilkan input multiselect.
+ **Contoh** - `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`
```
{
multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
...
}
```
## Berkomunikasi dengan pengguna selama sintesis
Sebagai penulis cetak biru, Anda dapat berkomunikasi kembali ke pengguna di luar hanya pesan validasi. Misalnya, anggota ruang mungkin melihat kombinasi opsi yang menghasilkan cetak biru yang tidak jelas. Cetak biru khusus mendukung kemampuan untuk mengkomunikasikan pesan kesalahan kembali ke pengguna dengan menjalankan sintesis. Cetak biru dasar mengimplementasikan `throwSynthesisError(...)` fungsi yang mengharapkan pesan kesalahan yang jelas. Anda dapat memanggil pesan dengan menggunakan yang berikut ini:
```
//blueprint.ts
this.throwSynthesisError({
name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```