Each year for Hour of Code, I volunteer at the local Middle School to talk to the students about what it is like to be a programmer and do a little bit of programming. This year I plan to demonstrate Xojo Dojo with a Raspberry Pi and show the kids how much fun coding and Xojo programming can be.

My wife teaches 7th grade math so I have a somewhat receptive audience, at least when it comes to middle school students. Of course, I’ll be sure to show off a few games made with Xojo. Asteroid Run was popular last year.

As Xojo developers you have a great perspective on coding, which would be wonderful to share with the youth of today. Most schools would absolutely welcome a guest speaker for a day so if you have a child in school or know someone that works at a school, I encourage you to see if you can help out by volunteering.

Looking for ideas? Here’s what we’ve done for the Hour of Code in past years:

• Hour of Code 2013: Math Facts
• Hour of Code 2013: Spelling Test
• Hour of Code 2013: Recap
• Hour of Code 2014: iOS Doodle
• Hour of Code 2014 Recap
• Hour of Code 2015: Cat Pictures
• Hour of Code 2017: Asteroid Run

Update (Dec 5, 2018):

Finished hour of code with 7th Grade students. They were very excited to learn a bit about coding and see some Xojo-made games.

Also, Xojo Dojo is now available for Mac and Windows. Download either of these from the main Xojo Dojo page.

To share Xojo with Hour of Code, I’ve put together a short 5-part series of videos (less than 25 minutes total) to show how to make a simple game called Asteroid Run.

In Asteroid Run a spaceship flies through space shooting an ever-increasing number of asteroids that are coming at you.

To get started, download Xojo – it’s free!

Asteroid Run Part 1: Initial Setup

In part 1 you will do initial setup and add a scrolling background starfield.

Download project

Asteroid Run Part 2: Add Spaceship

In part 2, you will add the spaceship and allow it to move with the mouse.

Download project

Asteroid Run Part 3: Add Missiles

In part 3, you will add the missiles that are fired from the spaceship when you click the mouse.

Download project

Asteroid Run Part 4: Add Asteroids

In part 4, you will add the asteroids and make the game end when an asteroid hits the spaceship.

Download project

Asteroid Run Part 5: Finish the Game

In part 5, you will finish the game by making the ship’s missiles destroys the asteroids for points.

Download finished project

I think the same thing can be said about coding. In fact, there is research that found students with computer programming skills scored higher on cognitive ability tests than students without any programming skills. Coding teaches you skills that are valuable even if you don’t plan on being a professional software developer. Being able to code means utilizing incredible attention to detail and thinking about problems abstractly, useful skills for anyone – student or professional.

Remember, Summertime isn’t just an opportunity for the kids to learn new things. You’ve still got a month of Summer left, plenty of time to expand your own skill set. While the kids are at band camp or swim camp send yourself to programming camp from the comfort of your air-conditioned home.

Why not end your Summer with Xojo?

It can be pretty empowering to create your own apps and tools that help you be more productive. In fact, many people who use Xojo do exactly that. These people are referred to as “citizen developers” and they are a growing part of the workforce.

I know many of you are probably thinking: “I don’t have time to learn to code.” Well, here’s the thing. Learning Java is definitely lots of work, and not much fun, at least in my opinion. But learning Xojo? Now that is fun and you really can do it before this Summer is gone!

If you don’t have coding experience or are still a beginner, the best way to learn to code is to start with the free Introduction to Programming with Xojo book. This book teaches you how to code as you work through creating many small, fun example apps.

This book is also available in the iTunes Book Store, if that fits how you read better.

If you spend an hour a night on the book, you’ll finish it before this month is over. And the best part about learning to code? Once you learn how to code in one language, you can more easily learn other languages because the concepts behind most programming languages are incredibly similar. So whether you are a student or a professional, improve your skill set and learn to code before this Summer is gone!

Catsup

In this tutorial, you’ll learn how to create an iOS app that displays random cat pictures, which I call “Catsup”. Meow!

To get started, you’ll need the following:

• A Mac with OS X 10.7 or later. Creating iOS apps requires OS X.
• Xojo (the free version works for this tutorial)
• Xcode (for the iOS Simulator, which is part of the installation)

Download and install Xojo and then download and install Xcode from the App Store. After Xcode is installed, you’ll need to run it once to accept its license agreement and allow it to finish the installation. After that you can quit Xcode; you will not need it again.

Start Xojo and in the Project Chooser window that appears click on iOS and in the Application Name field, enter the name for you app (“CatsUp”) and click OK.

This displays the Xojo main Workspace where you will create your app. In the Workspace, View1 is selected by default. This is where you will design the layout (aka user interface or UI) for you app. You do this using simple drag and drop. You’ll drag controls from the Library area on the right onto the layout area in the center.

Since this is your first app, it is pretty simple. You’ll only need two controls: an ImageView and a Button.

First, find the ImageView in the Library (on the right) and drag it onto the View in the center. Place the ImageView near the top of the area and resize it so that it uses about 3/4 of the space. It should look something like this:

Now you can drag a button from the Library onto the layout. Place the button near the bottom of the layout and center it. Your layout should now look like this:

Now you need to clean up the layout a bit to prepare for writing code later. When writing code, it is helpful to have descriptive names for things so that your code makes more sense when you read it. The ImageView and the Button you added to the layout were just given default names of ImageView1 and Button1, which is not all that descriptive and certainly doesn’t make their purpose clear. So you should rename them.

Click on the ImageView in the layout and then in the toolbar at the top of the window, click the Inspector button. This displays the “properties” for the ImageView on the right side in what is called the Inspector. A property is a specific detail about something. For example, a property of the sky is that it is blue. As you can see, an ImageVIew has several property values that you can change. The first one to change is the “Name” property.

Click in the field next to Name and change its text from “ImageView” to something more descriptive, such as “CatImage”. Since you are making property changes with the Inspector, this is also a good time to change another property to make the pictures display better. Change the ContentMode property (using the dropdown) from “ScaleToFill” to “ScaleAspectFill”. What is the difference you ask? ScaleToFill just enlarges (or shrinks) the picture so that it uses all the space in the ImageView. But this can result is weird stretching of cat pictures, making cats appear fatter or skinnier. Of course, maybe you might prefer that! With “ScaleAspectFill”, the picture will be enlarged or shrunk as necessary to fit the space in the ImageView, but the proportions of the picture will remain the same. This might the picture might not use all the available space, but it will look the way it is supposed to, without scary resizing.

The Properties for the ImageView should now look like this:

Now click on the Button to change its properties. You will not be referring to the Button in code, so you don’t have to change its name, but I like to change it anyway to better describe its purpose. This may be a simple project, but it is a good habit to get into doing and is especially important when projects get more sophisticated.

Change the name of the Button from “Button1” to “ShowCatPictureButton”. You might also have noticed that the button Caption says “Untitled”. That is not helpful. How will the user know what happens when they click it? So you also need to change the Caption property text from “Untitled” to something like “Show a Cat”.

The Properties for the Button should now look like this:

Even though you haven’t yet written any code, you have already created an app. Sure, the app doesn’t technically do anything, but you can at least run it to take at look at how your user interface (UI) looks in the iOS Simulator. To do so, click the big “Run” button on the toolbar at the top of the window. This creates your app and runs it on the iOS Simulator. It should look like this:

That’s not all that interesting, so now it is time to start adding some code to actually get cat pictures and display them!

Your app will get pictures from the Internet using a web site called TheCatAPI. This website gives you a different cat picture each time you call it. The process for your app will be to call the web site (using a special URL for accessing its “web service”) when the button is clicked and then display the picture using the CatImage control after it is received.

Xojo uses an object-oriented programming language, which means that you create things (aka objects) to contain information or perform actions. In order to get a cat picture from the Internet, you need an object that can connect to the Internet and receive information as needed.  In Xojo, this is called an HttpSocket.

HttpSocket is a class that is built-in to Xojo. A class is essentially an object definition. With this information, you can now add an object to your view and tell it to use HttpSocket as it definition.

But before you proceed here is a public service announcement: Now is a good time to make sure you save your project. Just like when writing a document in a word processor, you should always save your work often so that you don’t lose changes in case something bad happens, such as a power failure or an system crash. In the File menu, select Save As and save your project somewhere on the computer, such as the Desktop or Documents folder.

Back in Xojo, you’ll want to click the Library button on the toolbar to show the list of Library controls. You’ll want to drag the “Generic Object” control from the Library onto the layout area of the view. Since a Generic Object is not an actual UI control, it will not appear within the View, but will instead appear at the bottom (the Shelf).

Now click on Generic Object and then click the Inspector button on the toolbar to show its properties. You need to give it a better name and tell it to use the HttpSocket class. Change the Name property to “CatConnector” since this object will be responsible for connecting to the Internet to get cat pictures.

Change the Super property to “Xojo.Net.HttpSocket”. This tells the the object that it is based on the HttpSocket, which exposes the capabilities to connect to the Internet and receive information.

(Now is a good time to save your project.)

It time to add the first bit of code that displays the picture that was received. Right-click on the CatConnector object in the Shelf and select “Add to CatConnector” in the menu, from the submenu select “Event Handler”. This displays the Event Handler window.

In addition to being object-oriented, Xojo is event-based. Events are actions that occur when something happens in your app, such as the user tapping on the UI or data being received from the Internet.

In the list of event handlers, you want to click the PageReceived and then click the OK button to add the event handler to the CatConnector. The PageReceived event handler is what is called when the picture is received from the web site.

If you look back at the CatConnector in the Navigator on the left, you’ll now see that “PageReceived” is displayed below it. This is where you will put the code to display the picture.

Click on “PageReceived” to display the Code Editor where you can enter this code:

Dim catPic As iOSImage = iOSImage.FromData(Content)
CatImage.Image = catPic
ShowCatPictureButton.Enabled = True

This code converts the data received by the CatConnector to an Image, then tells the CatImage control to display it and enables the button so you can request another picture.

Speaking of the button, the last bit of code to add is to actually request a cat picture from the web site, which is what the button is for. Double-click on the button to display the Add Event Handler window. The Action event handler is what gets called when the button is tapped, so click on that and then click the OK button.

This adds an Action event handler to ShowCatPictureButton. Click on the Action event in the Navigator on the left.

This displays the code editor where you can add this code to request a cat picture:

CatConnector.Send("GET", "http://thecatapi.com/api/images/get")
Me.Enabled = False

The CatConnector.Send line of code is requesting a cat picture from the web site. The second line of code disables the button so that you cannot request another picture until the first one is received.

That is it for code. Now is a great time to save your project.

And now you can Run it. The finished app will display a new cat picture each time you click the button.

Here is the completed project: Catsup

Now that you’ve created your first, fun app, it’s time for you to try to modify it a bit on your own.

Here are some additional things you can add to Catsup:

• Easy: Increase the size of the Button text and maybe change its font and color.

• Play around with different values for the Button properties to change its color, font and size. Be sure to click the “Gear” button on the Inspector to see additional properties.

• Medium: Play a “Meow!” sound when a new picture is displayed.
  • Find a “Meow” MP3 sound on the Internet and drag it in the Navigator (on the left) of you project.
  • Use the name of the sound in the project followed by “.Play” to play the sound when the picture is displayed.
• Harder: Save the picture to the Camera Roll.
  • Store the picture in a property when it is received. Refer to Properties in the Xojo User Guide.
  • Add a Save button to the Navigation Bar. Refer to Toolbars in the Xojo User Guide for tips.
  • When the Save button is pressed, save the picture to the Camera Roll. Refer to Toolbars in the Xojo User Guide to determine when the button was pressed.
  • You’ll need to call the Apple iOS library to save to the Camera Roll with this code:

Declare Sub UIImageWriteToSavedPhotosAlbum Lib "UIKit" ( _
  img As Ptr, target As Ptr, sel As Ptr, info As Ptr)
UIImageWriteToSavedPhotosAlbum(CatImageProperty.Handle, _
  Nil, Nil, Nil)

We’d love if you showed up ready to have some fun and learn something new at your local Code Day event with your new Xojo license! Starting Monday, May 19th and running through Sunday May 25th we’re offering students and teachers 30% off new Xojo licenses! Simply send me an email at custserv@xojo.com using your academic email address or include a picture of your current student ID and I’ll send you a coupon code for 30% off any new Xojo license! And don’t forget about Xojo’s free Introduction to Programming textbook and our new Teacher’s Guide!

Code Day is a special event, and this is the first time it will be celebrated across the United States. Please share this post and help spread the word about #CodeDay and codeday.org, let’s grow the Xojo community and encourage more coding across the world! Like they say at code.org, “Build something awesome in 24 hours!”