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

Memisahkan Expo aplikasi untuk ExpoKit

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Nafis Iman (you can also view the original English article)

Dalam posting lebih mudah bereaksi asli pengembangan dengan Expo, Anda belajar tentang bagaimana Expo membuatnya lebih mudah bagi pemula untuk memulai membuat aplikasi dengan bereaksi asli. Anda juga belajar bahwa Expo memungkinkan pengembang untuk bangun dan berjalan dengan mengembangkan aplikasi asli bereaksi lebih cepat karena tidak lagi perlu untuk mendirikan Android Studio, Xcode atau alat-alat pengembangan lainnya.

Tapi seperti Anda juga telah melihat, Expo tidak mendukung semua fitur asli yang aplikasi mungkin perlu. Meskipun tim Expo selalu bekerja untuk mendukung fungsi lebih asli, itu adalah ide yang baik untuk belajar bagaimana mengkonversi Expo proyek yang sudah ada untuk sebuah proyek asli standar sehingga Anda dapat dengan mudah transisi jika kebutuhan muncul.

Jadi, dalam dua bagian seri ini, kami mengambil melihat bagaimana untuk melakukannya. Pada bagian pertama dari seri, Anda belajar konsep dasar tentang ExpoKit. Dalam posting ini, kita akan melanjutkan yang kami tinggalkan dengan benar-benar memisahkan aplikasi untuk ExpoKit dan terus pengkodean aplikasi berbagi lokasi.

Memisahkan untuk ExpoKit

Dalam rangka untuk melepaskan untuk ExpoKit, pertama Anda harus mengedit file app.json dan package.json.

Dalam app.json file, pastikan bahwa nama yang telah ditetapkan. Platform harus menjadi platform yang Anda ingin membangun.

Jika Anda ingin membangun untuk iOS, Anda harus menentukan pilihan ios:

Jika Anda ingin mendukung Android, kemudian juga menetapkan opsi berikut:

Ada pilihan lain yang prefilled oleh alat bantu baris perintah exp ketika proyek dibuat. Tetapi yang hanya penting bundleIdentifier untuk iOS dan paket untuk Android. Ini akan menjadi ID unik untuk app setelah mereka mendapatkan diterbitkan ke toko Apple atau bermain. Memisahkan memerlukan rincian karena itu benar-benar menghasilkan kode asli untuk aplikasi yang akan dijalankan pada perangkat. Anda dapat menemukan informasi lebih lanjut tentang opsi konfigurasi yang berbeda untuk app.json file dalam dokumentasi Expo.

Anda dapat melihat isi penuh dari file di GitHub repo.

Selanjutnya, buka package.json file dan tambahkan nama proyek:

Ini harus menjadi nama yang digunakan saat Anda membuat proyek yang menggunakan exp init. Hal ini sangat penting bahwa mereka adalah sama, karena nama yang Anda tetapkan di package.json digunakan saat kompilasi app. inkonsistensi di nama ini akan menyebabkan kesalahan.

Sekarang kita siap untuk melepaskan untuk ExpoKit. Jalankan perintah berikut di root direktori proyek:

Ini akan mendownload paket Expo asli untuk Android dan iOS lokal.

Jika itu berhasil, Anda akan melihat output yang mirip dengan berikut:

Expo detach

Jika Anda sedang menggunakan IOS, Anda perlu menginstal versi terbaru dari Xcode. Pada saat menulis tutorial ini, versi terbaru adalah 9. Selanjutnya, instal CocoaPods dengan menjalankan sudo gem install cocoapods. Hal ini memungkinkan Anda untuk menginstal dependensi iOS asli proyek. Setelah selesai, navigasikan ke direktori ios proyek dan melaksanakan pod Instal untuk menginstal semua dependensi asli.

Instalasi paket asli kustom

Sekarang bahwa kita telah terpisah, kita sekarang dapat menginstal paket asli seperti dalam standar bereaksi asli proyek.

Untuk aplikasi ini, kita harus React Native latar belakang Timer dan pendorong paket.

Pertama, menginstal paket pendorong karena lebih mudah:

Hal ini memungkinkan kita untuk berkomunikasi dengan app pendorong yang Anda buat sebelumnya.

Selanjutnya, instal bereaksi asli latar belakang Timer. Hal ini memungkinkan kita untuk secara berkala mengeksekusi kode (bahkan ketika app adalah di latar belakang) didasarkan pada interval tertentu:

Tidak seperti paket pendorong, ini membutuhkan sebuah perpustakaan yang asli (iOS atau Android) untuk dihubungkan ke app. mengeksekusi berikut perintah melakukan itu untuk Anda:

Setelah selesai, itu juga harus menginisialisasi modul android/app/src/main/host/exp/exponent/MainApplication.java. Tetapi hanya untuk memastikan, memeriksa jika berikut ada dalam file tersebut:

Jika Anda sedang membangun untuk iOS, buka Podfile di dalam direktori ios dan pastikan berikut ini adalah ditambahkan sebelum Deklarasi post_install:

Setelah selesai, jalankan pod install di dalam direktori ios untuk menginstal modul asli.

Untuk Android, hal ini sudah dilakukan secara otomatis ketika Anda menjalankan aplikasi dengan menggunakan Android Studio.

Memperbarui berkas manifes Android

Jika Anda sedang membangun untuk buka Android, Android mewujudkan file (android/app/src/main/AndroidManifest.xml) dan memastikan bahwa hak akses berikut ditambahkan:

Hal ini memungkinkan kita untuk meminta izin untuk pendorong untuk mengakses internet dan Expo untuk mendapatkan lokasi saat ini pengguna pada perangkat Android.

Menjalankan App

Kita belum selesai, tetapi lebih baik untuk menjalankan app sekarang sehingga Anda sudah dapat melihat apakah itu bekerja atau tidak. Dengan cara itu, Anda juga dapat melihat perubahan sementara kami sedang mengembangkan aplikasi.

Langkah pertama dalam menjalankan app adalah untuk melaksanakan exp start dari direktori root dari proyek. Ini akan memulai pembangunan server sehingga setiap perubahan yang Anda buat pada kode sumber akan mendapatkan tercermin dalam pratinjau app.

Jika Anda sedang membangun untuk Android, buka Android Studio dan pilih buka Android Studio proyek yang sudah ada. Dalam direktori selektor yang muncul, pilih folder android dalam proyek Expo. Setelah Anda memilih folder, itu harus indeks file dalam folder itu. Pada saat itu, Anda sekarang harus mampu membangun proyek dengan memilih build > rebuild project dari menu paling atas. Setelah selesai, jalankan aplikasi dengan memilih run > run 'app'.

Android Studio dapat menjalankan app pada perangkat Android yang terhubung ke komputer Anda, pada satu emulator Anda menginstal melalui Android Studio, atau melalui Genymotion (Android Studio secara otomatis mendeteksi sebuah menjalankan emulator misalnya). Untuk aplikasi ini, saya sarankan Anda menggunakan Genymotion emulator karena memiliki bagus GPS emulasi widget yang memungkinkan Anda untuk mengubah lokasi melalui antarmuka Google Maps:

Genymotion location emulation

(Jika Anda mengalami masalah menjalankan app pada perangkat Anda, pastikan untuk memeriksa pertanyaan ini Stack Overflow mendapatkan Android Studio untuk mengenali perangkat Anda.)

Setelah selesai, buka ios/ocdmom.xcworkspace file dengan Xcode. Setelah Xcode dilakukan pengindeksan file, Anda dapat menekan tombol permainan besar itu dan itu akan secara otomatis berjalan app di simulator iOS dipilih Anda.

Xcode juga memungkinkan Anda untuk mengejek lokasi, tetapi hanya ketika Anda membangun aplikasi untuk menjalankan dalam simulator. Membuat perubahan ke kode dan memiliki server pengembangan menyegarkan app tidak akan benar-benar mengubah lokasi. Untuk mengubah lokasi, klik pada ikon kirim dan pilih lokasi yang ingin Anda gunakan:

Xcode location simulation

Lanjutkan pengkodean App

Sekarang kita sudah siap untuk melanjutkan menulis kode untuk app. Saat ini, kami akan menambahkan fungsionalitas untuk menjalankan beberapa kode sementara app adalah di latar belakang.

Menambahkan latar belakang tugas

Impor paket yang ambisius dan Timer latar belakang yang Anda terpasang sebelumnya:

Mengatur nilai kunci Google API proyek Google yang Anda buat sebelumnya:

Menggunakan API lokasi dan izin dari Expo:

Expo api bekerja lintas-platform — hal ini tidak seperti proyek bereaksi asli standar mana Anda harus menginstal sebuah paket seperti bereaksi asli izin untuk mendapatkan akses ke API izin yang bekerja lintas-platform.

Selanjutnya, mengatur interval (dalam milidetik) yang kode untuk melacak lokasi pengguna saat ini akan mengeksekusi. Dalam kasus ini, kami ingin menjalankan setiap 30 menit. Perhatikan bahwa dalam kode di bawah ini kami menggunakan nilai dari variabel location_status untuk memeriksa apakah izin untuk mengakses lokasi saat ini pengguna diberikan atau tidak. Kami akan menetapkan nilai dari variabel ini kemudian, setelah komponen dipasang:

Mendapatkan lokasi

Mendapatkan lokasi saat ini dengan menggunakan API lokasi Expo:

Selanjutnya, menggunakan Google Maps Geocoding API, membuat permintaan ke akhir reverse geocoding dengan menyediakan nilai lintang dan bujur. Ini menghasilkan alamat yang diformat berdasarkan koordinat tersebut:

Mengirim lokasi dengan pendorong

Langkah berikutnya adalah untuk mengirim lokasi menggunakan pendorong. Kemudian kita akan membuat server yang akan berfungsi sebagai endpoint Tupoksi dan pada saat yang sama menampilkan halaman yang menunjukkan lokasi pengguna saat ini.

Update constructor untuk menyetel nilai standar untuk contoh pendorong:

Ketika komponen dipasang, kami ingin menginisialisasi pendorong. Anda sekarang dapat menyediakan kunci pendorong API dan cluster dari pengaturan App pendorong yang Anda buat sebelumnya:

Selanjutnya, Anda sekarang dapat menambahkan kode untuk mengirim lokasi saat ini. Di pendorong, hal ini dilakukan dengan memanggil metode trigger(). Argumen pertama adalah nama acara yang dipicu, dan argumen kedua adalah obyek yang berisi data yang ingin Anda kirim.

Kemudian di server, kita akan berlangganan ke saluran yang sama yang kita akan berlangganan setelah komponen dipasang. Kemudian kami akan mengikat ke lokasi klien acara sehingga setiap kali itu dipicu dari suatu tempat, server juga mendapatkan pemberitahuan (walaupun hanya bila halaman melayani juga berlangganan ke saluran yang sama):

Satu-satunya waktu kami akan meminta izin untuk mengakses lokasi pengguna saat ini adalah ketika komponen dipasang. Kami kemudian akan memperbarui location_status berdasarkan pilihan pengguna. Nilai dapat "diberikan" atau "ditolak".

Ingat bahwa kode untuk memeriksa lokasi pengguna saat ini dijalankan secara berkala. Ini berarti bahwa nilai baru variabel location_status juga akan digunakan pada waktu kemudian ketika fungsi dijalankan. Setelah itu, kami juga ingin berlangganan ke saluran pendorong mana pembaruan lokasi akan dikirim:

Membuat Server

Sekarang kita siap untuk membuat server. Pertama, buat direktori kerja Anda (ocdmom-server) di luar direktori proyek app. arahkan dalam direktori tersebut dan mengeksekusi npm init. Hanya tekan Enter sampai ia menciptakan package.json file.

Selanjutnya, Instal paket-paket yang kita butuhkan:

Berikut ini adalah ikhtisar dari apa setiap paket:

  • express: digunakan untuk membuat server. Ini bertanggung jawab untuk melayani halaman pelacakan serta menanggapi auth endpoint.
  • body-parser: Check middleware yang mem-parsing tubuh permintaan dan membuatnya tersedia sebagai objek JavaScript.
  • pendorong: digunakan untuk berkomunikasi dengan app pendorong yang Anda buat sebelumnya.

Setelah selesai, berkas package.json sekarang harus terlihat seperti ini:

Membuat server.js file dan impor paket kami hanya diinstal:

Mengkonfigurasi server untuk menggunakan paket tubuh-parser dan mengatur folder publik sebagai direktori file statis:

Menginisialisasi pendorong. Nilai-nilai yang diberikan di sini akan datang dari variabel lingkungan. Kami akan menambahkan orang-orang kemudian, ketika kami menyebarkan server:

Melayani halaman pelacakan ketika the basis URL diakses:

Selanjutnya, membuat rute untuk menanggapi permintaan untuk akhir auth. Ini akan memukul setiap kali app menginisialisasi koneksi ke pendorong, serta ketika halaman pelacakan diakses. Apa yang dilakukan adalah mengotentikasi pengguna sehingga mereka dapat berkomunikasi ke app pendorong langsung dari sisi klien.

Catatan bahwa ini tidak benar-benar memiliki langkah-langkah keamanan di tempat. Ini berarti siapa pun hanya dapat membuat permintaan untuk endpoint auth Anda jika mereka memiliki akses ke kunci pendorong App Anda. Di produksi app, Anda ingin keamanan yang lebih kuat!

Terakhir, membuat server mendengarkan port yang telah ditentukan dalam lingkungan variabel. Secara default, it's port 80, tapi kami juga menetapkan ini sebagai nilai alternatif hanya dalam kasus tidak ada:

Pelacakan halaman

Pelacakan halaman menampilkan peta yang mendapatkan diperbaharui setiap kali klien-lokasi acara dipicu dari app. Jangan lupa untuk memasok Google API key:

Selanjutnya, buat public/js/tracker.js file dan tambahkan berikut:

Fungsi di atas ekstrak parameter permintaan dari URL. Kode unik (yang ditampilkan di app) harus dimasukkan sebagai parameter kueri ketika URL dasar server Diakses pada browser. Hal ini memungkinkan kita untuk melacak lokasi pengguna karena itu akan berlangganan kami ke saluran yang sama seperti yang berlangganan oleh app.

Selanjutnya, menginisialisasi pendorong. Kode mirip dengan kode dalam server sebelumnya. Satu-satunya perbedaan adalah bahwa kita hanya perlu menentukan app kunci pendorong, auth endpoint dan gugus:

Periksa jika kode disediakan sebagai parameter permintaan, dan hanya berlangganan ke saluran pendorong jika:

Tambahkan fungsi untuk inisialisasi peta. Ini akan menampilkan peta dengan penanda menunjuk ke lokasi default kita telah menentukan:

Mengikat acara lokasi klien. Fungsi panggilan balik dijalankan setiap kali app memicu peristiwa klien-lokasi yang memiliki kode unik yang sama sebagai salah satu pengguna yang disediakan sebagai parameter permintaan:

Selanjutnya, tambahkan gaya untuk pelacakan halaman (public/css/style.css):

Menjalankan Server

Kita akan menggunakan Now untuk menyebarkan server. It's free untuk proyek-proyek open source.

Instal sekarang global:

Setelah dipasang, Anda sekarang dapat menambahkan pendorong app kredensial sebagai rahasia. Seperti disebutkan sebelumnya, sekarang gratis untuk proyek-proyek open source. Ini berarti bahwa setelah server telah dikerahkan, kode sumbernya akan tersedia di jalur /_src. Ini tidak benar-benar baik karena semua orang juga dapat melihat kredensial app pendorong. Jadi apa yang akan kita lakukan adalah menambahkannya sebagai rahasia sehingga mereka dapat diakses sebagai variabel lingkungan.

Ingat process.env.APP_ID atau process.env.APP_KEY dari kode server sebelumnya? Mereka sedang ditetapkan sebagai variabel lingkungan melalui rahasia. pusher_app_id adalah nama yang diberikan untuk rahasia, dan YOUR_PUSHER_APP_ID adalah ID dari pendorong app. mengeksekusi perintah berikut untuk menambahkan aplikasi pendorong Anda kredensial sebagai rahasia:

Setelah Anda menambahkan mereka, Anda sekarang dapat menggunakan server. APP_ID adalah nama variabel lingkungan, dan pusher_app_id adalah nama dari rahasia Anda ingin mengakses:

Ini adalah bagaimana terlihat setelah itu dilakukan penggelaran. URL mengembalikan 's the basis URL dari server:

deploy server

Salin URL itu ke App.js file dan menyimpan perubahan:

Pada titik ini, app sekarang harus sepenuhnya berfungsi.

Kesimpulan

That's it! Dalam dua bagian seri ini, Anda telah belajar bagaimana untuk melepaskan proyek Expo yang sudah ada untuk ExpoKit. ExpoKit adalah cara yang baik untuk menggunakan beberapa alat yang menyediakan Expo platform sementara aplikasi Anda telah dikonversi menjadi sebuah proyek asli standar. Hal ini memungkinkan Anda untuk menggunakan modul asli yang ada untuk bereaksi asli dan untuk membuat Anda sendiri.

Sementara kau di sini, check out beberapa posting kami pada pengembangan aplikasi bereaksi asli!

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.