Jump mulai bereaksi asli dengan Expo

Reaksi asli adalah platform yang memungkinkan Anda untuk membangun aplikasi seluler asli menggunakan JavaScript. Seperti namanya, ia gunakan Reaksi , jadi menyusun antarmuka seluler mirip dengan menggunakan reaksi di web. Daripada membuat komponen menggunakan tag HTML, ia memiliki set komponennya sendiri yang mengikat komponen UI asli.

Reaksi asli bisa rumit untuk diatur, terutama ketika datang untuk mendorong pemberitahuan. Anda perlu mengatur sertifikat dan menyelam ke objektif-C untuk iOS dan Java untuk Android. Namun, Expo. Menghilangkan kebutuhan akan hal ini.

Membangun situs web daripada aplikasi? Anda bisa menggunakan yang layak Pembangun Situs Web . Dan untuk memelihara situs, dapatkan hosting web. tepat.

• 30 alat desain web untuk mempercepat alur kerja Anda

Expo berarti Anda dapat membuat Reall Native Apps dan menyebarkannya ke toko aplikasi hanya menggunakan JS. Selain itu, ia menawarkan SDK dengan akses ke fungsionalitas asli seperti pemberitahuan, kamera, kontak, lokasi, dan sebagainya. Ini juga menyediakan akses ke beberapa komponen UI yang tidak termasuk dalam reaksi asli inti, tetapi sering digunakan, seperti ikon, tampilan kabur dan sebagainya tanpa perlu menulis garis kode asli.

Expo juga dapat membuat build aplikasi-ready-ready tanpa perlu membangun menggunakan Xcode atau Android Studio. Jika Anda belum pernah menggunakan sebelumnya, mereka bisa menjadi tempat yang menakutkan, terutama jika Anda baru memulai dengan reaksi asli - atau tidak percaya pada umumnya dengan Cara Membuat Aplikasi . Aplikasi (atau proyek) juga dapat dipublikasikan ke Expo daripada mengirimkan ke App Store, yang memungkinkan pengguna mencoba proyek melalui Expo Mobile Client. Jangan khawatir, ini akan ditanggung nanti!

Apakah Anda membangun aplikasi Anda dengan tim? Simpan file Anda di aksesel, dapat diandalkan penyimpanan awan .

01. Mengatur Expo

Menginstal Expo adalah proses yang mudah. Pergi ke Situs. dan unduh XDE terbaru, lalu instal aplikasi seluler di ponsel atau tablet Anda. Klien seluler memungkinkan menjalankan aplikasi pada perangkat nyata melalui aplikasi mereka tanpa memerlukan lisensi pengembang atau pengaturan sertifikat di muka.

Anda kemudian dapat mempublikasikan aplikasi ke layanan Expo sehingga pengguna dapat menjalankan proyek jadi Anda melalui Klien Mobile Expo, tanpa perlu melalui App Store dan Google Play Review Proses.

Expo tidak mendukung aplikasi yang berdiri sendiri yang dapat dipublikasikan secara manual ke App Store atau Play Store, namun Anda akan memerlukan akun pengembang untuk platform yang Anda lepaskan. Program Pengembang Apple biaya £ 79 per tahun dan Google's Play Console Biaya satu kali biaya $ 25 USD.

02. Buat aplikasi pertama Anda

Ayo ke bisnis dan buat aplikasi pertama kami dengan Expo. Buka Expo XDE, pilih Project & GT; Proyek baru dan pilih templat kosong. Instal semua dependensi dan mulai React Native Packager, yang menggabungkan semua aset.

Dari sini, Anda dapat mempublikasikan aplikasi, berbagi aplikasi ke Klien Mobile Expo atau jalankan aplikasi pada simulator. Aplikasi ini akan melibatkan pemberitahuan push, sehingga Anda akan berbagi ke klien ponsel Expo, karena simulator tidak mendukungnya. Klik tombol Bagikan untuk mendapatkan kode QR untuk memindai atau opsi untuk mengirim tautan melalui SMS atau email. Pindai kode QR dengan klien Expo. Ini menjalankan aplikasi melalui klien Expo dan membuka ke layar dengan: 'Buka App.js untuk mulai mengerjakan aplikasi Anda!'

Dengan aplikasi berjalan, buka proyek di editor kode favorit Anda dan buka App.js. Temukan teks di atas dan ubah ke 'Hello World!' Klasik, lalu simpan. Anda harus melihat ulang aplikasi secara otomatis dan memiliki teks 'Hello World!' Sekarang terlihat. Sihir!

Saat Anda berkembang, mengguncang perangkat akan mengungkapkan menu pengembang, yang memiliki opsi bermanfaat untuk debugging. Dari menu ini Anda juga dapat kembali ke Home Expo - membantu untuk keluar dari aplikasi atau beralih ke yang lain.

03. Tambahkan pemberitahuan

Sekarang Anda memiliki aplikasi dasar yang diatur dan berjalan, mari kita tambahkan kemampuan untuk mengirim dan menerima pemberitahuan. Ini biasanya akan memerlukan obyektif-C dan Java, mengintegrasikan layanan pihak ketiga untuk mengirim notifikasi dan Anda juga perlu mengatur sertifikat untuk iOS dan membuat kunci untuk Android.

Pertama, Anda perlu mengimpor izin dan pemberitahuan dari Expo dan membuat fungsi baru di kelas aplikasi:

 Impor {izin, notifikasi} Dari 'Expo';
Aplikasi Kelas Default Ekspor Memperpanjang React.Component {
  async registerforpushnotification () {
  }
} 

Di sini Anda menggunakan kata kunci async untuk memanfaatkan fitur ES2017 async / menunggu - reaksi asli memiliki Babel bekerja di bawah kap sehingga Anda dapat memanfaatkan semua kebaikan javascript baru. Sekarang, mari kita minta izin pemberitahuan dan mengambil token push expo - untuk mengidentifikasi perangkat - sehingga Expo tahu di mana mengirim pemberitahuan push:

 async registerforpushnotification () {
  Const Result = menunggu permisi.sasync (izin.remote_notification);
  If (Hasil.Status! == 'Gradeed') {
    kembali;
  }
  const token = menunggu notifikasi.getexpopushtokeasync ();
  konsol.log (token);
} 

Di sini, Anda akan meminta izin pemberitahuan menggunakan metode Permisions.Sasync (). Peringatan hanya akan ditampilkan di iOS sebagai Android memungkinkan pemberitahuan secara default. Meskipun demikian, Anda sebenarnya masih perlu menjalankan logika yang sama di Android, karena mungkin untuk mematikan notifikasi.

Selanjutnya, periksa responsnya. Jika notifikasi tidak diberikan maka Anda dapat berhenti dan kembali dari fungsi. Jika pemberitahuan diberikan, Anda mendapatkan token push dari layanan Expo. Akhirnya, Anda dapat mencatat token untuk digunakan nanti untuk menguji notifikasi dan ini akan masuk ke Expo XDE.

Perlu dicatat pada titik ini - pada iOS - peringatan ini hanya dapat dipicu sekali dengan desain; Jadi, jika pengguna menyangkal izin, Anda mungkin ingin mempertimbangkan untuk menambahkan pemberitahuan atau waspada khusus sebelum kembali dari fungsi. Untuk mengaktifkan pemberitahuan pada saat ini, pengguna harus pergi ke pengaturan aplikasi (dalam kasus kami, ini akan menjadi Expo) & gt; Pemberitahuan dan memungkinkan mereka dari sana. Karena itu, Anda perlu menghapus klien ponsel Expo dan menginstal ulang jika Anda ingin menguji peringatan izin pada iOS lebih dari sekali.

Selain itu, Expo menyediakan metode yang disebut Permissions.GetAnync () dan ini berfungsi dengan cara yang mirip dengan izin. Passync (), hanya tanpa mematikan peringatan iOS. Ini bisa berguna jika Anda ingin memeriksa status terlebih dahulu untuk membuat aliran khusus yang akan meminta Anda untuk izin, misalnya. Jika peringatan iOS sebelumnya telah dipicu (ingat, itu hanya dapat dipecat sekali per instalasi aplikasi), permisi.sasync () akan mengembalikan informasi yang sama dengan permisi.getasync (), jadi dalam kasus penggunaan kami yang tidak kami butuhkan untuk menggunakan izin.getasync ().

Anda kemudian perlu memanggil fungsi ini dalam metode Lifecycle ComponentDidMount sehingga berjalan pada peluncuran aplikasi:

 ComponentDidMount () {
  this.registerforpushnotification ();
} 

Selanjutnya, jika Anda menerima izin pemberitahuan, aplikasi Anda akan dapat menerima notifikasi lokal dan jarak jauh. Pemberitahuan lokal kemudian diatur dan dikirim melalui perangkat langsung ke aplikasi dan tidak memerlukan koneksi internet. Pemberitahuan jarak jauh datang dari server dan mengirim pemberitahuan melalui layanan Pemberitahuan Push Apple (APNS) atau layanan Google Cloud Messaging (GCM). Proses ini juga akan memerlukan akses ke koneksi internet untuk menerimanya.

Expo memiliki layanan untuk mengirim pemberitahuan di https://exp.host/--/api/v2/push/send; Yang perlu Anda lakukan adalah mengirim beberapa data ke sana. Ini kemudian akan terlihat sedikit seperti berikut:

 {
  // token push.
  "Ke": & lt; token dari aplikasi & gt;
  // judul pemberitahuan.
  "Judul": "Judul Pemberitahuan",
  // Badan pemberitahuan.
  "Tubuh": "Tubuh Pemberitahuan",
  // lulus dalam data sebagai objek, ini dapat digunakan saat menangani notifikasi.
  "Data": {"Nilai": "Halo World!" }
} 

Sebelum kami menguji pemberitahuan, kami akan mengkonfigurasi aplikasi kami untuk menangani pemberitahuan jika aplikasi ini terbuka. Dengan desain, iOS, dan Android tidak menunjukkan pemberitahuan saat aplikasi terbuka. Anda juga dapat menangani data apa pun yang dikirim dalam pesan push di sini, jika kita perlu menindaklanjutinya. Mari kita buat fungsi baru untuk menangani ini dan mengingatkan nilai data properti:

 Handlenotification (Notification) {
  peringatan (notification.data.value);
} 

Kemudian dalam metode LifeCycle ComponentDIDMount kami, Anda perlu mengatur pendengar, yang memanggil Pemberitahuan Handler yang baru saja kami buat:

 ComponentDidMount () {
  this.registerforpushnotification ();
  Notifikasi.addlistener (ini.handlenotification);
} 

Anda sekarang diatur. Mari kirim pemberitahuan push dengan permintaan curl:

 curl \
  -X Post \
  -H Jenis Konten: Aplikasi / JSON "\
  -d '{
    "Untuk": "& lt; token & gt;",
    "Judul": "Judul Pemberitahuan",
    "Tubuh": "Tubuh Pemberitahuan",
    "Data": {"Nilai": "Halo World!" }
  } '\
  https://exp.host/--/api/v2/push/send

Anda dapat mengambil perintah curl ini sini . Jika Anda tidak terbiasa dengan Curl, Anda dapat mengirim permintaan menggunakan sesuatu seperti Tukang pos , yang menggunakan GUI untuk mengirim permintaan.

Setelah permintaan dikirim, Anda sekarang harus melihat pemberitahuan datang. Tidak ada batasan menggunakan layanan push expo. Dalam skenario dunia nyata, didorong untuk menggunakan Batch API dengan mengirimkan array pemberitahuan push, dalam batch 100, dikirim untuk efisiensi:

 [
  {// objek notifikasi seperti di atas},
  {// objek notifikasi lain}
] 

04. Terbitkan dengan Expo

Jadi, sekarang kita memiliki aplikasi asli reaksi baru yang mengkilap (bahkan jika belum berbuat banyak!), Bagaimana kita membiarkan orang lain menggunakannya tanpa menjalankannya dari Expo Xde? Cara paling sederhana adalah dengan mengklik Publish dari XDE. Ini akan mempublikasikan proyek ke Expo dan tautan akan muncul di profil Anda, yang dapat Anda temukan di https://expo.io/@< ;username>

Ketika Anda mengunjungi tautan proyek yang diterbitkan, akan ada kode QR untuk memindai (terletak di antara opsi yang sama dengan XDE) dengan klien ponsel Expo, sama seperti selama pengembangan. Jika kami ingin memperbarui aplikasi, yang perlu kita lakukan adalah menerbitkan ulang dan perubahan akan tersedia untuk pengguna saat menjalankan aplikasi lagi.

Artikel ini awalnya diterbitkan dalam penerbitan 297 Net, majalah terlaris di dunia untuk desainer dan pengembang web. Berlangganan bersih di sini .

Ingin belajar lebih banyak cara Anda dapat menguasai bereaksi?

Jika Anda tertarik untuk belajar lebih banyak tentang bereaksi, pastikan Anda telah mengambil tiket Anda Hasilkan London dari 19-21 September 2018 . Setelah mendirikan React Academy untuk mengajar bereaksi di seluruh dunia dan diluncurkan sizzy.co.co. dan ok-google.io. , Kristijan Ristovski akan mengirimkan lokakarya - belajar bagaimana berpikir dalam bereaksi - di mana ia akan mengeksplorasi reaksi praktik terbaik dan mengajarkan Anda solusi untuk masalah nyata yang mungkin Anda temui dalam proses membangun aplikasi.

Hasilkan London berlangsung dari 19-21 September 2018. Dapatkan tiket Anda sekarang .

Artikel terkait:

• Dapatkan kepala Anda bereaksi dengan lima faktor ini
• 10 Tips Ahli ReactJS yang perlu Anda ketahui hari ini
• Membangun aplikasi seluler asli dengan reaksi asli