Month: September 2014

Categories
Teknologi

Programming Aplikasi Android Dengan HTML 5: link lanjutan

Pada tulisan ketiga ini , akan di berikan link-link yang berguna saat melakukan development web application , dimulai dari yang paling recommended.

General Tutorial :
HTML_5_mobile_web_app_from_start_to_finish/

Application Design Inspiration : 
http://www.awwwards.com/30-recent-inspirational-ui-examples-in-mobile-device-screens.html
http://www.webdesign-inspiration.com/web-designs/type/mobile-app
http://designinstruct.com/visual-inspiration/web-design-inspiration/mobile-app-website-design-inspiration/

Framework User Interface : 
Chocolate Chip UI
Sencha
PhoneJS
EnyoJS
Wijmo
iUI
Twitter Bootstrap
The-M-Project
Jo
EmbedJS
Junior
moobile
Topcoat

Jquery Replacement : 
zeptoJS
XUI
$dom
Snack

Push Notification : 
tutorial-implement-push-notifications-in-your-phonegap-application/

Selamat develop aplikasi 🙂

Categories
Anime & Game

Review Shin Megami Tensei IV

Developer : Atlus
Publisher : Atlus
Platform : Nintendo 3DS
Genre : RPG

Biasanya gw tuh paling tidak suka bermain game yang membutuhkan grinding. Yap, gw paling benci dengan yang namanya grinding. Bagi gw, yang terpenting dalam sebuah game adalah storynya. Bagaimana sebuah game dapat membuat pemain merasa masuk didalam dunia game tersebut.

Awalnya gw tidak tertarik untuk membeli game ini, karena tahu bahwa seri mainline SMT adalah series yang ditujukan kepada hardcore grinding fanatics. They even say, “SMT : Persona tuh bukan SMT, kegampangan, ga perlu grinding”. Namun hal ini berubah ketika diskonan Nintendo E-Shop menyerang. Bayangkan saja, Harga aslinya adalah $49 ( Sekitar 585 ribu rupiah ) di diskon tinggal $19 (Sekitar 220 ribu rupiah). Gw pun berpikir, Hey why not ? It’s not everyday Nintendo & Atlus giving more than 50% discount on their products !

Keanehan mulai terjadi saat pertama main. Gw menyerang monster di awal dungeon dan gw mati. WHAT THE FUCK ? Mana ada game yang lawan monster pertama kali langsung game over, dan ini terjadi beberapa kali. Okay , gw ga boleh menyerah dulu, coba kita lihat apakah worth it di lanjutkan karena storynya.

Surprisingly, 30 jam kemudian, yang gw dapatkan adalah story yang Its not that good, but it’s not that bad either. Storynya biasa aja. Dia bercerita tentang seorang samurai (Flynn) bersama temannya dari eastern kingdom of mikado menjelajahi kota tokyo. Kota tokyo di ceritakan sudah hampir hancur, dimana pada akhirnya tokoh utama dapat memilih menghancurkan tokyo atau menghancurkan yang lain (anti spoiler :P) There is no romance / harem in here ! it’s a very serious game !
Shin-Megami-Tensei-IV-001
Despite everything, ternyata sistem monster & grindingnya sangat enjoyable. Gw katakan sekali lagi, yang membuat gw betah main game ini adalah monster & grinding, hal yang ga pernah gw pikir gw bakal suka sebelumnya. Kenapa ? karena ada sistem Autobattle dan Pinpoint . Sistem monster khas SMT juga menarik, yang terpenting adalah menyerang atribut kelemahan monster lawanmu, walaupun kamu sedikit underlevel, kamu bisa menang! , walau berlaku juga sebaliknya, kalau monster musuh kamu memiliki skill kelemahan atribut kamu, hampir pasti kamu kalah. Kamu di tuntut untuk menyesuaikan skill dan equip kamu dengan monster yang diserang.

Monsternya sendiri unik, setiap monster punya kepribadian dan bisa di rekrut menjadi teman kamu. Cara merekrutnya pun banyak, dari mulai berbicara , memberikan item, hingga membuat takut. Monsternya bisa kamu gabungkan, skill pada monster tersebut bisa di turunkan ke monster hasil gabungan. Game ini terasa seperti pokemon untuk orang dewasa .

In the end, gw tidak menyesal membeli game ini. Game ini dapat menjadi pembuka mata bahwa game grinding tidak terlalu membosankan seperti yang pertama gw bayangkan.

Keputusan : 

Rating : 8/10

Plus :
-grinding mudah dilakukan
-Sistem attribut yang seru
-Mini quest sangat banyak,

Minus :
-worldmap yang kurang intuitif
-Storynya biasa saja

Categories
Teknologi

Programming Aplikasi Android Dengan HTML 5 :Membuat Sample Project

Pada tulisan kedua ini , akan di jelaskan bagaimana memulai membuat proyek baru pada Crosswalk, Melakukan Compiling dan melakukan testing pada emulator maupun langsung pada device developer. Selamat Menikmati 🙂

Yang harus dipersiapkan :
  1. Crosswalk Framework download di sini (Crosswalk Cordova, ARM)
  2. Text Editor , seperti Brackets
1. Membuat project crosswalk baru : 

Ekstrak Crosswalk ke dalam folder, dalam hal ini saya ekstrak ke C:/ , rename folder hasil ekstrak(contoh : crosswalk-cordova-7.36.154.13-arm) menjadi crosswalk agar memudahkan.
Capture

buka Command Prompt lalu lakukan change directory ke dalam folder crosswalk/bin.
contoh command : cd C:/crosswalk/bin

Capture

Create Project baru dengan mengetik

create project_directory package_name project_name

project_directory adalah nama folder dimana project akan dibuat
package_name adalah nama package android, biasanya berformat com.namaperusahaan.namaaplikasi klik disini untuk melihat detail format & fungsi package_name.
project_name adalah nama aplikasi yang anda buat.

sebagai contoh, ketik perintah berikut :

create testproject com.test.testproject testproject

Capture

Masuk kedalam proyek yang telah dibuat , ketikan perintah berikut :
cd testproject

selamat , anda telah berhasil membuat project pada crosswalk.

2. Melakukan coding pada aplikasi

Buka file explorer, lalu masuk kedalam directory www project ( C:/crosswalk/bin/testproject/assetswww )

Capture

Crosswalk adalah framework wrapper HTML, sehingga development pun dilakukan dengan mengubah HTML/JS/CSS. index.html akan otomatis di tampilkan saat aplikasi dijalankan.

sebagai contoh , ubah index.html menjadi script di bawah ini

<html>

<head></head>

<body>

<h1>Hallo Crosswalk</h1>

</body>

</html>

Capture

selamat , anda telah mengetahui cara mengubah HTML pada aplikasi crosswalk !

3. Membuat android emulator

Emulator digunakan untuk testing, kelebihan menggunakan emulator adalah anda tidak membutuhkan device.

Buka Android Device Manager dengan mengetik android avd pada command prompt,

Capture

Akan terbuka AVD Manager , klik create

Capture

Pada dialog yang terbuka, isi sebagai berikut, lalu klik ok
Capture

Pilih Android Virtual Device yang baru di buat lalu klik create, tunggu hingga emulator menampilkan home android
Capture

Selamat , anda telah berhasil melakukan instalasi dan menjalankan android emulator !

4. Compiling dan run aplikasi crosswalk pada emulator

Untuk melakukan testing pada emulator , ketik perintah di command prompt (current directory pada commandprompt : C:/crosswalk/bin/testproject/cordova , lakukan cd apabila belum sama )  run

Capture

Emulator akan otomatis terbuka apa bila belum terbuka, dan aplikasi akan dijalankan
Capture

selamat ! anda telah berhasil membuat dan menjalakan aplikasi crosswalk di android 🙂

5. Testing pada device : 

Ikuti tutorial ini untuk setup debug pada handphone android anda.

Koneksikan device anda dengan komputer, lalu lakukan run aplication seperti diatas, crosswalk akan secara otomatis memilih device anda apabila tersedia.

6. Selesai

Anda telah berhasil melakukan pembuatan project, memodifikasi kode, melakukan compiling dan testing menggunakan device maupun emulator pada crosswalk. Pada tutorial selanjutnya akan di jelaskan mengenai tutorial-tutorial lanjutan membuat aplikasi mobile berbasis web. Mohon maaf apabila ada kesalahan dalam tutorial, silahkan sampaikan kesalahan melalui comment box yang telah di sediakan, Happy Coding ~

Sumber : Crosswalk

Penulis :
Gilang Charismadiptya Prashasta
——————————
Silahkan copy artikel namun harus di sertai link ke blog ini.

Categories
Teknologi

Programming Aplikasi Android Dengan HTML 5: Instalasi Prasyarat Framework Crosswalk

Biasanya developer untuk membuat aplikasi android native java. Sayangnya membuat aplikasi native memiliki beberapa kekurangan, contohnya adalah sulit di port ke platform mobile lain seperti IOS / Windows Phone. Hal ini menyebabkan developer harus membuat ulang versi aplikasi untuk masing-masing platform.

Hal ini dapat tangani dengan menggunakan Web App Wrapper seperti PhoneGap(http://phonegap.com). Tujuan Web Wrapper adalah anda hanya perlu melakukan development dalam bentuk mobile web app, lalu di wrap menggunakan WebView (UIWebView pada IOS )yang sudah ditambahkan akses ke fitur handphone seperti Accelerometer/Camera/GPS dan lain lain.

PhoneGap dapat memudahkan siklus aplikasi anda, sayangnya PhoneGap memiliki beberapa kelemahan yang sangat fatal, yaitu lambat pada Handphone yang masih menggunakan OS lama (android < 4.3) karena pada OS tersebut fitur Hardware Accelerated pada webviewnya tidak diaktifkan. Kelemahan lain adalah beberapa fitur HTML5 + CSS3 yang belum sempurna. Kelemahan ini tidak dapat ditangani karena WebView bergantung pada versi android yang digunakan.

Crosswalk (https://crosswalk-project.org/) menangani hal ini dengan cara tidak melakukan wrapping dengan WebView bawaan OS,namun dengan chromium, versi open source dari google chrome. Implikasinya adalah, wrapper selalu memiliki fitur – fitur terbaru HTML5 + CSS3, Hardware Accelerated Rendering, dan tidak tergantung pada versi OS yang digunakan.

Tutorial kali ini di tujukan untuk mempersiapkan syarat-syarat yang dibutuhkan untuk melakukan development menggunakan Crosswalk, karena konfigurasinya yang lumayan susah.

Selamat menikmati 🙂

Yang harus di persiapkan :

1. Installer Python download di : sini  (Pilih versi 2.7.8)
2. Installer Oracle JDK download di sini 
3. Installer Ant download di sini (Pilih apache-ant-1.9.4-bin.zip)
4. Android SDK, download di sini  (Pilih yang View All Downloads And Sizes -> SDK Tools Only ->installer_r23.0.2-windows.exe )

Langkah Langkah :

1. Instalasi Python :

Klik Next
A
Jangan Lupa Simpan lokasi anda menginstall Python di notes !
Capture
Capture
Klik Next
Capture
Klik Finish
Capture

Selamat, Anda telah berhasil menginstall Python !

2. Instalasi JDK

Pilih yang sesuai dengan arsitektur komputer anda (Komp saya 64 Bit , check dengan cara klik kanan pada File explorer -> My Computer / This PC -> properties)
UntitledCapture
Capture
Double klik exe , Klik Next
Capture
Klik Next , Jangan lupa simpan link instalasi ke notepad !
Capture
Capture
klik Next
Capture
Selamat ! Anda berhasil Menginstall Java !

3. Instalasi Apache Ant

Buatlah folder baru di C:apache-ant-1.9.4 , Lalu ekstrak apache-ant-1.9.4-bin.zip ke dalam folder yang baru dibuat tersebut.
Untitled
Jangan lupa copy path instalasi ke notepad
Capture
Selamat ! anda berhasil menginstall Apache Ant !

4. Instalasi Android SDK

Double click exe Android SDK yang telah di download, lalu klik Next
Capture
Klik Next Lagi
Capture
Klik Next lagi
Capture
Klik Next lagi , jangan lupa catat link instalasi anda ke notepad !
Capture
Capture
Klik Install
Capture
Klik Next
Capture
Biarkan opsi Start SDK Manager tercentang , lalu klik Finish
Capture

Centang pada

[ ] Tools [x] Android SDK Platform-tools [x] Android SDK Build tools [ ] Android 4.3 (API 18) [x] SDK Platform

Lalu klik Install packages
Capture
Pilih Accept Packages lalu klik install
Capture
Selamat ! anda telah berhasil instalasi android SDK !

5. Konfigurasi PATH

Tahap ini digunakan agar Crosswalk dapat menggunakan program-program yang telah kita install sebelumnya.

Klik Start -> run (atau klik tombol windows di keyboard + R ) , lalu ketik
control sysdm.cpl lalu klik OK
Capture

Masuklah kedalam tab Advance , Lalu klik Environtment Variables. Perhatian! bagian selanjutnya sedikit berbahaya ! lakukan dengan hati-hati.
Capture
Cek apakah di bagian User Variable Sudah ada variable yang bernama JAVA_HOME , apabila belum , klik New…
Capture
Tambahkan Variable baru bernama JAVA_HOME dengan Value lokasi anda menginstall java yang telah di save ke notepad sebelumnya, Lalu Klik OK
Capture
Cek apakah di bagian User Variable Sudah ada variable yang bernama ANT_HOME , apabila belum , klik New…
Capture
Tambahkan Variable baru bernama ANT_HOMEdengan Value lokasi anda menginstall ANT yang telah di save ke notepad sebelumnya, Lalu Klik OK
Capture
Cek apakah di bagian User Variable Sudah ada variable yang bernama PATH, apabila belum , klik New, apabila sudah, Klik Edit , Lalu Tambahkan Baris Berikut didalam path :

pathsebelumnya;lokasi_instalasi_androidtools;lokasi_instalasi_androidplatform-tools;lokasi_instalasi_antbin;%JAVA_HOME%bin

Contoh : (Ingat , hanya contoh ; Jangan copy baris dibawah tapi WAJIB sesuaikan dengan punya anda):
D:Program Files (x86)Androidandroid-sdkplatform-tools;D:Program Files (x86)Androidandroid-sdktools;C:Program Files (x86)WinAntbin;%JAVA_HOME%bin

Lalu Klik OK

Cek apakah link instalasi Python sudah ada dalam System Variables bernama Path , tambahkan bila belum ada ( ;C:Python27 )
Capture
Selamat , anda telah berhasil melakukan setting Path !

6. Restart komputer anda
7. Lakukan Testing

Buka Command Prompt,
pilih Start -> Run atau klik Windows + R pada keyboard lalu ketik cmd dan mengklik OK
Capture
Pada Command Prompt yang terbuka, ketik perintah berikut :
python -v
Apabila anda berhasil menginstall Python , akan muncul versi Python yang di install , namun apabila gagal akan muncul Command Not Found, coba periksa kembali instalasi Python anda.
Capture
Pada Command Prompt yang terbuka, ketik perintah berikut :
ant -v
Apabila anda berhasil menginstall Ant, akan muncul versi Ant yang di install , namun apabila gagal akan muncul Command Not Found, coba periksa kembali instalasi Ant anda.
Capture
Pada Command Prompt yang terbuka, ketik perintah berikut :
java -version
Apabila anda berhasil menginstall Java, akan muncul versi Java yang di install , namun apabila gagal akan muncul Command Not Found, coba periksa kembali instalasi Java anda.
Capture
Pada Command Prompt yang terbuka, ketik perintah berikut :
adb version
Apabila anda berhasil menginstall Android SDK, akan muncul versi ADB yang di install , namun apabila gagal akan muncul Command Not Found, coba periksa kembali instalasi Android SDK anda.
Capture

8. Selesai

Anda telah berhasil melakukan instalasi syarat – syarat development menggunakan Crosswalk. Pada Tutorial selanjutnya akan di jelaskan mengenai cara membuat project Crosswalk baru , melakukan kompilasi proyek dan melakukan testing baik menggunakan Emulator ataupun menggunakan Device.

Mohon maaf apabila ada kesalahan dalam tutorial, silahkan sampaikan kesalahan melalui comment box yang telah di sediakan, Happy Coding ~

Sumber : Crosswalk

Penulis :
Gilang Charismadiptya Prashasta
——————————
Silahkan copy artikel namun harus di sertai link ke blog ini.