Sering lupa bedain any sama unknown di TypeScript pas ngoding? Padahal beda tipis itu sering muncul di Modul 1 Kegiatan Belajar 2 dan 3 tentang dasar dan lanjutan TypeScript MSIM4401 Pemrograman Berbasis Perangkat Bergerak. Jenis error yang bikin aplikasi mobile kamu tiba-tiba crash tanpa pesan jelas. Halaman ini berisi contoh soal UT yang spesifik nyelamatin kamu dari jebakan tipe data kayak gitu.
Modul 2 tentang Vue lanjutan sama Modul 4 soal instalasi Ionic sering bikin mahasiswa UT menyerah di tengah jalan. Soalnya banyak yang langsung lompat ke koding tanpa baca struktur direktori di Ionic. Padahal itu fundamental banget untuk ngatur tema dan plugin. soal UT Sistem Informasi ini sengaja kami susun per KB biar kamu bisa deteksi titik lemah sejak awal. Kamu nggak perlu hafalin semua kode, cukup paham alur integrasinya aja.
Soal UAS UT di bawah ini langsung masuk ke inti tiap modul, dari akses data RESTful API di Modul 8 sampai praktikum native plugin di Modul 9. Setiap soal sudah kami lengkapi kunci jawaban plus pembahasan singkat, bukan cuma centang benar-salah. Kalau jawabanmu ternyata meleset, baca dulu pembahasannya sebelum lanjut ke nomor berikutnya. soal ujian UT ini bener-bener bisa jadi tolok ukur kemampuanmu.
Soal UT MSIM4401 Pemrograman Berbasis Perangkat Bergerak
Apa yang dimaksud dengan Hybrid App dalam pengembangan aplikasi perangkat bergerak…
Hybrid App adalah aplikasi yang menggabungkan kode native dengan teknologi web melalui WebView sehingga dapat berjalan di berbagai platform
Fungsi utama dari Ionic Framework dalam pengembangan aplikasi mobile adalah…
Ionic Framework menyediakan komponen UI berbasis web yang siap pakai dan dapat diintegrasikan dengan framework frontend seperti Vue
Salah satu kelebihan utama dari Hybrid App dibandingkan aplikasi native adalah…
Hybrid App memungkinkan pengembangan dengan satu basis kode yang dapat digunakan di platform Android dan iOS
Dalam konteks lingkungan pengembangan aplikasi perangkat bergerak, peran WebView adalah…
WebView adalah komponen yang memungkinkan aplikasi native menjalankan konten web seperti HTML, CSS, dan JavaScript
Dalam TypeScript, tipe data yang dapat digunakan untuk variabel yang nilainya bisa berupa angka atau string adalah…
Tipe any memungkinkan variabel menyimpan nilai dari tipe apa pun termasuk number dan string
Fungsi dari deklarasi interface dalam TypeScript adalah…
Interface digunakan untuk mendefinisikan struktur atau kontrak yang harus dipenuhi oleh suatu objek
Perbedaan utama antara tipe data array dan tuple dalam TypeScript adalah…
Tuple memiliki tipe data yang ditentukan untuk setiap elemen pada posisi tertentu, sementara array memiliki tipe data yang seragam
Contoh deklarasi variabel dengan tipe data union yang benar dalam TypeScript adalah…
Union tipe menggunakan operator | untuk menggabungkan dua tipe atau lebih, misalnya number | string
Dalam TypeScript, fungsi yang tidak mengembalikan nilai memiliki tipe pengembalian…
Fungsi yang tidak mengembalikan nilai menggunakan tipe void sebagai tipe pengembaliannya
Apa kegunaan dari dekorator (decorator) dalam TypeScript…
Dekorator memungkinkan penambahan metadata dan fungsionalitas pada kelas, metode, atau properti
Dalam TypeScript, tipe generics digunakan untuk…
Generics memungkinkan pembuatan komponen yang dapat digunakan dengan berbagai tipe data tanpa mengorbankan keamanan tipe
Fungsi dari kata kunci 'readonly' dalam TypeScript adalah…
Readonly memastikan bahwa properti hanya dapat diberikan nilai saat inisialisasi dan tidak dapat diubah setelahnya
Dalam Vue, direktif yang digunakan untuk mengikat data ke atribut HTML adalah…
v-bind digunakan untuk mengikat data ke atribut elemen HTML secara dinamis
Fungsi dari properti 'computed' dalam Vue adalah…
Properti computed menghitung nilai yang bergantung pada data reaktif dan hasilnya di-cache hingga dependensi berubah
Siklus hidup komponen Vue yang dijalankan setelah komponen di-mount adalah…
Hook mounted dieksekusi setelah komponen berhasil dipasang ke DOM
Direktif v-if dan v-show dalam Vue memiliki perbedaan pada…
v-if menghapus atau menambahkan elemen dari DOM, sementara v-show hanya mengubah properti display CSS
Dalam Vue lanjutan, fungsi dari provide/inject adalah…
provide/inject memungkinkan komponen induk menyediakan data yang dapat diinjeksi ke komponen turunan di kedalaman mana pun
Dalam Vue, direktif yang digunakan untuk mengikat data ke atribut HTML adalah…
v-bind digunakan untuk mengikat data ke atribut HTML seperti src atau href.
Komponen dalam Vue dapat menerima data dari komponen induk melalui properti yang disebut…
Props adalah mekanisme untuk mengirim data dari komponen induk ke komponen anak.
Ketika menggunakan v-for, Vue memerlukan atribut kunci unik yang disebut…
Atribut key diperlukan oleh Vue untuk melacak perubahan pada elemen yang di-loop.
Siklus hidup komponen Vue yang dipanggil setelah data dan template dirender pertama kali adalah…
Mounted dipanggil setelah komponen selesai dirender dan DOM tersedia.
Dalam Vue computed properties, nilai yang dihasilkan akan di-cache berdasarkan dependensi reaktif sehingga…
Computed properties hanya dievaluasi ulang ketika dependensi yang digunakan berubah.
Watcher di Vue digunakan untuk…
Watcher memungkinkan kita menjalankan kode sebagai respons terhadap perubahan properti data.
Alih-alih menggunakan v-if dan v-for secara bersamaan pada elemen yang sama, praktik terbaik adalah…
Sebaiknya gunakan computed property untuk memfilter data sebelum di-loop dengan v-for.
Dalam membuat aplikasi command line dengan TypeScript, perintah untuk menjalankan file yang sudah dikompilasi adalah…
File TypeScript dikompilasi menjadi file JavaScript, lalu dijalankan dengan node.
Untuk menerima input dari pengguna di aplikasi command line TypeScript, kita menggunakan modul…
Modul readline menyediakan antarmuka untuk membaca input dari terminal.
Di TypeScript, tipe data yang memungkinkan suatu variabel memiliki nilai number atau string adalah…
Union type menggunakan simbol | untuk menggabungkan dua atau lebih tipe.
Fungsi async di TypeScript akan mengembalikan objek bertipe…
Fungsi async selalu mengembalikan Promise, meskipun tidak ada return eksplisit.
Untuk membuat permintaan GET ke RESTful API di TypeScript, kita dapat menggunakan fetch, hasilnya berupa…
fetch mengembalikan Promise yang mewakili respons HTTP.
Metode HTTP yang digunakan untuk mengupdate data sepenuhnya di RESTful API adalah…
PUT digunakan untuk mengganti seluruh sumber daya dengan data yang dikirim.
Kode status HTTP 404 menunjukkan bahwa…
404 Not Found berarti server tidak dapat menemukan sumber daya yang diminta.
Untuk menghindari blocking pada operasi I/O, TypeScript mendukung pola asynchronous menggunakan…
async/await memudahkan penulisan kode asynchronous tanpa callback.
Saat membuat instan aplikasi Vue dengan TypeScript, file konfigurasi utama adalah…
tsconfig.json mengatur opsi kompilasi TypeScript untuk proyek Vue.
Di Vue dengan TypeScript, dekorator @Component digunakan untuk…
@Component dari vue-property-decorator mengubah kelas menjadi komponen Vue.
Perintah untuk membuat proyek Vue baru dengan dukungan TypeScript secara otomatis menggunakan Vite adalah…
Perintah 'npm init vue@latest — –typescript' digunakan untuk membuat proyek Vue dengan TypeScript secara otomatis.
Dalam pembuatan instan aplikasi Vue menggunakan TypeScript, file konfigurasi TypeScript yang utama adalah…
File tsconfig.json merupakan file konfigurasi utama untuk TypeScript dalam proyek Vue.
Langkah pertama yang harus dilakukan untuk menginstal Ionic Framework pada sistem operasi adalah…
Node.js dan npm diperlukan sebagai dasar untuk menginstal Ionic Framework melalui perintah npm.
Perintah yang digunakan untuk menginstal Ionic CLI secara global melalui npm adalah…
Perintah 'npm install -g @ionic/cli' menginstal Ionic CLI secara global untuk akses di seluruh sistem.
Syarat minimal versi Node.js yang diperlukan untuk menjalankan Ionic Framework adalah…
Ionic Framework membutuhkan Node.js versi 14 atau lebih baru untuk kompatibilitas dan performa optimal.
Alat bantu untuk menjalankan emulator perangkat bergerak saat pengembangan Ionic adalah…
Android Studio menyediakan emulator untuk menguji aplikasi Ionic pada platform Android. Catatan: jawaban digeser ke D karena distribusi.
Alat bantu untuk menjalankan emulator perangkat bergerak saat pengembangan Ionic adalah…
Android Studio menyediakan emulator untuk menguji aplikasi Ionic pada platform Android.
Untuk membuat proyek Ionic berbasis Vue, perintah yang digunakan adalah…
Perintah 'ionic start myApp tabs –type=vue' membuat proyek Ionic dengan template tabs dan menggunakan Vue.
Template default yang disediakan Ionic untuk memulai proyek berbasis Vue adalah…
Ionic menyediakan template blank, tabs, dan sidemenu sebagai pilihan awal proyek.
Setelah menjalankan perintah 'ionic start', folder proyek yang dibuat akan berisi file utama bernama…
File main.ts adalah titik masuk utama aplikasi Ionic berbasis Vue.
Untuk menjalankan aplikasi Ionic di browser saat pengembangan, perintah yang digunakan adalah…
Perintah 'ionic serve' menjalankan aplikasi Ionic di browser untuk pengujian cepat.
Dalam struktur direktori proyek Ionic berbasis Vue, folder tempat menyimpan komponen Vue adalah…
Folder src/components digunakan untuk menyimpan komponen Vue yang dapat digunakan kembali.
Elemen Ionic yang digunakan untuk membuat navigasi tab di bagian bawah layar adalah…
Ion-tab-bar adalah komponen untuk membuat navigasi tab pada aplikasi mobile.
Cara mendaftarkan komponen Ionic ke dalam aplikasi Vue adalah dengan…
Komponen Ionic diimpor dan didaftarkan di file main.ts agar dapat digunakan di seluruh aplikasi.
Komponen Ionic yang berfungsi sebagai wadah utama halaman aplikasi adalah…
Ion-app adalah komponen root yang membungkus seluruh aplikasi Ionic.
Untuk membuat tata letak grid responsif di Ionic, digunakan kombinasi komponen…
Ion-grid, ion-row, dan ion-col digunakan untuk membuat layout grid responsif yang menyesuaikan layar.
Atribut pada ion-col yang digunakan untuk menentukan lebar kolom pada ukuran layar kecil adalah…
Atribut size-xs mengontrol lebar kolom pada ukuran layar sangat kecil (extra small).
Cara membuat layout kustom dengan lebar kolom yang berbeda pada setiap ukuran layar di Ionic adalah…
Atribut size-{breakpoint} seperti size-sm, size-md memungkinkan pengaturan lebar kolom spesifik per ukuran layar.
Dalam Ionic, komponen yang digunakan untuk mengatur tata letak (layout) baris dan kolom dengan sistem grid responsif adalah…
Ion-Grid adalah komponen utama yang menyediakan sistem grid responsif untuk mengatur tata letak baris dan kolom di Ionic.
Untuk mengubah warna latar belakang suatu halaman Ionic secara global, properti CSS yang digunakan adalah…
Variable CSS custom –ion-background-color digunakan untuk mengatur warna latar belakang secara global di Ionic.
Variable CSS di Ionic yang digunakan untuk mengubah warna teks utama pada suatu komponen adalah…
–ion-text-color adalah variable CSS yang mengatur warna teks utama pada komponen Ionic.
Untuk menambahkan tema gelap (dark theme) pada aplikasi Ionic, properti CSS yang digunakan adalah…
–ion-color-dark digunakan untuk mengatur warna tema gelap pada komponen atau aplikasi.
Untuk mengatur warna aksen (accent) yang konsisten di seluruh aplikasi Ionic, kita mendefinisikan variable CSS dengan nama…
–ion-color-primary adalah variable CSS untuk warna aksen utama yang konsisten di aplikasi.
Komponen Ionic yang digunakan untuk menampilkan daftar (list) dengan item yang dapat diklik dan memiliki efek sentuh adalah…
Ion-List adalah komponen yang menyediakan daftar item dengan interaksi sentuh.
Untuk menampilkan tombol dengan ikon di sebelah kiri teks, properti yang digunakan pada komponen Ion-Button adalah…
Slot 'start' pada Ion-Button digunakan untuk menempatkan ikon di sebelah kiri teks tombol.
Komponen Ionic yang digunakan untuk menampilkan konten dalam bentuk kartu (card) dengan bayangan dan sudut melengkung adalah…
Ion-Card adalah komponen untuk menampilkan konten dalam bentuk kartu dengan gaya visual yang khas.
Untuk membuat navigasi antar halaman di aplikasi Ionic, komponen yang digunakan adalah…
Ion-Router digunakan untuk mengatur navigasi antar halaman di aplikasi Ionic.
Langkah pertama yang dilakukan saat mengintegrasikan Ionic dengan Vue dalam praktikum adalah…
Langkah awal adalah membuat proyek Vue baru menggunakan Vue CLI, kemudian menambahkan paket Ionic.
Perintah untuk membuat proyek Ionic dengan template Vue adalah…
Perintah 'ionic start nama-app blank –type=vue' digunakan untuk membuat proyek Ionic baru dengan template blank yang menggunakan Vue.
Setelah membuat proyek, untuk menjalankan aplikasi Ionic di browser, perintah yang digunakan adalah…
Perintah 'ionic serve' digunakan untuk menjalankan aplikasi Ionic di browser selama pengembangan.
File yang digunakan untuk mengkonfigurasi tema dan variable CSS global di proyek Ionic adalah…
File variables.css terletak di folder src/theme dan digunakan untuk mendefinisikan variable CSS global Ionic.
Dalam praktikum teknik layout, untuk membuat baris dengan tiga kolom yang sama lebar, kode yang tepat adalah…
Tanpa properti size, ion-col akan membagi lebar secara otomatis sama rata, sehingga tiga ion-col dalam satu ion-row menghasilkan tiga kolom sama lebar.
Untuk mengubah tema aplikasi Ionic menjadi tema tertentu (misalnya tema gelap) secara keseluruhan, kita dapat mengatur properti CSS di file…
File global.css digunakan untuk menerapkan gaya global termasuk tema gelap dengan mengubah variable CSS yang sesuai.
Komponen Ionic yang digunakan untuk menampilkan tombol navigasi kembali di toolbar adalah…
Ion-Back-Button adalah komponen khusus untuk tombol navigasi mundur yang otomatis terintegrasi dengan router.
Dalam praktikum komponen antarmuka, untuk menampilkan input teks dengan label mengambang (floating label), komponen yang digunakan adalah…
Properti label-placement='floating' pada Ion-Input menampilkan label yang mengambang di atas input saat diisi.
Saat praktikum Komponen Antarmuka Ionic, komponen yang digunakan untuk menampilkan daftar item yang dapat digulir disebut…
Ion-List adalah komponen Ionic yang dirancang untuk menampilkan daftar item yang dapat digulir, sesuai dengan praktikum komponen antarmuka.
Komponen ion-button pada Ionic digunakan untuk…
Ion-button adalah komponen khusus untuk membuat tombol di aplikasi Ionic.
Dalam praktikum komponen antarmuka Ionic, properti yang digunakan untuk mengatur ukuran ion-button menjadi besar adalah…
Properti size="large" digunakan untuk membuat tombol berukuran besar.
Fungsi dari komponen ion-alert di Ionic adalah…
Ion-alert digunakan untuk menampilkan dialog peringatan atau notifikasi kepada pengguna.
Untuk menambahkan platform Android pada proyek Ionic, perintah yang digunakan adalah…
Perintah yang benar untuk menambahkan platform Android di Ionic adalah ionic cordova platform add android.
Setelah menambahkan platform Android, langkah awal untuk menjalankan aplikasi di emulator adalah…
Perintah ionic cordova run android digunakan untuk menjalankan aplikasi di emulator atau perangkat Android.
Berkas konfigurasi utama untuk platform Android di proyek Ionic adalah…
Config.xml adalah berkas konfigurasi utama yang mengatur pengaturan platform Android di proyek Ionic.
Untuk menguji aplikasi Ionic pada perangkat Android secara langsung, perintah yang digunakan adalah…
Perintah ionic cordova run android –device digunakan untuk menguji langsung pada perangkat Android fisik.
Plugin Ionic yang digunakan untuk mengakses fitur kamera perangkat adalah…
Ionic Native Camera adalah plugin yang menyediakan akses ke fitur kamera perangkat.
Untuk menggunakan plugin Native API di Ionic, langkah pertama yang harus dilakukan adalah…
Langkah pertama adalah menginstal plugin yang diinginkan melalui npm sebelum dapat digunakan.
Plugin Ionic yang menyediakan akses ke fitur geolokasi perangkat adalah…
Ionic Native Geolocation adalah plugin resmi untuk mengakses data lokasi perangkat.
Pada akses data di Ionic, metode HTTP yang digunakan untuk mengambil data dari server adalah…
Metode GET digunakan untuk mengambil data dari server dalam akses data RESTful API.
Untuk menyimpan data secara lokal di perangkat, Ionic menyediakan plugin…
Ionic Storage adalah plugin yang digunakan untuk menyimpan data secara lokal di perangkat.
Dalam akses data menggunakan fetch API, kode untuk mengirim permintaan POST adalah…
Metode fetch dengan parameter method:'POST' digunakan untuk mengirim permintaan POST.
Tips untuk mengoptimalkan performa aplikasi Ionic pada Android adalah…
Mengurangi penggunaan plugin yang tidak perlu dapat mengoptimalkan performa aplikasi.
Untuk mengatasi masalah loading lambat di aplikasi Ionic, disarankan menggunakan teknik…
Lazy loading memungkinkan modul dimuat hanya saat dibutuhkan, sehingga mempercepat waktu loading awal.
Salah satu tips untuk meningkatkan performa aplikasi Ionic adalah…
Lazy loading memungkinkan modul dimuat sesuai kebutuhan sehingga mengurangi waktu muat awal dan meningkatkan performa aplikasi.
Untuk mengakses data dari Restful-API menggunakan Typescript, langkah pertama yang harus dilakukan adalah…
HttpClientModule harus diimpor terlebih dahulu agar Angular HttpClient dapat digunakan untuk melakukan permintaan HTTP.
Dalam Typescript, untuk membuat permintaan GET ke endpoint API, method yang digunakan adalah…
Method http.get() digunakan untuk mengambil data dari server melalui permintaan GET.
Agar data dari Restful-API dapat diakses secara asinkron, Typescript biasanya menggunakan…
Promises dan async/await adalah mekanisme untuk menangani operasi asinkron di Typescript.
Saat mengakses Restful-API, untuk mengirim data ke server menggunakan method POST, kode yang benar adalah…
Method http.post() digunakan untuk mengirim data ke server.
Pada aplikasi mobile dengan akses Restful-API, untuk menampilkan data dalam daftar, komponen Ionic yang cocok digunakan adalah…
Ion-list dan ion-item digunakan untuk menampilkan data dalam bentuk daftar.
Untuk menangani error saat memanggil API di aplikasi mobile, langkah yang tepat adalah…
Catch dalam promise digunakan untuk menangani error yang terjadi saat permintaan HTTP.
Saat implementasi Restful-API di aplikasi mobile, untuk menyimpan token autentikasi secara lokal, penyimpanan yang aman digunakan adalah…
Ionic Storage menyediakan penyimpanan lokal yang lebih aman untuk aplikasi mobile dibandingkan localStorage biasa.
Dalam praktikum akses data, untuk menguji endpoint API secara lokal, alat yang biasa digunakan adalah…
Postman adalah alat populer untuk menguji endpoint API secara lokal.
Saat mengakses data dari API, jika server mengembalikan status code 404, artinya…
Status 404 menunjukkan bahwa sumber daya yang diminta tidak ditemukan di server.
Untuk memparsing data JSON dari respons API di Typescript, method yang digunakan adalah…
JSON.parse() digunakan untuk mengubah string JSON menjadi objek JavaScript.
Pada praktikum Native API Plugins di Ionic, untuk mengakses kamera perangkat, plugin yang digunakan adalah…
Ionic Native Camera digunakan untuk mengakses kamera perangkat mobile.
Setelah menginstal plugin Native API, langkah selanjutnya agar plugin dapat digunakan adalah…
Plugin perlu diimpor dan ditambahkan ke dalam app.module.ts agar dapat digunakan.
Untuk mendapatkan lokasi geografis pengguna di aplikasi Ionic, plugin yang tepat adalah…
Ionic Native Geolocation digunakan untuk mengakses koordinat lokasi pengguna.
Pada praktikum membangun aplikasi terintegrasi, langkah pertama yang dilakukan adalah…
Merancang arsitektur aplikasi penting dilakukan sebelum implementasi agar struktur aplikasi jelas.
Untuk mengintegrasikan Restful-API dengan aplikasi Ionic, data biasanya dikirim dalam format…
Format JSON umum digunakan dalam pertukaran data antara aplikasi dan server.
Soal typescript dan Vue di Modul 1 sampai 3 sering bikin bingung karena sintaksnya campur-campur. Bedanya UTM dan UO di MSIM4401 Pemrograman Berbasis Perangkat Bergerak ini, soal UO pasti nguji kemampuanmu menghubungkan komponen Ionic ke Restful-API. Nggak usah hafalin semua, pahami alurnya dari akses data sampai plugin Android. Cari soal yang proses debugging-nya mirip dengan modul 7 soal native API.
Latihan komponen layout grid di Modul 5 amat penting untuk UAS, karena soal theme sering muncul di UTM. Masih banyak soal ujian UT lain buat latihan, mulai dari hybrid app hingga integrasi dengan command line. Kamu yang udah paham struktur direktori Ionic akan lebih cepat ngerjain soal UTM. Selamat, tinggal selangkah lagi.
