Links of Interest. Application Development. Technovation. Main website for App Inventor:

Size: px

Start display at page:

Download "Links of Interest. Application Development. Technovation. Main website for App Inventor:"

Harry Walsh
5 years ago
Views:

1 Hack Day 2016

2 Links of Interest Application Development Main website for App Inventor: Getting started with App Inventor (Setup, coding, tutorials): Link to App Inventor (Design & build your mobile apps at this website): (do NOT use Internet Explorer) Link to download emulator (if you do not have Android phone): Link to source code you can use: Technovation Main website: Technovation Registration: Last years projects:

3 Ahmed Bachelor of Software Engineering from Lakehead University Over 5 years of experience working at IBM MAS student in TIM at Carleton University Cybersecurity R&D at VENUS

4 Ibrahim Entrepreneur, researcher, educator PhD in Electrical Engineering, UoM, USA MEng in Technology Innovation Management Currently Cybersecurity R&D at VENUS

5 What we are covering today 1. CEO Profile Slide 5 2. What you will need for today Slide 9 3. Problem-solving exercises Slide Application development cycle Slide Setting up your computer & phone (Windows OS) Slide 33 Installing Emulator Installing AI Companion Lunch Slide Tips for mobile development Slide Creating your first app Talk to Me Slide 78 Tutorial walkthrough Downloading application Save and distribute 9. Math App challenge Slide Bounce ball App Slide 123 Tutorial walkthrough 11. User experience Slide Other Tutorials (pre-existing code you can use for your project) Slide Getting Started (Registration, Community, Deliverables, Planning, Communications) Slide 154

6 1. CEO Profile Marissa Mayer - CEO of Yahoo!

7 CEO Profile

8 CEO Profile Was on the curling team and dance team at Wausau West High School Graduated with a B.S. degree in 1997, and an M.S. degree in computer science in 1999 Joined Google in She was the 20 th employee Google s first female engineer

9 CEO Profile Was on the curling team and dance team at Wausau West High School Graduated with a B.S. degree in 1997, and an M.S. degree in computer science in 1999 Joined Google in She was the 20 th employee Google s first female engineer Started out writing code In 2005 she became VP of Search Products and User Experience In 2010 she became the head of Google Maps and location services 2012 Today : CEO of Yahoo!

10 2. What you will need for today

11 Getting Started What you need: Internet access Laptop (Windows or Mac) Gmail account (might be optional) Computer with Firefox 3.6/Chrome 4.0/ Safari 5.0 web browser (App Engine is not compatible with Internet Explorer) Android phone with OS 2.3 or higher 6

12 Why Learn App Inventor? Create your own mobile applications Use it for school projects Solve real world problems Create a prototype for your business

13 3. Problem solving exercises

14 What Does This App do?

http://appinventor.mit.edu/explore/sites/all/files/conceptcards/ai2/detectingshakingphone.

17 What Does This App do?

20 What Does this App do?

21 The app responds automatically to incoming text messages (handsfree) with a message such as "I'm driving right now, I'll contact you shortly."

23 Inspiration for Texting App At least 28 percent of all traffic accidents (1.6 million crashes every year) are caused by drivers using cell phones At least 200,000 of those accidents occurred while drivers were texting Daniel Finnegan - a student living in San Francisco - came up with the idea in 2010 and created the No Text While Driving app using App Inventor State Farm Insurance created an Android app called "On the Move" which is similar to Daniel s App

24 We will be focusing on TextToSpeech

25 4. Application Development Cycle

26 Design Distribute Build Test

27 Design Distribute Build Test

28 Design Distribute Build Test

29 Design Distribute Build Test

30 Design Distribute Build Test

Design Distribute Build Test http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/05/uiflow_large_mini.jpg http://www.engineering.auckland.ac.

31 Design Distribute Build Test

32 appinventor.mit.edu/explore

34 5. Setting Up Your Computer & Phones

35 Setting Your Development Environment

36 ai2.appinventor.mit.edu Incompatible with App Inventor

Installing Emulator (Testing) An emulator is a software version of an android phone you can experiment with on your PC without using your phone Handy if you don t have a Android phone Can be slow to

39 Installing Emulator (Testing) An emulator is a software version of an android phone you can experiment with on your PC without using your phone Handy if you don t have a Android phone Can be slow to initialize, start-up, and work with You interact with the Apps you create through your PC s keyboard and mouse Functions like accelerometer, camera, or GPS might not work or difficult to test in an emulator

42 Step 1

43 Windows Mac

44 Windows Install

45 Windows Install

46 Windows Install

47 Windows Install

48 Windows Install

49 Windows Install

50 Windows Install Desktop Icon In File System

51 Windows Install

52 Installing AI Companion (Testing) Can see changes made in real-time Operate and test your app with your actual phone GPS, Camera, and accelerometer might work Application is only temporarily running on the phone. Application is not stored in the phone

53 Downloading AI Companion Go to the Play Store in your phone

54 Search for MIT app inventor

55 Go to Firefox or Chrome apptest1

56 Invoking Emulator

57 Invoking Emulator

58 Invoking Emulator

59 Invoking Emulator

60 Invoking Emulator

61 Invoking Emulator

62 Invoking Emulator [1] [4] [2] [3] [3] Open DONE

63 Invoking Emulator

64 Invoking Emulator

65 Invoking Emulator Desktop Icon In File System

66 Invoking Emulator [1] [3] [2]

67 Invoking AI Companion Using your own phone [2] [1]

68 Invoking AI Companion

69 Invoking AI Companion [3] [1] [2]

71 6. Lunch

72 Lunch Instructions You will be given a voucher to eat at the University Residence Cafeteria You are expected to get back by 1:00pm If you get lost or need directions let us know Have a good lunch

73 7. Tips for Mobile Development

74 Tips for Mobile Development Attention to detail is important: ( TextBox1 is not the same as textbox1 or Text Box 1 ) Lots of time will be spent troubleshooting & testing Don t let this discourage you Enjoy the challenge, impress your friends, and never give up on troubleshooting the application Save often

75 Tips for Mobile Development Have Fun!

76 8. Creating your first app Talk to Me

77 Reset Connection

78 Close application in Phone then open MIT AI2 again

79 [2] [1]

80 Development Interface

99 [1] [2] [3]

100

101

102

103 Downloading Application

104

105

106

107

108

109

110

111

112

113

114

115 Distribute [1] [2] [2]

116 9. Math App Challenge Calculator

117

App Challenge For each member of your group work on a separate math problem Member 1: (Add) +2= Member 2: (Multiply) x 2= Member 3: (Divide) / 2 = Member 4: (Subtract) - 2=

118 App Challenge For each member of your group work on a separate math problem Member 1: (Add) +2= Member 2: (Multiply) x 2= Member 3: (Divide) / 2 = Member 4: (Subtract) - 2= Member 5: (Exponent) ^ 2 = Member 6: (Multiply) x 4= Member 7: (Subtract) 4= Member 8: (Multiply) x 5= Example: (Multiply) [User Input is 3 ] x 2 = [Answer is 6] User Input App Output

119 ANSWER

120

121 10. Bounce Ball App

122 Ball Bounce: A Simple Game app

123 Name your project

124 Set the Screen so that it does not scroll

125 Change the Height and Width of the Canvas to Fill Parent

126 Add a Ball

127 Open the Ball1 Drawer to view the Ball's blocks.

128 Drag out the Flung Event Handler

129 Set the Ball's Heading and Speed. First get the setter blocks.

130 Plug the set Ball1.Speed and set Ball1.Heading into the Fling event handler

131 Set the Ball's speed to be the same as the Fling gesture's speed

132 Set the Ball's heading to be the same as the Fling gesture's heading

133 Test it out

134 Why does the Ball get stuck on the side of the screen?! After flinging your ball across the screen, you probably noticed that it got stuck on the side. This is because the ball's heading has not changed even though it hit the side of the canvas. To make the ball "bounce" of the edge of the screen, we can program in a new event handler called "When Edge Reached".

135 Add an Edge Reached Event

136 Go back into the Ball1 drawer and pull out a Ball.Bounce block.

137 Add the edge value for the Ball.Bounce block

138 Your final blocks should look like this. Now test it out!

139 ALWAYS Test it out!

140 How would you extend this app?

141 There are many ways to extend this app Here are some ideas... but the possibilities are endless! Change the color of the ball based on how fast it is moving or which edge it reaches. Scale the speed of the ball so that it slows down and stops after it gets flung. Give the ball obstacles or targets to hit Introduce a paddle for intercepting the ball, like a Pong game Visit the App Inventor website to find tutorials that help you extend this app, particularly the Mini Golf tutorial.

142 11. User Experience

143 Lean User Experience Assumptions Hypotheses Outcomes Personas Features

144 Assumptions Have a Problem Statement Define Constraints Define Issues Ask WHY? Goals of the Product What do you want to achieve as a team?

145 Hypotheses/Personas We believe [This statement to be true] We will know we re [right/wrong] when we see the following feedback from the user. Personas are models created to represent users of the system We can use proto-personas

146 Proto Personas 1 Sketch and Name 2 Behavioral Demographic 3 Needs 4 Potential solutions

147 Features We will For In order to achieve [Create this feature] [this persona] [this outcome]

148 12. Other tutorials

149 Tutorials Go through a tutorial of your choice as a group or individually Select Basic level tutorials

150 appinventor.mit.edu/explore/ai2/tutorials

151 appinventor.mit.edu/explore/ai2/tutorials Have Fun!

152 Getting Started

153 13. Getting Started Register as an individual for the global competition. Start thinking about community issues your team could address Check out some of last years top apps: results/ Continue with the App Inventor tutorials 6

154 Your Community Develop a mobile app that solves a problem in your community. 5

155 Deliverables App Source Code 3-5 Screenshots of your app 4-minute Pitch Video 2-minute App Demo Video Business Plan (in PDF format) 100-word App Description Judging rubric in the workbook 7

156 Planning Weekly meetings will be Wed 7-9 You will need to meet outside of our weekly Wed sessions to complete the project Decide when and where your team wants to meet. Stay on track by committing to designated times and consistently showing up. If you miss a week we distribute all presentations to catch up 7

157 Communications Join our facebook group Technovation Ottawa Read your s!!! Meeting info, logistics, lessons, updates Mentors will be assigned and communicated week of January 25 th Next meeting Feb 3 at IBM You will receive workbooks at that meeting 6

Technovation 2018 Hack Day

Technovation 2018 Hack Day Hack Day Trainer: Ahmed Career pathway through Engineering B. Eng. in Software Engineering Lakehead University Project Management Office IBM (Automation, Legal Deliverables )