KD04103 MOBILE APPLICATION DEVELOPMENT

LAB EXERCISE 1

Student matric no. : ______________________________ Marks : _____________

Student name : ______________________________
Program code : ______________________________

Semester : Semester 2 2022/2023

Course code : KD04103
Course name : Mobile Application Development
Type of assignment : Lab Exercise
Title of assignment : Lab Exercise 1
Assignment marks : 100% (Rubric is provided at the end of this document)

Learning : Build apps with flows, prototypes, usability practices, and screen-size
objectives/outcomes: independent visual designs. [CLO3]

Submission instruction : Fellow students are required to submit two files:

1. Submit your report manuscript (typed manuscript) as single PDF
format file, not exceeding 20MB of size. The name of the file
should be YOURNAME_LE1. (Report is in .pdf)
2. A video recording of your mobile application demonstration. Rename
it to YOURNAME_LE1.The video format can be any format.
3. Please compile your report and your video in a single .zip file.
4. This YOURNAME_LE1.zip file should be submitted through
itel.ums.edu.my

PART 1: INTRODUCTION

This lab exercise will guide students through building Android and iOS applications using Flutter, a
framework that allows for a single code base. The lab exercise assumes no prior programming experience
and aims to equip students with the tools needed to create real-world mobile applications confidently.
Starting from this lab exercise, the whole lab exercises slowly cover setting up the Flutter environment,
learning the fundamentals of app development, building small to complex applications, connecting apps to
remote data sources, managing data, and working with real-time databases like Firebase. This hands-on
lab exercise is designed for those looking to learn mobile app development with step-by-step instructions.

PART 2: WHY FLUTTER?

Traditionally, developers had to learn different programming languages and frameworks for Android and
iOS, leading to separate codebases and increased workload. To overcome this, various JavaScript
frameworks were introduced, but they still had performance issues due to the need for a JavaScript bridge.

1
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

Flutter, a framework developed by Google, uses the Dart programming language to eliminate the need for
a bridge, compiling the code into native code for multiple platforms. This allows for a more efficient and
straightforward approach to cross-platform development. Flutter also provides reactive style views,
customizable and extensible widgets, and direct access to native SDK libraries, making it a powerful and
effective solution for building Android and iOS applications from a single codebase.

2
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1
PART 3: ANDROID STUDIO WITH FLUTTER INSTALLATION GUIDE (Windows)

• Visit Flutter website and download the latest version of Flutter SDK for Windows.
• Link: https://flutter.dev/ (Last accessed May 2023)
• Click Get Started.

• Download and install Git for Windows. For macOS, this is not required.
• Choose Git for Windows according to Windows 32-bit/64-bit.
• Go back to Get Started page.
• Download the latest stable release of the Flutter SDK (approximately 874MB).

• Go to Windows Local Disk C Drive and create a folder named Flutter_Dev.

• Extract the Flutter SDK to Flutter_Dev folder.

• Go to Windows Search and search for Edit the system environment variables.

• Click on Environment Variables.

3
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Then click on Path and then click Edit. A new dialog will pop up. Click on New.

• Type in C:\Flutter_Dev\flutter\bin.

4
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Open Windows Command Prompt.

• To check if everything is done correctly, type flutter and expect the following.

• Now download and install Android Studio.

5
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Create your first project.

• Agree to all Licenses.

6
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Once Android Studio is installed, go to Plugin and install Flutter. When asked to install Dart, just do it.

• Restart Android Studio to apply changes.

• Ensure that Android SDK Command-line Tools (latest) is also installed.

• Tips: Type flutter doctor in Windows Command Prompt to do a quick installation verification.

7
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Start New Flutter Project.

• Ensure that Flutter SDK is detected.

• Click Next.

8
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• This is the default content of main.dart.

• At this moment, there are no devices selected yet.

9
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Go to Device Manager and then Create device.

• Subsequently, select your Phone (can be anything actually) and System Image.
• Then, launch your Android Virtual Device (AVD).

• Your screen (for Windows) should show something similar to this.

10
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1

• Run main.dart.

• The output of main.dart should be this.

11
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1
PART 4: LAB EXERCISES 1

Build an apps that will:

(i) Shows your name and matrix number on the apps
(ii) Refer to the following template.

12
 KD04103 MOBILE APPLICATION DEVELOPMENT
LAB EXERCISE 1
PART 5: RUBRICS

• Your report should include a screenshot of your application running without any problem, either
in your real phone, or in the emulator.
• You should also record the demonstration of your application as evidence.

Correctness (90%) Creativity (10%)

- The mobile application shows the Some creativity is added by the student
student’s name and matrix number. into the apps.
Excellent (4)
- Both screenshot and video evidence
has been included in the report
- The mobile application shows the Plain and simple
student’s name and matrix number.
Satisfactory (3)
- Either screenshot or video evidence
has been included in the report
- The mobile application is able to show N/A
Unsatisfactory (2) the student’s name and matrix number
- No evidence attached
Not met (1) The mobile application cannot run at all.

13