This week we will build an app has three buttons to launch our favourite websites.

• The app will consist of three buttons across the top. The buttons will launch the Google website, the YouTube website and our own Athenry CoderDojo website.
• We will also change the icon of the app from the default one supplied by App Inventor.

Getting started

Begin by dragging and dropping a HorizontalArrangement control from the Palette onto the screen. Rename this control to hsaButtons

Drag three buttons from the Palette and drop them onto the HorizontalArrangement control. Rename the buttons to btnGoogle, btnYouTube, btnCoderDojo. When dropping the buttons onto the HorizontalArrangement, try to ensure the buttons are overlapping. This will make sure they appear side by side.

Drag and drop a WebViewer control from the Palette onto the screen. Rename this control to wbvBrowser.

Creating the scripts

1. Click the Blocks button.
2. Select the btnGoogle Block.
3. Select the “when btnGoogle.Click do” script.
4. Select the wbvBrowser Block
5. Select the “call wbvBrowser.GoToUrl” script
6. Drag the “call wbvBrowser.GoToUrl” script and drop it into the “when btnGoogle.Click do” script.
7. Drag a blank Text block and drop it at the end of the “call wbvBrowser.GoToUrl” script.
8. In the blank Text Block type the full url of Google is http://www.google.ie
   1. Please remember to include the http://
9. Test your app using an emulator or a mobile device

Launching the other web sites

1. Repeat the steps above for the YouTube button and the CoderDojo button.
2. The full url for YouTube is http://www.youtube.com
3. The full url for the Athenry CoderDojo is https://cdathenry.wordpress.com

Changing the default icon

A number of web sites exist that allow you to use free icons. Today we will use http://www.iconarchive.com .

In this website you can search for your favourite icon.

• For App Inventor the recommended icon size is 48 pixels * 48 pixels.
• Save your favourite icon to your machine.
• In App Inventor click the Designer button.
• Upload the icon to your App Inventor project.
• Select the Screen1 component.
• Change the Icon property to the newly uploaded icon.

Please note: The new icon will only be visible when the app is installed on a mobile device.

Full steps are included in the following link

App Inventor Week 4 – FavouriteBrowser

This week we will build an app that will count down the number of days, hours minutes and seconds to Christmas.

The app is modelled on the web site http://www.yourchristmascountdown.com/ .

Getting Started

To create this app you need to drag and drop a two label components on to the screen. The first label is called lblTitle; this component fills the width of the screen. This label will be the Title displayed. The second label lblTimer also fills the width of the screen and is the countdown text in the app.

You also need to drag and drop a Clock component onto the screen. This component is not visible and will appear under the screen, all the default settings for this component are ok

Initializing Global variables

Click on the Blocks button to open the script editor. In the script editor a number of global variables must be created and initialized. The first variable is MillisecondsToChristmas, the initial value for this variable is zero. The other Global Variables are listed below and they are all set to zero.

• DaysLeft
• HoursLeft
• MinutesLeft
• SecondsLeft
• MillisecondsForNow

When app starts calculate number of milliseconds to Christmas

When the app starts we use the Clock component to calculate the number of milliseconds to Christmas, this is stored in the Global variable MillisecondsToChristmas. Please note that the number of milliseconds calculated is not from the current time to Christmas but rather from Jan 01 1970. We will calculate the number of milliseconds for the current time later. Once we have this value we will subtract it from the number of milliseconds to Christmas.

Using the Clock Timer event to count down

The Clock component has a “Timer” event that fires every second. In this event we will calculate the number of milliseconds for the current time. This is stored in the Global variable MillisecondsForNow. The number of milliseconds for the current time is subtracted from the number of milliseconds to Christmas to give the number of milliseconds between now and Christmas. This is converted to seconds and stored in a local variable NumberOfSeconds. A number of local variables are needed

• SecondsInMinute = 60
• SecondsInHour = 3600
• SecondsInDay = 86400
• MinutesInHour = 60
• HoursInDay = 24
  

Using the Clock Timer event to count down

In order to calculate the number of days, hours, minutes and seconds left to Christmas we use a couple of Math scripts

• Modulo  – returns  the remainder of a division
• Floor  – returns the greatest integer that’s less than or equal to the given number.

The script to calculate the Days, Hours, Minutes and Seconds is displayed below.

Full steps are included in the following link

Week 3 – Countdown App

This week we will create a Kitty App

When you swipe your finger over the picure of the Kitty the phone will play a meow sound and vibrate.

We begin by

1. Creating a new project
2. Uploading the picture of the Kitty to the App Inventor project
3. Uploading the meow sound to the App Inventor project
4. Drag and dropping a canvas to the app and changing the Background image
5. Adding a script to play the meow soundand vibrate the phone when you swipe a finger over the picture of the Kitty

Week 2 – Kitty App

Today we are going to use App Inventor to create Android apps. App Inventor is created by MIT (Massachusetts Institute of Technology) who are the same people who created Scratch.

App Inventor is browser based and the projects are stored entirely in a cloud at MIT.

Currently the supported browsers are:

• Mozilla Firefox 3.6 or higher
• Note: If you are using Firefox with the NoScript extension, you’ll need to turn the extension off. See the note on the troubleshooting page.
• Apple Safari 5.0 or higher
• Google Chrome 4.0 or higher
• Microsoft Internet Explorer is not supported.

App Inventor works on the following Operating Systems

• Windows XP, Windows Vista, Windows 7
• Mac OS X 10.5 or higher
• GNU/Linux: Ubuntu 8 or higher, Debian 5 or higher

The following slides cover the steps to install Firefox and the App Inventor software.

Week 1 – How to install App Inventor

The following slides cover the steps to update the App Inventor software.

Week 1 – How to update App Inventor

Once the software has been installed we will create our 1st app using App Inventor.

Week 1 – Speaking App