Pada tulisan ini kita akan memulai dengan dasar-dasarnya, termasuk menginstall NativeScript command-line interface, memulai proyek baru, hingga bagaimana aplikasi pertama yang kita buat ini dapat dijalankan. Namun sebelum melanjutkan, pastikan kamu memulai membaca tutorial ini dari bagian awal, terutama bagian instalasi dan konfigurasi lingkungan kerja dengan NativeScript di komputer mu. Link tutorial sebelumnya tersedia dibagian atas tulisan.

Ringkasan Isi Tulisan

1.1: Inisialisasi aplikasi - kloning dari Git

1.2: Menambahkan targer development platform

1.3: Menjalankan aplikasi

1.4: Alur pengembangan aplikasi

1.2: Inisialisasi aplikasi

Dengan NativeScript CLI yang telah terpasang, sekarang waktunya untuk membangun aplikasinya. Biasanya, kamu akan menggunakan perintah tns create untuk membuat sebuah proyek aplikasi NativeScript kosongan (tns = telerik native script). Namun untuk tutorial ini, kita telah disiapkan oleh NativeScript sebuah proyek siap pakai yang bagus untuk dijadikan contoh sebagai titik mulai belajar, nama proyeknya Groceries.

Unduh file proyek Groceries menggunakan Git

Buka command line, lalu pindah ke direktori dimana kamu ingin menyimpan file proyek mu, misal di C:\NativeScript , jika belum ada buat dulu dengan mkdir lalu cd untuk masuk ke direktori yang dibuat tadi:

mkdir C:\NativeScript

cd C:\NativeScript

Selanjutnya, diasumsikan bahwa komputer mu telah terinstall Git, mengingat Git ini adalah salah satu komponen wajib yang dimiliki oleh seorang developer aplikasi jadi pastikan komputer mu ada Gitnya. Jika belum... ya install Git dulu deh bro...

Setelah instal Git selesai, lakukan cloning repo dari GitHub:

git clone https://github.com/NativeScript/sample-Groceries.git

Selesai mengkloning, ganti direktori ke yang barusan kita kloning

cd sample-Groceries

Terakhir dari proses kloning, masuk ke branch "angular-start" sebagai titik awal kita mulai pada tutorial ini:

git checkout angular-start

1.2: Menambahkan target development platform

Aplikasi mu sekarang telah terset, tapi sebelum dapat dijalankan, kamu perlu menginisialisasi sebuah proyek native platform spesifik untuk setiap platform yang akan kamu target, karena dalam tutorial ini kita hanya mentarget Android, maka lakukan hal berikut:

Menambahkan target platform Android

Tambahkan target Android dengan menggunakan perintah platform add seperti berikut:

tns platform add android

Perintah platform add akan menambahkan sebuah folder bernama platforms pada proyek mu, dan menyalin semua SDK native yang diperlukan ke folder itu. Ketika kamu mem-build aplikasinya, NativeScript CLI akan menyalin kode aplikasi mu ke folder platforms sehingga native binernya dapat dibuat.

1.3: Menjalankan aplikasi dengan virtual device

Setelah inisialisasi platform selesai, kamu dapat menjalankan aplikasi mu dalam sebuah virtual device, atau bahkan di HP mu secara langsung dengan menghubungkannya ke komputer melalui kabel USB dan memilih menu USB Debugging pada konfigurasi Developer options. Namun untuk mempermudah, kita akan menggunakan virtual device.

Virtual device dengan Genymotion

Yang kita gunakan untuk testing adalah virtual device, berbeda dengan emulator, virtual device dapat terlihat seperti perangkat yang sebenarnya oleh builder aplikasi. Dengan virtual device, kita juga memiliki akses ke kamera komputer, atau mikrophone hingga sumber daya jaringan. Untuk itu, pertama sebelum kita mulai melakukan build, kita perlu membuka virtual device dari Genymotion yang kita buat pada tutorial sebelumnya. Setelah virtual device tersebut telah berhasil dijalankan, maka lanjutkan dengan perintah berikut:

tns run android

Jika semuanya berjalan mulus, maka kamu akan segera melihat aplikasi mu berjalan pada virtual device yang kamu buat:

hasil_hello_world_aplikasi_dengan_nativescript_dan_angular_2_di_android.png

1.4: Alur Pengembangan Aplikasi

Pada tahap ini, kamu telah memiliki NativeScript CLI yang siap pakai, begitu juga dengan keperluan Android lainnya yang diperlukan untuk menjalankan aplikasi mu. Sekarang kamu tentunya memerlukan pemahaman yang matang mengenai alur kerja yang memungkinkan mu untuk melakukan perubahan dan dapat melihat hasil perubahannya secara langsung dan cepat. Untuk itu, kita akan menggunakan perintah tns livesync.

Perubahan pertamamu pada aplikasi NativeScript

Jika perintah tns run android yang sebelumnya kamu jalankan masih berjalan, tekan Ctrl + c pada terminal untuk menghentikannya.

Selanjutnya, coba perintah berikut untuk mendapatkan hasil realtime mengenai perubahan yang terjadi pada kode program:

tns livesync android --watch

Perintah tns livesync memperbaharui aplikasi dengan cara mentransfer sumber kode yang terupdate ke perangkat virtual atau HP. Dengan menambahkan flag --watch, perintah livesync juga memantau file-file pada proyek NativeScript. Ketika salah satu saja file-file tersebut mengalami perubahan, maka perintah itu akan mendeteksi perubahan itu, dan melakukan patching ke aplikasi dengan kode yang terbaru. Baca juga informasi lebih detil mengenai bagaimana NativeScript bekerja.

Untuk dapat melihat bagaimana livesync bekerja mari kita kita lakukan perubahan kecil pada aplikasinya. Buka folder proyeknya dan sunting file app/app.component.ts menggunakan teks editor favorit mu, dan rubah isi filenya dengan kode berikut, yang mana akan merubah teks labelnya:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: ""
})
export class AppComponent {}

Simpan filenya dan kamu akan melihat aplikasinya membuka ulang dan memperbaharui teks yang ditampilkan.

hasil_hello_world_aplikasi_dengan_nativescript_dan_angular_2_di_android_dengan_livesync.png

NativeScript CLI juga akan menampilkan pesan log perubahan yang terjadi pada terminal, begitu juga keterangan masalah yang menyebabkan kegagalan apabila kita melakukan kesalahan ketika melakukan editing dan juga output dari fungsi console.log(). Jadi, jika aplikasi mu mengalami crash ketika melakukan proses perubahan, maka petunjuk untuk mencari akar permasalahannya semua ada di terminal.

Tampilan lognya mungkin akan sedikit njelimet, jadi silahkan scroll dengan sabar untuk melihat masalah yang sebenarnya. Sebagai contoh, jika kamu mencoba untuk memanggil method foo.bar() yang mana sebenarnya tidak ada, berikut adalah contoh pesan log errornya:

E/TNS.Native( 2063): ReferenceError: foo is not defined
E/TNS.Native( 2063): File: "/data/data/org.nativescript.groceries/files/app/./views/login/login.js, line: 13, column: 4

Akhirnya, pada tahap ini kamu sudah membuat sebuah aplikasi, menyetel lingkungan kerja mu, dan menyiapkan semua yang diperlukan untuk dapat membuat aplikasi mu berjalan di Android, kamu tentunya telah siap untuk mulai menggali lebih dalam lagi ke file-file yang membentuk sebuah aplikasi berbasis NativeScript.