MIT App Inventor WORKSHOP

Presentation

Basic tools to create an educational

App with MIT App Inventor

November 2016  

P.J. Gamez-Montero and R. Castilla Lopez

(pjgm::rcl)

Fluid Mechanics Dept.

Universitat Politècnica de Catalunya
Campus Terrassa

Trainers:
Xavier and Robert
pjgm@mf.upc.edu
castilla@mf.upc.edu

Slices owned by pjgm::rcl 1/55

 MIT App Inventor WORKSHOP
Disclaimer

Disclaimer  
“This  offering  is  not  approved  or  
endorsed  by  MIT  App  Inventor,  the  
producer  of  the  MIT  App  Inventor  so;ware  
and  owner  (Massachuse>s  Ins?tute  of  Technology)  and  
MIT  App  Inventor®  trade  marks.”  

MIT  App  Inventor®    

Slices owned by pjgm::rcl 2/55

 MIT App Inventor WORKSHOP
Index

The CONTENTS
Ø  Introduction

Ø  What is MIT App Inventor?

Ø  How MIT App Inventor can assist educators as a learning tool?

Ø  Creating an educational App: enjoy learning & learning by making

Ø  Educational Apps with Bachelor Engineering Students

Ø  Hands-on session: creating your first App

Ø  More things …

Ø  Fluid Mechanics Apps of our Bachelor Thesis Students

Ø  The End

Slices owned by pjgm::rcl 3/55

 MIT App Inventor WORKSHOP
Introduction

The Workshop GOALS

At the end of the workshop the participant should be able to and be ready for:

- Learning a new tool for education

- Identifying the parameters of this tool applicable in their own teaching

- Finding out the main functions of App Inventor

- Managing the main menus of App Inventor Blocks

- Developing a basic application using App Inventor

- Set up the components, screen arrangement, etc. of an application

- Analysing an application for students to develop their own teaching

Slices owned by pjgm::rcl 4/55

 MIT App Inventor WORKSHOP
What is MIT App Inventor?

What is MIT App Inventor?

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.

Computer Science For All

“becoming active citizens in a technology-driven world,
instead of being just consumers”

Slices owned by pjgm::rcl 5/55

 MIT App Inventor WORKSHOP
What is MIT App Inventor?

What is MIT App Inventor? Several figures …

App Inventor empowers even beginners and non-programmers to create mobile
apps. This is disruptive technology that opens up a new medium for creators--
interactive software for mobile devices-- that has until recently been restricted to
the digital elite.
Source:  MIT  App  Inventor  

*Web  UCH  (Universidad  Cardenal  Herrera)  

Ranking  de  sistemas  opera?vos  mas  usados  2015  
Source:  MIT  App  Inventor  
Slices owned by pjgm::rcl 6/55
 MIT App Inventor WORKSHOP
How MIT App Inventor can assist educators as a learning tool?

Scratch for Educators https://scratch.mit.edu/

Your students can use Scratch to code their own interactive stories, animations,
and games. In the process, they learn to think creatively, reason systematically,
and work collaboratively — essential skills for everyone in today’s society.

Slices owned by pjgm::rcl 7/55

 MIT App Inventor WORKSHOP
How MIT App Inventor can assist educators as a learning tool?

Scratch for Educators

Slices owned by pjgm::rcl 8/55

 MIT App Inventor WORKSHOP
How MIT App Inventor can assist educators as a learning tool?

Scratch for Educators

Slices owned by pjgm::rcl 9/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Understanding an App’s Architecture:: Few concepts …

… without us being experts J  
The internal architecture of an App Inventor app  

Source: D. Wolber, H. Abelson, E. Spertus and L. Looney (2014),“App Inventor 2. CreateYour Own Android Apps”, Ed. O’Reilly, USA

Slices owned by pjgm::rcl 10/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Understanding an App’s Architecture:: Few concepts …

… without us being experts J  

Visible Components: you can see when the app is launched (user interface)  

Non-Visible Components: you cannot see them, provide access to the built-in
functionality of the device.  

Behaviour: the behaviour defines how the app should respond to events, both user
initiated and external. The difficulty of specifying such interactive behaviour is why
programming is so challenging.
Fortunately, App Inventor provides a
high-level blocks-based language for
specifying behaviours.  

Programming behaviours more like

plugging puzzle pieces together.  

Slices owned by pjgm::rcl 11/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Understanding an App’s Architecture:: Few concepts …

… without us being experts J  
The app as a recipe paradigm does not fit for mobile phones, the
Web, and in general most of the computing done today.  

Most modern software does not perform a bunch of instructions in a

predetermined order; instead; it reacts to events. For example:

-  Tapping: if the user taps a button, the app responds by performing some
operation.

-  Dragging: for touchscreen phones and devices, the act of dragging your
finger across the screen is another event.

A touch is when you A drag is when you place your finger on

place your finger on the the canvas and move it while keeping it in
canvas and lift it without contact with the screen.
moving it.

Slices owned by pjgm::rcl 12/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Show & Tell

Then, what do I need to create an Android App?

Slices owned by pjgm::rcl 13/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Show & Tell: What you’ll need

Wifi connection -> Computer -> Android Device*

5 simple steps:

①  It usually takes a few hours minutes to set up any app development

environment.

②  You need not download anything to your computer*

③  On your phone or tablet, open the Google Play Store and find and install
the MIT AI2 Companion app. The Companion app is just an Android App
that lets you test the apps you build as you're building them.

MIT AI2 Companion app   (*You can emulate J)  

Slices owned by pjgm::rcl 14/55
 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Show & Tell: What you’ll need Working with APP INVENTOR 2
④  Back in your computer's browser (Chrome, Firefox or Safari), open app
inventor by going to ai2.appinventor.mit.edu. Create a new project.
(important: type name project with no spaces!!!)

④  In the top menu, click on 'Connect' and 'Connect to Companion'. A QR code

will appear. Scan this QR code with the MIT AI2 Companion. You should
see your app.

Slices owned by pjgm::rcl 15/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

Show & Tell: Learn to build Android apps

Introduction to App Inventor 2 in just 4 easy steps, each treated separately:

①  step: DESIGNER:: How your app looks

②  step: BLOCKS:: How your app behaves

③  step: TEST:: Testing while your are building

④  step: BUILD:: Building your first app

Slices owned by pjgm::rcl 16/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

①  step: DESIGNER:: How your app looks App Inventor Designer

Design the App's User Interface by arranging both on- and off-screen components.

Slices owned by pjgm::rcl 17/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

App Inventor Blocks Editor

②  step: BLOCKS:: How your app behaves
Program the app's behavior by putting blocks together.

Type names with no spaces!!!

Slices owned by pjgm::rcl 18/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

③  step: TEST:: Testing while your are building

•  MIT App Inventor Companion App

•  Same Wifi!

Slices owned by pjgm::rcl 19/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

④  step: BUILD:: Building your first app

•  Start new project, like project New, from scratch

•  Import project (.aia-file) form a repository

•  Gallery

•  Import project (.aia-file) form my computer

•  Export and share your app in an executable (.apk-file) form

that can be installed on a device

The time spent to create apps with App Inventor feels like minutes
compared to using traditional programming languages.

Slices owned by pjgm::rcl 20/55

 MIT App Inventor WORKSHOP
Creating an Educational App: enjoy learning & learning by making

More information …
•  http://appinventor.mit.edu/explore/
As a start you can begin at AppInventor.mit.edu, the home of App Inventor.

•  http://www.appinventor.org/
Web product of the University of San Francisco's Democratize Computing
Lab, and it is intended to provide materials for learning and teaching App Inventor.

•  https://puravidaapps.com/
PuraVidaApps is a site made by an App Inventor enthusiast, where you can find
tons of snippets, tutorials and links.

•  https://www.udemy.com/desarrollo-de-aplicaciones-moviles-con-app-inventor/
Spanish course by a Master Trainer of App Inventor targeting beginners of all age.
Book:
D. Wolber, H. Abelson, E. Spertus and L. Looney (2014),
“App Inventor 2. CreateYour Own Android Apps”,
Ed. O’Reilly, USA

Slices owned by pjgm::rcl 21/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 1:: The Moody chart

We propose to our bachelor engineering students of Fluid Mechanics

to carried out this first app:

Slices owned by pjgm::rcl 22/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 1:: The Moody chart

TEST:: Testing while your are building BUILD:: Building your first app  

Slices owned by pjgm::rcl 23/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 1:: The Moody chart

DESIGNER:: How your app looks  

Slices owned by pjgm::rcl 24/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 1:: The Moody chart

BLOCKS:: How your app behaves  

Slices owned by pjgm::rcl 25/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 1:: The Moody chart

You can emulate J  

Slices owned by pjgm::rcl 26/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 2:: Turbomachinery

We propose to our students of Fluid Mechanics to carried out this second app:

Slices owned by pjgm::rcl 27/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 2:: Turbomachinery

TEST:: Testing while your are building BUILD:: Building your first app  

Slices owned by pjgm::rcl 28/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 2:: Turbomachinery

DESIGNER:: How your app looks  

Slices owned by pjgm::rcl 29/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Example 2:: Turbomachinery

BLOCKS:: How your app behaves  

Slices owned by pjgm::rcl 30/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Survey !

!

:: Questions Breve%Encuesta%sobre%la%Tarea:%“App%Android%para%Enginyeria%de%Fluids”%
Se ruega contesten con completa franqueza siendo la encuesta anónima
Sus opiniones son muy valiosas y servirán para mejorar la asignatura en futuras ediciones
%
Género!
Hombre!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Mujer!
!
¿Conocía!App#Inventor!antes!de!la!propuesta!de!la!tarea!por!parte!del!profesor?!
!
!!!!Si!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!No!
!
! !
1.!Valore!de!0!a!10!(0:min!–!10:max)!el!grado!de!adecuación%y%de%
aprendizaje%en%la%asignatura!de!esta!tarea!con!relación!a!la!otras!tareas!del!
curso!
!
! !
2.!Valore!de!0!a!10!(0:min!–!10:max)!el!grado!de!dificultad!que!representa!el!
haber!realizado!esta!tarea!con!relación!a!la!otras!tareas!del!curso!
!
! !
3.!Valore!de!0!a!10!(0:min!–!10:max)!el!grado!de!relevancia%y%atractivo!que!
tiene!el!aprendizaje!mediante!el!desarrollo!de!aplicaciones!para!dispositivos!
móviles!en!la!asignatura!
!
! !
4.!Valore!de!0!a!10!(0:min!–!10:max)!el!grado!de!satisfacción!que!le!ha!
aportado!la!experiencia!de!realizar!esta!tarea!de!desarrollo!de!la!App!
!
! !
5.!Valore!de!0!a!10!(0:min!–!10:max)!el!grado!de!utilidad%que!considera!le!ha!
aportado!el!aprendizaje!de!desarrollar!esta!App!Android!para!aplicarlo!a!
futuras!asignaturas!y!su!futura!carrera!profesional!!
!
!
Por!favor!indique,!si!lo!desea,!muy!brevemente!un!aspecto!que!se!podría!haber!llevado!a!
cabo!en!la!tarea!más!eficazmente.!
!
!
Por!favor!indique,!si!lo!desea,!muy!brevemente!un!aspecto!que!se!debería!incluir!si!
hubiese!una!segundo!edición!de!esta!tarea.!
!
!
Slices owned! by pjgm::rcl 31/55
!
!
 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Survey:: Results

90" 90"
80" 80"
70" 70"
Number'of'students'

60" 60"

Percentage)[%])
50" 50"
1Q1516" 1Q1516"
40" 40"
1Q1617" 1Q1617"
30" 30"
20" 20"

10" 10"

0" 0"
Subject" Answers" Male" Female"

100"
90"
80"
70"
Percentage)[%])

60"
50" 1Q1516"
?  

40" 1Q1617"
30"
20"
10"
0"
AI?"YES" AI?"NO"

Slices owned by pjgm::rcl 32/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App Survey:: Results

8.0#
7.0#
6.0#
5.0#
Score&

4.0#
3.0# 1Q1516#

2.0# 1Q1617#
1.0#

@  
0.0#
P1:# P2:# P3:# P4:# P5:#
6.6$
learning# difficulty# _u<lity_# sa<sfac<on#applica<on#
Survey&Ques,on& 6.4$

6.2$

6.0$

Score&
5.8$ 1Q1516$

1Q1617$
5.6$

5.4$

5.2$

5.0$
Average$ Average,Male$ Average,Female$

Slices owned by pjgm::rcl 33/55

 MIT App Inventor WORKSHOP
Educational Apps with Bachelor Engineering Students

Educational App:: Request for Bachelor project

Slices owned by pjgm::rcl 34/55

 MIT App Inventor WORKSHOP
Hands-on session: creating your first App

The first Apps of this Workshop

So now, let’s get hands-on-work

Let’s build our first Apps!!!  

In App Inventor, an object within the

drawing canvas is called a sprite

Slices owned by pjgm::rcl 35/55

 MIT App Inventor WORKSHOP
Hands-on session: creating your first App

Talk To Me (part1) -> https://vimeo.com/78782032

Slices owned by pjgm::rcl 36/55

 MIT App Inventor WORKSHOP
Hands-on session: creating your first App

Talk To Me (part2) -> https://vimeo.com/78782033

Slices owned by pjgm::rcl 37/55

 MIT App Inventor WORKSHOP
Hands-on session: creating your first App

Ball Bounce -> https://vimeo.com/81401989

Slices owned by pjgm::rcl 38/55

 MIT App Inventor WORKSHOP
Hands-on session: creating your first App

Digital Doodle -> https://vimeo.com/81401988

Slices owned by pjgm::rcl 39/55

 MIT App Inventor WORKSHOP
More things …

App Inventor Concept Cards

App Inventor Concept Cards provide a quick way to learn new App
Inventor code and concepts.
h>p://explore.appinventor.mit.edu/resources/beginner-­‐app-­‐inventor-­‐concept-­‐cards    

Slices owned by pjgm::rcl 40/55

 MIT App Inventor WORKSHOP
More things …

App of the Month

h>ps://play.google.com/store/apps/details?id=appinventor.ai_gic1pc.quellevoyo2    

Crea un evento, escoge los productos

imprescindibles, envíales la invitación, ... a
partir de ahora todos podrán colaborar para
que el encuentro sea un éxito. Confirma tu
asistencia, decide qué llevarás y si tienes
alguna duda ponlo en común en el foro de
la aplicación.

Slices owned by pjgm::rcl 41/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Fluid Mechanics Apps of our Bachelor Thesis Students

Here we present three examples of educational apps created with App Inventor

Student  App  #1:  “GearPumpDesigner”  

Student  App  #2:  “PumpCALC”  

Student  App  #3:  “App4Comp”  

Slices owned by pjgm::rcl 42/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #1:  “GearPumpDesigner”  

Please,  visit  -­‐>  hAp://www.gerolab.es/app/    

GearPumpDesigner  

App for volumetric machinery calculation  

Intended for students
and engineers that
need to check data or
draw a tooth profile

Slices owned by pjgm::rcl 43/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #1:  “GearPumpDesigner”  

Slices owned by pjgm::rcl 44/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #1:  “GearPumpDesigner”  

Slices owned by pjgm::rcl 45/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #2:  “PumpCALC”  

Please,  visit  -­‐>  hAp://www.pumpcalc.edusite.me    
App for turbomachinery calculation  
Intended for students
and engineers that
need to check data or
results, or to get a
first approximation
without doing
calculations by hand.

Slices owned by pjgm::rcl 46/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #2:  “PumpCALC”  

Slices owned by pjgm::rcl 47/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #2:  “PumpCALC”  

Slices owned by pjgm::rcl 48/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #3:  “App4Comp”  

Please,  visit  -­‐>    hAps://sites.google.com/site/app4comp/    

App4Comp   App4Comp is a free Android App that

solves some classic problems related to
compressible flow, in the field of fluid
mechanics.

The app wants to be useful for

students and engineers that need
to check data or results, or to get a
first approximation in some
application without having to move
to a computer or do the
calculations by hand.

Slices owned by pjgm::rcl 49/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Students

Student  App  #3:  “App4Comp”  

App “market” research of free apps of compressible flow

Slices owned by pjgm::rcl 50/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students

Student  App  #3:  “App4Comp”  

Método  Newton-­‐Raphson  

Slices owned by pjgm::rcl 51/55

 MIT App Inventor WORKSHOP
Fluid Mechanics Apps of our Bachelor Thesis Students
Development of an App for Compressible Flow
Student  App  #3:  “App4Comp”   “App4Comp”

Andrés Adam Alberdi P. Javier Gamez-Montero

Paper presented in the Educational Congress:

UPC – Barcelona Tech UPC – Barcelona Tech
ETSEIAT, Colom 11 08222 ETSEIAT, TR4 Building, Office 017, Colom 11 08222
Terrassa (Spain) Terrassa (Spain)
+34 660516291 +34 937398085
andres.adamalb@gmail.com pjgm@mf.upc.edu
TEEM’15 Porto   place” whenever a question or problem arises. With the mobile
ABSTRACT
In this paper is discussed the development and operation of a new technology available nowadays, this problem is outdated. The
Android App made through Google’s platform App Inventor 2. devices carried in our pockets are perfectly capable of solving
This App is focused on solving classic problems related to most of these problems; they just need a proper solving software.
compressible flow, dealing with the typical cases seen in the On the other hand, students that are required to learn about
subject of Fluid Mechanics of a degree in Aeronautics. It is compressible regimes of Fluid Mechanics might find useful a
downloadable from [1], or through the QR code at the end of this mobile tool that solves the same problems that they are seeing.
paper. That can help them get used to that kind of problems, verify their
The main objective of this project was to bring in a new, useful solutions, see them from another point of view and, when they get
app about compressible flow to the market, but also to test the familiar with them, get intermediate results within a bigger
platform App Inventor and see it usefulness in engineering problem, allowing the students to solve it faster.
applications. All that gave us the idea of developing a mobile app that solves
classic problems of compressible flow in a first, theoretical
Categories and Subject Descriptors approximation. Aimed mainly to students, as it was made by one
as well, it is expected to be useful for working engineers.
• Applied computing~Physics
• Applied computing~Computer-assisted instruction 2. APP4COMP
App4Comp is an Android App that solves classic problems
General Terms related to compressible flow. It is thought to be a valuable tool for
Algorithms, Performance, Theory, Verification. engineering students when learning about compressible flow. As
problems regarding compressible flow are long and time-
Keywords consuming, the App can be used to solve them in-class in a quick
App Inventor, Compressible Flow, Fluid Mechanics, Mobile and easy way by everyone there, allowing the teacher to show the
Applications. students a bigger amount of cases, focusing more on the physical
concept seen than on the formulas and calculations.

1. INTRODUCTION In addition, the students can use App4Comp to check the validity
The application of Compressible Fluid Mechanics is an everyday of the problems solved as homework, including intermediate
topic in many areas of engineering. As everybody used to them results rather than the final one, and helping to expand their
can relate, the behavior of a compressible flow is not always knowledge when testing even more cases just out of curiosity.
intuitive and involves many complex formulas that are very When deciding the problems to solve and the modules to create, it
difficult to remember, let alone use them easily. All this forces the was decided that, as the App is aimed to students, it should have
working engineer to move from the “work place” to the “calculus whatever can be useful for them. More specifically, the degree in
A. Adam and P. J. Gamez-Montero (2015), Permission to make digital or hard copies of all or part of this work for
aerospace technologies of the Polytechnic University of Catalonia
was taken as a reference.

Development of an App for Compressible Flow “App4Comp”, personal or classroom use is granted without fee provided that copies are not
made or distributed for profit or commercial advantage and that copies bear
this notice and the full citation on the first page. Copyrights for components
The App has these modules:
International Standard Atmosphere (ISA)
Third International Conference on Technological Ecosystems of this work owned by others than ACM must be honored. Abstracting with
credit is permitted. To copy otherwise, or republish, to post on servers or to Isentropic flow

for Enhancing Multiculturality - TEEM’15 Porto, October 7-9,

redistribute to lists, requires prior specific permission and/or a fee. Request
permissions from Permissions@acm.org. Normal shockwave
TEEM '15, October 07-09, 2015, Porto, Portugal Convergent-divergent nozzle
2015, pp. 297-302 © 2015 ACM. ISBN 978-1-4503-3442-6/15/10$15.00
DOI: http://dx.doi.org/10.1145/2808580.2808625 Fanno Flow

297

Slices owned by pjgm::rcl 52/55

 MIT App Inventor WORKSHOP
Hands-on session: creating more apps

More Apps in this Workshop  the PaintPot app

Let’s create a new App?

Again, let’s get hands-on-work

Slices owned by pjgm::rcl 53/55

 MIT App Inventor WORKSHOP
Hands-on session: creating more apps

More Apps from this Workshop

Have fun with these apps, …

or others that you think up!

Slices owned by pjgm::rcl 54/55

 MIT App Inventor WORKSHOP
The End

Thank you for attending

the workshop!

Basic tools to create an educational

App with MIT App Inventor

Trainers:
Xavier and Robert
pjgm@mf.upc.edu
castilla@mf.upc.edu
Slices owned by pjgm::rcl 55/55