Bagikan melalui

Membangun aplikasi Apache Cordova dengan Azure Mobile Apps

  • Artikel

Tutorial ini menunjukkan cara menambahkan layanan backend berbasis cloud ke aplikasi lintas platform Apache Cordova dengan menggunakan Azure Mobile Apps dan backend aplikasi ponsel Azure. Anda akan membuat backend aplikasi ponsel baru dan aplikasi Daftar Tugas sederhana yang menyimpan data aplikasi di Azure.

Selesaikan tutorial ini sebelum melanjutkan dengan tutorial Apache Cordova lainnya tentang menggunakan fitur Mobile Apps di Azure App Service.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda perlu:

Tutorial ini dapat diselesaikan pada sistem Windows atau Mac. Aplikasi versi iOS hanya dapat dijalankan di Mac. Tutorial ini hanya menggunakan Windows (dengan aplikasi yang berjalan di Android).

Apache Cordova 8.1.2 atau yang lebih lama diperlukan

Apache Cordova merilis perubahan yang tidak kompatibel pada alat di v9.0.0. Jika Anda memasang Apache Cordova v9.0.0 atau yang lebih baru, plugin tidak akan berfungsi, karena masalah dependensi dengan modul q.

Visual Studio Code

Ada ekstensi Apache Cordova untuk Visual Studio Code yang memungkinkan Anda menjalankan aplikasi dengan penelusuran kesalahan. Visual Studio Code sangat direkomendasikan untuk pengembangan Apache Cordova.

Memasang Gradle

Kesalahan yang paling umum saat mengonfigurasi Apache Cordova di Windows adalah memasang Gradle. Ini dipasang secara default menggunakan Android Studio tetapi tidak tersedia untuk penggunaan normal. Unduh dan buka rilis terbaru, lalu tambahkan direktori bin ke JALUR Anda secara manual.

Mengunduh proyek mulai cepat Apache Cordova

Proyek mulai cepat Apache Cordova terletak di folder samples/cordova dari repositori GitHub azure/azure-mobile-apps. Anda dapat mengunduh repositori sebagai file ZIP, lalu membongkarnya. File akan dibuat di folder azure-mobile-apps-main.

Setelah diunduh, buka Terminal dan ubah direktori ke lokasi file.

Menyebarkan layanan backend

Untuk menyebarkan layanan mulai cepat, pertama-tama masuk ke Azure dengan Azure CLI:

az login

Browser web akan dibuka untuk menyelesaikan otorisasi.

Jika perlu, pilih langganan.

Buat grup sumber daya

Ketik hal berikut untuk membuat grup sumber daya:

az group create -l westus -n zumo-quickstart

Perintah ini membuat grup sumber daya yang bernama zumo-quickstart untuk menyimpan semua sumber daya yang dibuat. Ganti westus dengan wilayah lain jika Anda tidak memiliki akses ke wilayah westus atau Anda lebih suka wilayah yang lebih dekat dengan Anda.

Menyebarkan backend ke Azure

Layanan ini terdiri dari sumber daya berikut:

  • Paket Hosting App Service dengan paket Gratis.
  • Situs web yang dihosting dalam paket Hosting App Service.
  • Server Azure SQL.
  • Database Azure SQL di tingkat Dasar (dikenakan biaya).

Database Azure SQL adalah satu-satunya sumber daya yang dikenakan biaya. Untuk detailnya, lihat Harga.

Untuk menyebarkan sumber daya, ketik perintah berikut:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Setelah selesai, jalankan perintah berikut untuk melihat output:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Perintah ini menunjukkan informasi tentang penyebaran Anda, yang dibutuhkan dalam mengembangkan aplikasi seluler. Nama pengguna dan kata sandi database digunakan untuk mengakses database melalui portal Azure. Nama App Service digunakan di bawah ini, dan titik akhir publik disematkan di kode Anda nanti.

Terakhir, sebarkan server Azure Mobile Apps ke App Service yang dibuat:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Ganti zumo-XXXXXXXX dengan nama App Service Anda; ditampilkan di daftar output. Dalam 2-3 menit, server Azure Mobile Apps Anda akan siap digunakan. Anda dapat menggunakan browser web untuk mengonfirmasi bahwa backend berfungsi. Arahkan browser web Anda ke titik akhir publik dengan /tables/TodoItem ditambahkan ke dalamnya (misalnya, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Browser akan menampilkan kesalahan tentang parameter X-ZUMO-VERSION yang tidak ada jika server berfungsi dengan baik.

Menghapus sumber daya

Setelah menyelesaikan tutorial mulai cepat, Anda dapat menghapus sumber daya dengan az group delete -n zumo-quickstart.

Tutorial ini terdiri dari tiga bagian (termasuk bagian ini). Jangan hapus sumber daya sebelum menyelesaikan tutorial.

Mengonfigurasi proyek mulai cepat Apache Cordova

Jalankan npm install untuk memasang semua dependensi.

Tambahkan platform ke proyek. Misalnya, untuk menambahkan platform Android, gunakan:

cordova platform add android

Anda dapat menambahkan browser, android, dan ios sesuai kebutuhan. Platform browser tidak akan berfungsi dengan sinkronisasi offline diaktifkan. Setelah Anda menambahkan semua platform yang ingin digunakan, jalankan cordova requirements untuk memastikan semua persyaratan telah terpenuhi.

Buka file www/js/index.js di editor teks. Edit definisi BackendUrl untuk menampilkan URL backend Anda. Misalnya, jika URL backend Anda adalah https://zumo-abcd1234.azurewebsites.net, file akan terlihat seperti ini:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Simpan file. Buka file www/index.html di editor teks. Edit Content-Security-Policy untuk memperbarui URL agar sesuai dengan URL backend Anda; misalnya:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Untuk membangun aplikasi, gunakan perintah berikut:

cordova build

Menjalankan aplikasi

Jika berjalan dari browser (menggunakan cordova platform add browser), maka Anda harus mengaktifkan dukungan CORS dalam Azure App Service. Untuk melakukannya, jalankan perintah berikut:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Ganti ZUMPAPPNAME dengan nama backend seluler Azure App Service. Setelah backend dikonfigurasi, jalankan perintah berikut:

cordova run android

Setelah startup awal selesai, Anda dapat menambahkan dan menghapus item dari daftar. Item Todo disimpan dalam instans Azure SQL yang tersambung ke backend Azure Mobile Apps Anda.

Jika emulator tidak dimulai secara otomatis, buka Android Studio, lalu pilih Konfigurasikan>Manajer AVD. Anda kini dapat memulai emulator secara manual. Jika menjalankan adb devices -l, Anda akan melihat perangkat emulasi yang dipilih. Anda kini dapat menjalankan cordova run android.

Apache Cordova App

Langkah berikutnya

Lanjutkan untuk menerapkan sinkronisasi data offline.