CodeX App Creation Week 4

Welcome Back! I hope you are excited for the upcoming holidays!

Today will be an exciting day, follow along and let’s get started!


1st: Log-onto SLACK. I will be on, so we can all chat online! Say Hello and let me know how school is going :)


2nd: Fall is the most beautiful time of the year at Harvard! Check out the Gallery below to see where I live and how amazing the weather is!

3rd: I know that some of you are having issues with ShiftEdit. We are working to get your workspace back up. I will have more details for you next class meeting, but none of your work will be lost. It is a server issue, so no te preocupes!!

Let's get started!

So if you remember last time we met to work on the app, you learned how to draw lines and how important canvases are (in case you forgot, check the section below for a refresher).

Now, let’s see if we can advance a little bit!

Let’s push you to see if you can copy the app Hanshaw made last year. Watch the Video below:

Coding Lab:

Try your best to build an app similar to SKETCHBUDDY:



  1. Draw lines in different colors
  2. Change the color of the canvas






CodeX App Creation Week 2


Hi Everyone!

Welcome Back! I hope all of you have been having a great school year and are keeping those grades up lol. I wanted to share the “how” and “where” we will be learning this academic year. Stick with me, I promise there won’t be a lot of reading :)

We will be using Tumblr to give lesson plans. Something that you access from home and school anytime! Also we will try using GIFs instead of lecture, because I know they were kind of hard to sit through over the summer…

Mr. Harlan-Gran is leading this academic year, so be sure to listen and pay attention to what he says! You’ll definitely enjoy what we have in-store!

See that wasn’t too bad <_> Let’s enjoy learning how to make apps!

If you have any questions email me at: or you can use SLACK

Filthy Frank Post Rv2.gif

Hey There- Welcome back! 

Congrats for finishing your first week. ROUND OF APPLAUSE! 

I hope you had fun :)

That was an introduction to the app inventor and showed you some basics on how to use the workstation. We are going to continue to build on our skills and today we’ll learn how to make a basic drawing app. 


Alright! Now let’s get this party started 🎉🎊🎉

Login to your MIT App Inventor account.

Here is the link:

Be sure to click to the “Create” button on the upper right-hand corner.

Now this is where things get a little different from last week. We are utilizing a different function this week, the CANVAS element, which is extremely important to making apps.

Here is an example of how a CANVAS is used: SNAPCHAT

Lets say I take selfie…

Using Snapchat, we see what a CANVAS can do. 

Every Filter is simply a canvas placed over an image. 

And what you are doing is creating a canvas that you can write on, like the 4th image on the top row.

No once you added the CANVAS it is getting serious. No you have Fill Parent for both the Height & Width.

BLOCK TIME- Lets Code Now!

Don’t be intimidated when you see the workstation, remember, follow the directions and it will help you make sense of it!

AHHHH… I remember when I was a kid, Dora the Explorer was one of the best shows on TV <.>

But Handy Manny was most favorite! 

So why do we are we talking about a backpack?

You will see that in the upper right hand corner there is a blue backpack. Think of it to be as magical as Dora’s!

To use it you have to sing the song…. JK

The purpose of the Backpack is to store your code. Let’s say you’re not sure if you’ll need some code later, 


No let’s put together the code! 

(1) Drag the when Canvas 1.Dragged on the workstation

(2) Connect Call Canvas 1.Draw Line as the GIF shows

Now let me go into details…

*DISCLAIMER* No Math Involved

This image is a graph (coordinate plane) with X coordinates (across) and Y coordinates (up/down). In the same way, your phone is a (coordinate plan) as well. 

Think about this!

When you use a touch screen device and move finger from side to side, you are on the X AXIS (across)

When you use a touch screen device and move your finger up and down, you are on the Y AXIS

Drag 1.gif

So now lets get a little bit technical.

We are making a doodle pad, so we are going to be making lines!

When you draw a line with your pencil on a piece of paper there are 2 points

(1) Where you start the line

(2) Where you stop the line

So you have to tell the app to recognize the same thing. 

“prev x” & “prev y”

These mean where you start the line. They stand for previous x & previous y

When you place these two blocks, the app can recognize where the starting point is on the X or Y Coordinate Plan (graph)… you member huh? lol

Drag 2.gif

Since we put where we start the line now we got to put where we finish.

Since most computers are dumb (you may not think so but they are- we have to tell them to do everything). We have to tell it to recognize where our finger stops moving

For this we put use “current x” and “current y.”

What does that mean? Well it means where you finger “currently is or last was” 

So a line is drawn from where your finger “previously was” to where it “currently is”



If the Emulator did not work, you can still test your app!

Take out an Android Phone (or find someone with one- sorry an iPhone will not work

Click App (provide QR code for .apk)

Then scan the QR Code with your phone!

FYI: If your phone does not have a QR Code Scanner, you can download one for free from the Google Play Store!


You made you’re 2nd App!

Try to scan the QR CODE using an android phone to see it it works :)