Pengembangan mobile dengan teknologi web bukanlah hal baru. Berkat alat-alat seperti PhoneGap dan Appcelerator Titanium, pengembang web dapat membuat aplikasi hibrida yang memiliki banyak akses ke perangkat keras . Sebuah solusi baru untuk pengembangan HTML5 / CSS / JavaScript adalah XDK Intel. Pada artikel ini, saya akan memberitahu Anda mengapa itu layak kita coba.
- Apa itu Intel XDK?
Jika Anda seorang pengembang aplikasi mobile, Anda mungkin pernah mendengar atau alat seperti PhoneGap atau Appcelerator Titanium. Alat-alat ini memungkinkan pengembang web untuk menggunakan keterampilan pengembangan web mereka untuk membuat aplikasi mobile hybrid.
Tahun lalu, Intel membeli appMobi yang dikemas dengan alat pengembangan mereka sendiri yaitu Intel XDK. produk ini bersatu sehingga menjadikan sebuah toolset yang lengkap untuk pengembangan aplikasi mobile. Pengembang dapat pergi dari baris pertama dari sebuah kode untuk aplikasi sepenuhnya disusun dalam hanya dengan satu set tools., Intel XDK bebas untuk di-download (Gratis).
- Fitur Intel XDK
Hal pertama yang akan Anda lihat tentang Intel XDK adalah bagaimana mudahnya untuk menginstal aplikasi ini. Tidak seperti PhoneGap yang memerlukan konfigurasi yang luas dan Titanium memiliki persyaratan khusus yang berkaitan dengan diriktori . Dengan Intel XDK, Anda cukup men-download dan menginstalnya, layaknya menginstal Microsoft Office di OS Windows.
Keunggulan Intel XDK adalah bahwa Anda dapat membangun aplikasi untuk platform apapun ( Multiplatform). Sedangkan dengan Tools lain, Anda akan dibatasi untuk platform yang sedang anda kembangkan . Seperti Apple tidak akan membiarkan alat Xcode berjalan pada Sistem operasi apa pun kecuali mesin yang dijalankan dengan OS X , Sehingga Anda harus memiliki Mac untuk mengembangkan sebuah aplikasi untuk iOS.
Intel XDK memungkinkan Anda mengembangkan pada platform apapun, karena kompilasi dilakukan di awan ( System Cloud). PhoneGap menawarkan layanan serupa untuk pengembangan lintas platform, tapi itu terbatas. Dan dengan XDK yang Anda tidak akan dibatasi pada platform mobile. Apakah Anda berencana untuk membangun aplikasi Chrome, Facebook, Amazon, atau Nook? The XDK dapat membangun bagi mereka target serta pilihan untuk mengkompilasi dengan XDK atau Cordova (PhoneGap) API.
Selain itu, Anda memiliki akses ke beberapa ekstensi yang tersedia. Satu-satunya kelemahan XDK adalah Anda tidak dapat memperbarui editor yang terintegrasi dengan XDK tersebut. Namun, jika itu dibandingkan dengan tolls Titanium, dan PhoneGap bahkan mereka tidak memiliki editor sama sekali. XDK juga termasuk editor grafis, di semua platform mobile HTML5. Hal ini cukup beralasan menggunakan komponen HTML akan mendapat manfaat dari editor WYSIWYG. Ini juga mendukung kerangka kerja seperti Bootstrap dan jQuery Mobile. Komponen antarmuka pengguna ini memungkinkan Anda dengan cepat membangun interface dari aplikasi Anda.
Setelah aplikasi Anda dibuat, Anda perlu cara untuk menguji fungsionalitas. Intel XDK juga memiliki sebuah emulator yang baik untuk perangkat mobile yang pernah kulihat sampai saat ini. Ini mencakup kemampuan untuk menguji pada perangkat nyata dan kinerja profil tanpa harus menginstal apapun.
- Membangun Aplikasi Ponsel dengan Intel XDK
Langkah 1: Download dan install
Pergi ke halaman download Intel XDK dan mendapatkan versi terbaru dari XDK. Setelah men-download paket, instal dengan pilihan default.
Langkah 2: Buat Proyek Baru
Kita akan membangun sebuah aplikasi gambar kecil. Mulai XDK dan memilih Start a New Project. Beberapa pilihan yang Anda miliki adalah:
- Start with a Demo: Opsi ini memungkinkan Anda untuk menggunakan salah satu dari banyak proyek demo yang ditawarkan Intel . Ini bagus untuk membantu memahami bagaimana mengembangkan sebuah aplikasi dengan XDK tersebut.
- Start with a Template: Pilihan ini menawarkan sejumlah template untuk berbagai gaya antarmuka pengguna. Ini juga memiliki template kosong untuk Anda mulai.
- Import an Existing HTML5 Project : Dengan pilihan ini, Anda dapat mengimpor proyek yang dibuat di luar XDK, seperti proyek PhoneGap kode dalam editor pilihan Anda. Hal ini juga memungkinkan Anda mengimpor proyek XDK.
- Use App Starter/Start with App Designer: App Starter dapat dianggap App Designer Lite. Keduanya antarmuka grafis untuk pergi bersama dengan editor . App Starter menggunakan aplikasi Kerangka. App Designer menambahkan pilihan untuk Bootstrap, jQuery Mobile, dan Topcoat kerangka antarmuka pengguna.
- · Start with a Blank Project: Sesuai namanya, opsi ini memberikan kita sebuah proyek kosong dengan template untuk kita mulai. Ini adalah pilihan kita akan memilih untuk tutorial ini.
Memberikan proyek Anda nama dan klik Create. The XDK akan membuat proyek Anda serta struktur folder.
Langkah 3: Struktur Proyek
Meskipun kami memulai proyek kosong, XDK menyediakan beberapa file untuk Anda. Kita akan mengedit file-file ini untuk sebagai contoh.
init-dev.js
File ini digunakan untuk mendeteksi peristiwa dari berbagai dorektori yang digunakan. File ini akan digunakan sebagai contoh. Ini mencakup banyak pernyataan log untuk keperluan debugging dan untuk lebih memahami bagaimana file bekerja. Bagian yang paling diperhatikan dengan mulai pada baris 106.
123 | var evt = document.createEvent(“Event”) ;evt.initEvent(“app.Ready”, false, false) ;document.dispatchEvent(evt) ; |
Baris pertama membuat objek acara baru. Kami menginisialisasi objek ini dengan nilai “app.ready” Baris terakhir kiriman untuk DOM.
init-app.js
sebagian isi file ini sudah saya hapus, kecuali untuk bagian yang kita butuhkan. Kami memastikan bahwa perpustakaan kita butuhkan telah dimuat dan bahwa perangkat siap sebelum kita mengeksekusi kode kita. Ingat app.ready dari file sebelumnya.
1 | document.addEventListener(“app.Ready”, app.initEvents, false) ; |
app.ready lalu panggil initEvents function on the app object.
app.initEvents = function() {
"use strict" ;
var fName = "app.initEvents():" ;
console.log(fName, "entry") ;
$(".take").bind("click", takePic);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
} ;
index.html
File ini berisi halaman utama aplikasi kita. Ini adalah file HTML sederhana di mana kita menarik jQuery dan jQuery Mobile.
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script src="lib/jquery-2.1.1.js"></script></span> <script src = "lib / jquery-2.1.1.js"> </ script></span>
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script src="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script></span> <script src = "lib / jquery.mobile-1.4.4 / jquery.mobile-1.4.4.js"> </ script></span>
4. Mengaktifkan Plugin
Kami akan menggunakan Intel XDK API untuk mengambil gambar. Untuk membuat karya ini, kita harus mengaktifkan beberapa plugin. Buka tab Proyek dan, di tengah, Anda akan melihat ORDOVA 3.X HYBRID MOBILE APP SETTINGS. Klik tombol tambah di sebelah plugin dan perizinan. Di sebelah kanan, di bawah Intel XDK Plugins, periksa Kamera.
5. Menggunakan Emulator
Klik tab Emulate dan cobalah fungsi dari app ini. Ketika Anda mengklik tombol Take Selfi, harus membuka jendela gambar. Setelah mengambil gambar, gambar harus mengganti gambar placeholder
6. Pengujian App
Download dan install aplikasi Intel App Preview dari Google Play atau Apple App Store. Pergi ke tab Test dan menyalin tag script weinre jika Anda ingin melakukan debugging dengan App Preview. Klik pada tombol PUSH FILES untuk meng-upload aplikasi Anda ke server Intel.Log on ke App Preview dengan perintah Anda dari Intel XDK dan memilih aplikasi yang Anda upload.
7. Membangun App
Setelah pengujian aplikasi selesai, tugas terakhir adalah untuk membangun untuk distribusikan. Klik pada tab Build untuk menampilkan pilihan Anda. Seperti yang Anda lihat, disana memiliki berbagai macam target untuk pembangunan
Karena kita menggunakan API Camera, yang merupakan Legacy, kami akan memilih aplikasi Legacy Hybrid. Hal ini membawa kita untuk membangun halaman seperti gambar di bawah.
Mengklik Details/Rincian menunjukkan Anda pilihan untuk penagihan di-app, streaming audio, dll.
Setelah memilih opsi untuk aplikasi Anda, klik pada tombol Build. Setelah beberapa saat, file tersebut dibangun dan Anda akan mendapatkan dialog yang memungkinkan Anda men-download aplikasi Anda.
keren