Pemrograman Mobile

Unit 1 : Perkenalan
Akhmad Khanif Zyen

TEKNIK INFORMATIKA
UNISNU JEPARA
Outline
● History of Mobile Programmers...
● Why flutter?
● Structure of flutter apps
● Setup and Installation
● Hello World

TEKNIK INFORMATIKA
UNISNU JEPARA
History of a Mobile Programmer...
● Andi seorang programmer iOS
● Ia memiliki program yang sangat
populer di app Store

TEKNIK INFORMATIKA
UNISNU JEPARA
History of a Mobile Programmer...
● Andi seorang programmer iOS
● Ia memiliki program yang sangat
populer di app Store
● Sebuah sosial media dimana kita
akan dipertemukan dengan
orang-orang yang memiliki
makanan favorit yang sama
● Semua orang sangat menyukai
aplikasi ini
TEKNIK INFORMATIKA ● Hingga tiba saatnya setiap orang
UNISNU JEPARA bertanya….
 Kapan rilis androidnya? Kapan rilis androidnya?

Kapan rilis androidnya?

Kapan rilis androidnya?

Kapan rilis androidnya?

Kapan rilis androidnya?

Kapan rilis androidnya?

Kapan rilis androidnya?
Kapan rilis androidnya?
TEKNIK INFORMATIKA
UNISNU JEPARA
 ● Andi memutuskan untuk belajar
Java Android
● Berjam jam berhari hari ia
habiskan waktu
● Hingga akhirnya ia memiliki dua
tombol ...

TEKNIK INFORMATIKA
UNISNU JEPARA
iOS app Android app

TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
Why Flutter?
● Hot reload
Sama seperti web design, ketika menyimpan, di browser tekan refresh
maka seketika tampilan akan berubah
● Access to original source code
Ketika anda ingin melihat bagaimana sebuah tombol di Flutter bekerja,
anda tinggal klik class tersebut dan bisa dilihat bagaimana susunan
source codenya

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

AppBar

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

AppBar Container

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

AppBar Container

Column

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

AppBar Container

Column

T Row Text

TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

AppBar Container

T
Column

T Row Text

TEKNIK INFORMATIKA Text Icon

UNISNU JEPARA
 Structure of a Flutter apps
Scaffold

AppBar Container

Column

Row Text

TEKNIK
Text INFORMATIKA
Icon

UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
Setup and Installation
● Prerequisites for flutter development:
○ Mac, Windows or Linux machine
● Editor to write code
○ Android Studio or Visual Studio Code
● Testing Android Apps from Flutter
○ Android Emulator or physical device
○ iOS Emulator or physical device
● Note for iOS apps development: Mac is a MUST

TEKNIK INFORMATIKA
UNISNU JEPARA
Minumum System Requirements
● Intel core i5 with minimum 4GB of RAM (8GB RAM recommended)
● Storage minimum 10GB (for android SDK)
● Git scm

TEKNIK INFORMATIKA
UNISNU JEPARA
Installation
1. Download Android Studio dari https://developer.android.com/studio
2. Lakukan instalasi, didalam tahapan instalasi akan ada instalasi android
SDK, ikuti default tahapan instalasinya menggunakan wizard. Termasuk
mendownload image Emulator, diusahakan menggunakan android
minimal versi nougat.
3. Download flutter sdk di https://flutter.dev/docs/get-started/install
sesuaikan dengan sistem operasi komputer yang anda miliki.
4. Extrak flutter sdk langsung di folder terluar di C:\, mIsal di C:\src
5. Jalankan flutter_console.bat yang sudah diekstrak di C:\src\flutter\
6. TEKNIK
Tambahkan INFORMATIKA
path di environment variable untuk lokasi C:\src\flutter\bin
7. Untuk editor VSCode/Android Studio tambahkan extensions/plugin Flutter
UNISNU JEPARA
Hello World
● Dari VSCode pilih View > Command Palette > Flutter New Project
● Masukkan hello_world
● Pilih lokasi project, misal di C:\Users\user\VSCodeProjects
● Patikan emulator sudah berjalan / perangkat fisik dikenali
● Tekan F5 untuk menjalankan

TEKNIK INFORMATIKA
UNISNU JEPARA
TEKNIK INFORMATIKA
UNISNU JEPARA
SEKIAN

TEKNIK INFORMATIKA
UNISNU JEPARA