Dalam tutorial ini, kita akan melihat lebih dekat bagaimana Anda dapat mengintegrasikan Bubble dan AppMaster . Misalkan front-end aplikasi yang sedang dikembangkan dibuat di Bubble , tetapi kemampuannya untuk bekerja dengan back-end ternyata tidak mencukupi, dan Anda ingin menggunakan fungsionalitas AppMaster .
Mari kita cari tahu caranya:
- Gunakan AppMaster sebagai database untuk Bubble
- Kirim permintaan API ke Appmaster
- Lakukan otentikasi pengguna
- Gunakan token otorisasi di header permintaan
Mengonfigurasi API Connector
Pertama-tama, Anda perlu membuat kemungkinan pengiriman permintaan API eksternal dari Bubble . Untuk melakukan ini, Anda perlu menambahkan plugin API Connector .
Mari segera konfigurasikan untuk mengirim permintaan otentikasi ke AppMaster . Tugas kami adalah mengirim login dan kata sandi untuk menerima token otorisasi sebagai tanggapan. Kami akan menggunakan titik akhir standar yang dibuat di setiap proyek secara default - POST /auth/ (Auth: Authentication) . Informasi lengkap tentang itu, dengan alamat yang tepat untuk permintaan di proyek Anda, dapat diperoleh dari Swagger .
Untuk mengonfigurasi API Connector , klik tombol Add Another API dan atur parameter permintaan yang akan digunakan. Parameter kuncinya adalah:
- Metode permintaan. POST
- URL. Sama seperti Request URL dari Swagger
- Use as. Data . Sebagai tanggapan, Anda perlu menerima data token otorisasi.
- Data type. JSON
- Body . Pengaturan terpenting di dalamnya adalah Anda perlu menentukan data yang akan dikirim ke server AppMaster . Pada saat yang sama, <> berisi nilai dinamis yang perlu diperoleh dari bidang input yang sesuai.
{
"login": "<login>",
"password": "<password>"
}
Setelah mengisi, Anda harus menentukan data untuk permintaan pengujian (isikan nilai login dan kata sandi di Body parameters ), inisialisasi permintaan, dan pastikan itu berfungsi dengan benar dan jawabannya benar-benar datang.
Pengaturan bidang masukan
Langkah selanjutnya adalah membuat antarmuka untuk aplikasi. Kami membatasi diri untuk minimum yang diperlukan. Kita perlu membuat 3 bidang input:
- Gabung
- Kata sandi
- Token otorisasi
Dua yang pertama cukup jelas. Mereka akan menunjukkan nama pengguna dan kata sandi pengguna untuk otentikasi. Yang paling menarik adalah bidang ketiga - bidang token. Nilai token juga dapat dimasukkan secara manual, tetapi tugas kita adalah memungkinkan untuk menerima data dari backend AppMaster dan menampilkannya di sana.
Untuk melakukan ini perlu mengkonfigurasi nilai konten awal :
- Get data from an External API dengan pemilihan permintaan yang dibuat sebelumnya di API Connector (dalam contoh ini, namanya AppMaster Auth Call )
- Di bidang (body) login dan (body) password Anda perlu menentukan nilai dari bidang input yang sesuai
- Pilih nilai token (banyak data berbeda yang muncul sebagai respons terhadap permintaan, tetapi dalam contoh ini hanya token yang menarik)
Hasilnya bisa diuji. Saat memasukkan data di bidang login dan kata sandi, permintaan akan secara otomatis dibuat ke backend AppMaster . Ketika data dimasukkan dengan benar, dan permintaan mengembalikan hasil yang berhasil, token otorisasi yang diterima akan muncul di bidang ketiga.
GET permintaan ke database
Langkah selanjutnya adalah membuat permintaan API baru. Kali ini tugasnya adalah mengambil data dari database. Pada saat yang sama, situasinya diperumit oleh fakta bahwa data ini tidak tersedia secara bebas tetapi hanya tersedia untuk pengguna yang berwenang.
Untuk melakukan ini, Anda perlu menambahkan tajuk khusus ke permintaan. Itu harus disebut Authorization dan nilainya harus " Bearer " dan kunci otorisasi yang diperoleh sebelumnya.
Mari kita lakukan dalam praktek. Anda harus kembali ke plugin API Connector dan membuat permintaan API baru. Pada contoh di tangkapan layar, ini adalah panggilan ke database restoran untuk mendapatkan daftar hidangan dan membuat menu.
Perbedaan penting dari permintaan sebelumnya adalah bahwa alih-alih parameter (meskipun mereka juga dapat ditambahkan), header digunakan:
- Key = Authorization
- Value = Bearer {authorization token} (untuk menginisialisasi permintaan, Anda harus segera menentukan token asli yang Anda terima sebelumnya)
Harap dicatat bahwa dalam pengaturan tajuk, Anda harus menghapus centang pada kotak Private ; jika tidak, tidak akan mungkin untuk menghasilkannya secara dinamis. Terakhir, jangan lupa untuk menginisialisasi permintaan dan pastikan itu berfungsi.
Repeating Group
Sekarang kita harus kembali ke desainer, menambahkan elemen Grup Pengulangan baru, dan mengaturnya:
- Type of content - data permintaan AppMaster Get Data .
- Data source - penting untuk menentukan header Authorization dengan benar. Ini terdiri dari dua bagian. Konstanta pertama adalah " Bearer ." Variabel kedua harus berisi token otorisasi dan diambil dari bidang input yang sesuai.
Jika semuanya dilakukan dengan benar, maka data akan diterima, dan hanya langkah terakhir yang tersisa - Anda perlu menampilkannya. Untuk melakukan ini, Anda dapat menambahkan dua bidang teks ke Repeating Group dan menyesuaikannya. Satu akan menunjukkan nama hidangan, dan yang kedua akan menunjukkan harganya.
Anda dapat membuka aplikasi yang dihasilkan dan memverifikasi bahwa integrasi Bubble dan AppMaster berhasil. Frontend dibuat di Bubble.io , dan semua yang terkait dengan backend didukung oleh AppMaster.io :
- Otentikasi pengguna sedang dilakukan
- Token otorisasi yang diterima ditampilkan
- Pekerjaan dengan database dilakukan
- Data yang hanya tersedia untuk pengguna yang berwenang ditampilkan
