Persediaan Menghasilkan Apps Menggunakan jQuery Mobile

Assalamualaikum dan salam sejahtera.

Pernahkan anda mengenali jQuery Mobile? Apa itu jQuery Mobile?

jQuery Mobile ialah kerangka yang digunakan mencipta aplikasi web untuk telefon mudah alih. Maaf, ayat saya sangat teknikal tetapi saya ingin menceritakan apa itu jQuery Mobile. Kelebihan jQuery ialah menggunakan HTML5 dan CSS3 dengan skrip sangat mudah dan yang paling penting ialah ia merupakan sumber terbuka (open source). Sebab itu tagline jQuery ialah Write Less, Do More.

Logo jQuery Mobile

Entri kali ini, saya akan menerangkan membina applikasi (apps) untuk Android dengan menggunakan platform jQuery Mobile secara surface. Sebelum ini, saya berjaya menghasilkan apps untuk Android OS dengan menggunakan perisian Adobe Flash. Untuk membuka apps tersebut, anda perlu memuat turun Adobe AIR. Walau bagaimanapun, terdapat beberapa telefon pintar atau tablet tidak dapat menyokong penggunaan Adobe AIR seperti ASUS Fonepad. Jika Apple iPad dan iPhone semestinya tidak menyokong sama sekali kepada produk yang dihasilkan dengan menggunakan Flash Player. Ini disebabkan oleh beberapa faktor teknikal seperti ketidakstabilan Flash pada produk Apple. Sebaliknya, HTML5 digunakan untuk platform bagi menggantikan platform Flash.

Untuk mempelajari membuat apps, anda perlu ada pengetahuan asas menggunakan kod-kod HTML di mana asas untuk membina sesebuah laman web. Namun, kali ini, jQuery Mobile ini berasaskan kepada HTML 5.

Perisian yang diperlukan

Perisian yang diperlukan untuk membina apps dengan menggunakan platform jQuery Mobile ialah:

1. Notepad++ (Pilihan A)

Logo Notepad++

Perisian yang biasanya digunakan untuk membina kod-kod HTML menggunakan Notepad++ kerana kebolehan untuk mengesan kesilapan-kesilapan menaip kod dengan mudah. Ia dibantu dengan pelbagai warna tulisan supaya dapat membezakan fungsi-fungsi kod. Apa yang penting mengenai perisian ini ialah ringan, mudah dikendalikan, versatil, dan sumber terbuka.

Antaramuka Notepad++

2. Adobe Dreamweaver (Pilihan B)

Logo Adobe Dreamweaver CS6

Selain Notepad++, anda boleh menggunakan Adobe Dreamweaver bagi yang tidak terlalu mahir menggunakan kod-kod sepenuhnya. Hal ini demikian kerana, Notepad++ tidak hadir dengan preview dengan segera. Jika ingin melihat preview, anda perlu menggunakan pelayar laman web seperti Google Chrome, Mozilla Firefox, atau Internet Explorer yang menyokong penggunaan HTML 5.

Antara muka Adobe Dreamweaver CS6. Ia dilengkapi dengan Live view tanpa melihat Preview melalui Internet Browser. Namun, preview di Live view tidak sesempurna seperti dalam pelayar laman web.

3. Internet Explorer/Mozilla Firefox/Google Chrome/sewaktu dengannya

Digunakan untuk preview hasil kerja yang anda lakukan. Ia berfungsi sepenuhnya. Jika hasil anda tidak memuaskan, hasil anda boleh disunting sampai berjaya.

Perkhidmatan dalam Web

1. jquerymobile.com

Laman web ini ialah sumber utama bagi developer dalam penghasilan kod HTML dengan platform jQuery Mobile. Laman web ini dibangunkan oleh jQuery Foundation. Untuk pengetahuan, jQuery Foundation ialah organisasi yang tidak berasaskan keuntungan yang disertai oleh pembangun-pembangun web. jQuery bukan sahaja tertumpu kepada mobile sahaja malah merangkumi kepada semua gajet.

Berbalik kepada jQuery Mobile, laman web ini menyediakan banyak kod-kod HTML yang dijadikan sebagai panduan. Di sini juga ada disediakan kod-kod javascript dan CSS yang menjadi kerangka utama kepada jQuery Mobile. Selain itu, banyak pautan yang disediakan seperti melawati laman web pembangun. Pautan untuk ke forum juga disediakan bagi berkongsi hal-hal berkaitan mengenai jQuery Mobile.

Kebanyakan hasil kerja saya merujuk kepada demo jQuery Mobile. Apa yang anda perlu lakukan ialah hanya copy and paste kod HTML tersebut untuk dimasukkan dalam web editor seperti Notepad++ atau Adobe Dreamweaver. Selepas itu, anda juga boleh menyunting kod yang disalin tersebut. Selain itu, anda juga boleh mengubah tema sesuatu reka bentuk apps dengan menggunakan CSS.

2. www.w3schools.com/jquerymobile/

Di sini juga menyediakan panduan-panduan untuk membina laman web berasaskan jQuery Mobile. Di sini juga, anda boleh mencuba membuat demonstrasi mengubahsuai kod HTML dengan klik kepada "Try it Yourself".

3. GitHub

GitHub merupakan sebuah perkhidmatan laman web yang menyediakan perkongsian kod-kod HTML dalam sebuah komuniti yang sangat besar. Anda juga boleh memuat naik kod-kod HTML anda ke dalam GitHub dan juga sumber-sumber yang boleh menghidupkan sesuatu page seperti gambar. Dalam GitHub juga, sesiapa sahaja boleh mengubah kod-kod HTML dimuat naik. Jika ada kesalahan dalam kod HTML, sesiapa sahaja boleh memperbetulan kesilapan. Sebab itu, GitHub merupakan laman web perkongsian HTML berasaskan komuniti. Untuk memuat naik kod-kod HTML dan sumber-sumbernya, anda perlu memuat turun GitHub Bash di mana fungsinya sama seperti FTP.

4. PhoneGap Build

Ini merupakan kemuncak proses untuk membikin sesebuah HTML yang menggunakan jQuery kepada bentuk apps untuk Android, Windows Phone dan iOS. PhoneGap menyediakan satu compiler yang menggabungkan HTML, Javascript dan CSS bagi membentuk satu apps. Setakat ini saya berjaya menghasilkan apps untuk Android dan Windows Phone. Namun, untuk iOS, saya tidak berjaya lakukan kerana untuk menghasilkan apps untuk iOS, saya perlu mendaftar dan membayar kepada Apple untuk menjadi sebagai pembangun atau developer. Saya sebenarnya tidak pernah menguji pada Windows Phone disebabkan tidak semua orang memakai Windows Phone. Namun begitu, saya bersyukur kerana dapat menghasilkan Apps untuk platform Android. Anda boleh melayari dengan klik di sini.

Laman web Phonegap Build. Ia di bawah kendalian Adobe Inc.

Setakat itu sahaja perkongsian dari saya.

Rujukan:

1. http://jquerymobile.com/
2. http://jquerymobile.com/demos/
3. https://jquery.org/
4. https://github.com/
5. http://phonegap.com/about/
6. http://phonegap.com/
7. Broulik, B. (2011). Pro jQuery Mobile: Apress.