Anda di sini

Pemrograman

Buat Aplikasi Dari Awal Dengan NativeScript Hingga Dapat Dijalankan

Aditya Suranata - 08 Desember 2016 12:47:59 0

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
Catatan: Branch "angular-end" memiliki state final dari tutorial ini. Silahkan merujuk ke penggunaan branch di GitHub jika kamu mentok.

Setelah menyelesaikan tutorial ini, jika kamu ingin membuat aplikasi NativeScript dan Angular 2 yang baru -- yang tidak mengkloning Groceries -- kamu dapat menggunakan NativeScript CLI dengan perintah tns create seperti contoh berikut:

tns create my-app-name --ng

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
Catatan: Kamu dapat menambahkan platform hanya untuk SDK yang telah terinstall pada komputer mu. Jika terjadi error ketika menjalankan tns platform add, coba cek lagi ke tutorial sebelumnya mengenai instalasi dan konfigurasi lingkungan pengembangan.

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:

TIPS: Untuk melihat daftar semua perangkat virtual, atau HP asli iOS maupun Android yang terhubung ke USB, dapat digunakan perintah tns device, sehingga tns run dapat menyalurkan hasilnya ke perangkat tersebut. Namun selain itu, tns device tidak dapat menampilkan simulator iOS.

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.

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
TIPS: Ketika kamu mencoba untuk mencari permasalahan, coba tambahkan pernyataan console.log() pada kode JavaScript mu -- sama persis seperti bagaimana pernyataan ini digunakan pada aplikasi berbasis web browser.

PERINGATAN: Tidak semua perubahan pada file yang ada di folder proyek dapat ter-livesync dengan aplikasi NativeScript. Sebagai contoh, livesync tidak dapat mem-patch perubahan pada file konfigurasi native (Info.plist, AndroidManifest.xml, dan lainnya), penambahan plugin baru, dan perubahan lainnya yang memerlukan kompilasi penuh dari awal untuk aplikasinya. Jika kasusnya demikian, kamu perlu melakukan kompilasi penuh dari awal lagi dengan cara menghentikan livesync dengan Ctrl + c dan coba menjalankannya lagi. Jangan khawatir, jika diperlukan aksi untuk melakukan kompilasi penuh, pada tutorial ini akan dijelaskan dengan jelas.

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.

1.045
Image

Aditya Suranata

Aditya suka menulis, bukan hanya sekedar hobi, menulis menjadi medianya untuk mencurahkan pikiran dan perasaan. Di TutorKeren.com kebanyakan menyumbang tulisan sesuai dengan minat dan keahliannya yaitu pada kategori pemrograman dan elektronika. Selain itu juga gemar menulis mengenai hal-hal umum, seperti ilmu alam, sosial dan beberapa pengalamannya yang mungkin bisa berguna untuk orang lain.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.