Advertisement
  1. Code
  2. Mobile App

Membuat Aplikasi Cuaca Dengan TypeScript dan NativeScript

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan cara membuat aplikasi cuaca di NativeScript menggunakan bahasa TypeScript.

Dalam artikel sebelumnya di seri ini kita membuat aplikasi pencatat menggunakan JavaScript biasa. Kali ini kita akan menggunakan TypeScript. Pertama mari kita cari tahu mengapa TypeScript adalah pilihan yang baik untuk membangun aplikasi NativeScript.

1. Mengapa TypeScript?

TypeScript adalah warga negara kelas satu di NativeScript. Ini digunakan oleh tim NativeScript inti untuk membangun kerangka kerja NativeScript itu sendiri. Berikut adalah beberapa alasan mengapa Anda ingin menggunakan TypeScript untuk mengembangkan aplikasi NativeScript:

  • TypeScript mengkompilasi ke JavaScript. Ketika kompiler berjalan, ia menangkap setiap kesalahan yang mungkin Anda miliki dalam kode Anda sehingga Anda dapat segera bertindak tanpa menunggu kompiler NativeScript selesai. Ini berarti lebih banyak produktivitas untuk Anda sebagai pengembang.
  • TypeScript memungkinkan Anda untuk menggunakan Fitur ES6 seperti kelas, modul, fungsi arrow, literal template, dan banyak lagi. Ini berarti lebih banyak alat yang Anda inginkan untuk mengatur dan menulis kode yang lebih baik.

Jika saya melakukan pekerjaan yang buruk untuk meyakinkan Anda atau Anda ingin tahu lebih banyak tentang mengapa TypeScript bagus untuk dikembangkan dengan NativeScript, Anda dapat melihat Build Better NativeScript Apps With TypeScript.

2. Perkakas

Untuk sepenuhnya memanfaatkan fitur yang ditawarkan oleh TypeScript, saya sarankan Anda menggunakan editor teks Visual Studio Code. Ini memiliki fitur IntelliSense yang menyediakan penyelesaian otomatis pintar saat Anda menulis kode TypeScript, itu terintegrasi dengan Git, dan memiliki kemampuan debug juga.

Yang terbaik dari semuanya, ada juga plugin NativeScript yang akan membuat Anda lebih produktif saat mengembangkan aplikasi NativeScript. Salah satu fitur yang saya anggap berguna adalah integrasi emulator. Ini memungkinkan Anda untuk menjalankan emulator langsung dari editor teks dan mendebug aplikasi dari editor teks itu sendiri. Visual Studio Code gratis dan tersedia di semua platform utama (Windows, Linux, OS X).

Namun, jika Anda tidak ingin meninggalkan kenyamanan editor teks Anda, Anda juga dapat memasang ekstensi yang akan membuat pengkodean dengan TypeScript lebih baik. Untuk Atom, ada plugin atom-typescript. Untuk Sublime Text, ada plugin TypeScript Sublime.

3. Ikhtisar Aplikasi

Aplikasi yang akan kita buat adalah aplikasi cuaca. Ini akan memiliki halaman-halaman berikut:

  • Halaman utama yang menunjukkan cuaca saat ini bersama dengan beberapa informasi yang relevan seperti suhu, tekanan udara, dan kelembaban.
  • Laman perkiraan yang menunjukkan perkiraan lima hari tentang cuaca apa yang akan terjadi selama lima hari ke depan.

Inilah halaman utama yang akan terlihat seperti:

Main page

Dan inilah halaman perkiraan:

forecast page

Anda dapat menemukan kode sumber lengkap untuk aplikasi ini di repo GitHub-nya.

4. OpenWeatherMap

Data cuaca akan datang dari API OpenWeatherMap, dan seperti API lainnya, Anda perlu mendaftar untuk kunci API agar dapat menggunakannya. Silakan dan daftar untuk akun, saya akan menunggu. Setelah Anda masuk, buka halaman kunci API, salin nilai bidang key, dan simpan di tempat yang aman. Anda akan membutuhkannya nanti, setelah Anda mulai membuat aplikasi.

OpenWeatherMap generate API keys

5. Membuat Aplikasi

Sekarang setelah Anda tahu seperti apa tampilan aplikasi, saatnya untuk benar-benar mulai membuatnya. Mulai dengan membuat proyek NativeScript baru yang menggunakan template TypeScript:

Setelah selesai, navigasikan ke folder app dan buat folder dan file berikut. Untuk kenyamanan Anda, Anda juga dapat mengunduh atau mengkloning repo GitHub dan menyalin file dari folder app.

Kita hanya akan bekerja di dalam direktori app, jadi setiap kali saya mereferensikan path file atau folder, asumsikan bahwa direktori app adalah root.

Instal Dependensi

Aplikasi ini membutuhkan beberapa dependensi: Modul NativeScript Geolocation dan Moment . Anda dapat menginstal modul Geolocation dengan perintah berikut:

Dan instal Moment dengan:

Modul Geolocation digunakan untuk menentukan lokasi pengguna saat ini. Momen memungkinkan pemformatan mudah dari timestamp Unix, yang akan kita dapatkan dari API nanti.

Modul Umum

Sebelum kita melihat kode untuk masing-masing halaman aplikasi, pertama-tama mari kita lihat modul kustom yang akan digunakan di seluruh aplikasi.

Konstanta

Modul konstanta (common/constants.ts) berisi semua nilai konstan yang digunakan di seluruh aplikasi: hal-hal seperti URL dasar OpenWeatherMap API, kunci API yang Anda dapatkan sebelumnya, jalur ke titik akhir yang akan kita gunakan, kode karakter dari ikon cuaca, dan arah angin.

Utilitas

Modul utilitas mencakup semua jenis fungsi utilitas: hal-hal seperti mengubah derajat ke arah, menentukan teks deskriptif untuk kecepatan angin, mengubah Kelvin ke Celcius, dan mengubah kode karakter menjadi karakter. Anda akan melihat bagaimana semua fungsi ini digunakan nanti di halaman.

Navigasi

Modul navigasi adalah modul pembantu kustom yang memungkinkan kita untuk dengan mudah menavigasi antara semua halaman aplikasi. Buka file common/navigation.ts dan tambahkan yang berikut:

Ini menggunakan modul Frame untuk menavigasi ke halaman lain dari aplikasi. Metode getStartPage() hanya mengembalikan lokasi halaman aplikasi utama. The goToForecastPage(), seperti namanya, memungkinkan pengguna untuk menavigasi ke halaman prediksi cuaca.

Saat menavigasi di NativeScript, Anda harus memiliki referensi di mana Anda berada saat ini. Itulah mengapa Anda harus terlebih dahulu memanggil fungsi topmost() untuk mendapatkan halaman saat ini atau paling atas, dan kemudian fungsi navigate() untuk menuju ke halaman lain. Fungsi ini menerima jalur ke halaman di mana Anda ingin pergi.

Requestor

Modul Requestor melakukan permintaan yang sebenarnya ke API OpenWeatherMap. Seperti yang disebutkan dalam artikel Pengantar NativeScript, NativeScript menggunakan mesin virtual JavaScript untuk menjalankan kode JavaScript. Ini berarti bahwa kita juga dapat menggunakan fungsi-fungsi yang tersedia di browser.

Salah satu fungsi tersebut adalah fetch, yang memungkinkan kita untuk membuat permintaan HTTP ke remote server. Parameternya adalah URL tempat Anda ingin mengajukan permintaan. Ia mengembalikan sebuah janji sehingga kita gunakan then() untuk menunggu raw respons. Perhatikan penggunaan kata "raw"; fungsi fetch mengembalikan respons dengan header dan informasi tingkat rendah lainnya — itulah sebabnya kita perlu memanggil fungsi json() untuk mendapatkan data JSON yang sebenarnya. Ini akan mengembalikan janji lain sehingga kita gunakan then() sekali lagi untuk mendapatkan objek yang sebenarnya.

Atau, Anda dapat menggunakan modul Http, yang merupakan cara yang lebih kuat untuk membuat permintaan HTTP di NativeScript.

Store Location

Location Store berfungsi sebagai penyimpanan untuk informasi lokasi. Ini memungkinkan kami memperbarui dan mendapatkan lokasi saat ini dari file apa pun yang mengimpor modul ini.

Halaman Utama

Sekarang saatnya untuk melihat kode untuk masing-masing halaman aplikasi. Tetapi sebelum kita melakukan itu, pertama buka file entry-point (app.ts). Ini menggunakan modul navigasi untuk mendapatkan halaman awal aplikasi:

Selanjutnya, mari kita uraikan file pages/main/main.xml

Event navigatingTo digunakan untuk menjalankan fungsi bernama sama dalam file TypeScript setiap kali pengguna menavigasi ke halaman tertentu ini. Kelas CSS juga ditentukan secara dinamis dari file TypeScript.

Component ScrollView digunakan untuk membungkus semuanya sehingga scrollbar vertikal secara otomatis dihasilkan ketika konten melampaui apa ukuran layar dapat ditampilkan.

Dan karena kita akan memuat data dari server jauh, komponen ActivityIndicator digunakan untuk menampilkan animasi pemuatan standar dari platform. Ini mengharuskan Anda untuk menyediakan atribut busy, yang menerima nilai boolean yang mengontrol apakah akan memulai animasi atau tidak. Secara default, ini diatur ke true dan hanya diperbarui ke false setelah aplikasi selesai membuat permintaan ke server.

Atribut visibility juga digunakan untuk memastikan bahwa komponen tidak mengkonsumsi ruang apa pun saat tidak beranimasi.

Untuk konten utama, kita memiliki gambaran umum tentang cuaca saat ini di bagian atas, dan detail di bawahnya. Gambaran umum menunjukkan ikon yang mewakili cuaca saat ini, suhu saat ini, deskripsi cuaca, dan tempat.

Untuk detailnya, ada banyak informasi tentang cuaca saat ini yang mungkin dapat Anda duga dengan melihat atribut text. Masing-masing juga disertai dengan ikonnya sendiri.

Pada screenshot yang saya tunjukkan sebelumnya, Anda melihat bahwa itu menggunakan tata letak dua kolom untuk kedua halaman. Itulah alasan mengapa kami menggunakan GridLayout. Tapi seperti yang Anda lihat dari kode di bawah ini, kami juga menggunakan GridLayout untuk kolom pertama dari setiap baris.

Anda mungkin bertanya mengapa kami melakukan ini daripada hanya membuat tata letak tiga kolom dengan ikon di kolom pertama, atribut cuaca pada detik, dan nilai pada ketiga. Itu sangat bisa dimengerti, dan itu akan membuat kode lebih ringkas.

Tapi masalahnya adalah bahwa NativeScript versi 2.1 saat ini tidak memungkinkan unit persentase untuk GridLayout-nya. Ini berarti kita tidak dapat menggunakan sesuatu seperti 10% untuk ikon sementara dua kolom lainnya mengkonsumsi masing-masing 45%.

Tata letak yang kita gunakan di bawah ini mengatasi masalah itu dengan menggunakan GridLayout untuk membungkus ikon dan atribut cuaca, dengan ikon yang memakan 30 piksel dan atribut cuaca yang memakan jumlah ruang yang diperlukan untuk memuat teks. Perhatikan penggunaan atribut row dan col pada GridLayout juga.

Markup terakhir untuk halaman utama adalah tombol yang mengarah ke halaman ramalan:

JavaScript Halaman Utama

Buka pages/main/main.ts file dan tambahkan kode berikut:

Dalam kode di atas, kita mengimpor beberapa modul NativeScript bawaan, model tampilan utama, dan navigasi.

Objek EventData diekstraksi menggunakan object destructuring, fitur ES6 yang disediakan oleh TypeScript. EventData adalah apa yang kita berikan sebagai argumen untuk fungsi navigatingTo sehingga ia akan memiliki akses ke data apa pun yang dilewatkan oleh halaman mana pun yang menavigasi ke halaman ini.

Ini memiliki properti object, yang pada dasarnya adalah komponen apa pun yang memicu peristiwa tersebut. Dalam hal ini, kita tahu bahwa itu dipicu pada komponen Page, dan itulah mengapa kita menggunakan <Page> sebagai type-assertion. Setelah itu, kami mengikat model tampilan utama ke halaman. Ini akan memungkinkan kita untuk menambah atau memperbarui properti di kelas, dan itu akan langsung tercermin di halaman.

Dalam model tampilan utama , pertama-tama impor semua modul yang akan kita gunakan:

Buat model tampilan dengan memperluas modul Observable, yang membuat semua properti di kelas ini dapat diamati. Ini berarti bahwa semua referensi dari setiap properti di UI akan diperbarui setiap kali diubah di kelas ini.

Di dalam konstruktor, periksa apakah geolokasi diaktifkan. Jika tidak diaktifkan, maka cobalah untuk mengaktifkannya dengan memanggil fungsi enableLocationRequest(). Ini memicu aplikasi untuk meminta pengguna mengaktifkan geolokasi.

Selanjutnya, tentukan apakah siang atau malam dan mengatur latar belakang halaman sesuai dengan hasilnya. Kemudian atur ikon di halaman.

Setelah itu, coba tentukan lokasi saat ini. Perhatikan bahwa jika pengguna tidak mengizinkan geolokasi maka aplikasi tidak akan berfungsi sama sekali, karena cuaca bergantung pada lokasi pengguna. Aplikasi ini akan mencoba menentukan lokasi pengguna dalam 10 detik. Jika gagal melakukannya, maka pesan kesalahan ditampilkan kepada pengguna.

Jika permintaan lokasi berhasil, kami menyimpannya menggunakan locationStore. Ini memungkinkan kita untuk mengakses lokasi di halaman lain nanti tanpa meminta lagi.

Untuk referensi Anda, berikut ini contoh tanggapan yang mungkin Anda dapatkan ketika meminta lokasi di NativeScript. Anda dapat memeriksa dokumentasi Lokasi untuk NativeScript untuk mempelajari lebih lanjut tentang masing-masing properti di bawah ini.

Kita dapat membuat URL permintaan API lengkap menggunakan literal template dan membuat permintaan menggunakan modul Requestor.

Setelah tanggapan kembali, ekstrak dan format, lalu tetapkan nilai yang dihasilkan sebagai properti kelas. Dan karena kelas dapat diamati, ini akan memperbarui UI aplikasi secara otomatis.

Untuk referensi Anda, berikut ini contoh tanggapan yang mungkin dikembalikan oleh API:

Anda dapat menemukan informasi rinci tentang masing-masing properti dalam dokumentasi untuk data cuaca saat ini.

Akhirnya. ada fungsi setIcons(), yang mengatur semua ikon yang digunakan di halaman:

Gaya dan Ikon Halaman Utama

Berikut ini gaya untuk halaman utama:

Perhatikan penggunaan weathericons sebagai font-family untuk ico dan small-icons. Ini adalah bagaimana kita menggunakan font ikon di NativeScript. Jika Anda menyukai font ikon seperti Font Awesome di halaman web Anda, Anda dapat menggunakannya dengan cara yang sama dalam aplikasi NativeScript.

Pertama, unduh font ikon yang ingin Anda gunakan. Untuk aplikasi ini, Weather Icons Font digunakan. Ekstrak arsip zip dan di dalam folder yang diekstrak, buka direktori font. Salin file .ttf ke direktori font di aplikasi Anda dan ganti namanya menjadi weathericons.ttf. Nama file adalah apa yang Anda gunakan sebagai nilai untuk font-family setiap kali Anda ingin menggunakan ikon font spesifik tersebut. Selain itu, Anda juga harus menambahkan font-size untuk mengontrol ukuran ikon.

Halaman Prediksi Cuaca

Sekarang mari kita lihat markup untuk halaman ramalan (pages/forecast/forecast.xml). Di header, ada tombol kembali yang memungkinkan pengguna untuk kembali ke halaman utama. Perhatikan bahwa alih-alih komponen Button tujuan umum, kita menggunakan NavigationButton, yang merupakan padanan NativeScript dari tombol kembali iOS dan tombol navigasi Android.

Untuk konten utama, komponen Repeater digunakan sebagai pengganti ListView biasa. Kedua komponen dapat digunakan untuk menghasilkan daftar, tetapi ListView dilengkapi dengan lebih banyak lonceng dan peluit. Sebagai contoh, secara otomatis menghasilkan scrollbar vertikal ketika daftar berjalan di atas ukuran layar. Fungsi pengguliran tak terbatas juga sudah ada di dalamnya.

Komponen Repeater digunakan dalam kasus ini karena tidak ada kebutuhan nyata untuk fitur yang baru saja saya sebutkan. Yang kita butuhkan adalah daftar bare-bones.

Di dalam setiap Repeater.itemTemplate adalah GridLayout dengan dua kolom, satu untuk informasi cuaca umum dan satu lagi untuk rinciannya.

Kolom pertama adalah StackLayout yang berisi tanggal, ikon cuaca, dan deskripsi cuaca. Kolom kedua juga merupakan StackLayout yang berisi empat GridLayouts yang akan berisi empat atribut cuaca (suhu, kecepatan angin, kekeruhan, dan tekanan udara).

GridLayout pertama memiliki tiga kolom untuk memuat ikon, suhu siang, dan suhu malam. Tiga baris lainnya hanya memiliki dua kolom — untuk ikon dan nilai atribut cuaca.

Perhatikan penggunaan $parents['Page']. Saat menggunakan komponen Repeater atau ListView, Anda tidak dapat memiliki akses ke data di luar larik yang Anda tentukan untuk daftar untuk digunakan — tidak kecuali Anda secara eksplisit menentukan komponen induk tempat data tersedia. Di situlah $parents['Page'] masuk. $parents adalah variabel khusus di NativeScript yang memungkinkan Anda untuk mengakses data yang tersedia pada komponen tertentu. Dalam hal ini, kita menentukan Page untuk mengakses ikon untuk setiap atribut cuaca.

Halaman Prediksi JavaScript

Kode untuk halaman ramalan hampir sama dengan kode untuk halaman utama. Satu-satunya perbedaan adalah fungsi navigasi untuk kembali ke halaman utama, dan kami menggunakan ForecastViewModel sebagai model tampilan.

Berikut kode untuk model tampilan (pages/forecast/forecast-view-model.ts):

Di dalam konstruktor, kami mendapatkan lokasi saat ini dari toko lokasi dan membangun titik akhir URL untuk prediksi cuaca 16 hari. Tapi bukannya 16, kami hanya mau lima hari, jadi kami tentukan 6 untuk hitungan (cnt). Kita menggunakan 6 karena zona waktu tergantung pada server dan bukan pada lokasi yang ditentukan. Ini berarti ada kemungkinan bahwa API akan mengembalikan cuaca untuk hari sebelumnya atau hari ini. Itu sebabnya ada tambahan 1 hari yang berfungsi sebagai padding.

Selanjutnya, buat permintaan dan perbarui UI dengan respons API dengan memanggil fungsi getForecast():

Berikut ini contoh tanggapan yang dikembalikan oleh titik akhir perkiraan cuaca 16 hari. Perhatikan bahwa untuk membuat sampel lebih ringkas, saya telah menetapkan hitungan ke 1, itulah sebabnya properti list hanya berisi satu objek.

Gaya Halaman Prakiraan Cuaca

Berikut ini gaya untuk halaman perkiraan cuaca (pages/forecast/forecast.css):

Gaya Aplikasi Global

Buka file app.css dan tambahkan style berikut:

6. Mengubah Ikon Aplikasi Default

Anda dapat mengubah ikon aplikasi default dengan masuk ke folder App_Resources. Di sana Anda dapat melihat folder Android dan iOS. Untuk Android, Anda dapat mengganti file gambar di masing-masing folder berikut untuk mengubah ikon:

  • drawable-hdpi
  • drawable-ldpi
  • drawable-mdpi

Untuk iOS, ini adalah gambar di dalam folder Assets.xcassets/AppIcon.appiconset yang ingin Anda ganti.

Jika Anda ingin mudah membuat ikon untuk Android dan iOS, lihat MakeAppIcon. Cukup pilih file gambar untuk digunakan sebagai ikon, dan secara otomatis akan menghasilkan ukuran yang berbeda untuk Android dan iOS. Anda kemudian dapat memindahkannya ke folder yang disebutkan di atas. Pastikan saja Anda mendapat ukuran yang benar, dan nama-nama itu sama dengan gambar yang mereka gantikan.

7. Menjalankan Aplikasi

Anda dapat menjalankan aplikasi di perangkat atau emulator seperti biasa dengan menjalankan perintah tns berikut:

Satu-satunya perbedaan sekarang bahwa kita menggunakan TypeScript adalah bahwa ada langkah tambahan di awal setiap tugas, untuk mengkompilasi file-file TypeScript ke JavaScript. Type-checking yang kuat dari TypeScript berfungsi sebagai jaring pengaman untuk menangkap beberapa kesalahan sebelum NativeScript bahkan mengkompilasi aplikasi.

Kesimpulan

Dalam tutorial ini, Anda belajar cara membuat aplikasi dengan NativeScript menggunakan bahasa TypeScript. Secara khusus, Anda mempelajari konsep-konsep berikut:

  • Menata aplikasi Anda dengan meletakkan file yang terkait ke dalam folder mereka sendiri.
  • Kode digunakan kembali menggunakan modul.
  • Menggunakan view-model untuk menyediakan data dan fungsionalitas untuk halaman-halaman aplikasi.
  • Menentukan lokasi dengan plugin geolokasi.
  • Membuat permintaan HTTP.
  • Menggunakan ikon font.
  • Menavigasi antar halaman.

Saya akan meninggalkan Anda dengan beberapa sumber daya untuk melanjutkan perjalanan Anda dalam mengembangkan aplikasi mengagumkan dengan NativeScript:

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.