O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Youth-Led Tech Curriculum Day 21

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Youth-Led Tech Curriculum
Day 21: App Inventor Basics
Content Goals: Youth will learn the components of building an app an...
2
10:45 AM App Inventor Basics
The Designer
The Designer allows you to choose functionality and to change the
look and fee...
3
Use the Designer to create the user interface – the design of your
app. When you are done, it should look something like...
Anúncio
Anúncio
Próximos SlideShares
Production of music magazine 2
Production of music magazine 2
Carregando em…3
×

Confira estes a seguir

1 de 13 Anúncio

Youth-Led Tech Curriculum Day 21

Baixar para ler offline

“Youth-led Tech | Summer 2015” is a technology mentoring program in five Chicago neighborhoods: Austin, Englewood, Humboldt Park, North Lawndale, and Roseland. As part of this program, we’re teaching various classes on digital skills. We’ve open sourced our curriculum through a series of blog posts.

We cover an introductions to WordPress, Wordpress dashboards, themes, how to post, and how to add media to your WordPress site. We also have set time aside each day for students to work on their typing skills.

These are minute-by-minute guides on teaching the youth. If you want to start your own Youth-Led Tech program, this is the place to start. At Smart Chicago, we are dedicated to sharing all of our methods. Not just code published to Github (though we do that, too), but whole swaths of templates, resources, and guides that help spread the practice of community technology.

“Youth-led Tech | Summer 2015” is a technology mentoring program in five Chicago neighborhoods: Austin, Englewood, Humboldt Park, North Lawndale, and Roseland. As part of this program, we’re teaching various classes on digital skills. We’ve open sourced our curriculum through a series of blog posts.

We cover an introductions to WordPress, Wordpress dashboards, themes, how to post, and how to add media to your WordPress site. We also have set time aside each day for students to work on their typing skills.

These are minute-by-minute guides on teaching the youth. If you want to start your own Youth-Led Tech program, this is the place to start. At Smart Chicago, we are dedicated to sharing all of our methods. Not just code published to Github (though we do that, too), but whole swaths of templates, resources, and guides that help spread the practice of community technology.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (15)

Semelhante a Youth-Led Tech Curriculum Day 21 (20)

Anúncio

Mais de Smart Chicago Collaborative (20)

Mais recentes (20)

Anúncio

Youth-Led Tech Curriculum Day 21

  1. 1. Youth-Led Tech Curriculum Day 21: App Inventor Basics Content Goals: Youth will learn the components of building an app and will start building their own app. Leadership Goals: Team-building activities with a focus on communication Materials: Worksheet 10:00 AM Sign-in Use the online attendance sheet to mark students as present and note any issues. 10:05 AM Mood Check/Icebreaker Question It’s important to start every session with an opening activity, such as a Mood Check-in, where students state their mood on a scale of 1-10. We often pair this with an icebreaker question that each student answers. 10:15 AM Screamer In a circle, people look at ground, then on "heads up" look into someone else's eyes. If 2 people are looking at each other, they scream and are both out. Continue to see who is last - hilarious.
  2. 2. 2 10:45 AM App Inventor Basics The Designer The Designer allows you to choose functionality and to change the look and feel of your app. It has four parts: Palette, Viewer, Components, and Properties. Properties. With the Palette, you choose your components (buttons, phone calls, texting, camera, location sensors, and more). Whatever you want your app to do, just drag from the Palette to the Viewer. The Viewer organizes your components, and shows you what they will look like on the phone. The Components section lists all the components in your app, in the order they appear in the Viewer. You can click the components to rename or delete. There’s also a Media section, which you can use to upload images and audio. With Properties, you customize the components. Click the component, and you can change the color, text, height, visibility, and more. Blocks The Blocks are the back-end, where we tell the app what to do. Each component from the palette has a set of blocks that you can use to change the properties of each block, and add new functionality to your app. There are also blocks that are built in, and come with every app. 11:10 AM Designer: Set up the components
  3. 3. 3 Use the Designer to create the user interface – the design of your app. When you are done, it should look something like the picture below. To build that user interface, drag these components from the Palette into the Viewer, and change their properties. Component type Palette group What you will name it Purpose/ Properties Label User Interface headerLabel The name of the app/ set text to “Hip Hop History”, set background color to red, set text color to white, set width to fill parent Label User Interface titleLabel holds the name of the musical genres (e.g., blues, funk) you’ll be featuring/ set text to “Genre”
  4. 4. 4 Label User Interface locationLabel holds the name of the location/ set text to “Location” Button User Interface PlayButton clicks to play audio and show the image of the genre/ set width and height to 50px Vertical Arrangement Layout Vertical Arrangement Give some layout design/ drag the titleLabel and put it inside, then the LocationLabel inside Horizontal Arrangement Layout Horizontal Arrangement Give some layout design/ set width to fill parent, then drag the PlayButton inside and the vertical arrangement (they should be side by side) WebViewer User Interface WebViewer1 Shows the map/ Set width to fill parent, and height to 300px Label User Interface yearLabel Holds the year of the genre/
  5. 5. 5 set text to “Year” Slider User Interface Slider1 Slide to change content/ set width to 300px, set min value to 1, set max value to 5, set ThumbPosition to 1, Player Media Player1 Plays Audio 12 NOON Lunch 1:00 PM Avoiding 21 Get into a circle, the group is going to count around the circle up to 21. The person who is forced to say 21 is “out”. Each person can say one, two, or three numbers in a row. For example, 1st Person “1,2”; 2nd Person “4,5,6” 3rd Person ,“7”, etc. 1:20 PM Typing club 1. Log on to http://youthledtech.typingclub.com 2. Allow youth to practice/develop their typing skills. This could be a useful time for facilitators to catch up on paperwork or setup for the next activity 3. Facilitators can track the students progress to make sure that they are actually on the right site 2:10 PM Break 2:20 PM Upload Media Remember, our app traces musical genres that laid the foundation for Hip Hop by displaying an image representing each genre and sampling a piece of music from that genre. To play the music and show the image, you need to upload them into your app. You add the media elements by clicking Upload. Click here to download the audio and images used in this tutorial, but as noted at the beginning, you can always change these elements to fit your project’s focus (or your sense of music
  6. 6. 6 history!). Blocks: Let’s Program So…we want content to change when the user moves the slider. But what content do we want to change? We want the image, audio, location, and time period to change. How does the app “hold”all that information? With variables and lists. What’s a Variable? Variables are ways to store values to use later. A global variable is a variable that can be accessed anywhere in the code. Global variables are created using the “initialize global name” block found in the Variables drawer. This block allows you to create a new variable, to which you can assign any value: This block provides a way to get any variables you may have created. Once a variable (v) is selected, the user can attach a new block and set (v) to a new value. What’s a List? A list is a way to organize multiple variables or items. Why Would We Use a List? For each time period in our app, we want the image, location, title, and time period to change. We need a way to group and order all those items.
  7. 7. 7 A list allows us to organize each piece of information, and move up and down the items. We want the time period to change, so let’s start with that list first. Start by creating a variable, and name it yearList. Then attach a “make a list”block (from built-in text), click the dark blue square to add a total of 5 items. Then connect a text block (from text) into each socket. Then type in the years (as listed in the image). Make sure that the content is in order. Now create a list for each piece of content that you want to change. The content needs to appear in the same order in every list. Lists – Year, Genre, Audio, Image, Location, Map: Year list – list years : 1920, 1920, 1960, 1980, 1990 Genre list – lists the different genres of music : Blues, Jazz, Funk, Rap, Gangsta Rap Audio list – list the names of the music files : blues.m4a, jazz.m4a, funk.m4a, rap.m4a, Grap.m4a Image list – list the names of the png files : blues.png, jazz.jpeg, funk.jpeg, rap.jpeg, gRap.jpeg Location list- list the name of the locations: Deep South USA, New Orleans, Atlanta, New York, Los Angeles Map list- list the URLs of Google Maps of the locations. You get the URL by going to Google Maps, typing in a location, then clicking the X next to the city name. Next go down to the settings gear in the bottom right, click the Share option and by checking the Short URL you get these URLs: https://goo.gl/maps/JG7QP https://goo.gl/maps/TG6EK https://goo.gl/maps/Ze5yv https://goo.gl/maps/Crv5q https://goo.gl/maps/5DYNY If you click these links, you will see the map in Google Maps. These are the URLs we used, but you should encourage your students to go to Google Maps, and type the location. If you wanted to use different locations, you do the same steps, just type in cities you would prefer. Your completed list should look like this:
  8. 8. 8 Navigating the List: The Index The index tells you where you are in the list. So if the index is 3, then it is referring to the year 1980. If the index is 5, then it is referring to the year 1900′s. Pretty simple, right? Connecting the Components to the List Now that we have multiple lists, we need to connect the lists to the components in the Designer. First we need to think about when the index will change. Which action or event will cause the information to change? There are many events that could trigger the information to change, for example a button clicking or even a timer. In this app, we will be using the slider to navigate among all the content. So let’s look into the Slider component… We want the YearLabel to select an item from the YearList. First grab the set YearLabel.text block – because we want to change the text. Next clock Lists from built in, and grab a select list item block. The select list item block will have two empty sockets – list and
  9. 9. 9 index. For list, we want to connect the corresponding yearList. To do this, we go into variable, grab a get block and click the drop down to select global yearList. Earlier, we introduced the index, which lets you know where you are in the list. If we typed 2, it would go to the second item. But for this app, we want the index to change when the user moves the slider. In App Inventor, we call this the thumb position. The thumb position lets you know where on the slider you are. Let’s click the slider component, grab the light green Slider1.ThumbPosition, and connect to the index socket. For every label component, we want the content to come from the same index in each list, so for each line we will use “Slider1.ThumbPosition” for the index. It should look like this… Connect the Rest For all the labels (yearLabel, titleLabel, locationLabel), we want to change the text. For the Play button we want to change the image, so we click on our Play Button component and select set PlayButton.Image to …then connect the select item. The list will be the imageList. For the Player we want to change the source, so click the player component and drag out the set Player.Source to and follow the same steps as above. What list are you going to connect to? For webviewer.1, we want to change the URL. Click the component and look for WebViewer1.GoToUrl. Follow the same steps as above.
  10. 10. 10 Almost Done! But let’s play some music… Finally, when the PlayButton is clicked, we want to hear a sample of music from that time period. We already connected the audio files to the player source, but we did not yet tell the app when to start playing the audio. Player What do we want to happen? Click the button and the audio plays… So select the PlayButton from the components, then grab the when PlayButton.Click block. Then select the player component and grab the call Player.Start block (it should be purple). Connect these two. It should look like this: Now Test Your App! On your phone, download the AI Companion app. Click Connect, then AI Companion. A QR code should pop up, and scan the QR code or type in the code. You can also download the app, by clicking Build. You can either use the QR code or you can download the app, and email to yourself. Remix it with different information!
  11. 11. 11 3:40 PM Thunder Props reflection 1. Everyone log on to your Twitter account 2. Today we are going to give props to our peers in the #youthledtech program 3. We have created a prompt for you to fill in on your Twitter account and on 3 we will all send our tweets at the same time. a. PROMPT: “My app will address_______ because ___________ #youthledtech” b. Make sure they use the hashtag so that we can view all of the tweets 4. READY?? 5. After you read the prompt give students 1 minute to complete and tell them to raise their hand once they have typed their message. Tell them “DO NOT hit send until I say so.” 6. Once everyone has constructed their tweet then count down 3, 2, 1, SEND!! 7. Read a few tweets from the screen and then do a live Thunder clap. 3:55 PM Sign out Make sure each youth is accounted for.
  12. 12. 12
  13. 13. 13

×