Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Pengantar NativeScript

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Pada artikel ini, kita akan melihat NativeScript, kerangka kerja open-source untuk membangun aplikasi seluler dengan JavaScript. Di akhir artikel, Anda harus memiliki gagasan yang cukup bagus tentang apa itu NativeScript, bagaimana cara kerjanya, dan teknologi apa yang digunakannya. Selain itu, kami juga akan menjawab pertanyaan umum yang mungkin Anda miliki ketika menjelajahi teknologi baru, seperti bagaimana itu berbeda dari alternatif seperti Cordova dan React Native, dan bagaimana Telerik terlibat dalam proyek tersebut.

1. Apa itu NativeScript?

NativeScript adalah kerangka kerja untuk membangun aplikasi seluler bawaan lintas platform. Ini memungkinkan pengembang untuk menggunakan XML, CSS dan JavaScript untuk membangun aplikasi untuk Android, iOS, dan bahkan Windows Universal Platform. Tidak seperti Cordova, yang menggunakan WebView untuk merender UI aplikasi, NativeScript menggunakan mesin rendering platform asli, yang berarti bahwa itu memberikan pengalaman pengguna yang benar-benar asli.

2. Pros

  • Ini gratis dan open source. Ini berarti Anda dapat berkontribusi pada kode dan menggunakannya sesuai keinginan Anda, selama Anda tidak melanggar lisensi Apache 2.0.
  • Ini memungkinkan Anda membangun aplikasi asli untuk perangkat Android dan iOS. Setiap komponen UI yang dipaparkan NativeScript diterjemahkan ke dalam komponen UI asli yang sesuai.
  • Ini memungkinkan Anda mengakses API platform asli melalui kode JavaScript. Anda tidak perlu memiliki pengetahuan tentang Java atau Objective-C untuk menggunakan API platform asli karena Anda dapat menulis semuanya dalam JavaScript. Ini berarti bahwa jika Anda perlu mengakses fitur perangkat tertentu, Anda bisa belajar cara mengakses API asli dengan JavaScript dan Anda siap melakukannya.
  • Ini memberi pengguna pengalaman yang lebih dekat dengan yang asli daripada yang disediakan oleh kerangka kerja aplikasi seluler hybrid seperti Cordova.
  • Ini memungkinkan pengembang untuk dengan mudah membangun, menyebarkan, dan mengelola aplikasi NativeScript mereka melalui platform Telerik. Saya akan membahas Platform Telerik lebih lanjut di bagian selanjutnya.
  • Ini memiliki dukungan nol hari untuk platform asli baru. Ini berarti Anda dapat segera menggunakan API asli dan komponen UI terbaru setiap kali Google atau Apple memperbarui platform mereka.
  • Dokumentasi menyediakan banyak informasi tentang cara memulai, konsep inti, dan antarmuka pengguna. Ada juga contoh, tutorial, forum, pertanyaan Stack Overflow, dan contoh aplikasi yang dapat membantu pemula memulai dengan NativeScript.
  • Anda dapat menulis aplikasi NativeScript Anda dengan TypeScript. TypeScript adalah bahasa yang mentransformasikan ke JavaScript dan menambahkan kemampuan pemrograman berorientasi objek ke JavaScript.
  • Pustaka JavaScript apa pun yang dapat Anda temukan di npm yang tidak bergantung pada browser dan DOM dapat digunakan dalam NativeScript. Contoh perpustakaan seperti itu termasuk perpustakaan utilitas seperti lodash dan garis bawah.
  • Anda dapat melakukan hampir semua hal dengan NativeScript CLI. Dasar-dasar seperti membuat proyek baru, menambahkan platform, berjalan pada perangkat dan menyebarkan ke platform tertentu semuanya termasuk. Selain itu, Anda juga dapat menginstal plugin, men-debug aplikasi, dan mengunggah ke toko aplikasi.

3. Cons

  • Tidak ada HTML dan DOM di NativeScript. Anda harus belajar cara menggunakan komponen UI yang berbeda untuk membangun UI aplikasi.
  • Plugin yang diverifikasi kurang. Pada saat penulisan artikel ini, hanya ada 16 plugin yang diverifikasi secara total. Meskipun ada banyak plugin NativeScript yang terdaftar di npm, Anda tidak akan pernah bisa memastikan kualitasnya.
  • Pengembang perlu mengetahui Android asli dan iOS API untuk mengakses perangkat keras perangkat dan fitur khusus platform lainnya.
  • Karena sifat aslinya, Anda hanya dapat menguji aplikasi pada perangkat aktual atau emulator. Ini membuat pengaturan awal untuk pengujian lebih lambat. Tapi begitu Anda menjalankannya di perangkat, pemuatan ulang panas mengambil alih. Ini berarti bahwa setiap kali Anda membuat perubahan pada kode sumber, itu segera memuat ulang aplikasi untuk mencerminkan perubahan.
  • Tidak semua komponen UI tersedia secara gratis. Anda perlu membeli Telerik UI untuk NativeScript jika Anda ingin menggunakan komponen seperti grafik dan kalender.

4. Bagaimana Cara Kerjanya?

NativeScript terdiri dari mesin virtual JavaScript, runtime, dan modul jembatan. Mesin virtual JavaScript menginterpretasikan dan mengeksekusi kode JavaScript. Kemudian modul jembatan menerjemahkan panggilan ke panggilan API khusus platform dan mengembalikan hasilnya ke pemanggil. Sederhananya, NativeScript memberi pengembang cara untuk memerintahkan platform asli melalui JavaScript alih-alih Objective-C di iOS atau Java di Android.

Tentu saja, ada banyak hal yang terjadi di balik layar, tetapi pengembang di Telerik menjelaskannya lebih baik daripada yang saya bisa, jadi jika Anda ingin mempelajari lebih lanjut tentang cara kerja NativeScript, Anda dapat membaca artikel oleh Georgi Atanasov di NativeScript - Tinjauan Teknis atau artikel TJ VanToll tentang Cara Kerja NativeScript.

5. Teknologi apa yang digunakannya?

Dengan NativeScript, Anda menggunakan XML untuk menggambarkan UI aplikasi, CSS untuk gaya, dan JavaScript untuk menambahkan fungsionalitas.

Anda dapat menggunakan TypeScript dengan Angular 2 jika Anda lebih suka menggunakan kerangka kerja untuk membuat kode JavaScript.

Untuk penataan, NativeScript hanya menggunakan subset CSS. Ini berarti bahwa tidak semua fitur CSS yang tersedia di lingkungan browser dapat digunakan. Misalnya, Anda tidak dapat menggunakan atribut float atau posisi. Berikut daftar lengkap properti CSS yang didukung. Sama seperti di browser, Anda dapat menambahkan gaya yang berlaku untuk seluruh aplikasi, ke halaman tertentu, atau ke komponen UI tertentu saja. Jika Anda lebih suka menggunakan Sass, Anda dapat menginstal plugin NativeScript Dev Sass.

Untuk menjelaskan struktur antarmuka pengguna, Anda menggunakan XML. Setiap halaman dalam aplikasi harus dalam file XML sendiri. NativeScript hadir dengan komponen atau widget antarmuka pengguna yang telah ditentukan sebelumnya yang dapat Anda gunakan untuk membangun UI aplikasi. Beberapa komponen ini mirip dengan elemen HTML berbeda yang Anda gunakan di browser.

Misalnya, ada komponen Image, yang setara dengan elemen img, atau komponen TextField, yang setara dengan elemen input dengan jenis teks. Penangan acara seperti mengetuk tombol ditambahkan dalam komponen itu sendiri. Berikut adalah contoh:

Hal lain yang perlu diperhatikan adalah bahwa komponen juga berfungsi sebagai templat. Jika Anda terbiasa dengan templating library seperti Handlebars atau Moustache, Anda harus betah dengan sintaks berikut:

Contoh di atas menggunakan komponen ListView. Seperti namanya, komponen ini memungkinkan Anda membuat daftar. animals adalah array yang didefinisikan dalam file JavaScript dan terikat ke variabel animals pada pemuatan halaman. Ini membuat variabel animals tersedia untuk digunakan di dalam file XML.

Output ini setiap item dalam array dalam ListView.

Akhirnya, ada plugin yang memungkinkan Anda untuk mengakses perangkat hardware dan fitur spesifik platform. NativeScript dilengkapi dengan plugin kamera yang sudah diinstal sebelumnya. Hal ini memungkinkan Anda untuk mengakses kamera perangkat dan mengambil foto. Anda kemudian dapat menyimpan jalan lokal untuk foto di app untuk digunakan nanti. Fitur khusus platform seperti berbagi sosial juga dapat digunakan dengan menginstal plugin seperti NativeScript Social Share Plugin.

6. Aplikasi Apa Yang Dapat Anda Bangun?

Karena sifat asli NativeScript, Anda dapat membangun hampir semua jenis aplikasi dengannya. Berikut adalah beberapa contoh dari aplikasi yang Anda dapat membangun dengan NativeScript:

  • Aplikasi yang berbicara ke server, seperti berita apps dan aplikasi jaringan sosial.
  • Game sederhana seperti catur, tic-tac-toe, atau pinball.
  • Aplikasi waktu nyata seperti aplikasi obrolan atau umpan langsung. Ada plugin Firebase untuk NativeScript yang dapat Anda gunakan untuk mengimplementasikan aplikasi real-time.
  • Aplikasi streaming musik dan video. Ada plugin pemutar video yang memungkinkan Anda memutar video yang disimpan secara lokal atau mengalirkan video jarak jauh seperti yang ada di YouTube.
  • Aplikasi peta dan geolokasi. Ada plugin untuk Google Maps, dan API peta asli.
  • Aplikasi yang mengakses perangkat keras perangkat. Contohnya termasuk aplikasi kamera dan aplikasi IoT.

Ketika datang ke jenis aplikasi yang dapat Anda bangun dengan NativeScript, satu-satunya faktor yang membatasi adalah kinerja dan ketersediaan plugin. Menulis aplikasi seluler asli dalam JavaScript disertai dengan harga: Anda tidak dapat benar-benar berharap untuk membangun aplikasi yang menuntut kinerja tinggi. Contohnya termasuk permainan dengan grafik dan animasi yang kompleks, aplikasi dengan banyak bagian bergerak, dan proses latar belakang.

Keterbatasan lain adalah ketersediaan plugin. Sebagian besar pengembang datang ke NativeScript dari latar belakang pengembangan web. Ini berarti bahwa sebagian besar dari mereka tidak terbiasa dengan atau memiliki pengetahuan terbatas tentang platform API asli yang dapat digunakan untuk membuat plugin untuk mengakses perangkat keras perangkat atau fitur platform khusus seperti kontak atau pesan.

Jika Anda ingin mempelajari lebih lanjut tentang jenis aplikasi apa yang dapat Anda buat dengan NativeScript, Anda dapat memeriksa halaman App Showcases. Sebagian besar aplikasi yang terdaftar di sana diterbitkan di Google Play Store dan Apple Store. Ini berarti Anda dapat menginstalnya dan menjalankannya di perangkat Anda untuk mengetahui seperti apa tampilan aplikasi yang dibuat dengan NativeScript dan bagaimana kinerjanya.

7. Bagaimana NativeScript Dibandingkan dengan Hybrid Frameworks?

Jika Anda bukan orang baru dalam pengembangan aplikasi seluler hybrid, Anda mungkin menemukan kerangka kerja seperti Cordova dan React Native. NativeScript terkait dengan dua kerangka kerja ini karena keduanya bertujuan untuk menyelesaikan masalah 'Tulis sekali, jalankan di mana saja' di bidang pengembangan aplikasi seluler. Sekarang mari kita lihat setiap kerangka berdampingan:


Cordova React Native NativeScript
Creator Nitobi; Kemudian dibeli oleh Adobe Systems Facebook Telerik
UI HTML Komponen UI diterjemahkan ke mitra asli mereka Komponen UI diterjemahkan ke mitra asli mereka
Dapat menguji pada Browser, emulator, perangkat Emulator, perangkat Emulator, perangkat
Kode dengan HTML, CSS, JavaScript UI komponen, JavaScript, subset dari CSS Komponen UI, subset dari CSS, JavaScript
Akses fungsionalitas asli Melalui plugin Native modules Akses API Native melalui JavaScript
Digunakan untuk Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 Android dan iOS. Windows Universal dan Samsung Tizen segera Android dan iOS. Windows Universal segera
JavaScript library dan framework Pustaka atau kerangka kerja front-end (mis. Angular, Ember) Pustaka apa pun yang tidak bergantung pada browser Pustaka apa pun yang tidak bergantung pada browser
Pola pengkodean Kerangka kerja front-end dapat digunakan untuk menyusun kode Markup UI, JavaScript, dan CSS disatukan dalam satu file secara default
MVVM/MVC pattern
Bagaimana kode JavaScript dijalankan WebView JavaScriptCore mesin mengeksekusi kode aplikasi pada Android dan iOS
WebKit JavaScriptCore mesin mengeksekusi kode app pada iOS dan mesin V8 JavaScript Google Android

Singkatnya, Cordova adalah generasi lama kerangka aplikasi seluler hybrid. Ini menggunakan WebView untuk merender UI aplikasi dan mengakses kemampuan perangkat asli melalui plugin. React Native dan NativeScript adalah generasi baru karena mereka menerjemahkan kode JavaScript Anda sehingga dapat dieksekusi oleh platform asli.

Seseorang mungkin datang dengan nama yang lebih baik untuk kerangka kerja seperti React Native dan NativeScript di masa depan. Tetapi untuk sekarang mari kita mengklasifikasikannya sebagai "Kerangka Kerja Hibrid Asli" karena keduanya menggunakan JavaScript untuk membuat aplikasi dan keduanya menawarkan pengalaman dan kinerja seperti asli kepada pengguna.

8. Bagaimana Telerik Terlibat dalam Proyek?

Microsoft adalah perusahaan yang menciptakan NativeScript. Dan, sama seperti perusahaan lain, mereka perlu membuat uang untuk bertahan hidup. Jadi Anda mungkin bertanya, jika NativeScript bebas dan open source, bagaimana Microsoft membuat uang dari itu? Nah, jawabannya adalah melalui Platform Telerik dan UI Telerik untuk NativeScript.

Microsoft Platform menyediakan pengembang dengan alat-alat yang mereka butuhkan untuk dengan mudah merancang, membangun, tes, menyebarkan, mengelola dan mengukur kinerja NativeScript aplikasi. Berikut adalah beberapa contoh alat mereka menawarkan:

  • pembangun visual app yang memungkinkan Anda untuk drag dan drop komponen UI yang berbeda
  • database awan yang menyediakan database untuk aplikasi Anda
  • hidup app update untuk dengan mudah mendorong pembaruan untuk aplikasi tanpa harus kembali ke app store dan memiliki update pengguna aplikasi secara manual
  • Layanan analisis yang menjawab pertanyaan seperti bagaimana aplikasi Anda sedang digunakan, bagaimana kinerja dan apa yang pengguna Anda pikir itu

Microsoft UI untuk NativeScript adalah satu set komponen untuk membangun UI App. NativeScript sudah dilengkapi dengan komponen UI gratis, tetapi ada juga komponen UI berbayar seperti Bagan dan Kalender yang hanya dapat Anda gunakan saat Anda membelinya dari Telerik.

9. Langkah Selanjutnya

Jika Anda ingin mempelajari lebih lanjut tentang NativeScript, saya sarankan memeriksa sumber daya berikut:

Kesimpulan

Pada artikel ini Anda telah mempelajari dasar-dasar NativeScript. Seperti yang Anda lihat, NativeScript adalah pilihan yang baik untuk membangun aplikasi seluler menggunakan keterampilan yang sudah Anda miliki sebagai pengembang web. Saya harap artikel ini memberi Anda pengetahuan yang diperlukan untuk membantu Anda memutuskan apakah NativeScript tepat untuk Anda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.