Cara Membuat Aplikasi Android Dasar di PhoneGap

Bagi kebanyakan orang, ide membuat aplikasi Android terdengar sama sulitnya dengan mendaki gunung. Orang menghabiskan waktu berbulan-bulan untuk mempelajari cara mengode dan menggunakan SDK Android untuk mengembangkan aplikasi, dan rata-rata orang, terutama pemilik bisnis online, mungkin tidak memiliki waktu seperti ini.

Untungnya, ada cara pintas sederhana untuk membuat apa yang disebut aplikasi hibrida, bukan menciptakan aplikasi asli. Aplikasi hibrida pada dasarnya menggunakan Android yang dibangun di WebView untuk menyajikan aplikasi Anda, dengan plug-in tersedia yang memungkinkan aplikasi hibrid Anda mengakses kamera, layanan perpesanan, dan aspek lain dari sistem Android. Aplikasi hibrida dapat dibangun dengan mudah untuk beberapa sistem operasi, karena sebagian besar menggunakan Java, HTML5, dan CSS untuk berjalan.

Panduan ini akan mengajari Anda cara membuat aplikasi hibrid menggunakan platform aplikasi-bangunan populer PhoneGap. Apa yang akan kami lakukan adalah mengubah situs web Anda menjadi file .apk (aplikasi Android) yang dapat diinstal yang dapat diinstal pada ponsel Android apa pun. Ketika aplikasi diluncurkan, itu hanya akan membuka situs web Anda di browser WebView asli Android, tetapi akan muncul sebagai aplikasi layar penuh - tidak ada bilah navigasi URL atau petunjuk lainnya bahwa situs web Anda hanya disajikan di browser.

Persyaratan

Situs web Anda sendiri (untuk tujuan mengikuti panduan ini, Anda cukup memulai blog WordPress gratis)

Akun GitHub

Akun PhoneGap
Notepad ++ (atau perangkat lunak pengedit teks serupa yang dapat mengenali kode)
Perangkat lunak pengeditan foto untuk membuat ikon aplikasi (Photoshop, GIMP, dll)

Coding Templates

Ini adalah templat kode yang dapat Anda gunakan untuk tujuan panduan ini - mereka berasal dari aplikasi saya sendiri yang dikembangkan dengan PhoneGap, tetapi saya telah menghapusnya dari informasi pribadi saya. Pengaturan ini dari awal dengan semua parameter yang benar membutuhkan waktu beberapa hari untuk mengatasi masalah, jadi saya menyediakan ini untuk kenyamanan Anda. Sama-sama!

> Config.XML
> Index.HTML

Mulai

Buat folder di desktop Anda dan beri nama www: tanpa tanda kutip. Ini akan menjadi direktori utama proyek, di mana pembangun PhoneGap akan berharap untuk menemukan semua file untuk proyek Anda. Sekarang kita akan membuat ikon untuk aplikasi Anda.

Buka perangkat lunak pengedit foto Anda dan buat gambar baru dalam format .PNG. Pengaturan gambar Anda akan terlihat seperti ini:

Dan sekarang Anda dapat menggambar ikon Anda, misalnya saya hanya akan membuat tombol kecil:

Ukuran gambar tergantung pada layar ponsel pribadi Anda, tetapi jika Anda berniat mengembangkan aplikasi untuk banyak perangkat, Anda tentu saja akan membuat beberapa ukuran dari ikon yang sama. Berikut ini adalah tabel ukuran gambar yang digunakan:

36 × 36 (120 dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)

Saya tidak ingin menghabiskan terlalu lama berbicara tentang ukuran layar dan DPI, hanya tahu bahwa DPI cukup banyak berkorelasi dengan resolusi layar. Ponsel yang menggunakan resolusi layar 1080x 1920 akan menggunakan 480dpi, tetapi ini tidak selalu berkorelasi persis dengan ukuran layar. Ponsel dapat memiliki layar 5, 2 atau layar 6 dan memiliki resolusi 1080x2020. Tapi panduan ini bukan tentang layar ponsel pintar, jadi mari kita lanjutkan.

Setelah Anda menggambar ikon Anda, simpan sebagai ikon.png dan pindahkan ke dalam folder www: Anda. Ini akan menjadi ikon default untuk aplikasi Anda. Jika Anda ingin membuat ikon dalam berbagai ukuran yang akan cocok dengan resolusi layar pengguna, Anda akan menyimpan ikon dalam berbagai ukuran dan nama, misalnya Icon144.png, Icon192.png, Icon96.png, dan sebagainya. Kemudian Anda akan mengedit file Config.xml untuk menunjuk ke masing-masing ikon. Mari kita lanjutkan.

Jadi sekarang Anda memiliki ikon untuk aplikasi Anda, Anda memerlukan gambar splash. Ini pada dasarnya adalah layar pemuatan, seperti wallpaper yang ditampilkan sebelum aplikasi Anda dimuat. Ukuran gambar splash bekerja pada prinsip yang sama dengan ikon, tetapi sedikit lebih besar. Inilah tabelnya:

TIP PRO: Jika masalahnya ada pada komputer Anda atau laptop / notebook, Anda harus mencoba menggunakan Perangkat Lunak Reimage Plus yang dapat memindai repositori dan mengganti file yang rusak dan hilang. Ini berfungsi dalam banyak kasus, di mana masalah ini berasal karena sistem yang rusak. Anda dapat mengunduh Reimage Plus dengan Mengklik di Sini

LDPI:
- Potret: 200x320 piksel
- Lanskap: 320x200px
MDPI:
- Potret: 320x480px
- Lanskap: 480x320px
HDPI:
- Potret: 480x800px
- Lanskap: 800x480px
XHDPI:
- Potret: 720px1280px
- Lanskap: 1280x720px
XXHDPI:
- Potret: 960px1600px
- Lanskap: 1600x960px
XXXHDPI:
- Potret: 1280px1920px
- Lanskap: 1920x1280px

Jadi buat gambar splash Anda dalam resolusi untuk perangkat Anda, simpan sebagai Splash.png dan kemudian pindahkan ke dalam folder proyek Anda. Hebat, Anda sekarang memiliki ikon aplikasi dan gambar splash, mari beralih ke pengaturan konfigurasi dan file indeks Anda.

Index.HTML dan Config.XML Dijelaskan

File config.xml inilah yang menentukan lingkungan build (Android, iPhone, Windows Phone), ikon dan lokasi splash, dan plug-in Apache Cordova yang ingin Anda gunakan di aplikasi Anda.

Buka template yang saya berikan di Notepad ++ dan Anda akan melihat garis-garis ini di dekat bagian atas:

Perbarui bidang tersebut dengan informasi Anda, tetapi tinggalkan bidang preferensi saja. Sisa file konfigurasi cukup jelas jika Anda hanya melihat nilai-nilai. Nama preferensi = layar penuh misalnya memberi tahu aplikasi untuk meluncurkan dirinya sebagai aplikasi layar penuh. Tinggalkan semuanya sendirian, kecuali untuk nilai terakhir ini di bagian bawah file:

Ubah ke URL situs web Anda yang sebenarnya. Ini akan memungkinkan pengguna aplikasi untuk sepenuhnya menavigasi situs web Anda, dan hanya situs web Anda - mereka tidak dapat meninggalkan situs web Anda saat menggunakan aplikasi Anda. Tentu saja aplikasi tidak akan memiliki bilah navigasi URL, ini bahkan tidak benar-benar menjadi perhatian, tetapi juga memastikan bahwa pengguna dapat mengakses semua halaman di situs web Anda. * Setelah URL situs web adalah wildcard, yang dalam pengkodean jargon berarti bahwa ia akan menerima apa pun yang dimasukkan sebagai pengganti tanda *.

Tentu saja, jika Anda ingin membatasi pengguna hanya ke halaman tertentu di situs web Anda, Anda akan menambahkan nilai terpisah seperti ini:

Mari kita lanjutkan ke file Index.html, ini adalah roti dan mentega untuk membuat aplikasi benar-benar berfungsi. Buka di dalam Notepad ++ dan ganti bahasa dokumen menjadi HTML. Apa dasarnya index.html adalah memberitahu browser Android cara menampilkan situs web Anda - dalam template yang saya berikan, ada tag untuk menghapus bilah navigasi URL dari browser, memungkinkan tombol kembali ponsel untuk keluar dari aplikasi, dan meluncurkan aplikasi setelah layar splash ditampilkan. Garis yang ingin Anda ubah ada di sini:

var url = 'http://yourwebsite.com'

Membangun Aplikasi di Build PhoneGap

Jadi, masuklah ke akun GitHub Anda, dan navigasikan ke halaman utama repositori Anda. Di bawah nama repositori, klik Unggah File, dan seret folder proyek Anda ke layar pohon berkas. Sekarang ketik pesan commit di bagian bawah, seperti upaya aplikasi pertama saya . Terakhir, klik Komit Perubahan.

Sekarang, masuklah ke halaman Membangun PhoneGap dan masuk. Sekarang klik tombol Aplikasi Baru di halaman pembuatan. Ini akan meminta Anda untuk memasukkan path ke repositori GitHub Anda, jadi lakukan, dan kemudian klik Tarik dari .git reposity.

Sekarang kembali pada halaman pembuatan utama, klik Perbarui kode dan Tarik terbaru.

Terakhir, klik Bangun. Ini akan mengkompilasi aplikasi Anda menjadi file .apk, dan kemudian hadir Anda dengan opsi untuk mengunduh .apk. Anda sekarang dapat mengunduh file .apk ini ke komputer Anda dan mentransfernya ke ponsel Anda, kemudian menginstalnya dari sana. Atau, Anda dapat menggunakan ponsel Anda untuk memindai kode QR di layar komputer Anda untuk secara otomatis menginstal file .apk ke perangkat Android Anda.

Itu dia! Sekarang, untuk menjelaskan kepada Anda beberapa hal penting:

Ini adalah panduan yang sangat sederhana yang membimbing Anda melalui pembuatan aplikasi hybrid yang paling mendasar. Orang-orang biasanya tidak berkeliling membungkus situs web mereka di browser asli dan menjadikannya sebagai aplikasi Android di Google Play store. Tetapi sekarang setelah Anda tahu cara melakukannya, Anda dapat mulai membaca dokumentasi PhoneGap tentang cara menyesuaikan aplikasi Anda dan menambahkan banyak rasa padanya, sehingga Anda dapat dengan mudah membuat aplikasi yang benar-benar berguna.
Kedua, Google Play melarang metode membangun aplikasi semacam ini untuk membuat aplikasi skema tautan untuk satu-satunya tujuan pendapatan. Jadi Anda tidak dapat membuat aplikasi bernama Hasilkan Uang Hari Ini! yang membuka situs web yang benar-benar penuh dengan iklan dan bank pada pendapatan iklan. Anda akan mendapatkan banned dari Google Play store.