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

Bermula Dengan Templat Aplikasi Asli Reaktik

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Neurion (you can also view the original English article)

Merekabentuk aplikasi Reaktif Native dari awal sering proses yang rumit-terutamanya bahagian reka bentuk, kerana anda perlu merancang untuk kedua-dua peranti Android dan iOS. Bukan itu sahaja, tetapi anda juga perlu memastikan aplikasi anda kelihatan bagus pada saiz skrin yang berbeza.

Di sinilah template berguna. Mereka mengendalikan reka bentuk awal untuk anda supaya aplikasi anda kelihatan bagus dengan usaha reka bentuk yang minimum di pihak anda. Terdapat segelintir templat sedemikian di CodeCanyon, pasaran bagi templat dan plugin. Di sana anda boleh mencari pelbagai jenis templat berbeza yang ditujukan kepada jenis aplikasi khusus yang anda ingin buat.

Dalam tutorial ini, kami akan melihat cara menggunakan templat BeoStore. Seperti namanya, BeoStore adalah templat aplikasi e-dagang untuk React Native.

Mendapatkan Templat Dari Marketplace

Anda boleh memuat turun templat dengan pergi ke halaman produk BeoStore di CodeCanyon. Ini templat berbayar, tetapi ia bernilai pelaburan, kerana ia mempunyai kebanyakan ciri yang diperlukan dalam aplikasi e-dagang. Apa yang perlu anda lakukan ialah mengkonfigurasi templat dan menyesuaikannya mengikut keinginan anda. Oops! Google Translate did not respond: please try again!

  • Integrasi penuh dengan WooCommerce: jika anda menjalankan laman web WooCommerce, aplikasinya boleh memaparkan produk yang sama di laman web anda yang sedia ada.
  • Sokongan untuk kedua-dua iOS dan Android: apl berjalan dan kelihatan baik pada platform Android dan iOS.
  • Kemasukan sosial: pelanggan boleh log masuk menggunakan akaun Facebook atau Google mereka.
  • Penyesuaian mudah: semuanya dipecah menjadi komponen. Ini memastikan bahawa anda boleh dengan mudah menyesuaikan template berdasarkan jenama anda.
  • Pemberitahuan push: ini secara automatik memberi amaran kepada pelanggan anda apabila terdapat kemas kini kepada status pesanan mereka. Anda juga boleh menghantar pemberitahuan tolak untuk promosi produk. Pemberitahuan push dilaksanakan dengan Firebase.
  • Sokongan berbilang bahasa: daripada kotak yang anda dapatkan bahasa Inggeris sebagai bahasa utama. Bahasa Vietnam wujud sebagai pilihan kedua, tetapi anda juga boleh menambah bahasa anda sendiri.
  • Integrasi pembayaran selamat: pembayaran dilakukan dengan PayPal.

Sekiranya anda tidak mempunyai akaun Envato lagi, anda boleh mendaftar di sini. Sebaik sahaja selesai, log masuk ke akaun yang baru anda buat. Kemudian anda boleh kembali ke halaman BeoStore dan klik pada butang Buy Now.

Menyediakan Projek

Sebaik sahaja anda membeli template, anda akan mendapat pautan muat turun ke fail arkib template. Ekstrak itu dan anda akan mendapat folder CodeCanyon yang mengandungi MStore 2.2.

MStore 2.2 adalah direktori untuk projek template. Teruskan dan buka tetingkap terminal baharu di dalam direktori itu dan laksanakan arahan berikut:

Ini akan memasang semua dependensi projek. Ini mungkin mengambil sedikit masa bergantung kepada kelajuan muat turun anda, kerana ia perlu memuat turun banyak kebergantungan. Lihat pakej jika anda mahu melihat pakej yang perlu dimuat turun.

Setelah itu selesai, ada langkah tambahan jika anda ingin membina peranti iOS. Pergi ke folder iOS dan laksanakan perkara berikut:

Seterusnya, untuk Android, sambungkan peranti mudah alih anda ke komputer anda dan laksanakan:

Ini akan menyenaraikan semua peranti Android yang disambungkan ke komputer anda. Jika ini adalah kali pertama anda menyambungkan peranti, anda harus mendapat permintaan yang meminta anda jika anda mahu membenarkan komputer untuk debugging USB. Cuma ketik ya apabila anda mendapat arahan itu.

Sekarang anda boleh menjalankan aplikasi pada peranti Android anda:

Untuk iOS:

Jika anda tidak mengalami sebarang kesilapan, anda harus disambut dengan halaman berikut:

MStore Template Home page

Untuk memberi anda idea tentang halaman yang berbeza yang terdapat dalam templat, berikut adalah beberapa tangkapan skrin:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

Penyelesaian Masalah Persediaan Projek

Dalam bahagian ini, saya telah menyusun senarai kesilapan persediaan projek dan penyelesaiannya.

Pelayan Pembangunan Tidak Mula

Sekiranya pelayan pembangunan tidak dimulakan secara automatik apabila anda melaksanakan run-android asli bertindak balas atau tindak balas asli, anda boleh menjalankannya secara manual dengan melaksanakan:

Watch Tangkap Terlalu Panjang untuk Beban

Jika anda mendapat ralat yang serupa dengan yang berikut:

Ini kerana contoh Watchman sedia ada sedang berjalan. Ini adalah komponen dari pelayan pembangunan React Native. Anda boleh menyelesaikan kesilapan ini dan mematikan Penjaga dengan melaksanakan arahan berikut:

Tidak Boleh Mainkan ADB Songsang

Sekiranya anda mendapat ralat berikut:

Ini bermakna bahawa peranti Android anda sedang berjalan pada versi yang lebih rendah daripada 5.0 (Lollipop). Ini sebenarnya bukan kesilapan. Ini bermakna bahawa peranti Android anda tidak menyokong adb terbalik, yang digunakan untuk menyambungkan pelayan pembangunan ke peranti anda melalui debugging USB. Jika ini tidak tersedia, React Native kembali kepada debug menggunakan Wi-Fi. Anda boleh mendapatkan lebih banyak maklumat mengenainya di sini: Menjalankan pada Peranti.

Sesuatu yang lain mungkin menyebabkan binaan anda gagal. Anda boleh menatal ke terminal untuk melihat apakah terdapat ralat yang berlaku sebelum itu.

Tidak Dapat Cari _fbBatchedBridge Variabel

Sekiranya anda mendapat ralat berikut dan pelayan pembangunan sedang berjalan dalam mod Wi-Fi, ini bermakna anda tidak menyediakan IP komputer anda dalam peranti Android anda. (Ini biasanya hanya datang dengan peranti Android di bawah versi 5.0.)

Anda boleh melaksanakan perkara berikut untuk menunjukkan pilihan pemaju React Native pada peranti anda:

Pilih Tetapan Dev dari menu yang muncul. Di bawah bahagian Penyahpepijat, ketik hos dan port pelayan Debug untuk peranti. Masukkan IP dalaman yang diberikan oleh router rumah anda bersama-sama dengan port di mana pelayan pembangunan sedang berjalan dan tekan OK:

Kembali ke skrin utama aplikasinya dan laksanakan kunci input adb keyevent 82 lagi. Kali ini pilih Muat semula untuk memuatkan semula aplikasinya.

Tidak Dapat Cari Firebase, App Compat, atau Perkhidmatan Play GMS

Sekiranya anda mendapat "tidak dapat mencari" kesilapan, ini bermakna anda belum memasang pakej yang bersesuaian menggunakan Pengurus SDK Android.

Berikut adalah pakej yang perlu dipasang:

  • Repositori Sokongan Android
  • Perpustakaan Sokongan Android
  • Perkhidmatan Google Play
  • Google Repository

Pastikan juga kemas kini pakej sedia ada jika terdapat kemas kini yang tersedia.

Masalah Lain

Sekiranya masalah anda tidak melibatkan mana-mana di atas, anda boleh cuba yang berikut:

  • Lihat dokumentasi mengenai penyelesaian masalah.
  • Lihat komen produk template. Anda boleh mencari kesilapan yang anda dapatkan. Cuba untuk umum dan memendekkan mesej ralat walaupun-jangan hanya mencari mesej ralat keseluruhan. Sekiranya anda tidak dapat mencari ralat, anda boleh cuba bertanya soalan anda sendiri dalam benang komen. Pasukan sokongan biasanya menjawab dengan segera.
  • Cuba cari ralat di Google. Walaupun keputusan yang anda temukan tidak melibatkan penggunaan templat, mereka akan memberi anda idea bagaimana menyelesaikan masalah tersebut.
  • Cari StackOverflow atau tanyakan soalan baru. Pastikan anda memasukkan semua butiran yang diperlukan (contohnya mesej ralat, langkah yang telah anda ambil). Terdapat artikel yang baik tentang cara bertanya soalan mengenai StackOverflow.

Menyesuaikan Templat

Tempat yang baik untuk mula belajar bagaimana melakukan sesuatu dalam templat ialah dokumentasinya:

  • Layout Projek: menunjukkan di mana untuk mencari fail yang berbeza dalam templat dan apa yang digunakan untuknya.
  • Migrasi WooCommerce: menunjukkan bagaimana anda boleh menyambungkan laman web WooCommerce anda ke aplikasinya. Menghidupkan aplikasi ke WooCommerce anda bermakna ia akan dapat mengambil semua kategori produk dan produk di kedai WooCommerce anda.
  • Perkhidmatan Migrasi: menunjukkan cara mengkonfigurasi nama aplikasi, Firebase (untuk notifikasi push), dan log masuk sosial.
  • Menyesuaikan: menunjukkan cara menyesuaikan bahasa dan tema.

Pastikan untuk memeriksa mereka! Saya tidak akan mengulangi apa yang disebut dalam dokumentasi. Sebaliknya, apa yang akan kita lakukan dalam bahagian ini adalah untuk menyesuaikan template supaya kelihatan seperti yang kita mahu.

Kebanyakan tetapan konfigurasi projek disimpan di dalam fail app / Constants.js. Berikut adalah beberapa contoh perkara yang boleh anda ubah dari fail ini:

Integrasi WooCommerce: URL kedai WooCommerce yang digunakan oleh aplikasinya. Secara lalai, ini menggunakan mstore.io.

Masuk sosial: Ini dilaksanakan menggunakan Auth0, platform pengesahan. Secara lalai, templat hanya menyokong log masuk Google dan Facebook. Tetapi anda harus dapat menambah sebarang perkhidmatan yang menyokong Auth0.

Ikon: Anda boleh menggunakan sebarang ikon dari Fontawesome, tetapi anda perlu awalan nama dengan ios-.

Tema: Warna untuk komponen yang berbeza yang membentuk setiap halaman juga boleh dikemas kini. Contohnya, jika anda mahu menukar warna latar belakang header, anda boleh mengemas kini nilai untuk TopBar:

Imej: Skrin percikan dan imej lain juga boleh dikemas kini dengan menentukan laluan baru untuk setiap yang berikut:

Imej-imej ini disimpan dalam direktori aplikasi / imej, anda hanya boleh menggantikannya jika anda tidak mahu menyimpan imej-imej lama.

  • Anda juga boleh menukar pilihan PayPal dari fail ini. Pastikan anda membuat Akaun Pembangun PayPal anda sendiri untuk mendapatkan clientID dan rahsiaKey. Jangan lupa untuk mengemas kini sandboxMode kepada palsu apabila anda menggunakan aplikasi anda untuk pengeluaran, kerana secara lalai ia menggunakan mod kotak pasir supaya tidak ada wang sebenar yang akan dibelanjakan untuk urus niaga.
  • Untuk menyesuaikan halaman individu, anda perlu pergi ke direktori aplikasi / bekas. Di sinilah anda akan mencari fail untuk setiap halaman. Sebagai contoh, jika anda ingin menyesuaikan halaman utama, navigasi ke folder rumah dan buka fail index.js. Setelah dibuka, anda akan melihat bahawa halaman itu menggunakan <komponen> untuk memberi setiap kategori produk. Jadi, jika anda mahu menambah gaya umum untuk <komponen> , anda perlu mengemas kini apl / Komponen / ImageCard / index.js fail. Jika tidak, anda boleh mengemas kini gaya dalam halaman itu sendiri:

Kesimpulannya

Tutorial ini tidak bermakna panduan komprehensif mengenai cara menggunakan templat BeoStore. Tetapi kami telah menutupi banyak perkara, terutamanya pada penyelesaian masalah persediaan, yang dokumentasi rasmi kurang.

Langkah seterusnya adalah mencantumkan template ini dengan laman web WooCommerce anda atau malah mengembalikannya supaya ia dapat digunakan untuk jenis aplikasi lain.

Muat turun templat sekarang, atau Jika anda ingin mengetahui lebih lanjut mengenainya, anda boleh menyemak dokumentasi di sini. Anda juga boleh mencari lebih banyak templat aplikasi React Native di CodeCanyon.

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.