Cara Membuat Aplikasi Android Asas di PhoneGap

Panduan ini akan mengajar anda cara membuat aplikasi hibrid menggunakan PhoneGap platform pembuatan aplikasi yang popular. Yang akan kami lakukan adalah mengubah laman web anda menjadi file .apk (aplikasi Android) yang dapat dipasang yang dapat dipasang di mana-mana telefon Android. Semasa aplikasi dilancarkan, ia hanya akan membuka laman web anda di penyemak imbas WebView asli Android, tetapi akan muncul sebagai aplikasi skrin penuh - tidak ada bar navigasi URL atau petunjuk lain bahawa laman web anda hanya disajikan dalam penyemak imbas.

Keperluan

Laman web anda sendiri (untuk tujuan mengikuti panduan ini, anda hanya boleh memulakan blog WordPress percuma)

Akaun GitHub

Akaun PhoneGap
Notepad ++ (atau perisian penyuntingan teks serupa yang dapat mengenali kod)
Perisian penyuntingan foto untuk membuat ikon aplikasi (Photoshop, GIMP, dll)

Templat Pengekodan

Ini adalah templat kod yang boleh anda gunakan untuk tujuan panduan ini - ia adalah dari aplikasi saya sendiri yang dibangunkan dengan PhoneGap, tetapi saya telah melucutkan maklumat peribadi saya. Menyiapkan ini dari awal dengan semua parameter yang betul memerlukan masa beberapa hari untuk menyelesaikan masalah, jadi saya menyediakannya untuk kemudahan anda. Sama-sama!

> Konfigurasi.XML
> Indeks.HTML

Bermula

Buat folder di desktop anda dan panggil ' www: ' tanpa petikan. Ini akan menjadi direktori utama projek, di mana pembangun PhoneGap akan mencari semua fail untuk projek anda. Sekarang kami akan membuat ikon untuk aplikasi anda.

Buka perisian penyuntingan foto anda dan buat gambar baru dalam format .PNG. Tetapan gambar anda akan kelihatan seperti ini:

Dan sekarang anda dapat melukis ikon anda, misalnya saya hanya akan membuat butang kecil:

Ukuran gambar bergantung pada layar telefon peribadi anda, tetapi jika anda ingin mengembangkan aplikasi untuk beberapa peranti, anda tentu akan membuat beberapa ukuran ikon yang sama. Berikut adalah jadual ukuran gambar yang digunakan:

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

Saya tidak mahu menghabiskan terlalu lama untuk membincangkan ukuran skrin dan DPI, hanya tahu bahawa DPI banyak berkaitan dengan resolusi skrin. Telefon yang menggunakan resolusi skrin 1080 × 1920 akan menggunakan 480dpi, tetapi ini tidak semestinya berkorelasi tepat dengan ukuran skrin. Telefon dapat memiliki layar 5,2 'atau layar 6' dan memiliki resolusi 1080 × 1920. Tetapi panduan ini bukan mengenai skrin telefon pintar, jadi mari kita teruskan.

Selepas anda melakar ikon anda, simpan sebagai ikon.png dan pindahkan ke dalam folder www: anda. Ini akan menjadi lalai ikon untuk aplikasi anda. Sekiranya anda ingin membuat ikon dalam pelbagai saiz yang sesuai dengan resolusi skrin pengguna, anda akan menyimpan ikon dalam pelbagai ukuran dan nama, misalnya Icon144.png, Icon192.png, Icon96.png, dan sebagainya. Kemudian anda akan mengedit Konfigurasi.xml fail untuk menunjukkan setiap ikon individu. Mari kita teruskan.

Oleh kerana sekarang anda mempunyai ikon untuk aplikasi anda, anda memerlukan gambar percikan. Ini pada dasarnya adalah skrin pemuatan, seperti kertas dinding yang dipaparkan sebelum aplikasi anda dimuat. Ukuran gambar percikan berfungsi pada prinsip yang sama dengan ikon, tetapi sedikit lebih besar. Inilah jadualnya:

• LDPI:
  • Potret: 200x320 piksel
  • Landskap: 320x200px
• MDPI:
  • Potret: 320x480 piksel
  • Landskap: 480x320 piksel
• HDPI:
  • Potret: 480x800 piksel
  • Landskap: 800x480 piksel
• XHDPI:
  • Potret: 720px1280px
  • Landskap: 1280x720 piksel
• XXHDPI:
  • Potret: 960px1600px
  • Landskap: 1600x960 piksel
• XXXHDPI:
  • Potret: 1280px1920px
  • Landskap: 1920x1280 piksel

Oleh itu, buat gambar percikan anda dalam resolusi untuk peranti anda, simpan sebagai Percikan.png dan kemudian pindahkan ke dalam folder projek anda. Hebat, sekarang anda mempunyai ikon aplikasi dan gambar percikan, mari beralih ke penyediaan fail konfigurasi dan indeks anda.

Index.HTML dan Config.XML Dijelaskan

Fail config.xml adalah yang menentukan lingkungan binaan (Android, iPhone, Windows Phone), ikon dan lokasi percikan, dan pemalam Apache Cordova yang ingin anda gunakan dalam aplikasi anda.

Buka templat yang saya sediakan di Notepad ++ dan anda akan melihat garis-garis ini di dekat bahagian atas:

Kemas kini medan tersebut dengan maklumat anda, tetapi tinggalkan medan 'pilihan' sahaja. Selebihnya fail konfigurasi dapat dijelaskan sendiri jika anda hanya melihat nilainya. Nama pilihan = 'skrin penuh' misalnya memberitahu aplikasi untuk melancarkan dirinya sebagai aplikasi skrin penuh. Tinggalkan semuanya, kecuali untuk nilai terakhir ini di bahagian bawah fail:

Tukarnya ke URL laman web sebenar anda. Ini akan membolehkan pengguna aplikasi menavigasi laman web anda sepenuhnya, dan hanya laman web anda - mereka tidak dapat meninggalkan laman web anda semasa menggunakan aplikasi anda. Sudah tentu aplikasi tidak akan mempunyai bar navigasi URL, ini sebenarnya tidak menjadi perhatian, tetapi juga memastikan bahawa pengguna dapat mengakses semua halaman di laman web anda. * Selepas URL laman web adalah kad liar , yang dalam jargon pengekodan bermaksud bahawa ia akan menerima apa sahaja yang dimasukkan sebagai ganti tanda *.

Sudah tentu, jika anda ingin mengehadkan pengguna hanya pada halaman tertentu di laman web anda, anda akan menambahkan nilai yang berasingan seperti ini:

Mari kita beralih ke Indeks.html fail, ini adalah roti dan mentega untuk menjadikan aplikasi ini berfungsi. Buka di dalam Notepad ++ dan alihkan bahasa dokumen ke HTML. Apa yang pada dasarnya index.html lakukan adalah memberitahu penyemak imbas Android bagaimana untuk memaparkan laman web anda - dalam templat yang saya sediakan, terdapat tag untuk membuang bar navigasi URL dari penyemak imbas, membiarkan butang 'kembali' telefon keluar dari aplikasi, dan melancarkan aplikasi selepas skrin percikan dipaparkan. Garis yang anda mahu ubah ada di sini:

var url = ‘http://yourwebsite.com’

Membangun Aplikasi di BuildGap PhoneGap

Oleh itu, log masuk ke akaun GitHub anda, dan arahkan ke halaman utama repositori anda. Di bawah nama repositori, klik 'Muat Naik Fail', dan seret folder projek anda ke layar pohon fail. Sekarang taipkan pesan komit di bahagian bawah, seperti ' percubaan aplikasi pertama saya ” . Akhirnya klik Komit Perubahan.

Sekarang pergi ke Pembinaan PhoneGap halaman dan log masuk. Sekarang klik butang 'Aplikasi Baru' di halaman binaan. Ini akan meminta anda memasukkan jalan ke repositori GitHub anda, jadi lakukannya, dan kemudian klik 'Tarik dari .git reposity'.

Sekarang kembali ke halaman utama, klik 'Kemas kini kod' dan 'Tarik terkini'.

Akhirnya, klik 'Bina'. Ini akan menyusun aplikasi anda ke dalam fail .apk, dan kemudian memberi anda pilihan untuk memuat turun .apk. Anda kini boleh memuat turun fail .apk ini ke komputer anda dan memindahkannya ke telefon anda, kemudian memasangnya dari sana. Sebagai alternatif, anda boleh menggunakan telefon anda untuk mengimbas kod QR pada skrin komputer anda untuk memasang fail .apk ke peranti Android anda secara automatik.

Itu sahaja! Sekarang, untuk menerangkan kepada anda beberapa perkara penting:

• Ini adalah panduan yang sangat mudah yang memandu anda untuk membina aplikasi hibrid yang paling asas. Pada umumnya orang tidak sering membungkus laman web mereka dalam penyemak imbas asli dan menyebarkannya sebagai aplikasi Android di gedung Google Play. Tetapi setelah anda tahu bagaimana melakukannya, anda boleh mula membaca dokumentasi PhoneGap tentang cara menyesuaikan aplikasi anda dan menambahkan banyak rasa padanya, agar anda dapat membuat aplikasi yang benar-benar berguna.
• Kedua, Google Play melarang kaedah pembuatan aplikasi seperti ini untuk membuat aplikasi skema pautan untuk tujuan pendapatan semata-mata. Oleh itu, anda tidak boleh membuat aplikasi bernama 'Dapatkan Wang Hari Ini!' yang membuka laman web yang benar-benar penuh dengan iklan dan pendapatan hasil iklan. Anda akan dilarang dari kedai Google Play.