View a markdown version of this page

Tutorial: Mulai membangun dari aplikasi kosong - AWS Studio Aplikasi
PrasyaratLangkah 1: Buat aplikasiLangkah 2: Buat entitas untuk menentukan data aplikasiLangkah 3: Desain antarmuka pengguna (UI) dan logikaLangkah 4: Pratinjau aplikasiLangkah 5: Publikasikan aplikasi ke Pengujian lingkunganLangkah selanjutnya

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Tutorial: Mulai membangun dari aplikasi kosong

Dalam tutorial ini, Anda akan membangun aplikasi Permintaan Rapat Pelanggan internal menggunakan AWS App Studio. Anda akan belajar tentang cara membuat aplikasi di App Studio, sambil berfokus pada kasus penggunaan dunia nyata dan contoh langsung. Selain itu, Anda akan belajar tentang mendefinisikan struktur data, desain UI, dan penerapan aplikasi.

catatan

Tutorial ini merinci cara membuat aplikasi dari awal, dimulai dengan aplikasi kosong. Biasanya, jauh lebih cepat dan mudah menggunakan AI untuk membantu menghasilkan aplikasi dan sumber dayanya dengan memberikan deskripsi aplikasi yang ingin Anda buat. Untuk informasi selengkapnya, lihat Tutorial: Hasilkan aplikasi menggunakan AI.

Kunci untuk memahami cara membangun aplikasi dengan App Studio adalah memahami empat konsep inti berikut dan bagaimana mereka bekerja bersama: komponen, otomatisasi, data, dan konektor.

  • Kompon en: Komponen adalah blok bangunan antarmuka pengguna aplikasi Anda. Mereka mewakili elemen visual seperti tabel, formulir, dan tombol. Setiap komponen memiliki serangkaian propertinya sendiri, yang dapat Anda sesuaikan agar sesuai dengan kebutuhan spesifik Anda.

  • Otomatisasi: Dengan otomatisasi, Anda dapat menentukan logika dan alur kerja yang mengatur bagaimana aplikasi Anda berperilaku. Anda dapat menggunakan otomatisasi untuk membuat, memperbarui, membaca, atau menghapus baris dalam tabel data atau berinteraksi dengan objek di bucket Amazon S3. Anda juga dapat menggunakannya untuk menangani tugas-tugas seperti validasi data, notifikasi, atau integrasi dengan sistem lain.

  • Data: Data adalah informasi yang mendukung aplikasi Anda. Di App Studio, Anda dapat menentukan model data, yang disebut entitas. Entitas mewakili berbagai jenis data yang perlu Anda simpan dan kerjakan, seperti permintaan rapat pelanggan, agenda, atau peserta. Anda dapat menghubungkan model data ini ke berbagai sumber data, termasuk AWS layanan dan API eksternal, dengan menggunakan konektor App Studio.

  • Konek tor: App Studio menyediakan koneksi dengan berbagai sumber data, yang mencakup AWS layanan seperti Aurora, DynamoDB, dan Amazon Redshift. Sumber data juga mencakup layanan pihak ketiga seperti Salesforce, atau banyak lainnya menggunakan OpenAPI atau konektor API generik. Anda dapat menggunakan konektor App Studio untuk menggabungkan data dan fungsionalitas dari layanan kelas perusahaan dan aplikasi eksternal ini dengan mudah ke dalam aplikasi Anda.

Saat Anda maju melalui tutorial, Anda akan menjelajahi bagaimana konsep kunci komponen, data, dan otomatisasi bersatu untuk membangun aplikasi Permintaan Rapat Pelanggan internal Anda.

Berikut ini adalah langkah-langkah tingkat tinggi yang menjelaskan apa yang akan Anda lakukan dalam tutorial ini:

  1. Mulailah dengan data: Banyak aplikasi dimulai dengan model data, jadi tutorial ini dimulai dengan data juga. Untuk membangun aplikasi Permintaan Rapat Pelanggan, Anda akan mulai dengan membuat MeetingRequests entitas. Entitas ini mewakili struktur data untuk menyimpan semua informasi permintaan rapat yang relevan, seperti nama pelanggan, tanggal rapat, agenda, dan peserta. Model data ini berfungsi sebagai dasar untuk aplikasi Anda, dan mendukung berbagai komponen dan otomatisasi yang akan Anda buat.

  2. Buat antarmuka pengguna Anda (UI): Dengan model data di tempatnya, tutorial kemudian memandu Anda melalui pembuatan antarmuka pengguna (UI). Di App Studio, Anda membangun UI dengan menambahkan halaman dan menambahkan komponen ke dalamnya. Anda akan menambahkan komponen seperti Tabel, T ampilan Detail, dan Kalender ke halaman dasbor permintaan rapat. Komponen-komponen ini akan dirancang untuk menampilkan dan berinteraksi dengan data yang disimpan dalam MeetingRequests entitas. Ini memungkinkan pengguna Anda untuk melihat, mengelola, dan menjadwalkan pertemuan pelanggan. Anda juga akan membuat halaman pembuatan permintaan rapat. Halaman ini mencakup komponen For mulir untuk mengumpulkan data dan komponen Button untuk mengirimkannya.

  3. Tambahkan logika bisnis dengan otomatisasi: Untuk meningkatkan fungsionalitas aplikasi Anda, Anda akan mengonfigurasi beberapa komponen untuk mengaktifkan interaksi pengguna. Beberapa contoh adalah menavigasi ke halaman atau membuat catatan permintaan rapat baru di MeetingRequests entitas.

  4. Tingkatkan dengan validasi dan ekspresi: Untuk memastikan integritas dan keakuratan data Anda, Anda akan menambahkan aturan validasi ke komponen For mulir. Ini akan membantu memastikan bahwa pengguna memberikan informasi lengkap dan valid saat membuat catatan permintaan rapat baru. Selain itu, Anda akan menggunakan ekspresi untuk mereferensikan dan memanipulasi data dalam aplikasi Anda sehingga Anda dapat menampilkan informasi dinamis dan kontekstual di seluruh antarmuka pengguna Anda.

  5. Pratinjau dan menguji: Sebelum menerapkan aplikasi Anda, Anda akan memiliki kesempatan untuk melihat pratinjau dan mengujinya secara menyeluruh. Ini akan memungkinkan Anda untuk memverifikasi bahwa komponen, data, dan otomatisasi semuanya bekerja bersama dengan mulus. Ini memberi pengguna Anda pengalaman yang mulus dan intuitif.

  6. Publikasikan aplikasi: Terakhir, Anda akan menerapkan aplikasi Permintaan Rapat Pelanggan internal yang telah selesai dan membuatnya dapat diakses oleh pengguna Anda. Dengan kekuatan pendekatan low-code di App Studio, Anda akan membangun aplikasi khusus yang memenuhi kebutuhan spesifik organisasi Anda, tanpa perlu keahlian pemrograman yang luas.

Prasyarat

Sebelum Anda memulai, tinjau dan lengkapi prasyarat berikut:

  • Akses ke AWS App Studio. Untuk informasi selengkapnya, lihat Menyiapkan dan masuk ke AWS Studio Aplikasi.

  • Opsional: Tinjau AWS Konsep App Studio untuk membiasakan diri dengan konsep App Studio yang penting.

  • Opsional: Pemahaman tentang konsep pengembangan web dasar, seperti JavaScript sintaks.

  • Opsional: Keakraban dengan AWS layanan.

Langkah 1: Buat aplikasi

  1. Masuk ke App Studio.

  2. Di navigasi sebelah kiri, pilih hub Builder dan pilih + Buat aplikasi.

  3. Pilih Mulai dari awal.

  4. Di bidang Nama aplikasi, berikan nama untuk aplikasi Anda, sepertiCustomer Meeting Requests.

  5. Jika diminta untuk memilih sumber data atau konektor, pilih Lewati untuk tujuan tutorial ini.

  6. Pilih Berikutnya untuk melanjutkan.

  7. (Opsional): Tonton video tutorial untuk gambaran singkat tentang membuat aplikasi di App Studio.

  8. Pilih Edit aplikasi, yang membawa Anda ke pembuat aplikasi App Studio.

Langkah 2: Buat entitas untuk menentukan data aplikasi

Entitas mewakili tabel yang menyimpan data aplikasi Anda, mirip dengan tabel dalam database. Alih-alih antarmuka pengguna (UI) aplikasi Anda dan otomatisasi yang terhubung langsung ke sumber data, mereka terhubung ke entitas terlebih dahulu. Entitas bertindak sebagai perantara antara sumber data aktual dan aplikasi App Studio, dan menyediakan satu tempat untuk mengelola dan mengakses data Anda.

Ada empat cara untuk membuat entitas. Untuk tutorial ini, Anda akan menggunakan entitas terkelola App Studio.

Membuat entitas terkelola

Membuat entitas terkelola juga membuat tabel DynamoDB yang sesuai yang dikelola App Studio. Ketika perubahan dilakukan pada entitas di aplikasi App Studio, tabel DynamoDB diperbarui secara otomatis. Dengan opsi ini, Anda tidak perlu membuat, mengelola, atau menghubungkan ke sumber data pihak ketiga secara manual, atau menetapkan pemetaan dari bidang entitas ke kolom tabel.

Saat membuat entitas, Anda harus menentukan bidang kunci utama. Kunci primer berfungsi sebagai pengidentifikasi unik untuk setiap catatan atau baris dalam entitas. Ini memastikan bahwa setiap catatan dapat dengan mudah diidentifikasi dan diambil tanpa ambiguitas. Kunci utama terdiri dari properti berikut:

  • Nama kunci utama: Nama untuk bidang kunci utama entitas.

  • Jenis data kunci primer: Jenis bidang kunci utama. Di App Studio, jenis kunci utama yang didukung adalah String untuk teks dan Float untuk angka. Kunci primer teks (sepertimeetingName) akan memiliki jenis String, dan kunci primer numerik (sepertimeetingId) akan memiliki jenis Float.

Kunci utama adalah komponen penting dari suatu entitas karena menegakkan integritas data, mencegah duplikasi data, dan memungkinkan pengambilan data dan kueri yang efisien.

Untuk membuat entitas terkelola

  1. Pilih Data dari menu bar atas.

  2. Pilih + Buat entitas.

  3. Pilih Buat entitas terkelola App Studio.

  4. Di bidang Nama entitas, berikan nama untuk entitas Anda. Untuk tutorial ini, masukkan MeetingRequests.

  5. Di bidang Kunci utama, masukkan label nama kunci utama untuk diberikan ke kolom kunci utama di entitas Anda. Untuk tutorial ini, masukkan requestID.

  6. Untuk Tipe data kunci utama, pilih Float.

  7. Pilih Buat entitas.

Tambahkan bidang ke entitas Anda

Untuk setiap bidang, Anda akan menentukan nama tampilan, yang merupakan label yang terlihat oleh pengguna aplikasi. Nama tampilan dapat berisi spasi dan karakter khusus, tetapi harus unik di dalam entitas. Nama tampilan berfungsi sebagai label yang ramah pengguna untuk bidang tersebut, dan membantu pengguna dengan mudah mengidentifikasi dan memahami tujuannya.

Selanjutnya, Anda akan memberikan nama sistem, pengidentifikasi unik yang digunakan secara internal oleh aplikasi untuk mereferensikan bidang. Nama sistem harus ringkas, tanpa spasi atau karakter khusus. Nama sistem memungkinkan aplikasi untuk membuat perubahan pada data bidang. Ini bertindak sebagai titik referensi unik untuk bidang dalam aplikasi.

Terakhir, Anda akan memilih tipe data yang paling mewakili jenis data yang ingin Anda simpan di bidang, seperti String (teks), Boolean (true/false), Tanggal, Desimal, Float, Integer, atau. DateTime Mendefinisikan tipe data yang sesuai memastikan integritas data dan memungkinkan penanganan dan pemrosesan nilai bidang yang tepat. Misalnya, jika Anda menyimpan nama pelanggan dalam permintaan rapat, Anda akan memilih tipe String data untuk mengakomodasi nilai teks.

Untuk menambahkan bidang ke MeetingRequests entitas Anda

  • Pilih + Tambah bidang untuk menambahkan empat bidang berikut:

    1. Tambahkan bidang yang mewakili nama pelanggan dengan informasi berikut:

      • Nama tampilan: Customer name

      • Nama sistem: customerName

      • Tipe data: String

    2. Tambahkan bidang yang mewakili tanggal rapat dengan informasi berikut:

      • Nama tampilan: Meeting date

      • Nama sistem: meetingDate

      • Tipe data: DateTime

    3. Tambahkan bidang yang mewakili agenda rapat dengan informasi berikut:

      • Nama tampilan: Agenda

      • Nama sistem: agenda

      • Tipe data: String

    4. Tambahkan bidang untuk mewakili peserta rapat dengan informasi berikut:

      • Nama tampilan: Attendees

      • Nama sistem: attendees

      • Tipe data: String

Anda dapat menambahkan data sampel ke entitas Anda yang dapat Anda gunakan untuk menguji dan melihat pratinjau aplikasi Anda sebelum menerbitkannya. Dengan menambahkan hingga 500 baris data tiruan, Anda dapat mensimulasikan skenario dunia nyata dan memeriksa bagaimana aplikasi Anda menangani dan menampilkan berbagai jenis data, tanpa bergantung pada data aktual atau terhubung ke layanan eksternal. Ini membantu Anda mengidentifikasi dan menyelesaikan masalah atau inkonsistensi di awal proses pengembangan. Ini memastikan bahwa aplikasi Anda berfungsi sebagaimana dimaksud ketika berurusan dengan data aktual.

Untuk menambahkan data sampel ke entitas Anda

  1. Pilih tab Sampel data di spanduk.

  2. Pilih Hasilkan lebih banyak data sampel.

  3. Pilih Simpan.

Secara opsional, pilih Kon eksi di spanduk untuk meninjau detail tentang konektor dan tabel DynamoDB yang dibuat untuk Anda.

Langkah 3: Desain antarmuka pengguna (UI) dan logika

Menambahkan halaman dasbor permintaan rapat

Di App Studio, setiap halaman mewakili layar antarmuka pengguna (UI) aplikasi Anda yang akan berinteraksi dengan pengguna Anda. Dalam halaman-halaman ini, Anda dapat menambahkan berbagai komponen seperti tabel, formulir, dan tombol untuk membuat tata letak dan fungsionalitas yang diinginkan.

Aplikasi yang baru dibuat dilengkapi dengan halaman default, jadi Anda akan mengganti nama itu alih-alih menambahkan yang baru untuk digunakan sebagai halaman dasbor permintaan rapat sederhana.

Untuk mengganti nama halaman default

  1. Di menu navigasi bilah atas, pilih Halaman.

  2. Di panel sisi kiri, klik dua kali P age1, ganti namanya menjadiMeetingRequestsDashboard, dan tekan Enter.

Sekarang, tambahkan komponen tabel ke halaman yang akan digunakan untuk menampilkan permintaan rapat.

Untuk menambahkan komponen tabel ke halaman dasbor permintaan rapat

  1. Di panel Komponen sebelah kanan, cari komponen Tabel dan seret ke kanvas.

  2. Pilih tabel di kanvas untuk memilihnya.

  3. Di panel Proper ties sisi kanan, perbarui pengaturan berikut:

    1. Pilih ikon pensil untuk mengganti nama tabelmeetingRequestsTable.

    2. Di dropdown Sumber, pilih En titas.

    3. Di menu tar ik- turun tindakan data, pilih entitas yang Anda buat (MeetingRequests) dan pilih + Tambahkan tindakan data.

  4. Jika diminta, pilih GetAll.

    catatan

    T indakan data getAll adalah jenis tindakan data tertentu yang mengambil semua catatan (baris) dari entitas tertentu. Ketika Anda mengaitkan tindakan data getAll dengan komponen tabel, misalnya, tabel secara otomatis mengisi dengan semua data dari entitas yang terhubung, dan menampilkan setiap catatan sebagai baris dalam tabel.

Menambahkan halaman pembuatan permintaan rapat

Selanjutnya, buat halaman yang berisi formulir yang akan digunakan pengguna akhir untuk membuat permintaan rapat. Anda juga akan menambahkan tombol kirim yang membuat catatan di MeetingRequests entitas, dan kemudian menavigasi pengguna akhir kembali ke MeetingRequestsDashboard halaman.

Untuk menambahkan halaman pembuatan permintaan rapat

  1. Di spanduk atas, pilih P ages.

  2. Di panel sisi kiri, pilih + Tambah.

  3. Di panel properti sisi kanan, pilih ikon pensil dan ganti nama halaman menjadiCreateMeetingRequest.

Sekarang halaman ditambahkan, Anda akan menambahkan formulir ke halaman yang akan digunakan pengguna akhir untuk memasukkan informasi untuk membuat permintaan rapat di MeetingRequests entitas. App Studio menawarkan metode menghasilkan formulir dari entitas yang ada, yang secara otomatis mengisi bidang formulir berdasarkan bidang entitas dan juga menghasilkan tombol kirim untuk membuat catatan dalam entitas dengan input formulir.

Untuk membuat formulir secara otomatis dari entitas pada halaman pembuatan permintaan rapat

  1. Pada menu Komponen sisi kanan, temukan komponen Form dan seret ke kanvas.

  2. Pilih Hasilkan formulir.

  3. Dari dropdown, pilih MeetingRequests entitas.

  4. Pilih Menghasilkan.

  5. Pilih tombol Kirim pada kanvas untuk memilihnya.

  6. Di panel properti sisi kanan, di bagian Pem icu, pilih + Tambah.

  7. Pilih Navigasi.

  8. Di panel properti sisi kanan, ubah nama Action menjadi sesuatu yang deskriptif, sepertiNavigate to MeetingRequestsDashboard.

  9. Ubah jenis Navigasi ke halaman. Di menu tar ik- turun Navigasi ke, pilihMeetingRequestsDashboard.

Sekarang kami memiliki halaman dan formulir pembuatan permintaan rapat, kami ingin memudahkan navigasi ke halaman ini dari MeetingRequestsDashboard halaman, sehingga pengguna akhir yang meninjau dasbor dapat dengan mudah membuat permintaan rapat. Gunakan prosedur berikut untuk membuat tombol pada MeetingRequestsDashboard halaman yang menavigasi ke CreateMeetingRequest halaman.

Untuk menambahkan tombol untuk menavigasi dari MeetingRequestsDashboard ke CreateMeetingRequest

  1. Di spanduk atas, pilih P ages.

  2. Pilih MeetingRequestsDashboard halaman.

  3. Di panel Komponen sisi kanan, temukan komponen Button, seret ke kanvas, dan letakkan di atas tabel.

  4. Pilih tombol yang baru ditambahkan untuk memilihnya.

  5. Di panel Proper ties sisi kanan, perbarui pengaturan berikut:

    1. Pilih ikon pensil untuk mengganti nama tombol menjadicreateMeetingRequestButton.

    2. Label tombol:Create Meeting Request. Ini adalah nama yang akan dilihat pengguna akhir.

    3. Di dropdown Ikon, pilih + Plus.

    4. Buat pemicu yang menavigasi pengguna akhir ke MeetingRequestsDashboard halaman:

      1. Di bagian Pemicu, pilih + Tambah.

      2. Di Jenis Tindakan, pilih Navigasi.

      3. Pilih pemicu yang baru saja Anda buat untuk mengkonfigurasinya.

      4. Di Nama tindakan, berikan nama deskriptif sepertiNavigateToCreateMeetingRequest.

      5. Di menu tar ik- turun Jenis navigasi, pilih Halaman.

      6. Di menu tar ik- turun Navigasi ke, pilih CreateMeetingRequest halaman.

Langkah 4: Pratinjau aplikasi

Anda dapat melihat pratinjau aplikasi di App Studio untuk melihat tampilannya kepada pengguna. Selain itu, Anda dapat menguji fungsinya dengan menggunakannya dan memeriksa log di panel debug.

Lingkungan pratinjau aplikasi tidak mendukung menampilkan data langsung. Itu juga tidak mendukung koneksi dengan sumber daya eksternal dengan konektor, seperti sumber data. Sebagai gantinya, Anda dapat menggunakan data sampel dan output yang diejek untuk menguji fungsionalitas.

Untuk melihat pratinjau aplikasi Anda untuk pengujian

  1. Di sudut kanan atas pembuat aplikasi, pilih Prat injau.

  2. Berinteraksi dengan MeetingRequestsDashboard halaman, dan uji tabel, formulir, dan tombol.

Langkah 5: Publikasikan aplikasi ke Pengujian lingkungan

Sekarang setelah Anda selesai membuat, mengonfigurasi, dan menguji aplikasi Anda, saatnya untuk mempublikasikannya ke lingkungan Pengujian untuk melakukan pengujian akhir dan kemudian membagikannya dengan pengguna.

Untuk menerbitkan aplikasi Anda ke lingkungan Pengujian

  1. Di sudut kanan atas pembuat aplikasi, pilih Publi kasikan.

  2. Tambahkan deskripsi versi untuk lingkungan Pengujian.

  3. Tinjau dan pilih kotak centang terkait SLA.

  4. Pilih Mulai. Penerbitan mungkin memakan waktu hingga 15 menit.

  5. (Opsional) Saat Anda siap, Anda dapat memberikan akses kepada orang lain dengan memilih Bagikan dan mengikuti petunjuknya.

    catatan

    Untuk berbagi aplikasi, Admin harus membuat grup pengguna akhir.

Setelah pengujian, pilih Publ ish lagi untuk mempromosikan aplikasi ke lingkungan Produksi. Untuk informasi selengkapnya tentang lingkungan aplikasi yang berbeda, lihatLingkungan aplikasi.

Langkah selanjutnya

Sekarang setelah Anda membuat aplikasi pertama Anda, berikut adalah beberapa langkah selanjutnya:

  1. Terus membangun aplikasi tutorial. Sekarang setelah Anda memiliki data, beberapa halaman, dan otomatisasi yang dikonfigurasi, Anda dapat menambahkan halaman tambahan dan menambahkan komponen untuk mempelajari lebih lanjut tentang membuat aplikasi.

  2. Untuk mempelajari lebih lanjut tentang membuat aplikasi, lihatDokumentasi pembangun. Secara khusus, topik-topik berikut mungkin berguna untuk dijelajahi:

    Selain itu, topik berikut berisi informasi lebih lanjut tentang konsep yang dibahas dalam tutorial: