Membuat aplikasi Apache Cordova

Artikel
06/25/2019

Gambaran Umum

Tutorial ini menunjukkan kepada Anda cara menambahkan layanan backend berbasis cloud ke aplikasi seluler Apache Cordova dengan menggunakan backend aplikasi seluler Azure. Anda membuat backend aplikasi seluler baru dan aplikasi Apache Cordova daftar Todo sederhana yang menyimpan data aplikasi di Azure.

Menyelesaikan tutorial ini adalah prasyarat untuk semua tutorial Apache Cordova lainnya tentang menggunakan fitur Mobile Apps di Azure App Service.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan prasyarat berikut:

PC dengan Visual Studio Community 2017 atau yang lebih baru.
Alat Visual Studio untuk Apache Cordova.
Akun Azure aktif.

Anda juga dapat melewati Visual Studio dan menggunakan baris perintah Apache Cordova secara langsung. Menggunakan baris perintah berguna saat menyelesaikan tutorial di komputer Mac. Mengkompilasi aplikasi klien Apache Cordova menggunakan baris perintah tidak tercakup dalam tutorial ini.

Membuat backend aplikasi seluler Azure

Masuk ke portal Azure.
Klik Buat sumber daya.
Dalam kotak pencarian, ketik Aplikasi Web.
Dalam daftar hasil, pilih Aplikasi Web dari Marketplace.
Pilih Langganan dan Grup Sumber Daya Anda (pilih grup sumber daya yang sudah ada atau buat yang baru (menggunakan nama yang sama dengan aplikasi Anda)).
Pilih Nama unik aplikasi web Anda.
Pilih opsi Terbitkan default sebagai Kode.
Di tumpukan Runtime, Anda perlu memilih versi di bawah ASP.NET atau Node. Jika Anda membangun backend .NET, pilih versi di bawah ASP.NET. Jika tidak, jika Anda menargetkan aplikasi berbasis Node, pilih salah satu versi dari Node.
Pilih Sistem Operasi yang tepat, baik Linux atau Windows.
Pilih Wilayah tempat Anda ingin aplikasi ini disebarkan.
Pilih App Service Rencanakan yang sesuai dan tekan Tinjau dan buat.
Di bawah Grup Sumber Daya, pilih grup sumber daya yang sudah ada atau buat yang baru (menggunakan nama yang sama dengan aplikasi Anda).
Klik Buat. Tunggu beberapa menit agar layanan berhasil disebarkan sebelum melanjutkan. Tonton ikon Pemberitahuan (bel) di header portal untuk pembaruan status.
Setelah penyebaran selesai, klik bagian Detail penyebaran lalu klik Sumber Daya Jenis Microsoft.Web/sites. Ini akan menavigasi Anda ke App Service Web App yang baru saja Anda buat.
Klik bilah Konfigurasi di bawah Pengaturan dan di Pengaturan aplikasi, klik tombol Pengaturan aplikasi baru .
Di halaman Tambahkan/Edit pengaturan aplikasi , masukkan Nama sebagai MobileAppsManagement_EXTENSION_VERSION dan Nilai sebagai terbaru dan tekan OK.

Anda semua diatur untuk menggunakan aplikasi Web App Service yang baru dibuat ini sebagai aplikasi Seluler.

Membuat koneksi database dan mengonfigurasi proyek klien dan server

Unduh mulai cepat SDK klien untuk platform berikut:

iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
Cordova
Windows (C#)

Catatan

Jika Anda menggunakan proyek iOS, Anda perlu mengunduh "azuresdk-iOS-*.zip" dari rilis GitHub terbaru. Buka zip dan tambahkan MicrosoftAzureMobile.framework file ke akar proyek.
Anda harus menambahkan koneksi database atau menyambungkan ke koneksi yang sudah ada. Pertama, tentukan apakah Anda akan membuat penyimpanan data atau menggunakan yang sudah ada.
- Buat penyimpanan data baru: Jika Anda akan membuat penyimpanan data, gunakan mulai cepat berikut:
  
  Mulai cepat: Mulai menggunakan database tunggal di Azure SQL Database
- Sumber data yang sudah ada: Ikuti instruksi di bawah ini jika Anda ingin menggunakan koneksi database yang sudah ada
  1. format String Koneksi SQL Database -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}
    
    {your_SQLServer} Nama server, ini dapat ditemukan di halaman gambaran umum untuk database Anda dan biasanya dalam bentuk "server_name.database.windows.net". {port} biasanya 1433. {your_catalogue} Nama database. {your_username} Nama pengguna untuk mengakses database Anda. {your_password} Kata sandi untuk mengakses database Anda.
    
    Pelajari selengkapnya tentang format String Koneksi SQL
  2. Tambahkan string koneksi ke aplikasi seluler Anda Di App Service, Anda dapat mengelola string koneksi untuk aplikasi Anda dengan menggunakan opsi Konfigurasi di menu.
    
    Untuk menambahkan string koneksi:
    1. Klik pada tab Pengaturan aplikasi .
    2. Klik [+] String koneksi baru.
    3. Anda harus memberikan Nama, Nilai , dan Jenis untuk string koneksi Anda.
    4. Ketik Nama sebagai MS_TableConnectionString
    5. Nilai harus berupa string penghubung yang Anda bentuk di langkah sebelumnya.
    6. Jika Anda menambahkan string koneksi ke database SQL Azure pilih SQLAzure di bawah jenis.
Azure Mobile Apps memiliki SDK untuk backend .NET dan Node.js.
- backendNode.js
  
  Jika Anda akan menggunakan aplikasi mulai cepat Node.js, ikuti petunjuk di bawah ini.
  1. Di portal Azure, buka Tabel Mudah, Anda akan melihat layar ini.
  2. Pastikan string koneksi SQL sudah ditambahkan di tab Konfigurasi . Kemudian centang kotak Saya mengakui bahwa ini akan menimpa semua konten situs dan klik tombol Buat tabel TodoItem .
  3. Di Easy Tables, klik tombol + Tambahkan .
  4. Buat TodoItem tabel dengan akses anonim.
- Backend .NET
  
  Jika Anda akan menggunakan aplikasi mulai cepat .NET, ikuti petunjuk di bawah ini.
  1. Unduh proyek server .NET Azure Mobile Apps dari repositori azure-mobile-apps-quickstarts.
  2. Buat proyek server .NET secara lokal di Visual Studio.
  3. Di Visual Studio, buka Penjelajah Solusi, klik kanan proyekZUMOAPPNAMEService, klik Terbitkan, Anda akan melihat Publish to App Service jendela. Jika Anda bekerja di Mac, lihat cara lain untuk menyebarkan aplikasi di sini.
  4. Pilih App Service sebagai target penerbitan, lalu klik Pilih Yang Sudah Ada, lalu klik tombol Terbitkan di bagian bawah jendela.
  5. Anda harus masuk ke Visual Studio dengan langganan Azure Anda terlebih dahulu. SubscriptionPilih , Resource Group, lalu pilih nama aplikasi Anda. Ketika Anda siap, klik OK, ini akan menyebarkan proyek server .NET yang Anda miliki secara lokal ke backend App Service. Setelah penyebaran selesai, Anda akan diarahkan ke http://{zumoappname}.azurewebsites.net/ di browser.

Unduh dan jalankan aplikasi Apache Cordova

Navigasi ke file solusi di proyek klien (.sln) dan buka menggunakan Visual Studio.
Di Visual Studio, pilih platform solusi (Android, iOS, atau Windows) dari menu drop-down di samping panah mulai. Pilih perangkat penyebaran atau emulator tertentu dengan mengklik menu drop-down pada panah hijau. Anda dapat menggunakan platform Android default dan emulator Ripple. Tutorial tingkat lanjut lainnya (misalnya, pemberitahuan push) mengharuskan Anda memilih perangkat atau emulator yang didukung.
Buka file ToDoActivity.java di folder ini - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Nama aplikasinya adalah ZUMOAPPNAME.
Buka portal Azure dan buka aplikasi seluler yang Anda buat. Pada bilah Overview , cari URL yang merupakan titik akhir publik untuk aplikasi seluler Anda. Contoh - nama situs untuk nama aplikasi saya "test123" akan menjadi https://test123.azurewebsites.net.
index.js Buka file di ZUMOAPPNAME/www/js/index.js dan dalam onDeviceReady() metode , ganti ZUMOAPPURL parameter dengan titik akhir publik di atas.

client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

menjadi

client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');
Untuk membuat dan menjalankan aplikasi Cordova Anda, tekan F5 atau klik panah hijau. Jika Anda melihat dialog keamanan di emulator yang meminta akses ke jaringan, terimalah.
Setelah aplikasi dimulai di perangkat atau emulator, ketik teks yang bermakna di Masukkan teks baru, seperti Selesaikan tutorial lalu klik tombol Tambahkan .

Backend menyisipkan data dari permintaan ke dalam tabel TodoItem di SQL Database, dan mengembalikan informasi tentang item yang baru disimpan kembali ke aplikasi seluler. Aplikasi seluler menampilkan data ini dalam daftar.

Anda dapat mengulangi langkah 3 hingga 5 untuk platform lain.

Bagikan melalui