Foundation in Science

FS223

Computing Studies
FS1052
Topic 5. Mobile Applications
Prepared by Dr James Walsh and Mr Liow Chee Keong, Updated May 2023
FS1052 Chapter 5 Outline:
• The App platform - hardware
• App coding - software
• App development - programming/coding
• Applications - relevant Apps

Contact Hours: Lecture-2x2 hours and Practical-5x2 hours plus

Self-Directed Learning.

The student will submit an assignment based on this topic

(Assignment 2) that is 40% of the overall Computing Studies
course mark for which detailed rubrics will be given.
A summative group project presentation is also included.
A formative group project peer review will be introduced.
FS 1052 Chapter 5 reading list:
• Vermaat, M.E., Sebok, S.L. & Freund, S.M. (2014).
Discovering Computers. Technology in a World of
Computers, Mobile Devices, and the Internet.
FS 1053 hardware requirements:
Essential:
Access to IMU computer laboratory PCs with phone emulator
software.
Gmail account

Ideal:
Access to an Android or similar smartphone
Windows based laptop PC
Learning outcomes
At the end of this lecture and related CAL sessions,
students should be able to:
• understand the components of software
• understand the mechanics of software logic,
sequencing and iteration
• design, write and test computer coded Apps (CAL)
• apply Apps to scientific/educational/medical (CAL)
situations
• debug and problem solve in a digital environment
as part of a peopleware team (CAL)
8.3 App Development and Coding

Hardware
Operating
system Software
Applications
 Why write software code?
• In the Lost Interview with Steve Jobs, Apple’s co-founder said, “I
think everybody in this country should learn how to program a
computer because it teaches you how to think.”
• Coding is applied maths and sciences that teaches us an iterative
approach to improve problem solving skills and testing our ideas.
• Iteration is a process whereby a set of instructions or structures are
repeated in a sequence a specified number of times or until a
condition is met.
• Peopleware involves developer productivity, teamwork, group
dynamics, the psychology of programming, project management,
organizational factors, human interface design, and human-
machine-interaction
• Do you control your phone or does it control you?
 Why should YOU write software code?
• https://www.healthcarestudies.com/article/Top-10-Must-Have-
Apps-for-Medical-Students/

• http://www.sciencefocus.com/feature/tech/10-best-android-
science-apps

• https://qatar-weill.cornell.edu/continuing-professional-
development/topic-of-the-month/archive/e-learning-and-
smartphone-applications-use-in-medical-education
 App writing project = Peopleware
• The team - who does what to complete the
App?
• What’s the plan for the App?
• Does the plan target the project rubrics?
• Test the App on sample users.
• Does it work well – Debugging*?
• Is it user friendly – Instruction Manual?
• Critique for design improvements of next
generation App.

*https://en.wikipedia.org/wiki/Debugging
Application Software
Design, implementation and testing requirements
Hardware platform –
Windows PC

Software language – MIT

App Inventor

“Testbed” – Android based

mobile phone

Program/App requirements
– Project rubrics

Design, write and test the

Program/App – Flowchart

-Debugging!
User feedback – Are
project rubrics achieved?
Application Software
App project Rubrics
Purpose – What do you want it to do?

Interface Design – Does it work well and engage?

?
App Design – Does it look good?

Outcomes – What does it give to the user?

Bugs – What are its shortcomings?

Version II -What’s next?

Application Software
App project Rubrics examples
Purpose – Scientific/Medical/Educational

Interface Design – Visual/Audio/Physical/Fun/Skill

?
App Design – Images/Canvas/Navigation/Fun/Skill

Outcomes – Scientific/Medical/Educational

Bugs – Screen-hangs/Visuals/Navigation/Fun

Version II – Scientific/Medical/Educational/Fun
 Your coding requirements
• Hardware Platform – Windows or Apple PC*
• Software – MIT App Inventor, online or installed
MIT AI2 Companion App on your phone
installed from Play Store or App Store**
• Testbed – Android or Apple Phone or Tablet *
• Logic and Imagination!

*MIT App Inventor, MIT AI2 Companion and the Apps your create will work on
Apple products but limited by IOS terms and conditions.
**Ideally Wi-Fi enabled
 Your coding software:
“MIT App Inventor is an innovative beginner's
introduction to programming and app creation that
transforms the complex language of text-based
coding into visual, drag-and-drop building blocks.
The simple graphical interface grants even an
inexperienced novice the ability to create a basic,
fully functional app within an hour or less.”
http://App Inventor.mit.edu/explore/about-us.html
 Your coding software:
Software has 2 elements:

1) The “Front End”

e.g. graphics, human interface, data visualisation
= MIT App Inventor “Designer”

2) The “Back End”

e.g. logic, calculation, data manipulation
= MIT App Inventor “Blocks”

e.g. Go to any webpage, right click and select

“Inspect Element”
Use “Inspect Element” to edit webpage code

https://www.google.com/search?q=software+front+end&ie=utf-8&oe=utf-8&client=firefox-b
MIT App Inventor “Designer” = Front
End
MIT App Inventor “Blocks” = Back
End
“BENOBALL2” Designer/Blocks
 Using code from online libraries
• Web quote - “It is not cheating if the code is open source and you've taken the
time to understand it. Now obviously this isn't always possible due to time
constraints but try and always have high level overview of the code you are
using.”
• Some software has source code that only the person, team, or organization
who created it—and maintains exclusive control over it—can modify. People
call this kind of software proprietary or closed source software
• Open source software is different. Its authors make its source code available
to others who would like to view that code, copy it, learn from it, alter it, or
share it.
• App Inventor Forum: http://App Inventor.mit.edu/explore/forums.html
• Past FiS projects Apps Library

If you use open source code in your Apps group project you must illustrate in
the report that you understand it, otherwise you will get
Zero marks for the code in question!
Setting up your coding hardware/software
MIT App Inventor package:
1) Set-up a gmail account if you don’t have one
https://accounts.google.com/signup
2) Go to App Inventor homepage using Chrome
http://App Inventor.mit.edu
3) Go to “Create Apps” icon on top right
http://ai2.App Inventor.mit.edu/
4) Click “Projects” and “Start new project” called
TalkToMe_XXXXX and open it
Your programming software is now ready, you now
need to go to a real or virtual mobile phone testbed
to start programming
Setting up your coding hardware/software
To Wi-Fi or USB cable connect your mobile phone to
a laptop:
1) Download and install the MIT AI2 Companion
App on your phone from Play Store or App Store
and run it.
2) Go to the Connect menu in MIT App Inventor,
select AI Companion, then follow the instructions
for Wi-Fi connecting using given QR or typed code.
3) Your coding will appear on the phone as you code,
but this is NOT an App on your phone, just a
screen emulator from the computer via Wi-Fi.
Setting up your coding hardware/software
If MIT AI2 Companion doesn’t work, there are 2 other ways to
emulate on your phone, from your PC to see your App develop
as you code
1) Install and run the aiStarter package on your PC and
run the Emulator option in the Connect menu, follow the
instructions given.
You should see a virtual mobile phone on your PC screen
(it takes time!), tile it beside your App Inventor screen
2) Connect your phone and PC via USB/Type-C/etc.
cable, run the aiStarter package on your PC, select
the USB option in the Connect menu, and follow
the instructions given
Note: If it asks you to update aiStarter click “OK” and follow the
instructions carefully.
Your hardware, software and testbed are now ready for coding!

ARE YOU?
 Your first code
Go to:
http://App Inventor.mit.edu/explore/ai2/beginner-videos.html
• Follow the instructions given in the tutorial videos
or the related PDF files.
• When you have a test App (extended “TalkToMe”)
working on your Emulator or Wi-Fi connected
testbed save the final version in the “Projects”
menu and then use the “Build” option save it as a
.APK file.
• Email the .APK file to yourself, open the email on
your phone and download and install the
attachment.
• You should now have your first App to run on your
phone!
 Your first code
Run your App and see if it does what you intended and
start debugging it!
The 6 stages of Debugging:
1. DENIAL. That can’t happen.
2. FRUSTRATION. That doesn’t happen on my machine.
3. DISBELIEF. That shouldn’t happen.
4. TESTING. Why does that happen?
5. GOTCHA. Oh, I see.
6. RELIEF. How did that ever work?
The MIT App Inventor Forums can help with debugging
https://groups.google.com/forum/#!forum/mitApp Inventortest
 Application Software
App project Rubrics
Purpose – What do you want it to do?

Interface Design and Coding – Does it work well and interesting?

App Design and Coding – Does it look good?

?
Outcomes – What does it give to the user?

Bugs – What are its shortcomings?

Version II -What’s next?

 Your next generation code
Once your first App, extended “TalkToMe”, is debugged save it
in the “Projects” menu and export final version in .aia using the
App tutorial name and your student number (XXXXX) and
TalkToMe_XXXXX.aia.
You must also use the Build function to create the .apk file App
of your code to test on your phone and also submit it on e-
learning as TalkToMe_XXXXX.apk
Upload the TalkToMe_XXXXX.apk to your android device and
install it to test it or email or TEAMS it to me.
You can now expand your App or write a new/better one getting
programming help and ideas from:
http://App Inventor.mit.edu/explore/ai2/tutorials.html
and
http://App Inventor.mit.edu/explore/resources/beginner-app-
inventor-concept-cards.html
Your project team, rubrics, ideas and code
From the App Inventor tutorials, concept cards and
extensive in built, google help and forums, get an idea of
the range of things that can be done and come up with
project ideas based on rubrics given:
Purpose
Interface Design and Coding
App Design and Coding
Outcomes
Bugs
Version II
Project submission
Using a basic App, such as the tutorial ones, each team
member should take on a specific development area
Purpose, Interface Design, App Design, Outcomes and
Bugs with the team working together on Version II ideas.

Final project .aia and .apk files, accompanied by a

descriptive Document, .doc/docx, with brief outline text
highlighting the 6 rubrics must be submitted on e-learning.

The final project AIA, APK and Description filenames must

state your group number
e.g. Group1_ AppName.apk/aia/doc (CALS 3-5)
 Using code from online libraries and forums
FS117-FS222 Apps and Code as examples are now
available on the Mobile Apps Teaching Tablet and on a
OneDrive whose link will be shared!
If you use open-source code in your Apps group project
you must illustrate in the report that you understand it,
otherwise you will get
ZERO marks for the code in question!
Learning outcomes
At the end of this lecture and related CAL sessions,
students should be able to:
• understand the components of software
• understand the mechanics of software logic,
sequencing and iteration
• design, write and test computer coded Apps (CAL)
• apply Apps to scientific/educational/medical (CAL)
situations
• debug and problem solve in a digital environment
as part of a peopleware team (CAL)
Thank you! - Questions?
Thank you!

Questions?