Cloud Architect Design Tools:Unduh dan jalankan contoh kode antarmuka depan

Unduh contoh kode antarmuka depan

Di halaman official solutions atau my solutions, unduh contoh kode tersebut.

Klik ikon kode (</>) di toolbar bagian bawah kartu solusi untuk mengunduh contoh kode.

Pilih wilayah, lalu klik OK untuk mengunduh paket ZIP.

Kotak dialog Download template API code menampilkan template ID dan template name saat ini.

File ZIP yang diekstraksi berisi tiga file:

App.js: Kode halaman contoh.

openapiv3.js: Kode utilitas.

README.md: Petunjuk penggunaan.

Jalankan contoh

Contoh ini dibuat dengan create-react-app. Untuk petunjuk instalasi, lihat https://create-react-app.dev/docs/getting-started/.

Setelah instalasi, buat proyek bernama my-app.

npx create-react-app my-app

Buka folder proyek dan instal dependensi berikut.

cd my-app
npm install antd --save
npm install crypto-js --save

Salin App.js dan openapiv3.js ke folder src dalam direktori proyek my-app.

[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]# ls -a
..  App.css  App.js  App.test.js  index.css  index.js  logo.svg  openapiv3.js  reportWebVitals.js  setupTests.js
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#

Di direktori my-app, jalankan npm start untuk memulai contoh.

npm start

Setelah proyek dimulai, akses contoh pada port default 3000.

Halaman startup menampilkan formulir untuk konfigurasi dasar CADT. Masukkan AccessKey ID, AccessKey Secret, dan template ID (misalnya, L8BB1L2IKEBD4IRT). Pada daftar drop-down region, pilih wilayah target, seperti China (Beijing). Kemudian, klik Next untuk melanjutkan pembuatan solusi, validasi resource, penawaran harga, dan penerapan resource.

Perkenalan fitur contoh

Contoh ini menunjukkan alur berikut: Create Solution → Validate Resources → Inquire Prices → Deploy Resources → Release Resources.

Contoh kode ini hanya menunjukkan alur dasar integrasi antarmuka depan. Ini bukan solusi teknis lengkap. Gunakan contoh ini hanya untuk pengembangan atau referensi. Jangan gunakan dalam lingkungan produksi.

Konfigurasikan informasi dasar

Masukkan AccessKey ID dan AccessKey Secret.

Template ID secara default menggunakan templat tempat Anda mengunduh contoh. Anda juga dapat menyalin ID tersebut dari halaman.

Wilayah secara default menggunakan yang Anda pilih saat mengunduh. Jika Anda mengganti wilayah, pastikan templat mencakup konfigurasi untuk wilayah yang dipilih.

Di halaman my solutions pada konsol CADT, klik ikon clipboard di toolbar kartu solusi target untuk copy the template ID.

Buat solusi

Masukkan nama solusi dan nilai variabel templat.

Misalnya, pada bidang solution name, masukkan test-deploy-ecs. Di bagian variabel templat, atur ${instance_type} menjadi ecs.c6.2xlarge dan ${pay_type} menjadi PostPaid. Kemudian, klik Next.

Validasi resource

Setelah Anda mengklik Validate Resources, status solusi berubah menjadi Validation Successful. Anda kemudian dapat menanyakan harga resource.

Tabel hasil validasi resource menunjukkan bahwa region, security group, vSwitch, dan VPC semuanya telah divalidasi dengan sukses. Catatan untuk resource ECS menampilkan pesan: NotFound.Property: [key_pair_name] in Node [ecs].

Menanyakan harga sumber daya

Klik tombol Inquire Prices. Setelah penawaran harga berhasil, Anda dapat melanjutkan ke penerapan resource.

Setelah penawaran harga selesai, status solusi berubah menjadi Valuating_Success. Dalam daftar resource, VPC, vSwitch, dan security group merupakan resource gratis (harga ditampilkan sebagai -1). Harga untuk instans ECS (spesifikasi ecs.c6.2xlarge, pay-as-you-go) adalah CNY 2.144. Setelah mengonfirmasi, klik Next untuk melanjutkan ke penerapan resource.

Menerapkan sumber daya

Klik Deploy Resources untuk melihat status penerapan.

Status solusi berubah menjadi Deploying. Dalam daftar resource, status resource VPC, vSwitch, dan security group adalah Running.

Setelah penerapan selesai, resource telah dibuat.

Lepaskan resource

Anda dapat melepas resource yang diterapkan dengan melepaskan solusi. Atau, Anda dapat menghapus solusi untuk menyembunyikannya. Perhatikan bahwa menghapus solusi tidak melepaskan resource yang telah diterapkan.

Setelah Anda mengklik Release Solution, Solution Status berubah menjadi Releasing.... Tunggu hingga pelepasan resource selesai.

Setelah resource dilepas, Anda dapat menghapus solusi tersebut.

Setelah penghapusan, status solusi berubah menjadi Deleted. Dalam daftar resource, status semua resource terkait (VPC, vSwitch, ECS, dan security group) berubah menjadi Deleted.