mb_icon.jpg

App Inventor Workshop

Fall 2018

Mission Bit + Rudsdale

Event Details + Logistics

Date:                 Thursday, September 20, 2018

Time:                 9:30am - 11:30am

Location:         Rudsdale Continuation School

8251 Fontaine St, Oakland, CA 94605, USA


Agenda

Intros and icebreaker - 2 minutes

  1. Introduce myself and Mission Bit
  2. Show tutorial and ask people to create an account

Part 1: Create an account

  1. Navigate to http://ai2.appinventor.mit.edu/ and follow the instructions to create an account.
  2. The Component Designer vs The Blocks Editor

Part 2: Create a Homepage

  1. Let’s start with the UI for the homepage.
  2. In The Component Designer, select “Screen1” in “Components”
  3. Now we can edit the Screen1’s properties:
  1. Change the AlignHorizontal to center
  2. Change the BackgroundColor to anything you want (yellow)
  3. Uncheck the TitleVisible box
  1. Let’s add a title to our app. Inside of “Palette” >> “User Interface” find a “Label” and drag it into “Screen1”
  1. Check “FontBold”
  2. Change the “FontSize” to 32
  3. Change the “Text” to “Meme Generator”
  4. Change the “TextColor” to anything you want (default)
  1. Now we’ll add an image to our homepage.
  1. First we need to upload an image. You can download your own from Google or from your phone.
  2. Go to “Media” and click “Upload File…”. The “Choose File” >> Select the image that you want >> “Open” >> “OK”
  3. From “Palette” >> “User Interface”, drag “Image” into the Screen1 canvas.
  4. In “Properties,” select “Fill parent…” for both the “Height” and “Width”
  5. Select the file that you want to use in “Picture”
  1. Finally, let’s create a button to launch the Meme Generator.
  1. Drag a button from the Palette into the canvas.
  2. Select “FontBold” and change the “Text” to “Click to Start”
  1. At this point, your app should look something like this:

Part 3: Create the Main screen

  1. Click on “Add Screen …” at the top of the page, and then “OK”

  1. Change the “Title” of “Screen2” to “Meme Generator”
  2. Get 2 “HorizontalArrangement” from Palette >> Layout
  1. Change AlignHorizontal to center in both of them
  2. Change the Width to “Fill parent…” in both of them
  1. In the first HorizontalArrangement, we will need 3 buttons:
  1. An “ImagePicker” from Palette >> Media
  1. Change the “Text” to “Upload image”
  1. A “Camera” Button
  1. In Components, rename to “CameraB”
  2. In Properties, change the “Text” to “Camera’
  1. An “Add Text” Button
  1. In Components, rename to “TextB”
  2. In Properties, change the “Text” to “Add Text
  1. A “Home” button
  1. In Components, rename to “HomeB”
  2. In Properties, change the “Text” to “Home
  1. In the second HorizontalArrangement, we will need 2 items:
  1. A “TextBox” from Palette >> User Interface
  1. Change the “Text” to “Upload image”
  1. An “Add Text” Button
  1. In Components, rename to “TextB”
  2. In Properties, change the “Text” to “Add Text
  1. To make the camera work, go to Palette >> Media and drag a Camera component. Drop it anywhere in Screen2
  2. Then go to Palette >> Drawing and Animation and grab a “Canvas” component. Drop it below the second HorizontalArrangement.
  1. Change the FontSize to 32 and the color to Orange
  1. Congrats! We’re all done with the UI. At this point your app should look like this:

Part 4: Time to Code!

  1. Select Screen1 at the top

        

  1. First we’ll create the code to make the Screen1 button go to Screen2.
  1. In Blocks, select Button1 >> “When Button1.Click do”. Drag that block into the Viewer.
  2. Then drag “open another screen  screenName” from Control.
  3. And drag the first block “ “ from Text. Write “Screen2” inside the quotation marks.
  4. Fit them together to look like this:

        

Part 5: Some more coding….

  1. Select Screen2 at the top

        

  1. Now create the same code to go from Screen2 to Screen1.
  1. In Blocks, select HomeB >> “When HomeB.Click do”. Drag that block into the Viewer.
  2. Then drag “open another screen  screenName” from Control.
  3. And drag the first block “ “ from Text. Write “Screen1” inside the quotation marks.
  4. Fit them together to look like this:

        

  1. Make the camera button call the camera action.
  1. From Blocks >> CameraB, select the first item: “when CameraB.Click do”
  2. From Blocks >> Camera1, select the second (purple) item: “call Camera1.TakePicture”
  3. Fit them together like this:

        

  1. When you take a picture, make that the background image for the canvas,
  1. From Blocks >> Camera1, select the first item: “when Camera1.AfterPicture do”
  2. From Blocks >> Canvas1, select one of the green “set” items: “set Canvas1.BackgroundImage to”
  3. In the Viewer, scroll over “image and select “get image” (see image below)

        

  1. Fit them together like this:

        

  1. When you upload a picture, make that the background image for the canvas:
  1. From Blocks >> ImagePicker1, select the first item: “when ImagePicker1.AfterPicking do”
  2. From Blocks >> Canvas1, select one of the green “set” items: “set Canvas1.BackgroundImage to”
  3. From Blocks >> ImagePicker1, select one of the light green “get” items: “get ImagePicker1.Selection”
  1. Add text to your image.
  1. From Blocks >> TextB, select the first item: “when TextB.Click  do”
  2. From Blocks >> Canvas1, select one of the purple items: “call Canvas1.DrawText”
  3. From Blocks >> TextBox1, select one of the light green “get” items: “get TextBox1.Text”
  4. From Blocks >> Math, get 2 number blocks
  5. Fit them together as follows:

                

Part 6: Testing

  1. Select Screen1 at the top.
  2. Go to Connect >> AI Companion
  3. Open the AI Companion app on your Android phone.
  4. Scan the barcode or enter the code manually, then click “connect with code”
  5. Enjoy!

Part 7:

  1. Announce open enrollment for Mission Bit classes.