Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Mobile Development
Code

Membuat Aplikasi Pertama Anda Dengan Fuse

by
Difficulty:BeginnerLength:LongLanguages:

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

Sekarang setelah Anda mempelajari konsep dasar Fuse, inilah saatnya untuk mempraktikkan dan membangun aplikasi. Dalam tutorial ini, Anda akan belajar cara mengembangkan aplikasi menggunakan kerangka Fuse. Secara khusus, Anda akan mempelajari hal-hal berikut:

  • Cara mengkodekan menggunakan UX Markup.
  • Cara menggunakan API Observable, Timer, dan Geolocation.
  • Cara mempratinjau aplikasi menggunakan pratinjau desktop dan pratinjau khusus.

Jika Anda membutuhkan penyegaran tentang Fuse, periksa posting saya sebelumnya dalam seri ini: Memperkenalkan Sekering untuk Pengembangan Aplikasi Cross-Platform.

Prasyarat

Untuk mulai bekerja dengan Fuse, buka halaman unduhan dan daftar untuk sebuah akun. Anda juga dapat masuk ke akun yang sudah ada jika Anda memilikinya.

Fuse tersedia untuk Windows dan macOS. Unduh dan instal pemasang yang benar untuk platform Anda. Pada halaman unduhan, mereka juga menunjukkan plugin Fuse yang tersedia untuk berbagai editor teks. Instal satu untuk editor teks Anda. Plugin Fuse termasuk penyelesaian kode, definisi goto, dan tampilan log yang dihasilkan dari aplikasi, yang semuanya membuat aplikasi berkembang lebih nyaman.

Kami juga akan membahas cara mempratinjau aplikasi menggunakan pratinjau khusus. Ini membutuhkan Android Studio atau Xcode untuk diinstal di komputer Anda.

Pemahaman dasar teknologi web seperti HTML, CSS, dan JavaScript sangat membantu tetapi tidak diperlukan.

Apa yang Anda akan Buat

Anda akan membuat aplikasi stopwatch yang juga mengukur jarak yang ditempuh. Jarak diukur menggunakan geolokasi. Pengguna juga dapat membuat putaran, dan jarak individu dan waktu untuk setiap putaran akan ditampilkan di layar.

Inilah yang akan terlihat seperti aplikasi:

Final Output HIIT Stopwatch

Anda dapat melihat kode sumber lengkap dalam tutorial GitHub repo.

Membuat Proyek Fuse Baru

Setelah Anda menginstal Fuse Studio, Anda sekarang harus dapat membuat proyek Fuse baru. Buka saja Fuse Studio dan klik tombol Proyek Fuse Baru. Masukkan nama proyek, dan klik Buat:

Create a new Fuse project

Ini akan membuat folder baru di direktori yang dipilih. Buka folder itu dan buka file MainView.ux. Secara default, hanya akan memiliki <App> markup. Perbarui untuk menyertakan <Text>, lalu simpan file:

Pratinjau sekarang harus diperbarui dengan teks yang Anda tentukan:

Hello world output

Itulah alur kerja pengembangan utama di Fuse. Simpan saja perubahan ke salah satu file di direktori proyek, dan mereka secara otomatis akan tercermin dalam pratinjau desktop.

Anda juga dapat melihat log di panel bawah. Anda dapat memicu sendiri dengan menggunakan console.log(), seperti di browser. Satu-satunya perbedaan adalah bahwa Anda harus JSON.stringify() objek untuk melihat nilainya, karena implementasi console.log() di Fuse hanya dapat menghasilkan string.

UX Markup

Sekarang kami siap membangun aplikasi. Buka file MainView.ux dan hapus elemen <Text> dari sebelumnya. Dengan begitu, kita bisa mulai dengan lembaran kosong:

Termasuk font

Sama seperti dalam dokumen HTML, standarnya adalah memasukkan aset — hal-hal seperti font, stylesheet, dan skrip—sebelum markup sebenarnya dari halaman. Jadi tambahkan yang berikut di dalam elemen <App> :

Ini mengimpor font yang ditentukan dalam atribut File dan memberinya nama Thin. Perhatikan bahwa ini tidak menjadikannya font default untuk seluruh halaman. Jika Anda ingin menggunakan font ini, Anda harus menggunakan namanya (Thin) pada teks spesifik yang ingin Anda terapkan.

Anda dapat mengunduh font dari tutorial GitHub repo. Setelah itu, buat folder assets/fonts/robot di dalam direktori proyek root dan masukkan file .ttf di dalamnya.

Jika Anda ingin menggunakan font lain, Anda dapat mengunduhnya dari dafont.com. Di situlah saya mengunduh font untuk aplikasi ini.

Jika Anda ingin menggunakan font lain, Anda dapat mengunduhnya dari dafont.com. Di situlah saya mengunduh font untuk aplikasi ini. Apa yang ditawarkannya adalah cara untuk menyertakan ikon font yang ada di aplikasi Anda. Karena ikon font pada dasarnya adalah font, kita dapat menggunakan metode yang sama untuk memasukkan font:

Anda dapat mengunduh font ikon dari repo GitHub atau mengunduhnya langsung dari fontawesome.com. Perhatikan bahwa tidak semua ikon di fontawesome gratis, jadi sebaiknya periksa halaman ikon yang sebenarnya sebelum menggunakannya. Jika Anda melihat label "pro" di sebelah ikon, maka Anda tidak dapat menggunakannya dalam proyek Anda tanpa membayar.

Termasuk JavaScript

Selanjutnya, kita perlu menyertakan file JavaScript untuk halaman ini. Kita dapat melakukannya menggunakan elemen <Javascript> :

Jangan lupa untuk membuat file script/MainView.js di akar direktori proyek.

Membuat komponen baru

Untuk memaksimalkan penggunaan kembali kode, Fuse memungkinkan kita untuk membuat komponen kustom dari yang sudah ada. Dalam kode di bawah ini, kami menggunakan <Panel> untuk membuat tombol kustom. Anggap saja seperti div yang bertindak sebagai wadah untuk elemen lain. Dalam hal ini, kami menggunakannya sebagai komponen yang dapat digunakan kembali untuk membuat tombol.

Fuse hadir dengan banyak elemen. Ada elemen untuk meletakkan konten seperti <Panel>, elemen untuk menunjukkan kontrol pengguna, halaman dan navigasi, scripting dan data, dan primitif untuk membangun UI. Masing-masing memiliki kumpulan properti sendiri, memungkinkan Anda untuk memodifikasi data, presentasi, dan perilaku.

Untuk membuat komponen yang dapat digunakan kembali, tambahkan ux:Class Properti ke elemen presentasi yang ingin Anda gunakan sebagai basis. Dalam hal ini, kami menggunakan <Panel> sebagai basisnya. Anda kemudian dapat menambahkan styling standar. Ini mirip dengan bagaimana styling dilakukan dalam CSS. Margin menambahkan ruang di luar penampung. Di sini kami hanya menetapkan satu nilai, jadi margin ini diterapkan di semua sisi panel. Color menambahkan warna latar belakang ke elemen:

Di dalam <Panel>, kami ingin menunjukkan teks tombol. Kami ingin menjadikan ini sebagai komponen yang dapat digunakan kembali, jadi kami memerlukan cara untuk meneruskan properti ketika kami menggunakan komponen ini nanti. Ini memungkinkan kita untuk mencapai hasil yang berbeda dengan hanya mengubah properti.

Di dalam <Panel>, gunakan tipe data dari nilai yang ingin Anda masukkan sebagai nama elemen, dan kemudian tambahkan nama properti menggunakan ux:Property. Anda kemudian dapat menunjukkan nilai yang diberikan ke properti dengan menggunakan {ReadProperty PropertyName}, di mana PropertyName adalah nilai yang Anda berikan ke ux:Property. Ini akan memungkinkan Anda untuk memasok properti Text setiap kali Anda menggunakan komponen <ToggleBtn>.

Selanjutnya, kami ingin menawarkan kepada pengguna semacam umpan balik ketika tombol sedang ditekan. Kita bisa melakukannya melalui triggers dan animators. Pemicu pada dasarnya adalah pendengar acara — dalam hal ini, <WhilePressed>. Dan animator adalah animasi atau efek yang ingin Anda lakukan saat pemicu aktif. Kode di bawah ini akan membuat tombol 10% lebih besar dari ukuran aslinya dan mengubah warnanya. Duration dan DurationBack memungkinkan Anda menentukan berapa lama waktu yang diperlukan untuk animasi mencapai puncaknya dan mencapai akhirnya.

Selanjutnya, kita membuat komponen <IconBtn>. Seperti namanya, ini adalah sebuah tombol yang hanya menunjukkan ikon sebagai isinya. Ini bekerja dengan cara yang sama sebagai komponen sebelumnya, meskipun ada beberapa hal-hal baru yang telah kita lakukan di sini.

Pertama adalah ux:Name properti. Ini memungkinkan kami memberi nama untuk elemen tertentu sehingga kami dapat merujuknya nanti. Dalam hal ini, kami menggunakannya untuk mengubah properti Color ketika tombol sedang ditekan.

Kami juga telah menggunakan elemen bersyarat yang disebut <WhileTrue>. Hal ini memungkinkan kita untuk menonaktifkan <WhilePressed> emicu ketika nilai untuk is_running adalah satu falsy. Kami akan memberikan nilai untuk variabel ini setelah kami masuk ke bagian JavaScript. Untuk saat ini, ketahuilah bahwa variabel ini menunjukkan apakah pengatur waktu sedang berjalan atau tidak.

Konten utama

Kita sekarang dapat melanjutkan dengan konten utama. Pertama, kami membungkus semuanya di <StackPanel>. Seperti namanya, ini memungkinkan kita untuk 'menumpuk' anak-anaknya baik secara vertikal maupun horizontal. Secara default, ini menggunakan orientasi vertikal sehingga kita tidak perlu secara eksplisit menentukannya:

Dalam kode di atas, kami menggunakan empat nilai untuk Margin. Tidak seperti CSS, distribusi nilai yang tersisa, atas, kanan, bawah. Jika hanya dua nilai yang ditentukan, itu kiri-kanan, atas-bawah. Anda dapat menggunakan alat seleksi di Fuse Studio untuk memvisualisasikan margin yang diterapkan.

Selanjutnya, kami menambahkan gambar latar belakang untuk halaman. Ini menerima jalur file ke gambar latar belakang yang ingin Anda gunakan. StretchMode of Fill membuat latar belakang meregang sendiri untuk mengisi seluruh layar:

Anda dapat mengunduh gambar latar belakang yang telah saya gunakan dari tutorial GitHub repo. Atau Anda dapat menemukan pola serupa di situs web Toptal.

Selanjutnya, tunjukkan nama aplikasi. Di bawah ini adalah bidang teks yang dilewati waktu. Teks ini perlu sering diperbarui, jadi kita perlu mengubahnya menjadi variabel yang dapat diperbarui melalui JavaScript. Untuk menghasilkan beberapa teks yang diinisialisasi dalam file JavaScript halaman ini, Anda perlu membungkus nama variabel dalam tanda kurung kurawal. Kemudian, Anda akan melihat bagaimana nilai untuk variabel ini diberikan dari file JavaScript:

Selanjutnya, kami menggunakan komponen <IconBtn>yang kita buat sebelumnya-tidak seperti di lingkungan web dimana kami menggunakan ID dari font. Di sekering, Anda harus menggunakan Unicode ditugaskan ke font ikon yang Anda ingin gunakan. Anda juga perlu menggunakan &#x sebagai awalan. Ketika tombol ini ditekan (disebut Clicked), fungsi addLap() yang dideklarasikan dalam file JavaScript dijalankan:

Di Font Awesome, Anda dapat menemukan unicode dari font ikon pada halamannya sendiri.

Tepat di bawah tombol untuk menambahkan lap baru adalah beberapa teks yang menunjukkan bahwa tombol di atas adalah untuk menambahkan lap baru:

Selanjutnya, tunjukkan tombol untuk memulai dan menghentikan timer. Ini juga menjalankan fungsi yang akan kami umumkan nanti:

Selanjutnya, kita perlu menampilkan lap yang ditambahkan oleh pengguna. Ini termasuk jumlah putaran, jarak yang ditempuh, dan waktu yang dihabiskan. Elemen <Each> memungkinkan kita melakukan iterasi melalui kumpulan objek dan menampilkan properti individual untuk setiap objek:

Pada kode di atas, kita menggunakan <DockPanel>untuk membungkus isi untuk setiap item. Panel jenis ini memungkinkan kita untuk "dermaga" anak-anak pada sisi yang berbeda (atas, kiri, kanan, dan bawah) dari ruang yang tersedia. Secara default, ini memposisikan anak-anaknya secara langsung di atas satu sama lain. Untuk secara merata menempatkannya di luar, Anda perlu menambahkan properti Alignment.

Kode JavaScript

Sekarang kami siap menambahkan kode JavaScript. Di Fuse, JavaScript terutama digunakan untuk logika bisnis dan bekerja dengan fungsi asli perangkat. Efek, transisi, dan animasi untuk berinteraksi dengan UI sudah ditangani oleh UX Markup.

Mulai dengan mengimpor semua API yang kita butuhkan. Ini termasuk Observable, yang terutama digunakan untuk menetapkan variabel di UI. Variabel-variabel ini kemudian dapat diperbarui menggunakan JavaScript. Timer setara dengan fungsi setTimeout dan setInterval dalam versi web JavaScript. GeoLocation memungkinkan kami untuk mendapatkan lokasi pengguna saat ini:

Selanjutnya, kami menginisialisasi semua nilai yang dapat diobservasi yang akan kami gunakan. Ini adalah variabel yang telah Anda lihat di markup UX sebelumnya. Nilai untuk variabel-variabel ini diperbarui sepanjang masa aplikasi, jadi kami membuatnya menjadi variabel yang dapat diobservasi. Ini secara efektif memungkinkan kami untuk memperbarui isi dari UI setiap kali ada perubahan nilai-nilai ini:

Setelah itu, kita sekarang dapat mengatur nilai awal untuk tombol beralih dan teks pewaktu:

Begitulah cara Anda mengubah nilai variabel yang dapat diamati. Karena ini bukan di dalam fungsi apa pun, ini harus segera memperbarui UI saat aplikasi diluncurkan.

Setel nilai awal untuk timer, waktu putaran, dan lokasi untuk setiap putaran:

Fungsi toggle() digunakan untuk memulai dan menghentikan timer. Saat penghitung waktu dihentikan dan pengguna mengetuk tombol sakelar, itulah satu-satunya waktu kami mengatur ulang nilai untuk pengatur waktu dan putaran. Ini karena kami ingin pengguna melihat nilai-nilai ini bahkan setelah mereka menghentikan timer.

Setelah itu, dapatkan lokasi pengguna saat ini dan dorong pada larik locations. Ini memungkinkan kami membandingkannya dengan lokasi berikutnya nanti, setelah pengguna menambahkan putaran. Kemudian, buat pengatur waktu yang mengeksekusi setiap 10 milidetik. Kami menaikkan keseluruhan time dan lap_time untuk setiap eksekusi. Kemudian perbarui UI dengan nilai yang diformat menggunakan fungsi formatTimer():

Ketika pengguna menghentikan pewaktu, kami menghapusnya menggunakan metode delete() di penghitung waktu. Ini membutuhkan timer_id yang dikembalikan saat pengatur waktu dibuat:

Berikutnya adalah fungsi untuk memformat timer. Ini bekerja dengan mengubah milidetik menjadi detik dan menjadi menit. Kita sudah tahu bahwa fungsi ini dijalankan setiap 10 milidetik. Dan time bertambah 1 setiap kali dijalankan. Jadi untuk mendapatkan milidetik, kita cukup mengalikan time dengan 10. Dari sana, kita hanya menghitung detik dan menit berdasarkan nilai yang setara untuk setiap unit pengukuran:

Setiap kali pengguna mengetuk tombol refresh, fungsi addLap() dijalankan. Ini menambahkan entri baru di atas laps yang dapat diamati:

Inilah fungsi untuk mendapatkan jarak yang tercakup dalam meter. Ini menggunakan rumus Haversine:

Jangan lupa untuk mengekspor semua nilai yang dapat diamati:

Paket Geolocation

Untuk menjaga agar tetap ringan, Fuse tidak benar-benar menyertakan semua paket yang didukung secara default. Untuk hal-hal seperti geolokasi dan pemberitahuan lokal, Anda perlu memberi tahu Fuse untuk memasukkannya saat membuat aplikasi. Buka StopWatch.unoproj di akar direktori proyek Anda dan masukkan Fuse.GeoLocation di bawah array Packages:

Ini harus menginstruksikan Fuse untuk memasukkan paket Geolocation setiap kali membangun aplikasi untuk pratinjau kustom atau untuk menghasilkan installer.

Menyiapkan untuk Pratinjau Khusus

Sebelum Anda dapat menjalankan aplikasi di perangkat iOS Anda, Anda perlu menambahkan pengidentifikasi bundel ke aplikasi terlebih dahulu. Buka file StopWatch.unoproj dan tambahkan yang berikut di bawah iOS. Ini akan menjadi identifikasi unik untuk aplikasi saat dikirimkan ke app store:

Selanjutnya, di Xcode, masuk dengan akun pengembang Apple Anda. Jika Anda belum memilikinya, Anda dapat membuka situs web pengembang Apple dan membuatnya. Ini benar-benar gratis untuk mengembangkan dan menguji aplikasi di perangkat iOS Anda. Namun, ada beberapa batasan jika Anda bukan bagian dari program pengembang.

Setelah akun Anda dibuat, buka preferensi Xcode dan tambahkan akun Apple Anda. Kemudian klik Manage Certificates dan tambahkan sertifikat baru untuk pengembangan iOS. Sertifikat ini digunakan untuk memastikan bahwa aplikasi berasal dari sumber yang dikenal.

Setelah selesai, Anda seharusnya sudah bisa menjalankan aplikasi di perangkat Anda. Klik pada Preview > Preview on iOS di Fuse Studio dan tunggulah sampai meluncurkan Xcode. Setelah Xcode terbuka, pilih perangkat Anda dan klik tombol putar. Ini akan membangun aplikasi dan menginstalnya di perangkat Anda. Jika ada kesalahan build, kemungkinan besar pengidentifikasi bundel pratinjau tidak unik:

change the bundle ID

Mengubah Bundle Identifier menjadi sesuatu yang unik harus menyelesaikan masalah. Setelah kesalahan di bawah bagian penandatanganan menghilang, klik tombol putar lagi untuk membangun kembali aplikasi. Ini harus menginstal aplikasi di perangkat Anda.

Namun, Anda tidak akan dapat membuka aplikasi sampai Anda menyetujuinya. Anda dapat melakukannya di perangkat iOS Anda dengan pergi ke Settings > General > Device Management dan memilih email yang terkait dengan akun Pengembang Apple Anda. Setujui itu, dan itu harus membuka kunci aplikasi.

Untuk Android, Anda harus dapat melihat pratinjau aplikasi tanpa langkah tambahan apa pun.

Kesimpulan

Itu dia! Dalam tutorial ini, Anda telah mempelajari dasar-dasar pembuatan aplikasi menggunakan kerangka Fuse. Secara khusus, Anda telah membuat aplikasi stopwatch. Dengan membuat aplikasi ini, Anda telah belajar cara bekerja dengan Fuse's UX Markup dan beberapa API JavaScript Fuse. Anda juga belajar cara menggunakan Fuse Studio untuk mempratinjau aplikasi di komputer dan ponsel Anda saat mengembangkannya.

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.