Karen's Journal Entry #2: My First App

Well, I did it! I created my first app. I have to say, though, that if grade school children are using App Inventor, it must be under the watchful and ever helpful eyes of their teachers. Yes, it is simple once you get the hang of it. But there are a million stumbling blocks you bump into along the way. For lack of having a dedicated teacher by my side while I created it, I used ChatGPT as a tutor and troubleshooter whenever I got stuck --

https://chatgpt.com/share/683d2f77-4378-8003-ac19-b093b82f5933

My first idea was to create an app that would play a Billie Eilish song when a button was clicked. I had "Birds of a Feather" in mind. But not wanting to actually purchase the .mp3 file (or risk violating copyright), I brainstormed for another idea and that's when I decided to create an app that would change the background color to a random color when you click a button. A very simple idea, but one with built-in anticipation of what color you might get next...or how many times you would have to press the button before the background turned pink! Exciting times!!!

Adding the button was easy. Figuring out how to center it on the screen, not so much. I ended up adding a label, removing the text from it, and giving it a height of 100 pixels, and using that as a spacer above the button. Then I created a container and moved the button into it. I resized the button itself with height and width of 100 pixels each and set the horizontal alignment of the container to centered. I then changed the text to "Surprise me!" That gave me a simple but attractive home screen.

Programming the actions took a bit of research to figure out. First, I added the "When Button1.Click" block. Then I added "Set Screen1.background color to." Then I had to figure out how to generate the random numbers for the colors. I used "make color, make a list" from the color drawer. And for the list, I used "random integer from 1 to 100" from the math drawer. I was confused at first why I needed a list with 3 random integers, so I asked ChatGPT and it explained that the "make color" block takes a list of 3 numbers which are the RGB values. [Note: There is a bug in the coding I just described -- read on, to see how I later noticed the bug and fixed it!]

Next, I needed to install an emulator since I do not have an Android device. I decided to install Genymotion and create a Google Pixel 2 emulator. I tested my app in the emulator and everything worked, but I seemed to be getting only colors within a certain range -- and no pink. 🙁 I reviewed my code and that's when I realized the default of "random numbers between 1 to 100" wasn't giving me the full color spectrum. I changed it to generate 3 random numbers with each one being between 0 and 255, and voilà -- I started getting brighter colors like neon greens, and yes -- even hot pink! Success!!!

I was surprised that creating, testing, debugging, and improving such a simple app took me several hours. That's exactly why I like taking classes like this because it forces me to stick it out and teach myself a new technology that I otherwise might not ever get around to experimenting with. And now that I've created my first app, I'm eager to add more functionality and create more complex apps, which I suspect is exactly what we will be doing over the next few weeks in this class.