Attendance

• Sign in your attendance on elearning

• Keyword: ???
 The Plan
• About the course:
• Course Outline
• Assessment
• Group project
• Mobile App. Dev Technologies
• Installation: the framework and tools
• Test drive on emulator and phone
• A tour on VS Code, and Android Studio
• A tour on Git and Git Bash
• Git basics
About the Course »

Content
1. Introduction
2. Walkthrough on Dart Language
3. User Interface Programming
4. Integrating with Backend
5. Working with Local Resources
6. Deployment
About the Course »

Assessment

Item Weightage

Lab Exercises (4) 20%

Test (1) 10%

Week 9, Thursday 9 April 2020, 3pm

Bookmark this in your calendar
Group Project 40%

Final Exam 30%

About the Course »

Group Project
Item Weightage Remarks
Group Formation & - Till Week 2
Project Idea / Topic
Conceptual Design 5% A technical Report containing, 1) Introduction to the project, 2)
Application Architecture & 3)UI Design (Wirefarmes). Submit on
Week 4

Compulsory Screens 5% Each project must include these compulsory screens:

(Prototype) Splash Screen, Login and logout, User profile, Settings.
Demo on Week 6
Application focus 5% Screens specific to your application. Demo on Week 9
screens (Prototype)
Integrating with 5% Demo on Week 12
backend
Release version and 15% Presentation on Week 15
overall
Teamworking and 5% You will fill in Peer and Self Assessment (PSA) form for
leadership each deliverable above. Ie. PSA x 5
Total 40%
Mobile App Dev. Technologies

This course?
Which
technology?
 So, what is Flutter?
• A UI Framework for building native application
• Cross-platform: Android, iOS, Desktop
(Windows, MacOS, Linux), Web
• Made by Google
• Open-source
• Use Dart as the programming language
• More on flutter.dev
 Installation (on Windows)

Flutter SDK Android SDK VS Code Editor

 Installation (on Windows)
Android Studio (optional)

• Only for SDK Manager and AVD Manager (GUI-based)

• Alternatively, install only Android SDK CLI version
 Installation (on Windows)
Git

• Versioning Control System (VCS)

• Git bash: for lite Unix-based CLI
 Install VS Code Extensions
• Open VS Code and install the extensions:

• Flutter (Compulsory)

• Optional extensions such as Better comments,

Bracket Pair Colorizer, Colonize, Color Highlight,
etc.
 Configuration (on Windows)
• Environment variables:
• ANDROID_HOME

• Path:
• flutter sdk
• android sdk
 Download A Platform SDK
Use SDK Manager from AS
Download A Platform SDK
 Download SDK Tools
Use SDK Manager from AS and install:
• Android SDK Build-Tools
• Android Emulator
• Android SDK Platform-Tools
• USB Drivers
• Intel HAXM (Emulator Accelerator)
Download SDK Tools
 Create Emulator
• Download a system image
• Create a Virtual Device and Install the image on the emulator
• You can do this with AVD Manager from AS
 Installation (on Mac)

https://flutter.dev/docs/get-started/install/macos
 My Installation Script
• Only for Windows 10

• Tested only on certain labs in SC

• You may try it out on your machine. If it does not work,

use the step-by-step installation from flutter.dev
 My Installation Script
Open Windows PowerShell (as Admin). Right-click on the
Windows Start Menu
 My Installation Script
Type the following commands :
 A Tour on VS Code
• Command Pallete: Ctrl Shift P
• Copy code: Shift Alt Arrow (up or down)
• Move code: Alt Arrow (up or down)
• Comment: Ctrl /
• Split Code Editor: Ctrl Alt Left / Right
 Test the Installation
• Open VS Code
• Go to Command Pallete.. Ctrl Shift P
• Type: flutter New Project
• Run / Start an emulator (from VS Code) or (from AS Avd
Manager)
• Run your first flutter program. Press F5
 Test the Installation
• Next, to test running on a real device
• Configure your phone to “Developer Mode”
https://developer.android.com/studio/debug/dev-options
• Connect your phone to the PC
• Choose your phone on VS Code
• Run your flutter project. Press F5
A Tour on Git and Git Bash
Git basics »

Common Unix Commands

Move to a directory and check out the content
$ cd c:/
$ ls

Create a new directory

$ mkdir c:/code

$ mkdir c:/code/flutter

$ cd c:/code/flutter

Create a new file

$ touch readme.txt
 What is GIT ?
• A distributed Versioning Control System (VCS)

Local Local
Repository #1 Repository
#3
Remote
Repository
e.g. github,
bitbucket, gitlab

Local Repository
Local #4
Repository
#2

• Git provides a collection of tools to manage versioning of your

project
 What is GIT ?
• From a local repo’s perspective
Git by examples»

Example Use Case: Following My Tutorials (1)

Clone the starter project .

$ git clone http://github.com/jumail-

utm/flutter_logo.git flutter_logo

This command will download my repo on github to your

local machine
Git by examples»

Example: Following My Tutorials (2)

See what’s inside the repo

$ cd flutter_logo
$ git log
$ git log --oneline
git log will show a list of commits have been done on the
repo

Open and run the program in vs code

$ code .
Git by examples»

Example: Following My Tutorials (3)

Checking out snapshot
$ git log --oneline
$ git checkout <commit_hash>
$ git checkout master

Modifying for your own work in a new branch

$ git checkout <commit_hash> -b my_branch
Git by examples»

Example: Following My Tutorials (4)

Create a readme.txt file.
$ touch readme.txt
$ code readme.txt

Check your repo’s status

$ git status

Set the newly created readme.txt file so that it is traceable

$ git add readme.txt
Git by examples»

Example: Following My Tutorials (5)

Commit your update to your local repo
$ git commit –a –m “Update 1: Add a readme.txt”
Continue other tasks and perform a commit for each task, e.g.

$ git commit –a –m “Task 1: Add a flutter logo”

$ git commit –a –m “Task 2: Change color”

Git by examples»

Example: Following My Tutorials (6)

List all branches
$ git branch –a

Go back to master branch

$ git checkout master
Git by examples »

Creating Your own Repository

Create a starter project using the flutter template project
$ cd c:/code/flutter
$ flutter create flutter_counter
$ cd flutter_counter

Create a repo for this project

$ git init
$ git status
$ git add .
$ git status
$ git commit –a –m “My first commit”
Git by examples »

Uploading to Remote Repo

• Login to github.com with your own account
• Create a new public repository on github.com, named
flutter_counter
• Back to your git bash (command line)
$ git remote add origin https://github/your-
username/flutter_counter.git
$ git push –u origin master
Git by examples »

Sharing Offline
To share a git repo without going through a remote repo, use bundle.
To create a bundle (e.g., in user1’s PC):
user1$ git bundle build/flutter_counter.git HEAD master

Then share the bundle file by any mean, e.g. copying it to a pen-drive. The file
should be inside the build directory

In another pc (e.g. user2’s ) copy the the bundle file and create a clone from it
user2$ git clone flutter_counter.git flutter_counter
 Git Resources
https://app.pluralsight.com/course-
player?clipId=139ae6dd-af56-45a5-aa4f-
9924129ef340

https://www.tutorialspoint.com/git