Tutorial SDK 2

* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur Intel, kunjungi Intel Developer Zone for Android.

Memanfaatkan fitur GPS di ponsel di pembuatan aplikasi tidaklah sulit apalagi jika menggunakan peralatan tambahan salah satunya Intel XDK. Dengan menggunakan Intel XDK, saya berhasil membuat aplikasi sederhana yang memanfaatkan fitur GPS di ponsel Android.

Aplikasi yang saya buat memanfaatkan Google Maps API untuk mengambil posisi kita saat ini dan memunculkannya di Google Maps. Aplikasinya dibuat menggunakan Intel XDK di sistem operasi Windows. Jika kamu belum memiliki Intel XDK dapat mengunduhnya terlebih dahulu di situs resmi Intel XDK dan jika ingin mengetahui lebih lanjut tentang Intel XDK dapat membaca artikel saya beberapa waktu lalu.

Pembuatan Proyek Aplikasi

Buat proyek baru di Intel XDK dan beri nama proyeknya “CekLokasi” dan tentukan lokasi penyimpanan proyeknya sesuai dengan preferensi kamu. Pilih “Start with App Designer” di menu sebelah kiri untuk mempermudah pembuatan aplikasi.

Intel XDK akan secara otomatis membuat template koding untuk proyek aplikasinya agar kamu dapat langsung membuat aplikasi. Jika kamu sudah pernah membuat aplikasi HTML, pasti kamu akan merasa familiar dengan template koding yang dihasilkan karena Intel XDK memang menggunakan bahasa HTML5 untuk pembuatan aplikasinya.

Tahap pertama yang kamu lakukan adalah mengklik tab “Design” untuk memulai pembuatan tampilan aplikasi. Untuk sekarang kita cukup menggunakan tampilan yang sederhana saja. Ketika diminta untuk memilih framework tampilan aplikasi, pilih saja “jQuery Mobile“.

Seret komponen Footer di menu Layout ke tampilan aplikasi kamu. Selanjutnya Seret komponen “Button” ke “Footer” yang baru kamu buat dan setelah itu beri label “Cek Lokasi“ di tombol yang kamu buat sebelumnya.

Selesai :) Itu saja langkah-langkah untuk pembuatan tampilan aplikasi menggunakan App Designer di Intel XDK. Sekarang kita akan masuk ke tahap pengkodingan aplikasi kita.

Pengimplementasian GPS dan Google Maps

Jika kamu belum memiliki Google API Key, dapatkan dulu Google API Key agar kamu dapat menggunakan Google Maps API. Untuk cara mendapatkan Google API Key dapat mengunjungi situs Google Developers. Setelah kamu memiliki Google API Key, masukkan kodingan di bawah ini di bagian head di index.html proyek kamu:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&sensor=false"> </script>

1 2	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&amp;sensor=false"> </script>

Ganti GOOGLE_API_KEY dengan Google API Key kamu. Kodingan di atas diperlukan agar kamu dapat mengakses Google Maps API. Deklarasikan juga variabel global “var MyMap” di bagian JavaScript sebagai variabel untuk Google Maps kamu nanti.

Sekarang tambahkan kodingan di bawah ini di bagian upage-content di index.html

<div id="map-canvas"> </div>

1	<div id="map-canvas"></div>

Elemen div di atas akan menjadi tempat di mana Google Maps akan ditampilkan di aplikasi kamu. Agar Google Maps-nya nanti dapat tampil memenuhi layar ponsel, tambahkan kodingan CSS berikut di bagian style di index.html

#map-canvas { width: 100%; height: 100% }

1	#map-canvas { width: 100%; height: 100% }

Sekarang, buat kodingan yang memanggil Google Maps dan menampilkannya di aplikasi kamu ketika aplikasinya dijalankan. Kodingannya ditempatkan di bagian fungsi JavaScript onDeviceReady. Kodingannya adalah sebagai berikut:

var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; MyMap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

1 2 3 4 5 6

var mapOptions = {    center: new google.maps.LatLng(-34.397, 150.644),    zoom: 12,    mapTypeId: google.maps.MapTypeId.ROADMAP }; MyMap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Pada kodingan di atas, diset koordinat -34.397, 150.644 sebagai koordinat bawaan pada peta Google Maps kita (dapat diubah sesuka kita). Diset juga level pembesaran petanya di level 12 agar peta terlihat lebih jelas. Untuk tipe peta, kita menggunakan peta biasa. Baris terakhir pada kodingan di atas bertugas untuk membuat tampilan Google Maps dengan konfigurasi yang sudah kita tentukan.

Sekarang kita perlu menambahkan kodingan JavaScript yang berfungsi untuk mengecek posisi kita saat ini. Kodingannya adalah sebagai berikut (lihat komentar untuk penjelasan kodingannya):

var currentLatitude, currentLongitude; // Variabel untuk menyimpan koordinat var getLocation = function() { var suc = function(p){ if (p.coords.latitude != undefined) { // Ambil koordinat garis lintang dari ponsel currentLatitude = p.coords.latitude; // Ambil koordinat garis bujur dari ponsel currentLongitude = p.coords.longitude; // Proses koordinat menjadi koordinat Google Maps myLatLng = new google.maps.LatLng( currentLatitude, currentLongitude ) // Geser Google Maps ke koordinat tersebut MyMap.panTo(myLatLng); // Buat penanda yang menandakan lokasi koordinat pada peta Google Maps var marker = new google.maps.Marker({ position: myLatLng, map: MyMap, title: "Lokasi saat ini" }); } }; //Jika gagal coba lagi var fail = function(){ getLocation(); }; // Memanggil fungsi getCurrentPosition untuk mengambil koordinat ponsel AppMobi.geolocation.getCurrentPosition(suc,fail); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

var currentLatitude, currentLongitude; // Variabel untuk menyimpan koordinat var getLocation = function() {     var suc = function(p){         if (p.coords.latitude != undefined)         {             // Ambil koordinat garis lintang dari ponsel             currentLatitude = p.coords.latitude;             // Ambil koordinat garis bujur dari ponsel             currentLongitude = p.coords.longitude;             // Proses koordinat menjadi koordinat Google Maps             myLatLng = new google.maps.LatLng( currentLatitude, currentLongitude )             // Geser Google Maps ke koordinat tersebut             MyMap.panTo(myLatLng);             // Buat penanda yang menandakan lokasi koordinat pada peta Google Maps             var marker = new google.maps.Marker({                 position: myLatLng,                 map: MyMap,                 title: "Lokasi saat ini"             });         }     };     //Jika gagal coba lagi     var fail = function(){         getLocation();     };     // Memanggil fungsi getCurrentPosition untuk mengambil koordinat ponsel     AppMobi.geolocation.getCurrentPosition(suc,fail); }

Nah, sekarang kita tinggal menambahkan pemanggilan fungsi getLocation di tombol yang kita buat sebelumnya. Untuk melakukan hal tersebut cukup menambahkan kodingan href=”javascript:getLocation()” di tombol kita.

Itu saja kodingan yang diperlukan untuk membuat aplikasi, tidak rumit bukan? Sekarang kita dapat mengetes kodingan yang sudah kita buat di menu Emulate di Intel XDK. Untuk mencoba aplikasinya langsung di ponsel Android kamu, masuk ke menu TEST dan untuk membuat file APK-nya, masuk ke menu BUILD.

Tampilan aplikasi hasil kodingan

Untung mengunduh kode sumber lengkap dari proyek ini dapat mengklik link ini

* Kunjungi Intel Developer Zone for Android untuk mengetahui lebih lanjut.

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Tutorial 1 SDK

* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur Intel, kunjungi Intel Developer Zone for Android.

Android saat ini adalah salah satu mobile platform yang paling populer di dunia. Kepopulerannya pun tidak hanya di kalangan pengguna ponsel saja namun juga di kalangan pengembang aplikasi. Androin pun sepertinya sudah menjadi standar platform yang harus dipelajari oleh pengembang aplikasi mobile baru saat ini menggantikan JavaME.

Untuk membuat aplikasi Android, sudah tersedia banyak development tool yang dapat digunakan salah satunya adalah Intel XDK. Seperti namanya, Intel XDK disokong oleh Intel, salah satu perusahaan mikrokonduktor terbesar di Indonesia. Development tool ini disediakan oleh Intel secara gratis.

Yang membuat Intel XDK unik dibandingkan dengan development tool lainnya adalah aplikasi Android-nya dibuat dengan menggunakan bahasa HTML5 dan juga dapat membuat aplikasi mobile untuk platform lainnya selain Android seperti Windows Phone 8, iOS, atau BlackBerry.

Tanpa panjang lebar lagi, saya akan menjabarkan cara untuk menggunakan Intel XDK.

Untuk mengunduh Intel XDK, bisa ke link http://software.intel.com/en-us/android dan cari bagian Intel XDK. Setelah proses unduhan selesai, install Intel XDK. Diperlukan koneksi Internet ketika kita menginstall Intel XDK.

Pengenalan Intel XDK

Ketika kita menjalankan Intel XDK, akan terlihat 5 menu utama yang dapat digunakan, yaitu:

Develop

Di menu inilah kita mengkoding aplikasi yang kita buat. Intel sudah menyediakan berbagai macam API HTML5 yang dapat kita gunakan untuk mengembangkan aplikasi kita. Selain menyediakan antarmuka untuk pengkodingan, di menu ini juga terdapat fitur App Designer yang bisa kita gunakan untuk mendesain tampilan antarmuka aplikasi kita tanpa koding.

Intel sudah menyediakan contoh HelloWorld di Intel XDK untuk dapat kita mengetes langsung alur penggunaan Intel XDK

Emulate

Jika kita sudah mengkoding dan ingin melihat seperti apa jadinya aplikasi yang kita buat, di menu Emulate kita dapat mengemulasikan aplikasi kita. Di menu ini terdapat berbagai macam pilihan emulasi sesuai dengan target aplikasi kita.

Test

Setelah aplikasi yang kita buat sudah jadi dan ingin kita tes di ponsel kita, kita dapat menggunakan menu Test. Di sinilah Intel XDK akan mem-push aplikasi kita ke layanan cloud untuk kemudia dapat kita unduh di ponsel kita dan langsung dicoba aplikasinya.

Build

Setelah kita sudah menyelesaikan seluruh pengembangan aplikasi kita dan ingin mendistribusikan aplikasi kita, kita dapat membuat file aplikasi di menu Build. Ada banyak pilihan target mobile platform yang dapat kita gunakan salah satunya Android.

Service

Di menu ini, kita dapat menggunakan berbagai macam layanan tambahan yang disediakan oleh Intel beserta partner-partner mereka.

~~~

Sekian adalah pengenalan tentang Intel XDK dari saya. Di artikel berikutnya, dibahas tentang cara membuat aplikasi GPS menggunakan Intel XDK. Jangan lupa untuk mengunduh Intel XDK di halaman web resminya.

* Kunjungi Intel Developer Zone for Android untuk mengetahui lebih lanjut.

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Cara Membuat Game Android Menggunakan HTML5

* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur Intel, kunjungi Intel Developer Zone for Android.

Membuat game untuk Android di jaman sekarang ini sudah dapat menggunakan HTML5 tanpa menggunakan Java. Hal ini tentu menguntungkan bagi pengembang aplikasi yang lebih familiar dengan bahasa HTML ketika ingin membuat game di Android.

Untuk membuat game di Android menggunakan HTML5, salah satu caranya adalah dengan menggunakan Intel XDK. Jika sebelumnya sudah pernah membuat web game menggunakan HTML5, hanya perlu mengubah beberapa bagian kodingan agar game-nya dapat dijalankan dengan lancar di Android.

Untuk menjelaskan seberapa mudahnya pembuatan game Android menggunakan HTML5, saya membuat game Snake yang berbasis dari web game Snake di TheCodePlayer. Saya mengubah dan menambah beberapa kodingan dari game tersebut menggunakan Intel XDK agar game-nya dapat dengan lancar dimainkan di Android.

Persiapan

Sebelum lebih lanjut membahas pembuatan game Android menggunakan HTML5, lakukan langkah-langkah berikut ini terlebih dahulu:

• Unduh dan instal Intel XDK
• Jika belum mengenal tentang Intel XDK atau masih baru di dunia HTML5, bisa membaca dua artikel ini terlebih dahulu: Artikel 1, Artikel 2.
• Unduh source code untuk game Snake-nya di link ini
• Impor proyek Snake dari source code yang diunduh sebelumnya ke Intel XDK

Penjelasan

Dengan menggunakan Intel XDK, kita dapat menggunakan kodingan HTML5 yang sudah ada (walaupun didesain untuk web) ataupun mengkoding dari awal. Di artikel ini, kasusnya adalah menggunakan kodingan HTML5 yang sudah ada untuk kemudian diperbaharui agar dapat dimainkan di perangkat berbasis Android.

Beberapa poin-poin penting yang harus diperhatikan di source code dari game ini adalah sebagai berikut:

Canvas
Canvas adalah bagian terpenting di game ini karena menjadi wadah di mana kita menggambar grafis-grafis untuk menganimasikan game Snake.

Event onTouchStart
Event onTouchStart digunakan untuk mendeteksi ketika sebuah komponen HTML5 disentuh oleh seseorang di perangkatnya.

jQuery Mobile
jQuery Mobile digunakan untuk mempercantik tampilan aplikasi dan agar komponen HTML5-nya lebih optimal untuk interaksi melalui sentuhan pengguna di layar sentuh perangkat mereka.

JavaScript
JavaScript digunakan untuk mayoritas penulisan logika di game Snake ini agar game-nya dapat berfungsi seperti yang ditujukan.

Fungsi onDeviceReady
Fungsi ini berfungsi sebagai tempat di mana programmer mulai memasukkan logika pemrogramannya.

Untuk penjelasan detail kodingan dari logika pemrograman untuk membuat game Snake sudah ada di baris-baris komentar di kodingan dalam source code. Logikanya tidak terlalu kompleks dan mudah dipahami apalagi jika sudah memiliki dasar matematika yang bagus.
Walaupun pada artikel ini pengembangan game-nya ditujukan untuk platform Android, dengan Intel XDK kita juga sebetulnya dapat langsung membuat aplikasinya ditujukan untuk platform lainnya seperti iOS dan Windows Phone tanpa harus mengubah kodingan.
Game Snake di artikel ini masih dasar dan bisa dikembangkan lebih lanjut. Jika ingin membuat game lainnya menggunakan HTML5, bisa melihat contoh-contoh game di situs Intel atau di TheCodePlayer.
Untuk melihat tool pengembangan aplikasi Android lainnya dari Intel, bisa mengujungi Intel Developer Zone for Android.

Tampilan game Snake

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com