Advertisement
  1. Code
  2. NativeScript

Buat Aplikasi NativeScript Anda yang pertama

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam artikel terakhir, saya memperkenalkan Anda ke NativeScript. Di sana Anda belajar dasar-dasar NativeScript dan bagaimana hal itu berbeda dari kerangka pengembangan mobile lainnya. Kali ini Anda akan mendapatkan tangan Anda kotor dengan membuat aplikasi NativeScript Anda yang pertama. Saya akan memandu Anda melalui seluruh proses membangun aplikasi dengan NativeScript, mulai dari mengatur lingkungan pengembangan Anda hingga menjalankan aplikasi di perangkat Anda. Berikut ini garis besar dari apa yang akan saya diskusikan:

  1. Pengaturan NativeScript
  2. Membangun aplikasi
  3. Menjalankan app
  4. Debug aplikasi

Kami akan secara khusus menjalankan aplikasi di platform Android. Tetapi Anda masih bisa mengikuti jika ingin mendeploy ke iOS karena kodenya hampir sama. Satu-satunya perbedaan adalah dalam proses untuk mendirikan NativeScript dan perintah yang Anda mengeksekusi ketika menjalankan app.

Kode sumber lengkap untuk aplikasi ini juga tersedia dari tutorial GitHub repo.

1. Menyiapkan NativeScript

Untuk mengatur NativeScript, pertama Anda harus menginstal Node.js. Setelah Node.js diinstal, Anda dapat menginstal alat bantu baris perintah NativeScript dengan mengeksekusi perintah npm install -g nativescript pada terminal Anda.

Langkah terakhir adalah untuk menginstal alat pengembangan untuk setiap platform yang Anda ingin menyebarkan ke. Untuk Android, inilah Android SDK. Untuk iOS, itu adalah XCode. Anda dapat mengikuti panduan instalasi di situs NativeScript untuk petunjuk lebih rinci tentang cara mengatur perangkat lunak yang diperlukan untuk lingkungan pengembangan.

Setelah Anda telah mengatur lingkungan Anda, menjalankan tns doctor untuk memastikan bahwa lingkungan Anda sudah siap untuk pengembangan NativeScript. Jika Anda di Linux atau Windows, Anda akan melihat sesuatu seperti ini jika lingkungan Anda siap:

Ada catatan di sana yang hanya dapat Anda kembangkan untuk iOS di sistem Mac OS X. Ini berarti bahwa jika Anda menggunakan PC, Anda hanya dapat menerapkannya ke perangkat Android. Namun, jika Anda pada Mac, Anda akan mampu mengerahkan pada iOS dan Android platform.

Jika Anda mengalami masalah selama setup, Anda bisa mendapatkan undangan untuk bergabung dengan Komunitas Slack NativeScript dan setelah Anda telah bergabung, pergi ke chanel getting started dan mengajukan pertanyaan Anda di sana.

2. Membuat Aplikasi

Aplikasi yang akan kami buat adalah aplikasi pencatat. Ini akan memungkinkan pengguna untuk membuat catatan, masing-masing dengan lampiran gambar opsional yang akan diambil dengan perangkat kamera. Catatan yang bertahan menggunakan NativeScript application settings, dan dapat dihapus secara individual.

Aplikasi akan terlihat seperti ini:

NativeScript app

Mulai dengan menjalankan perintah berikut untuk membuat proyek NativeScript baru:

noter adalah nama proyek, dan com.yourname.noter adalah ID unik aplikasi. Ini akan digunakan nanti untuk mengidentifikasi aplikasi Anda setelah Anda mengirimkannya ke Play atau App Store. Secara default, perintah tns create akan membuat folder dan file berikut untuk Anda:

  • app
  • node_modules
  • platform
  • package.json

Anda biasanya hanya harus menyentuh berkas di dalam direktori app. Tetapi ada juga contoh di mana Anda mungkin perlu mengedit file dalam direktori platform/android. Salah satu contohnya adalah ketika sebuah plugin yang Anda coba gunakan tidak secara otomatis menghubungkan dependensi dan aset yang dibutuhkannya.

Selanjutnya, arahkan ke direktori app dan menghapus semua file kecuali App_Resources folder. Kemudian buat file berikut:

  • app.js
  • app.css
  • notes-page.js
  • notes-page.xml

Ini adalah file yang akan digunakan oleh NativeScript runtime. Seperti ketika membangun halaman web, file .css digunakan untuk styling, dan .js file untuk fungsionalitas. Tapi markup App, kita menggunakan XML bukan HTML. Biasanya Anda dapat membuat folder terpisah untuk setiap layar App (misalnya login, sign up, atau dashboard) dan mempunyai XML, CSS, dan JavaScript file di dalam setiap folder. Tapi karena aplikasi ini memiliki hanya satu layar, kita buat semua file dalam direktori root.

Jika Anda memerlukan informasi lebih lanjut tentang struktur direktori NativeScript, lihat Bab 2 dari NativeScript panduan memulai.

3. File Titik Masuk

Buka app.js file dan tambahkan kode berikut:

Ini adalah titik masuk untuk aplikasi NativeScript. Menggunakan modul aplikasi dan start metode untuk menentukan modul yang digunakan untuk halaman awal App. Dalam kasus ini, kita telah menentukan notes-page, yang berarti bahwa modul ini notes-page.js, markup adalah notes-page.xml, dan styling untuk halaman adalah notes-page.css. Ini adalah konvensi yang digunakan dalam NativeScript, bahwa semua file untuk halaman tertentu harus memiliki nama yang sama.

4. Menambahkan UI Markup

Buka file notes-page.xml dan tambahkan kode berikut:

Ketika membuat halaman app di NativeScript, Anda harus selalu dimulai dengan <Page> tag. Ini adalah bagaimana NativeScript tahu Anda mencoba untuk membuat sebuah halaman baru. Atribut xmlns menentukan URL untuk skema yang digunakan untuk XML file.

Jika Anda mengunjungi URL skema yang ditetapkan, Anda dapat melihat definisi dari semua tag XML yang dapat Anda gunakan dalam NativeScript. Atribut loaded menentukan fungsi akan dieksekusi setelah halaman dibuka. Kita akan mengambil melihat definisi fungsi ini kemudian di file notes-page.js.

Secara default, app header hanya berisi judul app. Jika Anda ingin menambahkan komponen UI lainnya, Anda akan perlu untuk mendefinisikan kembali dengan menggunakan <Page.actionBar>. Kemudian di dalam Anda menentukan hal-hal yang ingin Anda lihat di header. Judul ditentukan dengan menggunakan <ActionBar> dan pengaturan yang title atribut title halaman yang Anda inginkan.

Di bawah ini kami telah menggunakan sintaks kumis untuk output nilai app_title didefinisikan dalam berkas notes-page.js. Ini adalah bagaimana Anda output nilai yang terikat pada halaman.

Untuk menentukan tombol, pertama menggunakan <ActionBar.actionItems> sebagai parent, dan <ActionItem> masing-masing akan tombol yang Anda inginkan untuk didefinisikan. Atribut tap menentukan fungsi dijalankan ketika tombol ditap, sedangkan os.position dan android.position posisi tombol di iOS dan Android.

Untuk menentukan teks tombol, Anda dapat menggunakan atribut teks <ActionItem>. Namun, NativeScript saat ini tidak memungkinkan mengubah warna text tombol melalui CSS. Itulah sebabnya mengapa bukan kami telah menggunakan <ActionItem.actionView> untuk menentukan isi dari tombol dan untuk menetapkan warna teks.

Berikutnya adalah konten halaman yang sebenarnya. Anda dapat mengatur elemen yang berbeda dengan menggunakan satu atau lebih dari layout containers. Di bawah ini kami telah menggunakan dua layout yang tersedia: StackLayout dan GridLayout.

StackLayout memungkinkan Anda untuk menumpuk semua elemen itu. Secara default, orientasi layout ini vertikal, sehingga masing-masing komponen UI ditumpuk di bawah terakhir. Pikirkan lego bata dengan aliran ke bawah.

Di sisi lain, GridLayout memungkinkan Anda untuk mengatur unsur-unsur dalam struktur tabel. Jika Anda pernah menggunakan Bootstrap atau kerangka grid CSS lain maka ini harus tampak alami untuk Anda. GridLayout memungkinkan Anda menentukan baris dan kolom antara UI yang masing-masing komponen dapat ditempatkan. Kita akan melihat bagaimana ini diimplementasikan nanti. Untuk sekarang, mari kita beralih ke kode.

Pertama, mari kita menentukan formulir untuk membuat catatan baru. Seperti di HTML, Anda dapat menentukan atribut seperti id dan cssClass (setara dengan atribut class HTML). Atribut id melekat elemen jika Anda ingin untuk memanipulasi itu dari kode. Dalam kasus kami, kami ingin menghidupkan bentuk nanti. cssClass digunakan untuk menentukan kelas CSS yang akan Anda gunakan untuk gaya elemen.

Di dalam form adalah bidang teks untuk memasukkan catatan judul, tombol untuk melampirkan gambar, gambar yang dipilih, dan tombol untuk menyimpan catatan. Elemen gambar ini hanya terlihat jika attachment_img memiliki nilai truthy. Yang akan terjadi jika gambar sebelumnya terpasang.

Berikut adalah daftar yang menunjukkan catatan yang sudah ditambahkan oleh pengguna. Daftar yang dibuat dengan menggunakan komponen ListView. Ini menerima item sebagai atribut yang diperlukan. Nilai dapat menjadi sebuah array polos atau sebuah array yang diamati.

Jika Anda tidak perlu melakukan segala bentuk update (misalnya menghapus atau memperbarui lapangan) untuk setiap item dalam array, array JavaScript biasa melakukan. Sebaliknya, menggunakan array diamati yang memungkinkan Anda untuk melakukan update ke array dan memilikinya otomatis tercermin ke UI. Kita akan melihat bagaimana array dapat diamati didefinisikan nanti.

Juga perhatikan bahwa ListView dapat memiliki atribut itemTap, yang memungkinkan Anda untuk menentukan fungsi dijalankan ketika item dalam ListView ditap. Tetapi dalam kasus ini kami belum benar-benar menambahkan itu karena kita tidak perlu melakukan tindakan apapun ketika item ditap.

Item dalam ListView dapat didefinisikan dengan menggunakan <ListView.itemTemplate>. Di sini kita sedang menggunakan <GridLayout> untuk membuat dua baris dan dua kolom. Atribut kolom digunakan untuk menentukan berapa banyak kolom yang Anda inginkan dalam setiap baris.

Dalam kasus ini, *,* berarti bahwa ada dua kolom, masing-masing mengambil jumlah yang sama dari ruang yang tersedia pada baris saat ini. Jadi jika seluruh baris memiliki lebar total 300 pixels, setiap kolom akan 150 piksel lebar. Jadi pada dasarnya setiap * mewakili satu kolom, dan Anda gunakan tanda koma untuk memisahkan masing-masing.

Atribut rows bekerja sama, tapi mengontrol jumlah ruang yang digunakan oleh satu row. auto berarti hanya akan mengkonsumsi jumlah ruang yang dibutuhkan oleh anak-anak setiap row.

Setelah menentukan columns dan row di GridLayout, Anda masih harus menentukan mana dari anak-anak milik baris dan kolom mana. Baris pertama berisi judul item (kolom 1) dan tombol hapus (kolom ke-2). Baris kedua berisi gambar yang melekat pada item (1 kolom). Baris dan kolom ditentukan dengan menggunakan row dan col atribut untuk setiap elemen.

Perhatikan juga penggunaan horizontalAlignment dan verticalAlignment. Anda dapat menganggap ini sebagai setara dengan NativeScript HTML's text-align atribut. Tapi bukan teks, kita sedang menyelaraskan komponen UI. horizontalAlignment dapat memiliki nilai right, left, center, atau strecth, sementara verticalAlignment dapat memiliki nilai top, bottom, center, atau stretch. Sebagian besar ini cukup jelas, kecuali untuk stretch, yang membentang untuk mengambil ruang horizontal atau vertikal yang tersedia.

Dalam kasus ini, horizontalAlignment dan verticalAlignment digunakan untuk pusat gambar secara horisontal dan vertikal dalam kolom. Dan horizontalAlignment digunakan pada tombol Hapus untuk menyelaraskan ke bagian paling kanan kolom kedua.

Kami belum ditentukan atribut itemTap untuk ListView. Sebaliknya, kami ingin menyertakan action Hapus yang akan dijalankan setiap kali sebuah tombol delete di dalam daftar item ditap. Setiap item memiliki atribut indek, yang kita melewati sebagai atribut kustom untuk tombol Hapus. Ini adalah kunci unik yang digunakan untuk mengidentifikasi setiap item sehingga kita dapat dengan mudah merujuk kepada mereka bila diperlukan.

Perhatikan juga atribut loaded. Sama seperti <Page> memiliki atribut loaded, tombol juga dapat memiliki satu. Anda akan lihat nanti bagaimana ini digunakan.

5. JavaScript Kode

Sekarang kita siap untuk melihat JavaScript yang membuat semuanya bekerja. Dalam bagian ini, kita akan kode file catatan-page.js.

Inisialisasi

Pertama kita mengimpor modul data/observable dan data/observable-array. Ini adalah built-in modul dalam NativeScript yang memungkinkan kita untuk membuat objek yang diamati dan array. Pengamatan memungkinkan kami memperbarui UI secara otomatis setiap kali objek dan array ini diperbarui.

Dalam aplikasi kami, pageArray digunakan untuk menyimpan sejumlah catatan, dan pageData digunakan untuk mengikat ke halaman. pageData juga berfungsi sebagai wadah umum untuk semua data yang kami ingin menunjukkan di UI.

Selanjutnya, mengimpor semua modul lain yang kita akan menggunakan di Halaman ini:

  • camera: untuk bekerja dengan perangkat kamera.
  • view: untuk mengacu pada elemen tertentu pada halaman. Pikirkan hal ini sebagai setara dengan document.getElementById di NativeScript.
  • ui/enums: Kamus global nilai konstan untuk apa pun yang berkaitan dengan UI.
  • ui/animasi: untuk menghidupkan element.
  • application-settings: untuk bertahan data lokal.
  • file-system: bekerja dengan filesystem.

Selanjutnya, menginisialisasi nilai untuk variabel yang akan digunakan di seluruh file. page digunakan untuk menyimpan referensi ke halaman saat ini, notesArr adalah salinan array biasa dari catatan saat ini di halaman, dan current_index adalah nilai awal dari indeks yang digunakan sebagai ID unik untuk setiap catatan.

pageLoaded() fungsi

Fungsi menjadi tersedia dalam konteks halaman dengan menggunakan exports. Sebelumnya, dalam notes-page.xml file, Anda melihat bahwa fungsi pageLoaded() dijalankan saat halaman dibuka.

Dalam fungsi pageLoaded(), kita akan mulai dengan mendapatkan referensi ke halaman. Kemudian kami menunjukkan formulir untuk membuat catatan baru, dan mendapatkan nilai saat ini disimpan judul baru catatan dan catatan dari pengaturan aplikasi.

Selanjutnya, masih dalam fungsi pageLoaded(), memeriksa apakah ada catatan yang disimpan secara lokal. Jika tidak, kita membuat sebuah array catatan. Array ini akan berfungsi sebagai konten default untuk pengguna baru App. Namun, jika sudah ada beberapa catatan yang disimpan secara lokal, kami mengkonversi mereka ke array dan kemudian push data ke array observable.

Perhatikan bahwa sebelum kita push item ke dalam array observable, pertama kita periksa apakah kosong. Kita harus melakukan ini karena menggunakan modul kamera mengeksekusi event loaded di halaman sekali lagi setelah gambar yang dipilih. Ini berarti bahwa jika kita tidak berhati-hati, kita akan berakhir push duplikat ke array setiap kali pengguna menggunakan kamera.

Sekarang kita memiliki catatan data set up, kita dapat memperbarui halaman judul dengan menetapkan atribut item_title dengan nilai yang kami dapatkan dari pengaturan aplikasi sebelumnya. Kemudian bind pageData ke halaman sehingga UI secara otomatis mendapat update setiap kali perubahan yang dibuat untuk item yang telah kami tentukan.

Animasikan form untuk membuat catatan baru. Kita melakukan ini dengan menggunakan fungsi getViewById di view dan lewat dalam konteks (halaman aktif) sebagai argumen pertama dan atribut id yang ditetapkan ke elemen yang Anda inginkan untuk memanipulasi.

Selanjutnya, memanggil fungsi animate. Ini menerima sebuah obyek yang mengandung pengaturan animasi. Di sini kami ingin formulir untuk slidedown 160 pixel dari posisi semula selama periode 800 milidetik.

Fungsi newNote()

Fungsi newNote() dijalankan saat pengguna mengetuk pada New Item action pada header. Ini menyembunyikan dan menampilkan item baru ListView dan slide form naik atau turun tergantung pada nilai saat ini showForm.

Jika showForm true, yang berarti itu saat ini sedang ditampilkan, kita mengubah opacity dari ListView ke 1 selama 400 milidetik, dan kemudian slide form untuk menyembunyikannya. Jika tidak, kami menyembunyikan ListView dan slide dari bawah.

Fungsi btnLoaded()

Dalam file notes-page.xml, kami memiliki atribut loaded di tombol untuk menghapus catatan. Ini adalah fungsi yang dijalankan ketika event itu terjadi.

Secara default, fungsi ditetapkan ke atribut itemTap di ListView tidak akan dieksekusi ketika tombol didefinisikan di dalam barang ListView. Hal ini karena NativeScript mengasumsikan bahwa tindakan yang akan dilakukan untuk setiap item daftar dapat dipicu hanya dari tombol itu.

Kode berikut adalah solusi untuk perilaku default. Ini pada dasarnya menghilangkan fokus pada tombol Hapus sehingga Anda masih dapat melaksanakan suatu fungsi ketika pengguna keran pada ListView item. Dalam kasus ini, kita benar-benar tidak perlu kode ini karena kami belum ditetapkan fungsionalitas ke keran item, tapi itu adalah alat yang baik untuk memiliki ketika bekerja dengan daftar.

Fungsi openCamera()

Berikutnya adalah fungsi openCamera(), yang akan dijalankan bila pengguna menyentuh tombol Attach Image. Keadaan saat ini tidak dikelola dengan menggunakan modul kamera, jadi kita perlu untuk menyimpan judul catatan baru ke dalam pengaturan aplikasi pertama.

Setelah itu kita bisa meluncurkan aplikasi kamera bawaan di perangkat dengan memanggil metode takePicture(). Metode ini menerima sebuah obyek yang mengandung pengaturan gambar. Setelah pengguna telah mengambil gambar dan mengetuk tombol Save di Android atau tombol use image pada iOS, janji akan terpecahkan dan fungsi panggilan balik diteruskan ke then() dijalankan.

Gambar yang sebenarnya adalah melewati sebagai argumen ke fungsi, dan kami menggunakan ini untuk menyimpan file ke path dokumen. Setelah selesai, kami menyimpan path file lengkap ke pengaturan aplikasi dan status aplikasi saat ini sehingga kita bisa mendapatkan nilainya nanti, sebelum menyimpan catatan.

Fungsi saveNote()

Fungsi saveNote() dijalankan bila pengguna menyentuh tombol Save Note. Ini mendapat nilai sekarang dari field teks judul catatan dan gambar jalan, akan menambahkan current_index, dan push item baru ke catatan biasa array dan array catatan diamati. Kemudian menyimpan catatan saat ini dan current_index ke pengaturan aplikasi, menghapus nilai catatan baru dari pengaturan aplikasi, update UI sehingga form menunjukkan keadaan kosong, dan menampilkan daftar sambil menyembunyikan form catatan baru.

Fungsi deleteNote()

Akhirnya, kami memiliki fungsi deleteNote() yang dijalankan bila pengguna menyentuh tombol delete di dalam daftar item. Seperti yang telah Anda lihat dari fungsi sebelumnya, objek dilewatkan sebagai argumen untuk fungsi yang dilampirkan sebagai pengendali event untuk komponen tertentu. Objek ini memiliki properti objek, yang mengacu pada komponen itu sendiri.

Dari sana, Anda bisa mendapatkan nilai atribut yang dilewatkan ke. Dalam kasus ini, kita akan mendapatkan nilai atribut indeks, dan kita menggunakannya untuk mendapatkan sebenarnya indek dari item yang ingin kita Hapus.

6. Menambahkan Style

Buka file app.css dan menambahkan style global berikut:

Jika Anda ingin menerapkan style khusus halaman, Anda juga dapat membuat file notes-page.css dan mendefinisikan style Anda di sana.

7. Menjalankan dan Debugging App

Anda dapat menjalankan aplikasi pada perangkat Anda dengan menjalankan tns run dan kemudian platform di mana Anda ingin menyebarkan. Berikut ini contoh untuk android:

Ini secara otomatis menginstal Android platform untuk Anda jika belum sudah terpasang dan kemudian menjalankan app pada perangkat Anda setelah dipasang. Setelah app berjalan, Anda bisa menjalankan tns livesync android--watch agar aplikasi refresh secara otomatis setiap kali Anda membuat perubahan ke sourcefile.

Debugging

Seperti kerangka aplikasi lain, NativeScript memungkinkan pengembang untuk debug aplikasi mereka. Hal ini dilakukan dengan alat-alat dev Chrome. Ada dua cara untuk melakukan hal ini:

  1. Jika memiliki aplikasi sudah berjalan, Anda dapat membuka jendela terminal baru dan mengeksekusi tns debug android --start untuk melampirkan debugger ke contoh  aplikasi yang sedang berjalan
  2. Jika Anda tidak memiliki aplikasi yang berjalan lagi, menggunakan debug tns android --debug-brk untuk membangun sebuah instance dari app dengan debugger terpasang padanya.

Apapun pilihan yang Anda pilih, ini akan membuka tab baru di peramban Google Chrome yang memungkinkan Anda untuk men-debug aplikasi seperti aplikasi web JavaScript normal. Ini berarti bahwa Anda dapat benar-benar menggunakan console.log di kode sumber untuk memeriksa isi dari variabel yang Anda gunakan.

Kesimpulan dan Langkah Langkah Berikutnya

Di artikel ini, Anda telah belajar cara membuat aplikasi dengan NativeScript. Secara khusus, Anda telah mempelajari konsep-konsep seperti menggunakan komponen UI, tata letak, styling, animasi, menggunakan kamera perangkat, dan mempertahankan status aplikasi dengan pengaturan aplikasi.

Sekarang Anda telah membangun aplikasi NativeScript pertama Anda, sekarang saatnya untuk mengambil keterampilan Anda lebih jauh dengan memeriksa apa lagi yang dapat Anda lakukan dengan NativeScript dan membangun beberapa aplikasi lain dengannya.

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.