Tutorial Membuat Aplikasi Mobile Android & iOS dengan NativeScript+Angular

Dalam tutorial ini, Anda akan di ajarkan bagaimana membuat aplikasi mobile untuk platform Android & iOS pada tingkat dasar. Perlu di k...

Dalam tutorial ini, Anda akan di ajarkan bagaimana membuat aplikasi mobile untuk platform Android & iOS pada tingkat dasar. Perlu di ketahui sebelumnya bahwa NativeScript juga menyediakan halaman untuk bermain coding yaitu Playground yang dapat di akses secara online.

Syarat kebutuhan menjalankan NativeScript :

1. Menyiapkan OS ( Windows, Linux, OSX )
2. Hardware dengan Prosesor Core i7 dengan Ram Minimum 8GB
3. Install peralatan yang dibutuhkan untuk membangun aplikasi dengan NativeScript ( VisualStudio Code, Android Studio, Xcode9, Node.js, Java)
4. Petunjuk awal start NativeScript dapat dibaca di laman  resmi NativeScript dengan link sebagai berikut :

• OSX : https://docs.nativescript.org/start/ns-setup-os-x 
• Windows : https://docs.nativescript.org/start/ns-setup-win 
• Linux : https://docs.nativescript.org/start/ns-setup-linux

Setelah semua kebutuhan utama untuk menjalankan NativeScript terpenuhi maka Anda dapat berlanjut ke step pembuatan Aplikasi.

Langkah-langkah pembuatan Aplikasi NativeScript+Angular tingkat dasar :

1. Buka Aplikasi VisualStudio Code 
2. Buka Aplikasi AndroidStudio 
3. Buka Aplikasi Xcode9 
4. Buka command/terminal 
5. Cek terlebih dahulu versi Node.js yang sudah terinstall dengan cara ketik
   

   1	tns node --version

6. Cek terlebih dahulu versi NativeScript yang sudah terinstall dengan cara ketik
   

   1	tns nativescript --version

7. Buat direktori baru dengan nama projek 
8. Masuk ke dalam direktori folder projek dengan cara ketik
   

   1

   cd projek

9. Buat project baru yang terinclude Angular dengan cara ketik
   

   1	tns create redpoint --ng

10. Setelah project baru berhasil dibuat, jangan terlebih dulu menjalankan aplikasi kedalam emulator. 
11. Masuk kedalam folder projek dan drag folder redpoint ke Tools VisualStudio Code

Video Tutorial NativeScript tingkat dasar :

Modifikasi file asli NativeScript dengan file dari Playground Nativescript:

• Buka link Playground Nativescript
• Buka VisualStudio Code
• Hapus file app.routing.ts dan folder item
• Replace isi file code app.module.ts dengan file code app.module.ts dari Playground NativeScript
• Buat folder dan file baru dengan cara ketik pada terminal
  

  1 2 3 4 5 6

  mkdir -p app/home touch app/home/home-routing.module.ts touch app/home/home.component.css touch app/home/home.component.html touch app/home/home.component.ts touch app/home/home.module.ts

• Isikan code pada file yang berada di folder home, sama seperti code yang ada di Playground NativeScript dan simpan/save
• Install Module yang dibutuhkan dengak cara ketik
  

  1	npm i (nama module)

• Setelah semua plugin terinstall dan terkoneksi dengan baik, maka kita akan menjalankan command/terminal
• Pada terminal kita cek terlebih dahulu device emulator yang sedang terkoneksi Ketik perintah :
  

  1	tns device

• Setelah device emulator terdeteksi maka kita bisa lakukan run pada emulator dengan cara ketik
  

  1	tns run ios

  
  

  1	tns run android

Hasil aplikasi pada emulator dapat langsung kita edit tampilannya dengan memanfaatkan fungsi css pada folder root aplikasi yang kita buat.