Instalasi Sencha Touch - Tutorial Sencha

Touch #Part 1
Oleh: FAUZI

Instalasi Sencha Touch - Baiklah, pada kesempatan pertama ini saya ingin
berbagi tentang persiapan awal dalam pembangunan aplikasi mobile
berbasis web ini, tapi sebelumnya saya ingin review sedikit tentang sencha
touch bagi yang belum mengenal framework yang satu ini.
  Sencha touch adalah sebuah frame...

Instalasi Sencha Touch - Baiklah, pada kesempatan pertama ini saya ingin berbagi tentang
persiapan awal dalam pembangunan aplikasi mobile berbasis web ini, tapi sebelumnya saya ingin
review sedikit tentang sencha touch bagi yang belum mengenal framework yang satu ini.

Sencha touch adalah sebuah framework web application mobile yang menggabungkan kekuatan
HTML5 mobile dan javascript sehingga dapat menghasilkan suatu web application mobile layaknya
sebuah aplikasi native pada perangkat mobile tersebut. jadi, dengan sencha touch kita dapat
membuat sebuah aplikasi yang indah dan dapat berinteraksi dengan module-module perangkat
smartphone secara sederhana. Untuk informasi lebih lanjut bisa mengunjungi website resminya
www.sencha.com/products/touch

Bahan-bahan yang perlu disiapkan:

1. Sencha-touch-2.3.1a bisa langsung di download disini.
2. SenchaCmd-3.1.2.342-windows bisa langsung di download disini..
3. java Development Kit jdk-6u20-windows-i586 bisa langsung di download disini..

Baiklah sekarang kita langsung melakukan instalasi sencha touch pada komputer maupun laptop
yang kita miliki, perlu di ingat pada tutorial ini saya menggunakan windows 7 untuk sistem operasi
yang saya gunakan, sejauh ini sencha touch berjalan dengan baik pada windows 7 ultimate, home
dan windows 8, untuk versi OS lainnya saya belum melakukan explorasi.
Langkah pertama download dahulu dulu paket yang telah saya berikan sebelumnya,
yang berisi 3 file wajib yang harus dimiliki.

Perangkat yang harus ada sebelum kita bisa menggenerate project pada sencha touch ini adalah
JAVA DEVELOPMENT KIT (jdk), jadi kita harus install dahulu jdk-6u20-windows-i586 yang sudah
saya berikan sebelumnya.

Lakukan proses instalasi seperti pada umumnya.

Setelah proses instalasi selesai dilakukan, selanjutnya lakukan instalasi pada sencha CMD
SenchaCmd-3.1.2.342-windows.

Ini berfungsi untuk menggenerate project baru yang akan kita bangun nantinya, karena proses
generate project dan pembangunan lokal server dilakukan menggunakan command prompt (CMD)
maka kedua file ini wajib sudah terinstalasi dengan baik.
Untuk mengetahui apakah kedua perangkat ini sudah berjalan dengan baik, lakukan percobaan
berikut.
Silahkan buka Command Prompt (CMD) ketikkan sencha tanpa tanda petik di command prompt
anda. Maka hasilnya akan seperti ini.

Apabila dua software tadi belum berhasil di instalasi maka hasilnya akan seperti ini.

Silahkan ulangi proses instalasi apabila tahap pengecekan menghasilkan error seperti di atas.
Baiklah tahap berikutnya adalah pembuatan direktori sencha yang akan digunakan untuk
membangun project nantinya.
Silahkan extrak file sencha-touch-2.3.1a-commercial.rar yang telah saya berikan sebelumnya, dan
arahkan extraksi di drive C:\ anda, maka file touch-2.3.1 akan berada seperti berikut.

Tahap ini dilakukan untuk pengarahan lokal server ke direktori touch-2.3.1 dan penempatan project
kita nantinya.
Sejauh ini proses instalasi telah berjalan dengan baik, selanjutnya kita akan melakukan pengecekan
terakhir dan melihat demo project dari framework sencha touch ini.
Seperti pembangunan aplikasi web mobile pada umumnya sencha touch juga membutuhan server
lokal dalam pengujian projectnya. Kabar baiknya sencha touch telah menyedia kan server lokal di
dalamnya, jadi kita tidak membutuhkan aplikasi tambahan seperti XAMPP dan sejenisnya.
Untuk pengaktifan server lokal, lakukan aktifasi pada sencha cmd web server dengan cara berikut.
Buka command prompt (CMD) ketikan perintah berikut sencha fs web -port 8000 start -map
C:\touch-2.3.1 tanpa tanda petik, port 8000 adalah port yang akan kita gunakan pada server ini,
anda bisa mengganti dengan port yang anda inginkan, c:\touch-2.3.1 adalah direktori sencha touch
yang akan kita jadikan server lokal nantinya.
jadi, direktori c:\touch-2.3.1 akan menjadi lokal server layaknya htdoc pada XAMPP.
Apabila proses aktifasi server berjalan dengan baik, maka hasilnya akan seperti berikut.

Berikutnya silahkan buka browser google chrome untuk mellihat apakah sencha touch telah berjalan
dan bisa digunakan. Sencha touch berjalan dengan baik pada browser yang memiliki kemampuan
yang bagus seperti safari dan chrome.
Ketikkan url berikut di google chrome anda localhost:8000 sesuai dengan port yang anda berikan
pada tahap pengaktifan sencha cmd web server.
Apabila semua tahap instalasi selesai maka hasilnya akan seperti ini.

Selanjutnya kita akan melihat kemampuan-kemampuan sencha touch dalam membangun web
aplikasi mobile dengan melihat demo projectnya.
Silahkan ketikkan url berikut localhost:8000/examples/ di browser google chrome yang anda buka
sebelumnya.

Silahkan lakukan explorasi dengan melihat-lihat demo yang dimiliki oleh sencha touch.
Sencha touch memiliki kemampuan yang luar biasa di bandingkan framework-framework lainnya,
salah satunya kita bisa merasakan efek touch yang biasa dirasakan pada aplikasi native smarphone
dan dapat berinterasi dengan hardware yang ada di dalam perangkat smartphone tersebut.
Saya sendiri sangat menyukai framework yang satu ini dalam membangun web aplikasi mobile di
bandingkan dengan menggunakan jquery, karena kemampuannya yang luar biasa dan desain thema
yang mampu di sesuaikan dengan perangkat yang menjalankannya secara otomatis. Berikut adalah
salah satu contoh demo form yang dimiliki sencha touch.

Demikianlah tahap instalasi sencha touch.

Pada tutorial berikutnya kita akan belajar membuat project sederhana dan instalasi documentasi
untuk mempermudah proses exprolasi atau pembelajaran kedepannya.

Salam hangat

Tentang Penulis
FAUZI