Scribd
Unggah
43 tayangan45 halaman

Mobile Programming-Pertemuan 2

Ringkasan dokumen tersebut adalah: (1) Dokumen tersebut membahas tentang memulai proyek aplikasi dengan Flutter menggunakan Android Studio atau VSCode sebagai editor serta emulator virtual device atau HP Android; (2) Menguraikan struktur folder dari proyek Flutter dan fungsi masing-masing folder; (3) Memberikan contoh membuat aplikasi "Hello World" sederhana pada Flutter.

Diunggah oleh

cirebon.kab.bos
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
43 tayangan45 halaman

Mobile Programming-Pertemuan 2

Ringkasan dokumen tersebut adalah: (1) Dokumen tersebut membahas tentang memulai proyek aplikasi dengan Flutter menggunakan Android Studio atau VSCode sebagai editor serta emulator virtual device atau HP Android; (2) Menguraikan struktur folder dari proyek Flutter dan fungsi masing-masing folder; (3) Memberikan contoh membuat aplikasi "Hello World" sederhana pada Flutter.

Diunggah oleh

cirebon.kab.bos
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 45

Mobile Programming

Pertemuan 2
Memulai Project Aplikasi
Dengan Flutter
Memulai Project Aplikasi Dengan Mengunakan
Android Studio Sebagai Editor dan Emulator
PEMBAHASAN
PERTEMUAN 2 Memulai Project Aplikasi Dengan Menggunakan
VSCode Sebagai Editor dan HP Android Sebagai
Emulator

Memahami Struktur Flutter

Tugas Pertemuan 2
Memulai Project Aplikasi
Dengan Mengunakan
Android Studio Sebagai
Editor dan Emulator
Klik yang ini bro untuk memulai
Berikan Nama Projek Dengan Huruf Kecil dan Tidak Mengandung Spasi

Arahkan ke Folder SDK Flutter Sesuai Dengan Direktori Saat Instalasi

Arahkan ke Folder Untuk Menyimpan Projek Flutter dan Tidak Boleh Ada Spasi

Buat Deskripsi Singkat Dari Projek Yang Dibuat


Pembuatan Projek Flutter
Projek Sudah Berhasil Dibuat
Fokus Ke Logo Mirip HP
Secara otomatis sudah ada virtual device yang terbentuk dan tinggal dijalankan saja
Tampilan Hasil Virtual Device

Klik Button Power


Memulai Project Aplikasi Dengan
Menggunakan VSCode Sebagai Editor
dan HP Android Sebagai Emulator
https://code.visualstudio.com/download
Lakukan Download
dan Instalasi Seperti
Editor Lainnya

Atau bisa mengikuti tutorial di link berikut


https://medium.com/@siskarahma/tutorial-install-visual-studio-code-1-42-di-windows-10-d6cc0a8664d
Perhatikan kedua tanda panah,
Setelah menjalankan VS Code dan
tampil laman editornya, lalu klik
button extensions kemudian
ketikkan flutter sehingga tampil
halaman seperti ini
Klik Installing untuk proses instalasi
Klik Reload to Activate
Pastikan hasilnya seperti ini
Klik pada New Project
➢ Setelah klik New Project akan tampil
seperti ini kemudian isikan dengan
nama project tanpa spasi
➢ Selanjutnya pilih direktori tempat kita
menyimpan projek pastikan didalam
folder tersebut tidak ada nama yang
sama dengan nama projek yang baru
kita create
Projek sudah terbentuk
Konfigurasi HP
Android Untuk
Menjalankan
Flutter
Untuk konfigurasi HP Android dalam menjalankan Flutter yang perlu dilakukan
adalah mengetahui Build Number yang tertera pada HP Android.

Build Number ada pada About Phone, untuk lokasi pastinya akan berbeda pada
setiap merk HP. Tapi Pastikan bagi kalian untuk mencarinya di About Phone

Sebagai Contoh akan saya tampilkan lokasi Build Number HP Realme 3 Pro
Ketuk 2x hingga
muncul mode
developer/anda
sedang dalam mode
pengembang
Catatan
USB Debugging Mode sebaiknya
diaktifkan hanya pada saat dibutuhkan
saja. Jika proses root atau menjalankan
flutter telah selesai,
Kalau berhasil
sebaiknya nonaktifkan
menu ini akan
kembali Opsi pengembang.
tampil pada
Apabila dibiarkannya dalam keadaan
additional
aktif, akan memberikan jalan lebar-
setting
lebar bagi malware atau virus untuk
menyusup ke perangkat Android
kamu untuk menyadap atau mencuri
data-data penting.
Untuk memunculkannya koneksikan
antara HP dan Laptop dengan Kabel
Data dan Allow Device Connected,
kalua tidak di allow tidak akan muncul
Menjalankan flutter di HP
Android yang sudah
terintegrasi dengan VSCode,
klik button yang ditunjukkan
diatas
Proses running flutter berjalan
Berhasil terbentuk dan dapat diakses
melalui HP Android
Tampilan 1 di HP,
klik Open untuk
Menjalankan Flutter Tampilan 2 di HP, Tampilan 3 di HP,
Tampilan awal di HP Setelah Klik Tombol
Tambah Sebanayk 7
Kali
Untuk Menghentikan
Menjalankan Aplikasi
Flutter

Keterangan tentang aplikasi yang


berhasil running di HP Android
KESIMPULAN

• Bagi Mahasiswa yang laptopnya mumpuni dipersilahkan menjalankan


flutter dengan editor Android Studi dan Emulator Virtual Device yang
ada di Android Studio.
• Bagi mahasiswa yang memiliki keterbatasan spesifikasi laptop dapat
menggunakan editor VSCode + Flutter dan emulator berupa Real Device
atau Perangkat HP pribadi.
Mengenal
Struktur Folder
Flutter
📁 android berisi source code untuk aplikasi android;
📁 ios berisi source code untuk aplikasi iOS;
📁 lib berisi source code Dart, di sini kita akan menulis kode aplikasi;
📁 test berisi source code Dart untuk testing aplikasi;
📄 .gitignore adalah file Git;
📄 .metadata merupakan file yang berisi metadata project yang di-
generate otomatis;
📄 .packages merupakan file yang berisi alamat path package yang
dibuat oleh pub;
📄 flutter_app.iml merupakan file XML yang berisi keterangan project;
📄 pubspec.lock merupakan file yang berisi versi-versi library atau
package. File ini dibuat oleh pub. Fungsinya untuk mengunci versi package.
📄 pubspec.yaml merupakan file yang berisi informasi tentang project
dan libraray yang dibutuhkan;
📄 README.md merupakan file markdown yang berisi penjelasan
tentang source code.
Membuat “Hello Word”
Pada Flutter

Anda mungkin juga menyukai