Unduh contoh kode frontend
Pada halaman Official Solutions atau My Solutions, unduh contoh kode dari lokasi yang ditunjukkan pada gambar berikut.
Pilih wilayah dan klik OK untuk mengunduh paket ZIP.
Setelah mengekstrak file ZIP tersebut, isi paket mencakup tiga file berikut:
App.js: Kode halaman contoh.
openapiv3.js: Kode utilitas.
README.md: Berisi petunjuk penggunaan yang direkomendasikan.
Jalankan contoh
Contoh ini menggunakan 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-appBuka folder proyek yang telah dibuat dan instal dua dependensi berikut.
cd my-app
npm install antd --save
npm install crypto-js --saveSalin App.js dan openapiv3.js ke folder src dalam direktori proyek my-app.
Di direktori my-app, jalankan npm start untuk menjalankan contoh.
npm startSetelah proyek dijalankan, Anda dapat mengakses contoh tersebut melalui port default 3000.
Perkenalan fitur contoh
Halaman contoh ini menunjukkan alur berikut: Create Solution → Validate Resources → Inquire Prices → Deploy Resources → Release Resources.
Contoh kode ini hanya menunjukkan alur dasar integrasi frontend. Ini bukan solusi teknis lengkap. Gunakan contoh ini hanya untuk pengembangan atau referensi. Jangan menggunakannya di lingkungan produksi.
Konfigurasikan informasi dasar
Masukkan ID AccessKey dan Rahasia AccessKey.
ID templat secara default menggunakan ID templat tempat Anda mengunduh contoh ini. Anda juga dapat menyalin ID tersebut dari lokasi yang sesuai pada halaman.
Wilayah secara default mengacu pada wilayah yang dipilih saat Anda mengunduh contoh. Jika Anda mengganti wilayah, pastikan templat tersebut mencakup konfigurasi untuk wilayah yang dipilih.
Buat solusi
Masukkan nama solusi dan nilai-nilai variabel templat.
Validasi resource
Setelah Anda mengklik Validate Resources, status solusi berubah menjadi Validation Successful. Anda kemudian dapat menanyakan harga resource.
Tanyakan harga resource
Klik tombol Inquire Prices. Setelah penanyaan harga berhasil, Anda dapat melanjutkan ke penerapan resource.
Menyebarkan sumber daya
Klik Deploy Resources untuk melihat status penerapan.
Setelah penerapan selesai, resource akan dibuat.
Lepaskan resource
Anda dapat melepaskan resource yang telah diterapkan dengan melepaskan solusi tersebut. Atau, Anda dapat menghapus solusi untuk menyembunyikannya. Perhatikan bahwa menghapus solusi tidak melepaskan resource yang telah diterapkan.
Setelah resource dilepaskan, Anda dapat menghapus solusi tersebut.
