Anda di sini

Pemrograman

Tutorial Mahir Menggunakan NativeScript & Angular untuk Membuat Aplikasi Android Native

Aditya Suranata - 08 Desember 2016 00:20:58 0

NativeScript adalah solusi jitu untuk membuat aplikasi mobile native lintas platform, baik iOS maupun Android tanpa harus terkurung dalam web views. Disandingkan dengan Angular, TypeScript atau JavaScript moderen lainnya, memungkinkan kita untuk membangun UI yang benar-benar native dan tentunya performa yang tetap prima... sekaligus sharing skill dan memiliki satu basis kode yang sama dengan aplikasi web. Dengan kolaborasi yang powerful ini, maka kita dimungkinkan untuk mendapatkan akses penuh ke API native melalui JavaScript dan menggunakan berbagai paket dan modul yang tersedia dari npm, CocoaPods dan Gradle. NativeScript tentunya bersifat open source dan kolaborasinya dengan Angular 2 tidak diragukan masa depannya, didukung kuat oleh Telerik & Google.

Jika kamu baru mendengar NativeScript, kamu dapat mencoba langsung di HP mu untuk melihat bagaimana kesannya aplikasi yang benar-benar native.

Pembukaan

Siap untuk memulai mencoba membangun aplikasi native dengan NativeScript? Berikut adalah tutorial bagaimana cara menginstal dan menyetel lingkungan pengembangan aplikasi native menggunakan NativeScript dan Angular, hingga bagaimana mem-build aplikasi nyata untuk iOS dan Android dari awal.

Membangun Aplikasi dengan NativeScript dan Angular 2

Pada tutorial ini kita akan memfokuskan bagaimana membangun aplikasi menggunakan NativeScript & Angular 2, meskipun NativeScript bersifat cross-platform, namun untuk membatasi topik yang terlalu luas, kita akan fokus pada target platform Android. Hal ini sebagai pertimbangan juga karena aplikasi iOS hanya dapat dikompilasi melalui komputer bersistem operasi OS X atau Apple. Komputer dengan sistem operasi Windows / Linux hanya dapat mentarget platform Android / Windows (baru saja tersedia).

Apa itu NativeScript? Apa itu Angular 2?

NativeScript adalah framework untuk membangun aplikasi native iOS dan Android menggunakan JavaScript dan CSS. NativeScript merender UI langsung dengan mesin render native dari platformnya -- tidak perlu menggunakan WebViews -- sehingga performa dan UXnya sama dengan aslinya (native).

Angular JS adalah satu dari framework JavaScript yang paling populer untuk membangun aplikasi web. Versi terbaru dari Angular, yaitu Angular 2, memungkinkan untuk menggunakan Angular diluar web browser, dan para pengembang dari Telerik -- yaitu perusahaan yang membuat dan mengembangkan NativeScript -- telah bekerja sama dengan solid bersama para pengembang dari Google untuk merealisasikan kolaborasi luarbiasa antara Angular 2 dengan NativeScript.

Hasilnya adalah sebuah arsitektur perangkat lunak yang memungkinkan kita untuk membangun aplikasi mobile menggunakan framework yang sama -- dan dalam beberapa kasus menggunakan kode yang sama -- yang kita gunakan untuk membangun aplikasi web berbasis Angular 2, tentunya dengan bonus performa yang sesuai dengan harapan kita ketika menggunakan kode native. Maka dari itu, langsung saja mari kita cari tahu bagaimana mereka bekerja dengan cara mencoba langsung untuk membangun sebuah aplikasi.

Apa yang akan kita buat

Tutorial ini akan menuntun kita untuk membangun aplikasi manajemen toko bahan makanan (Groceries), aplikasi ini akan melakukan beberapa hal seperti berikut:

  • Konek ke layanan RESTful yang telah ada.
  • Memungkinkan user untuk melakukan registrasi dan login.
  • Memungkinkan user yang terautentikasi untuk menambahkan dan menghapus bahan makanan dari daftar.
  • Menjalankan aplikasi pada platform Android.

Jika kamu mengikuti tutorial ini hingga akhir, maka kamu akan mendapatkan aplikasi seperti berikut yang berjalan pada Android:

Prasyarat sebelum memulai

Tutorial ini mengasumsikan bahwa kamu memiliki pengetahuan dasar mengenai JavaScript, CSS, dan terminal / console. Lebih khususnya:

  • JavaScript: Kamu barus tahu konsep dasar JavaScript, seperti bagaimana fungsi-fungsi, pernyataan if, dan perulangan bekerja.
  • CSS: Kamu harus tahu bagaimana menulis selektor CSS sederhana, dan tahu bagaimana menggunakan aturan CSS sebagai pasangan nama/nilai.
  • Terminal/Command Promt: Kamu harus tahu bagaimana membuka terminal atau command-line promt pada komputer mu, bagaimana berpindah antar direktori, dan bagaimana cara mengeksekusi perintah.
  • Sebuah teks editor / IDE: Kamu harus tahu dasar-dasar menggunakan teks editor atau IDE pilihan mu. Kamu dapat menggunakan teks editor apapun untuk membangun aplikasi NativeScript, untuk pengalaman terbaik dianjurkan menggunakan editor yang memiliki dukungan TypeScript built-in, seperti Visual Studio Code.

Tutorial ini tidak mengasumsikan kamu memiliki pengetahuan mengenai Angular 2 atau TypeScript. Ketika dirasakan perlu untuk mengetahui konsep dasarnya sehingga dapat membantu mu untuk memahami konteksnya, tutorial ini akan mencoba untuk memberikan tautan ke halaman dokumentasi Angular atau TypeScript dimana kamu dapat mempelajarinya secara mendetil.

Dengan semua hal dasar yang telah dijelaskan diatas, langsung saja mari kita mainkan!

1.359
Daftar Artikel Terkait
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.