Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Photo by astanush - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/27965998@N...
MIT App Inventor 2:
http://ai2.appinventor.mit.edu/
Add components
from palette
Adjust properties of components
Drag and drop items into the blocks editor,
and snap blocks together
Now let’s create an app!
First, start a new project
Add a label to the screen
(a label item shows up in
the Components area)
Add a button to the screen
Select the Label1 component, and click on Rename.
Rename Label1 to lblMessage
and Button1 to btnEnter
With lblMessage selected,
Change BackgroundColor to Cyan
Change FontSize to 30
Change Height to 50 pixels
Change Width to ...
With btnEnter selected,
change FontSize to 30
Change Height to 50 pixels
Change Width to Fill parent
Change Text to ‘Click...
In the Blocks editor,
select btnEnter
Drag when
btnEnter.click to the
blank canvas
Select lblMessage,
and drag set lblMessage.Text
over to the canvas
Connect the
blocks together
Under the Built-in blocks,
select Text, and drag the empty string
“ ” block over to the canvas
Snap the blocks together,
and change the empty
string to “Hello world!”
Let’s test it out!
Download the MIT AI2 Companion on
your mobile phone
On the upper right-hand side,
click on Connect and AI Companion
Launch the MIT AI2 Companion
on your mobile phone,
and ent...
No Android device? No problem!
Download the App Inventor Setup Package:
http://appinventor.mit.edu/explore/ai2/mac.h
tml
Click on Connect and
then Emulator
Let the Android Emulator
load for a few minutes
Click on the MIT AI2 Companion app on the phone
(you may need to connect again to load the project)
Viola! When the button is clicked,
‘Hello world!’ appears.
Save the project as an .apk file, and
open it up on your Android device
to launch the app
Congratulations! You’ve successfully
created an Android app.
Questions?
Thank you!
“Like” us on Facebook!:
www.bit.ly/jypathways
Follow us on Twitter: @jypathways
www.jypathways.org
JY Pathways: Program Android Apps with MIT App Inventor 2
JY Pathways: Program Android Apps with MIT App Inventor 2
JY Pathways: Program Android Apps with MIT App Inventor 2
JY Pathways: Program Android Apps with MIT App Inventor 2
Upcoming SlideShare
Loading in …5
×

JY Pathways: Program Android Apps with MIT App Inventor 2

1,287 views

Published on

JY Pathways
www.jypathways.org
'Like' us on Facebook: www.bit.ly/jypathways
Follow us on Twitter: @jypathways

Published in: Education
  • Be the first to comment

JY Pathways: Program Android Apps with MIT App Inventor 2

  1. 1. Photo by astanush - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/27965998@N00
  2. 2. MIT App Inventor 2: http://ai2.appinventor.mit.edu/
  3. 3. Add components from palette
  4. 4. Adjust properties of components
  5. 5. Drag and drop items into the blocks editor, and snap blocks together
  6. 6. Now let’s create an app!
  7. 7. First, start a new project
  8. 8. Add a label to the screen (a label item shows up in the Components area)
  9. 9. Add a button to the screen
  10. 10. Select the Label1 component, and click on Rename.
  11. 11. Rename Label1 to lblMessage and Button1 to btnEnter
  12. 12. With lblMessage selected, Change BackgroundColor to Cyan Change FontSize to 30 Change Height to 50 pixels Change Width to Fill parent, and clear ‘Text for Label 1’ under Text
  13. 13. With btnEnter selected, change FontSize to 30 Change Height to 50 pixels Change Width to Fill parent Change Text to ‘Click here’
  14. 14. In the Blocks editor, select btnEnter Drag when btnEnter.click to the blank canvas
  15. 15. Select lblMessage, and drag set lblMessage.Text over to the canvas
  16. 16. Connect the blocks together
  17. 17. Under the Built-in blocks, select Text, and drag the empty string “ ” block over to the canvas
  18. 18. Snap the blocks together, and change the empty string to “Hello world!”
  19. 19. Let’s test it out!
  20. 20. Download the MIT AI2 Companion on your mobile phone
  21. 21. On the upper right-hand side, click on Connect and AI Companion Launch the MIT AI2 Companion on your mobile phone, and enter the QR Code to see the project in action
  22. 22. No Android device? No problem!
  23. 23. Download the App Inventor Setup Package: http://appinventor.mit.edu/explore/ai2/mac.h tml
  24. 24. Click on Connect and then Emulator Let the Android Emulator load for a few minutes
  25. 25. Click on the MIT AI2 Companion app on the phone (you may need to connect again to load the project)
  26. 26. Viola! When the button is clicked, ‘Hello world!’ appears.
  27. 27. Save the project as an .apk file, and open it up on your Android device to launch the app
  28. 28. Congratulations! You’ve successfully created an Android app.
  29. 29. Questions? Thank you! “Like” us on Facebook!: www.bit.ly/jypathways Follow us on Twitter: @jypathways www.jypathways.org

×