Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic

Memulai Dengan Ionik: Cordova

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dzu Al-Faqqar (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam angsuran terakhir dalam seri Memulai dengan Ionic ini, Anda akan belajar cara memanfaatkan Cordova untuk menambahkan kemampuan perangkat keras perangkat ke aplikasi Anda. Kita akan melihat bagaimana untuk menggunakan fitur seperti geolocation dan saya akan menunjukkan Anda bagaimana mengintegrasikan dengan perpustakaan ngCordova untuk menyelesaikan aplikasi kami. Anda akan ingin untuk memastikan Anda telah menyiapkan mesin Anda untuk ionik sebelum kita mulai, dan pastikan Anda memiliki perkakas spesifik platform Anda mengatur juga.

File-file proyek

File-file proyek tutorial tersedia di GitHub. Premis umum dari app adalah bahwa hal itu menunjukkan beberapa informasi tentang fasilitas dekat Anda. Dalam tutorial ini, kita menambahkan kemampuan untuk mencari lokasi dan Tampilkan hasil di dekat Anda. Anda dapat melihat contoh bekerja di sini.

Jika Anda menduplikasi proyek, Anda dapat juga kode sepanjang dengan menggunakan Git dan menjalankan git checkout-b mulai. Pengkodean ini untuk ini pelajaran mulai mana posting terakhir, mendapatkan mulai dengan Ionik: navigasi terputus. Anda juga dapat melihat pratinjau awal titik hidup.

Menyiapkan Cordova

Sebelum kita menulis kode apapun, kita perlu mengatur proyek kami. Ionik akan mendirikan proyek Cordova dasar, tetapi kita perlu untuk menginisialisasi beberapa hal tambahan diri kita sendiri.

Pertama, kita perlu menginstal ngCordova Perpustakaan. Ini adalah modul sudut yang membuat menggunakan beberapa plugin yang paling populer Cordova jauh lebih mudah. (Walaupun tidak semua plugin yang didukung oleh ngCordova.) Bower digunakan untuk memasang LSB ini.

Kedua, kita perlu menambahkan sebuah platform untuk proyek kami. Ini akan menjadi ios atau android (atau keduanya!), tergantung pada platform Anda memilih untuk mendukung. Saya telah menggunakan ios dalam contoh saya, tetapi Anda dapat mengganti bahwa dengan android untuk mencapai hal yang sama untuk platform tersebut.

Ketiga, kita akan menginstal plugin geolokasi untuk Cordova. Hal ini meningkatkan aplikasi Anda dengan kemampuan untuk mendapatkan lokasi pengguna (yang memerlukan izin). Anda dapat melihat daftar semua plugin di https://cordova.apache.org/plugins/ dengan rincian tentang cara setup masing-masing.

Perintah berikut harus dijalankan dari akar proyek untuk melakukan tiga langkah setup.

Setelah itu telah selesai, kita perlu menambahkan ngCordova ke aplikasi sehingga hal ini diakui oleh ionik. Buka www/index.html file dan tambahkan baris berikut setelah ionic.bundle.js file.

Maka kita perlu memperbarui file www/js/app.js untuk memasukkan modul ngCordova. Baris pertama harus diperbarui untuk muncul sebagai berikut.

Sekarang bahwa kami telah mendapat dependensi kita diperbarui, proyek kami siap untuk menggunakan plugin geolokasi. Langkah berikutnya adalah untuk mengatur pandangan baru untuk mulai menggunakannya!

Menambahkan tampilan lokasi

Kami akan membuat layar pendaratan baru untuk aplikasi. Layar ini menampilkan pesan tentang menggunakan lokasi saat ini pengguna untuk menemukan tempat terdekat. Mereka akan tekan tombol untuk mengkonfirmasi mereka berharap app untuk mengakses lokasi mereka, dan kemudian melihat daftar tempat yang mencerminkan lokasi mereka saat ini.

Data lokasi pengguna adalah kekhawatiran privasi bahwa aplikasi harus berhati-hati ketika mengumpulkan, jadi mobile perangkat tidak membiarkan aplikasi untuk secara otomatis memiliki akses ke data geolokasi. Aplikasi harus meminta izin (yang dapat menolak atau dicabut setiap saat) sehingga Anda perlu diingat bahwa ketika menggunakan plugin tertentu yang memerlukan izin. (Menggunakan data tersebut dengan hati-hati dan tidak melanggar privasi pengguna Anda!)

Pertama, kita akan menciptakan template untuk tampilan lokasi kami. Buat sebuah file baru di www/views/location/location.html dan meliputi. (Ini semua harus familier dari tutorial sebelumnya, tetapi pada dasarnya menciptakan tampilan baru dengan tombol yang akan memanggil metode di controller kita, yang akan kita definisikan selanjutnya.)

Kami akan membuat controller shell, dan kemudian tambahkan sebuah metode untuk menangani mendapatkan pengguna 's lokasi. Buat file baru yang lain di www/views/location/location.js dan mencakup kode berikut. Pastikan untuk juga link ke file ini di www/index.html file.

Saat ini kami memiliki pandangan lokasi baru, tapi tombol tidak bekerja dulu. Anda dapat mempratinjau app di browser Anda dengan melayani ionik. Anda harus dapat melihat pemandangan jika Anda pergi ke http://localhost:8100/#/lokasi.

Anda akan melihat layanan yang disebut $cordovaGeolocation di konstruktor controller, yang akan memberikan kami akses ke data lokasi pengguna. Seluruh layanan yang disuntikkan yang diperlukan hanya untuk menangani logika bisnis apa yang harus dilakukan dengan data lokasi.

Ada benar-benar dua langkah yang terlibat dalam mendapatkan lokasi pengguna dalam aplikasi ini, pertama adalah mendapatkan geolocation data dari Cordova plugin (yang hanya mengembalikan nilai lintang dan bujur), dan kemudian melakukan reverse lookup di API dapat membuat geocode untuk Google untuk menemukan saat ini lokasi tempat (yang bekerja baik dengan kami API panggilan).

Tambahkan berikut metode ke controller, dan kita akan pergi melalui itu secara rinci di bawah ini.

Hal pertama adalah untuk menggunakan layanan $ionicLoading untuk menampilkan sebuah loader sementara lokasi terdeteksi.

Kemudian kami menggunakan layanan $cordovaGeoposition, yang memiliki metode yang disebut getPosition untuk mendapatkan posisi saat ini. Kita menetapkan pilihan, yang nilai default yang wajar. Anda dapat membaca tentang pilihan getPosition lainnya dalam dokumentasi.

Metode getPosition kembali janji, jadi kami menggunakan kemudian untuk menangani respon. Dengan asumsi pengguna setuju untuk berbagi lokasi mereka, hal itu memberikan kita suatu objek yang berisi koordinat garis lintang dan bujur. Kami kemudian akan menggunakan nilai-nilai tersebut untuk memanggil API untuk melakukan dapat membuat geocode untuk reverse lookup tempat terdekat. Jika gagal, menangkap handler akan menggunakan $ionicPopup untuk menampilkan peringatan yang gagal.

Layanan $http yang digunakan untuk mencari reverse dapat membuat geocode untuk, dan jika berhasil kita perlu memeriksa jika hasil apapun dikembalikan. Jika salah satu ditemukan, nilai Jasa Geolocation diperbarui dan pengguna akan diarahkan ke dalam daftar tempat-tempat yang menggunakan $state.go. Sebaliknya, menggunakan $ionicPopup untuk menampilkan peringatan mengatakan bahwa ada tempat yang ditemukan.

Itulah yang telah kami lakukan untuk mengaktifkan fitur geolokasi perangkat di app kami. Namun, kami masih harus membuat beberapa tweak kecil untuk melihat tempat-tempat dan app.js file.

Pertama membuka www/js/app.js file dan layanan Geolocation pembaruan berikut. Ini diperlukan untuk menghapus nilai default Layanan geolocation yang kita sebelumnya sulit dikodekan ke Chicago, dan mengaktifkan siklus mencerna dengan benar Sync perubahan.

Kemudian memodifikasi tampilan default untuk app app dengan memperbarui baris terakhir konfigurasi berikut. Ini akan membuat aplikasi mulai pada tampilan lokasi sebagai gantinya.

Terakhir, kita ingin men-tweak tampilan tempat untuk tidak lagi cache (sehingga lokasi terbaru selalu tercermin), dan untuk mengarahkan ke tampilan lokasi jika lokasi tidak ditemukan. Buka www/views/places/places.html dan memperbarui baris pertama sebagai berikut.

Lalu buka www/views/places/places.js dan memperbarui awal controller untuk mencocokkan berikut.

Kami melakukan pemeriksaan cepat sebelum kebakaran controller untuk mendeteksi jika geolocation telah ditemukan, jika tidak kita mengarahkan ulang ke lokasi untuk me-reset.

Ini akan benar-benar juga bekerja di browser Anda, browser memiliki dukungan untuk fitur geolokasi. Pada bagian berikutnya kita akan secara singkat berbicara tentang bagaimana untuk melihat pratinjau app dalam sebuah emulator.

Melihat pratinjau dalam sebuah Emulator

CLI ionik memiliki perintah yang memungkinkan Anda dengan mudah meniru app dalam versi perangkat lunak. Tidak semua fitur perangkat keras tersedia, tetapi banyak yang dicontoh, termasuk geolokasi.

Menggunakan ionik meniru ios, Ionic akan mulai emulator dan memuat app (demikian pula untuk Android). Jika Anda memiliki kesalahan, ada kemungkinan bahwa mesin Anda belum sepenuhnya setup untuk platform Anda mencoba untuk meniru.

Perintah ini akan boot versi nyata dari platform OS, dan mensimulasikan sebuah perangkat yang sangat realistis. Untuk seseorang yang tidak memiliki perangkat yang sebenarnya untuk menguji dengan, ini adalah cara yang bagus untuk cepat verifikasi perangkat yang berbeda bekerja dengan aplikasi Anda.

Anda mungkin perlu me-reset emulator kadang-kadang untuk memastikan bahwa perubahan yang Anda buat tidak bertahan. Misalnya, jika Anda menolak izin aplikasi untuk geolocation, Anda mungkin harus mencari pengaturan untuk memungkinkan itu kemudian, atau Anda dapat mengatur ulang emulator untuk menghapus pengaturan.

Kesimpulan

Dalam tutorial ini kita melihat bagaimana menggunakan Cordova untuk menciptakan sebuah aplikasi yang memanfaatkan kemampuan hardware dan sensor. Menggunakan ngCordova, itu sangat mudah untuk mengakses informasi ini dalam apl ionik. Anda sekarang memiliki akses ke fitur perangkat seperti kamera, geolocation, jari cetak pembaca, dan kalender. Bila Anda harus memanfaatkan perpustakaan ngCordova untuk membuatnya lebih mudah untuk mengintegrasikan mungkin, tapi ada plugin lain Cordova tidak terkena oleh ngCordova.

Hal ini juga menyimpulkan memulai dengan ionik seri. Anda sekarang harus memiliki pemahaman dasar-dasar dan akan mampu bergerak maju dengan ionik. Jika Anda tertarik di lebih, memeriksa beberapa kami kursus dan tutorial pada kerangka ionik lainnya.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.