goo.gl/r43jm9 dream it, build it! create mobile apps with...

48
Dream it, Build it! Create Mobile Apps with App Inventor MISF STEM Conference 2017 Andrea Wilson Vazquez Eileen King @wilsandrea goo.gl/r43Jm9

Upload: others

Post on 25-May-2020

7 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Dream it, Build it!Create Mobile Apps with App Inventor

MISF STEM Conference 2017

Andrea Wilson VazquezEileen King

@wilsandrea@eyeleanking

goo.gl/r43Jm9

Page 2: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Andrea Wilson Vazquez

Makerspace Instructor

West Education Center, District 287

---

Program Director, MN Coding in

the Classroom Leadership Cohort

Code Savvy

---

authorized Google Education

Trainergoo.gl/r43Jm9

Page 3: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Code Savvy is a not-for-profit organization inspiring kids

and teens to become code-savvy, that is, to understand the

kind of creative thinking that goes into coding, and to try

out programming computers and devices. Code Savvy is

determined to bring more diversity -- gender and ethnic

diversity -- to computer science.

Page 5: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Eileen King

IB MYP Design Teacher

Lakes International Language Academy,

Forest Lake

---

Camp Innovation Counselor

The Bakken Museum

---

CoderDojo Championgoo.gl/r43Jm9

Page 6: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

http://4.bp.blogspot.com/-

Pj8LeZzuWbI/UcsqoJCAmvI/AAAAAAAAAeo/ja2eRkUoss

E/s1600/Design+Process.png

goo.gl/r43Jm9

Page 8: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Apps Can Be Designed for Any Audience

http://www.schooleducationgateway.eu/files/esl/image

s/stakeholder-involvement.png

Page 9: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Apps start with an IDEA.

An opportunity for solving a

problem.https://www.iconfinder.com/icons/309903/bulb_electric

_electricity_idea_innovation_lamp_light_lightbulb_icon

Page 10: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Challenge:Envision

Get together with a group

of 3-5.

Brainstorm your best app

idea that is inspired by the

random nouns you were

given. Be ready to share!

Page 12: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

App Development in the Classroom

Page 13: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

This graph compares the net worth of a variety of athletes and entertainers with tech entrepreneurs...who do you think is on the far right?

Page 14: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Why App Inventor?

Page 15: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Challenge:Discover

Page 16: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Let’s Dig In!

Navigate to the MIT AppInventor website

Click on Create Apps in the upper right hand corner.

Login with your Google Account.

Page 17: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Let’s Take a Tour!Start a New Project

Palettes

Viewer

Components List

Properties Panel

Page 18: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Hands onHello Purr

Cat image(Google Images - Tools - Labeled for

Reuse)

Meow sound(Soundbible is a good source for

other sounds)

Page 20: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

App Challenge:Remix Hello Purr to create an app that is helpful in the real world

Page 23: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Encourage Remixing

Page 24: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Design Project:Develop Solutions to Help Others

Page 25: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Project Sequence:

● Explore problems● Envision solutions● Discover similar existing

apps● Design new app● Develop and program app● Prototype and beta test● Launch app● Get feedback and improve

@BTwarek

Approach #1: Invent

Page 26: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Project Sequence:

● Read user profiles● Brainstorm ways to adapt

existing apps to meet users’ needs

● Choose one, and write design brief and specification

● Adapt app● Test against specification

Profiles and student journal

Approach #2: Adapt

Page 27: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

New App Ideas Developed

Cafe

Affirmations and Social Emotional

Learning

Bulldog Cafe Ordering App

Talking Pictionary

Page 29: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 30: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Connections to your

Classroom

Page 31: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Design & Develop

Page 32: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

App Inventor ChallengeWork with a partner or small group to

create an app with App Inventor that

addresses a problem or challenge in your

school or community!

● 2-3 people

● 1 computer

● 1 tablet

● App Inventor tutorials

This year’s TechnovationMN

winners

Page 33: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Launch

Page 35: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Apps in the World

Page 37: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

Apps in the World

(and these from MN)

Page 39: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer

ResourcesCurriculum:

CS for SF: Computer Science is for Everyone Middle

School Curriculum

Samsung Mobile App Academy (Scholastic), 9-12

Online Mobile Computer Science Principles Course

App Inventor Course in a Box - Lesson Plans

App Inventor for Educators Resource Site

Coding Concept Cards

App Inventor Hour of Code Tutorials

App Inventor’s YouTube Channel

People to Follow:

Bryan Twarek - @BTwarek

David Wolber - @wolberd

MIT App Inventor - @MITAppInventor

Technovation - @Technovation

Page 41: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 42: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 43: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 44: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 45: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 46: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 47: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer
Page 48: goo.gl/r43Jm9 Dream it, Build it! Create Mobile Apps with ...misf.org/wp-content/uploads/2017/09/Presentation... · Samsung Mobile App Academy (Scholastic), 9-12 Online Mobile Computer