mobile Developmentmobile Developmen.pptx

mobile development

1. WHAT IS APP INVENTOR? App Inventor greatly simplifies the way apps are created. It works in your computer’s web browser, so you don’t need to install anything. It even takes care of testing your app since you can check how it works either using the companion app or right on your computer.

2. A BRIEF HISTORY OF APP INVENTOR

3. WHY BUILD APPS USING APP INVENTOR? App Inventor is easy to learn. The interface is intuitive. It will probably only take you a few minutes to get used to how it works . App Inventor lets you build apps very, very quickly. While other apps require months to create , you can create an app with App Inventor in as little as an hour. App Inventor is a fun way to learn programming. The blocks that represent your code look like puzzle pieces, so it’s easy to see where each piece fits. And building the interface of your app just means using drag-and-drop to put elements together.

4. App Inventor helps you in every step of the programming process. It provides the tools you need to test your app, remove bugs, and even publish it to the Google Play Store . App Inventor can be used by programmers too. Apps built with it can call, use GPS, detect movement , record audio and much more. For web developers, this means you can build a mobile app without needing to learn an additional programming language. WHY BUILD APPS USING APP INVENTOR?

5. WHAT APPS CAN YOU BUILD WITH APP INVENTOR? Games. App Inventor makes this possible since it gives you an easy way to make objects move and detect touch actions . Camera Apps. can build apps like Photo Booth Helpful Apps. can create a “DONEs” List, or an app for listing your done achievements for the day. Studying Apps. can create quiz apps, flash card apps . Can even build a “Patience” app to help you use your phone less so you can focus better when reviewing for your exams.

6. SETTING UP APP INVENTOR Step 1: Start App Inventor by signing in with your Google account.

7. Step 2: Download the MIT AI2 companion app.

8. Step 3: Install an Android device emulator ( Optional)

9. LEARNING THE APP INVENTOR INTERFACE THE MENU On the left of the menu are items related to turning your project into an app, as displayed below:

10. Projects : C an build new projects and then save, delete, and import them. It also allows you to save a checkpoint to preserve the progress you have made just in case you make a mistake . Connect : This is where you can find the commands for testing your app. You can test it on your Android device via live testing through Wi-Fi, on an emulator, or by using a USB connection to your device if you don’t have Wi-Fi connection . Build : It is where you can download your finished app or have it published to the Play Store . Help : This section offers basic tips and tutorials that you can read to help you develop your app.

11. On the right side are items that can help you later on as you continue to explore App Inventor. My Projects Click this to show the projects that you have made or are currently working on. Gallery : Go here to see what others have made with App Inventor. Get inspired for your next app ! Guide : This is a comprehensive resource you can refer to for building your app. Report an Issue: If you’re experiencing weird bugs with App Inventor, go submit a support ticket here . Language : Allows to set the language of App Inventor. Account : This is the Google account used to sign into App Inventor. Can also sign out here .

12. The part just below that has a few extra functions worth mentioning : Project Name: Displays your project’s name . Add/Remove Screen: Allows you to add or remove screens as well as switch between them so you can edit the active screen in the Editor . Toggle Button for Designer Editor/Blocks Editor: Allows you to change from the Designer Editor section to the Blocks Editor section.

13. THE DESIGNER EDITOR

14. Palette : Th is section is where you get all the components for building your app. Try clicking a component then drag-and-drop it onto the Viewer at the center . Viewer : Th is is how your app will look like. What you see here is pretty much the same as what you would see on your phone if you installed your app via Play Store . Components : Th is section lists down all the components you added to your app. Selecting one of them lets you change its Properties . Properties : Th is is where you can modify and confi gure the components in your app.

15. THE BLOCKS EDITOR

16. Blocks : look like puzzle pieces and represent a snippet of code you can use to run your app. Similar to the Palette, you just drag-and-drop these into the Viewer to build your app . Built-in enumerates the most-used pieces you’ll need, like control and variable blocks. Components where component-specific blocks are located. You use these blocks to watch for “events” that happen to your app’s components , change the Properties of the component, or return a value from one of the component’s Properties . Any component list holds special blocks that can be used to represent any existing component in your app, as long as it’s of that specifi c type. It’s useful if you want to create more complex app later on.

17. Viewer: Similar to the Viewer of the Designer Editor, this section displays the blocks that you are currently working on. Part of the fun of App Inventor is that you will feel like you’re playing when you’re actually building an app. Backpack : can save, copy, and paste blocks, even sets of blocks, that you’ll often need. Simply drag a block into it for later use. You can even access these saved blocks in another app if you need them . Navigation : Since building an app can take up a lot of screen space, they added a handy tool to let you zoom in and zoom out of the Viewer. If you get lost in your own app, click on the target symbol to snap back to the center of your app.

18. Warnings : This section shows any warnings (yellow triangles) or errors (red circles) in your app. Click on Show Warnings, then click on any of the yellow triangles or red circles on your blocks to reveal a pop up that shows what’s wrong, so you can fi x them . Trash : Don’t be stingy when it comes to putting blocks into the Viewer! You can always delete them by dragging them into the Trash.

19. MAKING A “HELLO WORLD” APP Step 1: Creating a Project Start a new project in App Inventor by going to Projects at the top menu and selecting Start new project in the drop-down menu.

20. You will be asked to name the project. Let’s call it HelloWorld . Always keep in mind that App Inventor doesn’t allow spaces in project names, so make sure you don’t add one or a warning will show up!

21. Step 2: Adding Components to the Design Editor O ur app needs components to capture what the user does with the app as well as to show the output of our app. With App Inventor, we first add the components to our application before in the logic using the Blocks Editor . First, make sure that you’re in the Designer Editor screen.

22. Next, add the button. Simply click and hold the Button item under the User Interface, drag it towards Screen1 of the Viewer section, and then release or drop it.

23. Result

24. Step 3: Editing Component Properties Properties are values that belong to the app and define how it looks and behaves. The Properties shown in the rightmost column of the Designer Editor are always for the active Component, as highlighted in the Components column next to it.

25. Step 4: Adding Blocks to the Blocks Editor Go to the Blocks Editor then grab these blocks from the left column: To change the text, we need a “setter” Block that lets you “set” the Properties of a Component when an app is running. Find and click Button1 in the Blocks column. Find this block, then drag it into the Viewer:

26. We also need a Block that says “Hello World!”. For that, we need a Text String Block that can store the text we need. Under the Built-in section of the Blocks column, click on the Text item. Find this Block and drag it into the Viewer: Lastly, we need a Block that lets us do things when the app starts. When the app starts, it initializes the screen to display the Components you added in the Designer Editor. So the Block we need is this one: Click on Screen1 in the Blocks column, find the example block shown here, then drag it into the Viewer.

27. Step 5: Connecting Blocks Together First, let’s set the value of the Text String block to “Hello World”.

28. Step 6: Testing the App Do this by testing it on an Android device. Go to Connect on the left side of the top menu, and select AI Companion .

29. actual “Hello World” app that we did that’s been tested in the MIT A2 Companion App.

30. WHAT IS USER INTERFACE? An app’s user interface refers to all of its elements that you can interact with. The visual elements are called the graphical user interface or GUI. Components such as buttons, textboxes, and images are all part of an app’s GUI. The user interface also goes beyond the screen, since users can interact with apps using voice commands, photos taken via the camera, and even by tilting the phone.

31. DESIGNING MY SIMPLE FORM Start by creating a new project and name it MySimpleForm .

32. LABELS Labels are components used for displaying text on the screen. It can be used to show instructions, questions , and additional information. It can display titles, scores, stories, articles, and almost any kind of text. drag the label component from the Palette to the Viewer ,

33. Go to the Properties section and change the Text to Enter your Name .

34. TEXTBOX The Textbox is used to capture the user’s name. Textboxes are the blank white boxes you see online wherein you can enter almost anything, from your username to chat replies. drag and drop the TextBox from the Palette to the Viewer .

35. drag in another TextBox to the Viewer . Change value of the Height property to a higher number, such as 100 pixels , then check MultiLine as well.

36. The form should now look like this:

37. Form should now look like the following:

38. CHECKBOX

39. drag a CheckBox from the Palette to the form. In the Properties column, change the Text to Likes Making Apps .

40. PASSWORDTEXTBOX add the PasswordTextBox onto the Viewer and add a Label with Text saying Who is your secret crush?

41. SPINNER Drag the Spinner into the Viewer , then in Properties , add your list of items to the ElementsFromString Property.

42. For its Label , add one with Text that says “Favorite Pen Color”,

43. IMAGES drag the Image Component to the top of the form like this:

44. BUTTONS drag the button onto the end of the form and change the text to Submit.

45. LEARNING ABOUT LAYOUTS under the Layout section of the Palette in the Designer Editor .

46. To arrange components inside a layout, drag the layout you want into the Viewer . Then , drag the Components on top of the layout.

47. HORIZONTAL ARRANGEMENT

48. TABLE ARRANGEMENT

49. VERTICAL ARRANGEMENT

50. use a horizontal layout (the orange box in the above image). Then placed a label onto the horizontal layout, add a VerticalArrangement component to the right of the label . Lastly, filled the VerticalArrangement with the labels, textboxes , and buttons needed.

51. HORIZONTAL SCROLL ARRANGEMENT

52. VERTICAL SCROLL ARRANGEMENT

53. CHANGING COMPONENT PROPERTIES HEIGHT AND WIDTH

54. FONT PROPERTIES

55. COLORS

56. ALIGNMENT

57. WHAT ARE EVENTS? COMPONENTS CAPTURE EVENTS Components are what an app uses to capture events, and there are two types of components : visible and non-visible . Visible components are what are seen on the screen: buttons, textboxes, and images are examples of these. These components often trigger events when these are interacted with on screen, such as when one of these is touched or when text is entered in these.

58. Non-visible components, on the other hand, are the sensors that are built into the device which do not show up on the screen: the LocationSensor , SoundRecorder , and clock are all examples of non-visible components . These can capture events that happen in the background, such as the current time and current GPS location. These can also be used to capture events that happen outside the screen, like the phone being tilted, texts coming in, and images taken by the camera.

59. THE DIFFERENT TYPES OF EVENTS USER-INITIATED EVENT most familiar event. The event that occurs when the app is told to do something through such inputs as touch, voice commands, or button clicks. These kinds of events are used to record information, change preferences, or navigate around the app . INITIALIZATION EVENT happens when the app starts up, either when it is connected via Companion App or when its icon is tapped. This is often used to set up initial values of properties and variables or to reset the screen for a new user.

60. TIMER EVENT Event that captures the passage of time. Uses the clock component to wait for a specific time or date to happen, such as having a sound play at 5 p.m. It can also wait for a certain amount of time to pass before activating something, such as making a phone snooze every 5 minutes before sounding another alarm . The events can execute once or can be set for regular intervals, such as every day or every hour. Timer events are also used to create animations, perform an action on a regular basis, and trigger alarms .

61. ANIMATION EVENT This type of event is triggered when objects interact with each other within the canvas component, such as when balls collide with each other or when an ImageSprite reaches the edge of the canvas. This event is thus most often used in games and other interactive apps . EXTERNAL EVENT This type of event happens when the app receives data from an outside source. Incoming calls and text messages , as well as GPS data from satellites, are all examples of external events. External events are often used to capture data from other devices, to notify when websites have new data, or to automate certain activities in response to that data .

62. EVENTS TRIGGER BEHAVIORS Apps are event-driven, as events are needed to have these do something. Stated another way; without events , an app will do nothing. What an app does in response to an event is called a Behavior . It’s the part of the app which is configured using blocks in Blocks Editor. While App Inventor made capturing events super simple by using components. Behaviors can be as simple as changing the text on a button to something as complex as syncing databases between multiple devices. To create new behaviors, an event handler is needed.

63. INTRODUCTION TO EVENT HANDLERS: THE WHEN-DO BLOCK

64. HOW TO CHANGE PROPERTIES VIA SETTER BLOCKS Step 1: Create a new project. Name it “ LikePizza ”

65. Step 2: Add a Button On the Designer view, go to Palette . Under User Interface , click and hold Button then drag and drop to the Viewer Screen1 .

66. Step 3: Change the initial text Go to the Properties section of the Designer view , which will show the initial properties set for Button1. Scroll down until the Text property is visible , as shown in the following illustration.

67. Change the text of the button to “ Do you like pizza? ” The changes made will be visible in Screen1 in the Viewer .

68. Step 4: Add a When-Do Block Now, go to the Blocks editor and click Button1 in the Blocks column. Find the When-Do block that says When Button1 Click do. Drop that block into the Viewer .

69. Step 5: Add the Setter Block Click Button1 under Screen1 again. Now, scroll further down until the green block that says set Button1 Text to is visible, then drag that block to the Viewer .

70. Go to Built-In > Text and select the empty text box. Drag this to the Viewer and make it say “I like pizza,” just like in the earlier blocks.

71. Step 6: Assemble the blocks altogether Connect the blocks together

72. STORING DATA USING VARIABLES INITIALIZING VARIABLES open up MySimpleForm project go to the Blocks editor . Open the Built-in section and click on Variables .

73. Drag the Initialize Global block into the Viewer . Click on the name and change it to fullname .

74. Values for variables

75. INCREMENTING A VARIABLE Create this block in Blocks editor .

76. USING EXPRESSIONS TO SET A VARIABLE To create this expression, use the max block and some basic math:

77. DISPLAYING VARIABLES

78. STORING DATA IN LISTS Variables can hold values, true. But sometimes, you don’t have the time to initialize all the variables you need. It might even be impossible if you need to work with hundreds of variables in your app. What if you want to : Look up a specific value from a large data set? Sort values in the order you want? Change hundreds of values quickly?

79. INITIALIZING LISTS We can initialize our list in two ways:

80. MUTATING BLOCKS The make a list block is what you call a mutator block . It can “mutate” depending on how it’s assembled. These are blocks that can be identifified by its blue gear icon

81. ADDING AND REMOVING ITEMS

82. GETTING AN ITEM’S INDEX Delete the last item from users ,

83. GETTING ITEMS FROM A LIST

84. MAKING DECISIONS USING CONDITIONALS CREATING BOOLEAN EXPRESSIONS Boolean expressions use blocks to compare the values of one or more variables or properties against a certain condition. Unlike the other expressions, this only returns two values: true or false . It returns true if the condition holds, and false if it does not.

85. Oftentimes, we need to know if a string has text or is blank. For this, we use the is empty block. The and block returns true if the expressions in the slots are all true, otherwise, it returns false . The or block returns true if the expressions in the slots have at least one true result, otherwise, it returns false . T he not block flips the value of the Boolean expression attached to it. It returns true if the attached block is false, and false if the attached block is true.

86. MAKING DECISIONS WITH THE IF-THEN BLOCK The then block checks the Boolean expression plugged into the “if ” slot. If it is true, the app will perform the commands in the “then” slot. If it is false, it will continue to the next block or do nothing if there are no other blocks left.

87. MAKING MORE COMPLEX DECISIONS USING IF-THEN-ELSE IF BLOCKS Drop a new if-then block onto your Blocks editor viewer . Next, mutate it into an if-then-else block.

88. LOOPING OVER LISTS The for each item block lets us iterate, or go through, each item in the given list. It performs the commands in the do slot for as long as there are items in the list. LOOPING WITH THE “FOR EACH ITEM” BLOCK

89. LOOPING WITH THE “FOR EACH NUMBER” BLOCK

90. The for each number iterates using a number instead of going through a list. And because it uses numbers , we can use that as our index to iterate over the list. The slots in the for each number block are pretty straightforward . The from slot is the starting number. We start from the beginning of the list, index position 1. The to slot is the fi nal number. We will use the last index which is equal to the length of the list. Lastly , the by slot is the increment value added to the number variable each time it iterates.

91. LOOPING WITH THE WHILE-DO BLOCK

92. HOW THE GAME WORKS The app needs to do the following things to make this fun and exciting: We need to add a ball to the screen and make it move in the direction we want. We also want the ball to bounce off the edge of the screen, like a regular ball. We also need to detect when someone “catches” the ball. Catching means the player successfully tapped on the ball as it zoomed across the screen. To make the game fun, we need to add a few mechanics for sounds and colors. The game also needs to be at the right level of difficulty. Not too hard at the start, but harder as the game progresses. Lastly , we need a way to keep track of the number of catches a player makes before giving up. Part of the fun in a game is trying to beat someone else’s high score!

93. ADDING A BALL TO THE SCREEN The Ball is under Drawing and Animation in the Palette column of the Designer editor . Try to drag it into the Viewer .

94. MAKING THE BALL MOVE

95. BOUNCING THE BALL Assemble these blocks in the Block editor

96. CATCHING THE BALL

97. RESPONDING WITH INSTANT FEEDBACK Add the Sound Component to your app via the Designer editor . It can be found in the Media section of the Palette .

98. add the right sound effect to the Sound Component.

99. Add this block set from Colors to your Block Editor Viewer :

100. Put it all together the sounds and colors under the TouchDown block

101. ADDING THE RIGHT LEVEL OF DIFFICULTY

102. KEEPING A SCORE add a Label component to the top of the screen

103. Set the initial value for its Text Property to 0. Modify the Screen Initialize block

104. add one to the value of the Label . The final TouchDown block

105. WHAT IS A DONES LIST? List of the things that the new done list app should do: need a way to add text to the list, like a form. need to display the “ dones ” we’re written down. To make it a bit more satisfying, let us add ways to show that we’re finished the dones list for the day . It should display a victory message as a reward for our accomplishments today. record our dones list over time. And when finished our dones list , save it in the app. need a way to access the saved lists to review past successes and to have a copy of the text from the previous done list.

106. CREATING A SIMPLE FORM add a VerticalArrangement component

107. add a textbox and button,

108. Change its Properties to match Change the Height and Width to make the text readable. You can also add a Hint . Assign “What did you accomplished today?”

109. For the Button , just change the text to be more descriptive. Type in “Add to Dones ” in the Text property

110. SAVING THE DONES TO A LIST Switch to the Block editor and create a block

111. SHOWING THE DONES LIST add a Label component inside the VerticalArrangement layout, on top of the textbox,

112. remove the Text value in the Properties :

113. To show the dones list in the label, you could do the following

114. A QUICK WORD ABOUT USABILITY Usability refers to how you can easily use something, whether it’s a tool, a device, or an app. When making an app, your goal is to make it easy to use and intuitive as possible. The app should do what the user expects it to do.

115. Some questions you can ask yourself (and users) to check if your app is usable : How easy is it for the app perform basic tasks the fi rst time it’s used? How fast does it perform tasks on the app? How many mistakes do the users make while using the app? How easy is it to fi x the mistakes in the app? How do the users like the design?

116. FIXING THE LIST Display the dones list in a way that is readable like a real list. Remove the text from the TextBox once it is added to the list. Check if there is text in the TextBox before adding to the list.

117. MAKING THE LIST READABLE

118. combine these blocks together in the Block editor : drag the following blocks into the Block editor .

119. To add all the blocks together , you will need a join block ,

120. The final block with the getter replaced with the new join block

121. Using the mutate join block once more with one other slot at the top and another at the bottom.

122. VALIDATING AND CLEARING THE TEXTBOX Add the last pair of blocks to your when .Click block ,

123. an example of how the final form of the block

124. For the test:

125. CREATING THE VICTORY MESSAGE Add the following components to your screen : Add a new VerticalArrangement component that contains an Image and a Label . add a Sound component that will play a sound saying “congratulations!”.

126. GOING BACK TO YOUR DONES LIST To do this, i rst show VerticalArrangement2 and add a button at the bottom

127. Add a new Button

128. GOING BACK TO YOUR DONES LIST To do this, first show VerticalArrangement2 and add a button at the bottom:

129. SAVING THE DONES LIST First, you need a couple of non-visible components. Drag the Clock from the Sensors section of the Palette onto the screen. Do the same for the TinyDB component from under Storage.

130. go to the blocks editor and assemble the blocks TinyDB , a database that lets you record information in your app for later use

131. SHOWING PAST DONES LISTS In the Designer editor , add the following components to the app

132. The Viewer should look like what is shown

133. add the contents of the database into the ListPicker

134. To show the dones list for that timestamp, use AfterPicking this time around.

135. screen after picking a timestamp

136. Assemble the following blocks, as shown, in the Blocks editor

137. PLANNING FOR THE “PATIENCE” APP When you want to take a break from your phone, put it down and open the app. Encourage your friends to do the same and put your devices in a public area, like on the dining table . The screen will turn a bright green and warn you to keep away from the phone. If you don’t, it will trigger an alert and show an angry red screen !

138. PLANNING FOR THE “PATIENCE” APP Play a boardgame , read a paperback book, or meet with friends. You can do whatever you want during this time, but make sure it’s something that’s offline—better if it’s something you do with other people . After the break is over, the app’s alerts will be turned off and you’ll get a victory image. You can now use your phone like normal once again.

139. DETECTING SCREEN TOUCHES

140. CREATING THE ALERT

141. SETTING UP THE ACCELEROMETER add the AccelerometerSensor from Sensors in Palette to your Viewer .

142. Initialize the Variables

143. CRAFTING PROCEDURES In the Blocks editor , click on Procedures and drag the first block onto the Viewer :

144. Assemble this from the new Procedure block

145. DETECTING MOVEMENT Add these blocks to Block Editor viewer :

146. CHECKING FOR MOVEMENT To check for movement, the app needs to know if the sensor value has changed. To do this, compare the current value versus the initial value for each dimension by getting the difference between the two, as seen in the “if ” slot in the previous block example.

147. USING AN OFFSET The offset lets the app respond to significant changes by ignoring smaller differences in value. In the case , if the absolute value exceeds the offset, triggerAlert is called. The initial value used above was 2 , but feel free to change it to another number if your device doesn’t catch the movement properly.

148. TESTING THE APP Test the app again using the companion app. Since this new event handler can detect movements, put down the device immediately after scanning the code on the screen. Another way to test it is to put device down then enter the code manually via keyboard. That way, it will not unnecessarily trigger the alert.

149. ADDING A TIMER Go to the Designer editor and add the Clock component to the Viewer :

150. Switch to the Blocks editor . Compose the following set of blocks:

151. Go to the bottom left corner of the Blocks editor to upload the file .

152. STOPPING THE TIMER

153. KEEPING THE SCREEN ON

154. IDENTIFYING GOOD APP IDEAS SOLVE YOUR OWN PROBLEMS IMPROVE EXISTING APP ASK FRIENDS ABOUT THEIR PROBLEMS HELP PROBLEM SOLVERS LIKE YOURSELF PLANNING HOW THE APP WORKS

155. PLANNING HOW THE APP LOOKS

156. EXPORTING A PROJECT Select Export selected project (. aia ) to my computer from the Projects menu.

157. IMPORTING THE PROJECT choose Import project (. aia ) from my computer .

158. Choose the . aia fi le you want to import, like in the following example:

159. SHARING THE APP TO ANDROID USERS CHANGING THE ICON

160. SAVING THE APP TO YOUR COMPUTER Choose App (save . apk to my computer) under the Build menu.

161. INSTALLING THE APP ON THE DEVICE Send the . apk fi le to the device that will install the app. Take note that this file can be a few megabytes in size , so you need some patience to send it over the Internet.

162. To publish your application in the App Inventor gallery, first go to My Projects . Select the app you want to publish to the gallery by ticking the check box beside it.

163. Next, click Publish to Gallery and fill out the form.