introductin to appinventor - sonoma state university · complete*the*interface*–*...

21
Introduc)on to MIT App Inventor 2 Dr. Farid Farahmand Nov 18, 2015

Upload: phamkhanh

Post on 27-Dec-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introductin to AppInventor - Sonoma State University · Complete*the*Interface*–* Building*the*Designer** Add*abuCon* Add*an*image* Your*Components* Component* Property*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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*

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/