Categories
Teknologi

Tutorial Database MySQL dengan PHP (Bagian 2)

Kali ini saya mau menjelaskan bagaimana caranya melakukan select data dari database lalu menampilkan hasilnya menjadi table menggunakan PHP. Sebelum menjalankan tutorial ini, ada baiknya anda melakukan tutorial bagian 1 (https://www.gilangcp.com/2017/02/09/tutorial-mysql-dengan-php-bagian-1/). Hal ini perlu dilakukan karena disitu dijelaskan cara membuat database dan mengisi data contoh yang akan digunakan di tutorial ini.

Selamat mencoba!

1. Buka kembali file tutorial.php yang anda buat di tutorial sebelumnya

2. Ketik baris kode dibawah setelah  “?>” pada line 25.

<?php 
//Persiapkan query yang ingin dilakukan
$sql = "SELECT Nama FROM table_test";

//Lakukan request ke server MySQL Tampung hasilnya di variabel $result
$result = $conn->query($sql);
?>

Baris code ini di gunakan untuk melakukan query ke database.

SELECT Nama FROM table_test

adalah perintah SQL yang dijalankan. Kamu bisa ubah ini menjadi query yang kamu mau.

3. Saatnya untuk menampilkan data menjadi tabel! ketik baris dibawah ini setelah “?>” yang terakhir:

<table>

  <!-- Digunakan untuk menampilkan judul kolom-->
  <!-- tr digunakan untuk merepresentasikan 1 baris-->
  <!-- td digunakan untuk merepresentasikan kolom-->
  <tr>
    <td>Nama</td> <!-- Kita hanya memiliki 1 kolom yang ingin ditampilkan -->
  </tr>

  <!-- Iterasi tiap baris data yang di ambil dari database menjadi baris di database-->
  <?php while($row = $result->fetch_assoc()):?>

    <tr> 
      <!-- tanda <?= digunakan untuk print variable php-->
      <!-- Kita mau print kolom "Nama" dari database-->
      <td><?=$row["Nama"]?></td> 
    </tr>
  <?php endwhile;?>
</table>

 

4. Tutup koneksi MySQL

<?php $conn->close()?>

5. Test hasilnya dengan mengetik http://localhost/tutorial.php

Apabila keluar hasil seperti diatas, maka selamat! anda telah berhasil melakukan query select di PHP dengan database MySQL! apabila belum, coba cek kode lengkapnya disini:
https://gist.github.com/gilangcp/032c275c7b6cd59233396b25bc1ca604

Link bacaan lanjutan:

http://www.tutorialrepublic.com/php-tutorial/php-mysql-select-query.php
http://codular.com/php-mysqli
https://www.binpress.com/tutorial/using-php-with-mysql-the-right-way/17
http://www.phptuts.nl/view/26/

Nantikan tutorial ketiga, mengenai Insert data ke dalam database!

 

 

 

Categories
Teknologi

Tutorial Database MySQL dengan PHP (Bagian 1)

PHP adalah salah satu bahasa pemrograman web yang paling umum di internet. Hampir semua hosting mendukung PHP. Tetapi, bagaimana cara mengintegrasikannya dengan MySQL, Sebuah server database yang sama populernya dengan PHP? Seri tutorial ini akan membantu anda melakukan hal tersebut.

Tutorial ini akan dibagi menjadi 3 bagian. Bagian pertama (tutorial ini) berisi bagaimana caranya membuat database sederhana menggunakan phpMyAdmin, lalu membuat objek PHP yang merepresentasikan koneksi Mysql. Bagian Kedua akan berfokus pada view data yang ada di MySQL menggunakan PHP, sedangkan bagian ketiga akan membahas bagaimana caranya melakukan edit dan delete data.

Selamat menikmati tutorialnya!

Membuat Database menggunakan phpMyAdmin :

1.Klik New pada phpMyAdmin, Saya contohkan dengan membuat database dengan nama ‘Test”, isi name dengan “Test”, lalu klik tombol create.

2. Buat table pada database tersebut dengan nama test_table dan 2 kolom:

3. Berikan nama “Id” Pada baris pertama, klik CheckBox A_I (Auto Increment), berikan nama “Nama” pada baris kedua, Ubah type menjadi varchar, ubah length menjadi 255.

4. Tambahkan data baru dengan cara klik table tersebut lalu klik tab SQL, dan masukan perintah SQL dibawah lalu klik tombol Go:

INSERT INTO `table_test`(`Nama`) VALUES ("Mega Kusuma");
INSERT INTO `table_test`(`Nama`) VALUES ("Putu Sri");
INSERT INTO `table_test`(`Nama`) VALUES ("Sinta Mawar");
INSERT INTO `table_test`(`Nama`) VALUES ("Eko Utari");
INSERT INTO `table_test`(`Nama`) VALUES ("Batario Nirmala");
INSERT INTO `table_test`(`Nama`) VALUES ("Melati Cahyo");
INSERT INTO `table_test`(`Nama`) VALUES ("Tirta Cahya");

Selamat! anda telah berhasil membuat database sederhana dengan phpMyAdmin!

 

Koneksikan MySQL tersebut dengan PHP:

1.  Buat file php baru pada folder htdocs anda, saya menggunakan nama tutorial.php

2. Ketik baris berikut pada file yang baru anda buat

<?php

// gunakan localhost apabila MySQL terletak di komputer yang sama
$namaserver = "localhost"; 
$username = "username"; //ini adalah username MySQL anda
$password = "password"; //ini adalah password MySQL anda

//ini adalah nama database yang anda buat pada step sebelumbya.
//Dalam hal ini maka nama databasenya adalah Test
$namadatabase = "test";

// Memulai Koneksi
$conn = new mysqli($namaserver, $username, $password);

// Cek apakah koneksi ke mysql berhasil
if ($conn->connect_error) {
 die("Koneksi gagal: " . $conn->connect_error);
} 

//Cek apakah bisa terkoneksi dengan database
$selected = mysqli_select_db($conn,$namadatabase) 
 or die("Database tidak ditemukan");

echo "Koneksi sukses";
?>

3. Buka tutorial.php pada browser. Pada komputer saya, http://127.0.0.1/tutorial.php. Apabila terprint tulisan “Koneksi sukses”, maka selamat, anda sudah berhasil mengkoneksikan MySql dengan aplikasi PHP anda!

Berikut adalah bahan bacaan lebih lanjut mengenai topik ini:

https://www.siteground.com/tutorials/php-mysql/database_connection.htm
http://webcheatsheet.com/php/connect_mysql_database.php
https://www.tutorialspoint.com/mysql/mysql-connection.htm
http://www.w3schools.com/php/php_mysql_connect.asp
https://coolestguidesontheplanet.com/how-to-connect-to-a-mysql-database-with-php/

Bagian 2 akan membahas bagaimana melakukan query data menggunakan koneksi yang dibahas pada tutorial ini. Nantikan!

Update: baca bagian ke-2 disini : https://www.gilangcp.com/2017/02/17/tutorial-database-mysql-select/

Categories
Teknologi

Instalasi bahasa pemrograman scala, Windows 10

Scala adalah sebuah bahasa pemrograman yang menganut paham pemrograman fungsional. Bahasa ini berjalan pada Java Virtual Machine, sehingga bisa dengan mudah menggunakan library – library yang tersedia pada bahasa pemrograman Java. Artikel ini berisi tutorial bagaimana melakukan instalasi dan menjalankan program scala pada windows 10.

Bahasa pemrograman ini umumnya digunakan untuk menganalisa Big Data, Cluster Computing, dan tugas-tugas lainnya yang berhubungan dengan Concurrency dan Distributed Computing.

Tutorial ini akan menjelaskan bagaimana caranya menginstall Bahasa pemrograman Scala pada komputer dengan sistem operasi Windows 10.

Selamat mencoba!

1. Pastikan anda terkoneksi dengan internet.
2.Buka Command Prompt dari start menu, dengan mengetik cmd, lalu klik kanan dan  run as administrator

capture

3. ketik cmd lalu tekan tombol enter

capture

4. Install Chocolatey, Chocolatey adalah manajer aplikasi untuk windows. Copy dan paste baris kode dibawah ke command prompt, lalu klik enter

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

capture

5. Pastikan Choco sudah terinstall dengan benar dengan cara mengetik

choco --version

Pada Command Prompt. Apabila sudah seperti screenshot dibawah, maka anda sudah berhasil menginstall Choco.

capture

6. Install Scala dengan mengetik:

choco install scala

7. Anda akan ditanyakan beberapa kali apakah ingin melanjutkan menginstall. Ketik y dan tekan tombol enter.

capture

8. Test Apakah scala sudah terinstall dengan benar dengan mengetik scala, lalu menekan tombol enter. Apabila terjadi kesalahan “not recognized as an internal or external command”, coba tutup command prompt lalu buka kembali.

capture

10. Apabila sudah seperti screenshot diatas, Maka selamat! anda sudah berhasil melakukan instalasi Scala pada komputer anda.

Selanjutnya anda bisa membaca dokumentasi dan tutorial lain mengenai topik ini menggunakan link dibawah:

https://www.scala-lang.org/documentation/
https://www.tutorialspoint.com/scala/
https://twitter.github.io/scala_school/

Selamat mencoba!

Categories
Teknologi

Server MQTT, Instalasi dan contoh penggunaan untuk IOT

Lanjutan dari artikel sebelumnya, tulisan ini berisi cara instalasi dan contoh sederhana penggunaan server MQTT.

Sebelum melanjutkan, anda sudah harus memiliki server dengan sistem operasi linux. Apabila anda belum punya, anda bisa coba dengan virtualbox. Sistem operasi yang saya gunakan adalah Ubuntu 16.04 yang bisa di unduh disini: http://www.ubuntu.com/download

Berikut tutorialnya:
1. Tambahkan PPA Mosquitto

sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa
sudo apt-get update

2. Install Mosquitto

Sudo apt install mosquitto

Untuk mengetes, saya akan menggunakan Node.JS sebagai client MQTT.

1. Install Node.JS

sudo apt install nodejs
sudo apt install npm

2. Install requirement MQTT clientside untuk node.JS

npm install mqtt --save

3. Buat file baru dengan mengetik

touch testmqtt.js
nano testmqtt.js

4. Masukan baris code dibawah

var mqtt    = require('mqtt');
var client  = mqtt.connect('mqtt://localhost');

client.on('connect', function () {
  client.subscribe('contohtopik');
  client.publish('contohtopik', 'Halo dunia');
});

client.on('message', function (topic, message) {
  console.log(message.toString());
  client.end();
});

5. Quit nano dengan ctrl+o, lalu ctrl+x

6. Jalankan client dengan mengetik

nodejs testmqtt.js
Output program
Output program

Output dari program client diatas seharusnya seperti ini:

Apabila muncul seperti baris diatas, maka selamat ! anda telah berhasil menginstall mosquitto, server MQTT !

Selanjutnya mari kita membedah sedikit client yang saya berikan.

var client  = mqtt.connect('mqtt://localhost');

Digunakan untuk mengkoneksikan client, dalam hal ini program node.js ke server MQTT. apabila server MQTT dan client dalam komputer yang berbeda, silahkan ubah localhost menjadi IP dimana server MQTT berada.

client.on('connect', function () {
  client.subscribe('contohtopik');
  client.publish('contohtopik', 'Halo dunia');
});

akan otomatis dijalankan, ketika client berhasil terkoneksi ke server MQTT, dalam hal ini melakukan dua hal, yang pertama:

  client.subscribe('contohtopik');

Fungsi ini memberitahu server MQTT , bahwa program ini ingin menerima semua pesan dalam topik ‘contohtopik’

  client.publish('contohtopik', 'Halo dunia');

Fungsi ini memberitahu server MQTT bahwa program ini akan mengirimkan pesan ‘Halo dunia’ ke seluruh pengguna server MQTT yang melakukan subscribe ke topik ‘contohtopik’

client.on('message', function (topic, message) {
  console.log(message.toString());
  client.end();
});

Baris ini digunakan untuk melakukan sesuatu terhadap pesan-pesan yang diterima oleh client ini setelah di subscribe. message adalah pesannya, sementara topic adalah topik asal pesan tersebut. Pada program ini, yang dilakukan adalah mengeprint pesan ke console.

Alur lengkap program adalah:
1. program mengkoneksikan diri ke server MQTT
2. program akan subscribe ke topik ‘contohtopik’
3. program mengirimkan ‘Halo dunia’ ke topik ‘contohtopik’
4. server MQTT meneruskan pesan ‘Halo dunia’ ke seluruh subscriber topik.
5. program menerima pesan baru
6. program memprint pesan yang diterima
7. Halo dunia dimunculkan ke console.

Yang perlu di note adalah, client MQTT ini tidak terbatas hanya di Node.JS saja. Anda bisa menggunakan bahasa pemrograman apapun seperti PHP, C , C++ , Java di platform apapun misalnya web, desktop, mobile dan embedded  seperti arduino dan ESP 8266.   Hanya saja, library client yang digunakan berbeda dan memiliki cara pemrograman yang  berbeda juga, walaupun konsep dasar publish-subscribenya tetap sama.

Berikut adalah beberapa library dalam berbagai bahasa pemrogramman, dan biasanya sudah ada tutorial penggunaanya di link tersebut.

PHP : http://www.hivemq.com/blog/mqtt-client-library-encyclopedia-mosquitto-php
C# : https://github.com/ppatierno/m2mqtt
Java : https://github.com/fusesource/mqtt-client
C/C++: https://eclipse.org/paho/
Ruby : https://github.com/njh/ruby-mqtt
Python: https://pypi.python.org/pypi/paho-mqtt/1.1

Selamat mencoba 🙂

Categories
Teknologi

Arsitektur Sistem Saklar Internet Of Things dengan ESP8266

Tulisan ini adalah kelanjutan dari tulisan Rencana Proyek Kontrol Lampu Rumah dengan internet. Tulisan ini akan membahas terutama arsitektur sistem.

Untuk merancang arsitektur, kita harus menganalisa terlebih dahulu masalah-masalah apa yang akan muncul. Kita harus melihat sistem yang akan di rancang dari berbagai sudut.

Berikut adalah list pertanyaan yang menurut saya sangat krusial:

  1. Bagaimana membuat komunikasi antara modul saklar dan server reliable?
  2. Bagaimana mengautentikasi pengguna modul saklar?
  3. Bagaimana cara menghandle lebih dari satu saklar sekaligus ?

Solusi yang saya gunakan adalah memecah problem diatas menjadi 2. Masalah nomor 1 dan 3 bisa dipecahkan menggunakan protokol MQTT. Protokol ini di gunakan untuk mengelola koneksi saklar. MQTT adalah sistem transportasi pesan berbasis publish/subscribe. Kita bisa membayangkan sistem ini seperti langganan koran. Seperti sebuah penerbit koran, Saklar melakukan broadcast bahwa dirinya bisa menerbitkan berita / pesan. Setelah itu, client bisa melakukan request langganan berita tersebut ke server MQTT. Hal ini juga berlaku 2 arah, saklar bisa berlangganan berita yang bertujuan mengubah status saklar. Tugas MQTT memanage objek apa berlangganan / menerbitkan berita apa. MQTT juga bisa di berikan password, sehingga hanya saklar & client tertentu yang dapat terkoneksi.

Berikut adalah diagram mengenai arsitektur ini:Screen Shot 2016-03-11 at 12.08.14 PM

Saklar akan mengkoneksikan diri ke server, bukan server yang mencoba mengkoneksian diri ke client. Saat saklar terkoneksi, dia akan mencoba menghubungi MQTT di VPS. Selanjutnya saklar akan mempublikasi eksistensi dirinya dan berlangganan beberapa pesan:

#Saklar akan mempublish message ini setelah terkoneksi: 
announcement,deviceName|status On/Off

#Ketika saklar menerima ini, akan mengubah status saklar
"command/"+deviceName+"/write"   

#Ketika saklar menerima ini, akan mengirim ulang pesan "announcement"
"command/"+deviceName+"/read"
    
#Ketika saklar menerima ini, akan mereset saklar
"command/"+deviceName+"/reset"

Sedangkan Server kontrol cukup berlangganan sebuah pesan:

announcement

Server kontrol berfungsi untuk  merender status masing-masing saklar sebagai situs HTML , manajemen autentikasi pengguna dan mengontrol penjadwalan. WebSocket digunakan agar semua saklar bisa dilihat statusnya secara realtime.  Saat pengguna mengubah status sebuah saklar, server kontrol akan mengirimkan pesan ke server MQTT sebagai berikut:

#Menyalakan Saklar
"command/"+deviceName+"/write",1

#Mematikan Saklar
"command/"+deviceName+"/write",0

Hal lain yang perlu di perhatikan adalah apa yang terjadi saat saklar offline. Yang kita bahas sampai saat ini adalah apa yang terjadi saat saklar online. Mekanisma sederhana yang saya lakukan adalah, mengirimkan pesan “Read” setiap beberapa menit sekali, lalu menghapus presensi di server kontrol apabila saklar tidak menjawab. Hal ini berarti saklar terdeteksi offline tidak real time, tapi saya rasa hal itu sudah lebih dari cukup untuk saat ini.

Sebagai penutup, Saya menggunakan MQTT sebagai server manajemen koneksi, Node.JS sebagai server kontrol, VPS OVH https://www.ovh.com/us/vps/ (karena harganya sangat murah) , sistem operasi Ubuntu 15.10. Tulisan selanjutnya adalah mengenai koding untuk implementasi arsitektur ini di ESP8266.

Categories
Teknologi

Cara melakukan programming pada ESP8266

Tulisan ini adalah kelanjutan dari tulisan saya yang berjudul Rencana Proyek Kontrol Lampu Rumah Terintegrasi Internet dengan ESP8266. di tulisan ini akan dibahas bagaimana melakukan programming dan contoh sederhana programnya.

Melakukan programming pada ESP8266 sangatlah mudah. Kamu hanya perlu menyiapkan ESP8266 kamu seperti di tulisan ini : https://www.gilangcp.com/2016/02/27/cara-berkomunikasi-dengan-esp8266-menggunakan-arduino/.

Lalu kamu harus menyiapkan programnya. Berikut ini adalah program sederhana untuk menyalakan pin GPIO nomor 2.

//Fungsi ini di jalankan 1 kali
void setup() {
  //Digunakan untuk mengeset GPIO pin ke 2 sebagai keluaran.
  pinMode(2,OUTPUT);
}

//Fungsi ini dijalankan berulang-ulang
void loop() {
  //Digunakan untuk set voltase GPIO pin 2 menjadi High
  digitalWrite(2,HIGH);
}

Kamu harus copy paste code tersebut ke IDE Arduino, pastikan board type sudah dipilih sebagai “Generic ESP8266 Module.”

Screen Shot 2016-03-03 at 10.20.49 AM

Selanjutnya adalah memasukan Pin RESET & pin GPIO0 ke GND di arduino. Berikut adalah diagram untuk membantu kamu melihat pin di modul.

Pin Out ESP8266
Pin Out ESP8266.

Klik Upload di Arduino IDE. Ketika tulisan status berubah menjadi uploading, lepas pin RESET dari GND nya arduino. Biarkan pin GPIO0 tetap di colok.  Pastikan pin GPIO2 tidak tercolok. Apabila error, ulangi dari awal, masukan pin RESET ke GND dan klik tombol upload, lepas pin RESET ketika status berubah menjadi uploading. proses ini tricky dan mungkin membutuhkan beberapa kali percobaan sebelum sukses.

Screen Shot 2016-03-03 at 11.04.16 AM

Ketika status sudah menjadi Done Uploading, cabut pin GPIO0 dan masukan pin RESET ke Ground, lalu cabut untuk mereset ESP8266. Anda bisa test dengan LED , dengan GPIO2 ke kaki positif LED, dan GND ke kaki negatif LED. Karena di program kita set bahwa GPIO2 HIGH, maka LED akan menyala.

GPIO menyalakan LED

Selamat! anda telah berhasil melakukan programming sederhana ESP8266. Perlu diketahui bahwa firmware AT Command bawaan akan di gantikan oleh program anda, sehingga anda tidak bisa lagi mengirim AT command ke module. Anda bisa memprogram dengan firmware bawaan, dengan mengikuti tutorial ini:

http://www.allaboutcircuits.com/projects/update-the-firmware-in-your-esp8266-wi-fi-module/

Tulisan selanjutnya akan membahas mengenai arsitektur perangkat lunak dan jaringan sistem saklar otomatis ini.

Categories
Teknologi

Rencana Proyek Kontrol Lampu Rumah Terintegrasi Internet

Tulisan ini adalah catatan harian proyek (Project Diary). Saya akan post terus perkembangan, kemajuan, hambatan yang saya alami saat menjalani proyek ini.

Saya dari dulu ingin sekali belajar elektronika, terutama mikrokontroller. Masalahnya adalah saya tidak mempunyai tujuan. Hasilnya adalah saya jadi malas, dan jadinya malah tidak pernah belajar.

Cukup sudah! itu yang saya katakan ke dalam diri saya. Oleh karena itulah saya menetapkan tujuan utama. Saya ingin mencoba membuat sakelar lampu kamar saya agar terhubung dengan internet, sehingga saya bisa nyalakan /  matikan menggunakan komputer. Saya juga menetapkan tujuan bonus, sistem penjadwalan.

Tentu saja membuat proyek seperti ini membutuhkan budget. Saya menetapkan budget yang saya akan keluar kan maksimal 350 ribu untuk membeli seluruh komponen yang di butuhkan. Saya tidak tahu apakah budget ini sudah cukup atau belum.

Saat mencoba menjalani proyek ini, Saya mendapatkan beberapa masalah, berikut masalah yang saya hadapi:

1. Bagaimana menyala-matikan perangkat listrik menggunakan komponen elektronik, yang menggunakan arus DC, sementara itu elektronik biasanya ?
– Setelah browsing lebih lanjut, saya mendapatkan informasi bahwa saya bisa mengontrol arus listrik menggunakan relay.
relay

2. Bagaimana cara mengontrol relay tersebut?
– Hipotesa saya adalah, saya bisa melakukan hal tersebut dengan arduino. Arduino memiliki pin output yang bisa di kontrol menggunakan programming.

3. Bagaimana cara mengkoneksikan Arduino dengan internet?
– Saya menemukan ada chip dengan nama ESP8266. ESP8266 ini adalah Wifi Receiver. Saya berharap sinyal dari ESP8266 bisa di terima oleh Arduino, yang lalu mengontrol relay. Saya berhipotesa bahwa sangat mungkin bisa membuat program di arduino untuk melakukan pengecekan ke server, apakah relay harus ON/OFF. Kemungkinan besar saya harus melakukan socket programming di arduino. Saya belum mengetahui apakah hal tersebut mungkin di lakukan Atau tidak.

ESP8266
Gambar ESP8266

4. Apakah semua komponen tersebut bisa di beli di indonesia?
– Saya terkejut bahwa seluruh komponen yang saya sebutkan di atas ternyata di jual di Tokopedia. Berikut Url komponen-komponen yang sudah saya beli dan sedang di kirim:

1. Relay 1 Channel, 5v  @Rp 19.000:
https://www.tokopedia.com/daelectronics/relay-module-1-chanel-for-arduino

2. Arduino Uno @Rp 89.000:
 https://www.tokopedia.com/tamjib/high-quality-arduino-uno-r3-board-atmega328p-1pcs-usb-cable

3. ESP8299 @58.000:
https://www.tokopedia.com/daelectronics/esp8266-serial-wifi-wireless-module-for-arduino

4. Prototyping Breadboard @25.000:
https://www.tokopedia.com/tamjib/solderless-breadboard-400-tie-point

5. Kabel Breadboard Male-Female @14.000:
https://www.tokopedia.com/bpraktis/male-to-female-dupont-cable-jumper-kabel-breadboard-20-cm-20pcs

6. Kabel Breadboard Male-Male @11.000:
https://www.tokopedia.com/hpasesoris/kabel-jumper-male-male-breadboard-arduino-wire-bread-board-cable-ab70

Total penggunaan budget: Rp. 216.000. Sisa Budget: Rp. 84.000

Note : ada beberapa komponen yang tokonya sama, sehingga biaya kirimnya bisa di tekan.

Semoga barang yang saya pesan bisa cepat di terima, sehingga saya bisa mulai menjalankan proyek ini.

Update :
Tulisan selanjutnya dari seri ini sudah saya upload:
Cara Berkomunikasi Dengan ESP8266 Menggunakan Arduino

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
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
T
ambahkan 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.