Download - Introduction to AppInventor
![Page 1: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/1.jpg)
Introduction to AppInventor
Dr. José M. Reyes Álamo
![Page 2: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/2.jpg)
2
Agenda
• What is AppInventor?
• AppInventor setup
• Event Driven Programming
• Components and properties
• Events and event handlers
• Calling built-in function blocks
• Reference Documentation site
![Page 3: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/3.jpg)
3
What is AppInventor?
• App Inventor is a visual "blocks" language for programming mobile apps.
• Android apps.
![Page 4: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/4.jpg)
4
What is AppInventor?The App Inventor servers store your work and help you keep track of your projects.
•App Inventor lets you develop applications for Android phones using a web browser and either a connected phone or emulator.
![Page 5: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/5.jpg)
5
What is it? You build apps by working with:• The App Inventor Designer, where you select
the components for your app.• The App Inventor Blocks Editor, where you
assemble program blocks that specify how the components should behave.
![Page 6: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/6.jpg)
6
What is it?
• Your app appears on the phone step-by-step as you add pieces to it, so you can test your work as you build.
• When you're done, you can package your app and produce a stand-alone application to install.
• If you don't have an Android phone, you can build your apps using the Android emulator, software
that runs on your computer and behaves just like the phone.
![Page 7: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/7.jpg)
7
Java vs AppInventor
Java Codepublic class HelloWorldApp {
public static void main(String[] args) {System.out.println("Hello World!");
}}
AppInventor
![Page 8: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/8.jpg)
8
Can you guess what these blocks do?
![Page 9: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/9.jpg)
9
Why App Inventor Works
• No typing of code, no syntax errors.
• Events at first level
• Like putting together a puzzle (only some pieces fit)
• High-level-- the Google team has put a lot of work in it
• Concrete, less abstract
![Page 10: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/10.jpg)
10
No silver bullet
• Can't build everything
– user interface
– not all phone features available
• Programming is still hard work!
Programming is an intellectually rigorous discipline that requires a lot of practice.
![Page 11: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/11.jpg)
11
The component Designer, Blocks Editor and Emulator
![Page 12: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/12.jpg)
Installing AppInventor
![Page 13: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/13.jpg)
13
Before you try to create an app
http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html
![Page 14: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/14.jpg)
14
Before you try to create an app
General documentation is included.
![Page 15: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/15.jpg)
15
Your first AppInventor App
Your first app: “Hello Purr”
![Page 16: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/16.jpg)
16
To have credit for each app you develop
• You should create a page for each application, containing the following:
1. A description about what the app does
2. Screenshots of the app running
3. Screenshots of the Blocks diagram
4. Show your app running to the Professor
Take a look a these examples:– https://sites.google.com/site/dmushailov/
– https://sites.google.com/site/jianhliportafolio/kittypurr
![Page 17: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/17.jpg)
17
From the AppInventor FAQ’s
• Can I share project code with other App Inventor users?– Yes. To share a project, go to the My Projects page, select a project, then
choose More Actions | Download Source. This will create a zip file that you can share with others. To upload a project, go to My Projects, choose More Actions | Upload Source, and choose a zip file previously downloaded from App Inventor.
• Can I share my apps with other Android users?– Yes. To share an app, you first need to obtain an Android Package (.apk)
file, which you can do by going to the My Projects page, clicking on the name of the app you want to share (which will take you to the Design page), and selecting Package for Phone | Download to this Computer. You can then email the app to your friends, who can install it by opening the email from their phone, or you can upload it to a website that both you and your friend can access. Note that they will need to change the settings of their phone to allow installation of non-Market applications.
http://experimental.appinventor.mit.edu/learn/userfaq.html
![Page 18: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/18.jpg)
Components
![Page 19: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/19.jpg)
19
What is an App?
• From the user perspective?
• From the programmer perspective?– It is like recipe
Bank transaction
Update user account
Print balance
![Page 20: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/20.jpg)
20
App architecture
![Page 21: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/21.jpg)
21
Components
• Components are objects or elements used to create an application.
![Page 22: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/22.jpg)
22
Events
• In computer programming, event-driven programming or event-based programming is a programming paradigm in which the flow of the program is determined by events—i.e., sensor outputs or user actions (mouse clicks, key presses) or messages from other programs or threads.
![Page 23: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/23.jpg)
23
Event handler
• The functions performed in response to an event. When an event happens, the corresponding event handler is invoked.
![Page 24: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/24.jpg)
24
Behaviors
• A behavior defines how the app should respond to the events, both user initiated (e.g., button click) and external (e.g., an SMS text arrives to the phone).
![Page 25: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/25.jpg)
Reference Documents
![Page 26: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/26.jpg)
26
The reference website
• Components
• Blocks
• Concepts
• Go to: http://cet-citytech.appspot.com/learn/reference/
![Page 27: Introduction to AppInventor](https://reader033.vdocuments.mx/reader033/viewer/2022061502/56813d64550346895da73d6e/html5/thumbnails/27.jpg)
27
Homework assignment
• Read the following chapters PaintPot AppInventor CH16 (Variables)
• Complete the following quizzes on BlackBoard– RA7_AppInventorCh2andCh16