![Page 1: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/1.jpg)
Introduc)on to MIT App Inventor 2
Dr. Farid Farahmand Nov 18, 2015
![Page 2: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/2.jpg)
Ge@ng Started • AppInventor.org hCp://www.appinventor.org/ à – LOGIN with your Google account – Follow the tutorial & build “I Have A Dream” App – Follow the course!
![Page 3: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/3.jpg)
Ge@ng Started • AppInventor.org hCp://www.appinventor.org/ à – LOGIN with your Google account – Follow the tutorial & build “I Have A Dream” App
![Page 4: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/4.jpg)
Your Project Site More Example!
![Page 5: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/5.jpg)
Start A New Project -‐ TalktoMe
![Page 6: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/6.jpg)
Complete the Interface – Building the Designer
Add a buCon
Add an image
Your Components Component Property
![Page 7: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/7.jpg)
Build A Quick App -‐ Blocks
This is the Design
![Page 8: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/8.jpg)
Crea)ng the QR Code for the Package
![Page 9: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/9.jpg)
Programming Your Device
Must download MIT AI@ Companion on your mobile device
![Page 10: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/10.jpg)
Program Your Device When you start the Companion on your phone, it will look like (1). Back in App Inventor, choose "Connect" (2) then "AI Companion. This will cause a QR code to appear (3) You can then scan the QR code (4) with your phone to see your app live. NOTE: for live tes)ng to work, both your computer and phone/tablet must be connected to the same WiFi sta6on. Using WiFi is the easiest way to connect, but if you're at school/work you may have firewall issues.
hCp://www.appinventor.org/IHaveADreamTut
![Page 11: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/11.jpg)
Crea)ng the QR Code for the Package
![Page 12: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/12.jpg)
On Your Android
• Google Play à Download MIT AI2 Companion
• Open the applica)on • Make sure you get a URL address
• Press Scan QR Code • Then press Connect with Code
![Page 13: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/13.jpg)
Your APP
• Make sure your phone is setup to download applica)ons from non-‐secure sources!
• Find the downloaded APP on your phone and run it!
• This is how your app looks like:
![Page 14: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/14.jpg)
Another Example….
![Page 15: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/15.jpg)
USB Interface
![Page 16: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/16.jpg)
The Designer
![Page 17: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/17.jpg)
Download the App on your phone! 1-‐Create the .apk 2-‐Upload to your phone using USB cable 3-‐Run the applica)on on the phone
![Page 18: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/18.jpg)
Pairing Your Phone & Computer
• Remove the phone device from your BT connec)ons
• Make sure your phone’s BT is on and it is discoverable
• Make sure your computer is not paired with any other devices (mouse, keyboard, etc.)
![Page 19: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/19.jpg)
Basic Idea Making your first APP: hCp://appinventor.mit.edu/explore/ai2/hellopurr.html
![Page 20: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/20.jpg)
Block Architecture
![Page 21: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*](https://reader031.vdocuments.net/reader031/viewer/2022031402/5c24b1f909d3f2d34c8c9abf/html5/thumbnails/21.jpg)
References:
• AppInventor.org hCp://www.appinventor.org/ à LOGIN with your Google account
• Other Tutorials: hCp://appinventor.mit.edu/explore/ai2/beginner-‐videos.html
• Exploring AppInventor hCp://appinventor.mit.edu/explore/