The Road Map of my first app

Pranitha
4 min readMar 6, 2021

Hey folks! this is a blog on the building of my first app in written code. It’s all about how I came to know about the App Lab in code.org and my experience.

I started by just completing the app lab course in code.org. There, I learned about the basic way of creating an app. I had just seen one app lab project done by my friend on the same website. After reading the code he had written, I was shocked when I saw how hard it was!. Then, I forgot about it after a few days.

After, finishing a course in code.org, we usually get a list of other courses to try. There, I found the app lab course. I went ahead and tried it. It was an introduction to how you can create an app in code.org. I finished the course and I had a basic idea of how to create an app.

I immediately started a new project and I began building my app. There according to my imagination, I wanted to create a name detector but didn’t know how to. I skipped that plan and just built a simple app. I showed my sister the app I built myself and I told her about the name detector. She knew how to do it and helped me build what I wanted. After that, I wanted to create other things! which needed help again.

My sister then shifted me to written code and from then on, I made the app using written Javascript code. It was a really advanced app that I had imagined. It was because I had seen my sister build these complicated apps which inspired me to build one like that!.

My sister was happy that I imagined all of it myself. She helped and taught me a lot of advanced Javascript and I learned it all!. It took me a week to finish Phase-1 of the app.

After all of that, I didn’t know what to name my app!. A nameless app would look so funny right!. So, I was concentrating more on the building of the app than the name and I came up with this.

This is the first screen of my app.

It looked like this. I also had to pick a nice and suitable theme for my app, so I was browsing through the available themes and a theme called ‘Playtime’ caught my eye and I chose that for all the common screens of the app.

I also had to pick themes for the other particular screens so, I went on the favorite colors of my family members (they were the ones on whom I created the app).

This was the second screen

This is where the name detector is there. The green box is where you enter the name and according to the name entered and when clicked on next, the screen changes!. That was what I actually wanted to do and my sister helped me there. The screen would change according to the name typed.

If I typed my name in the box, the screen would change to my screen. Like this-

The reaction looks like this

I’ve done the same for my family. Now let’s see what happens when I click the next button on my screen(purple screen is mine).

This is the reaction when I click on the Next button on my screen

So, this is how it works when I click on the Next button on my screen. What happens when I add a task in the Add Task text input?. (Text input: the place to enter text.)

The data I enter in the Add Task Text Input is stored in a table on the data division of the app. I have specifically created tables for all of my family members. It does the same thing, just that the names of the tables are different.

Let’s see what happens when I type good or bad.

When I type good, the screen changes to a another screen, similarly, when I type bad, the screen changes to another screen like the normal reactions of any app where in you type your text in the given space and the screen changes.

The stage 1 had a lot of repeated code so stage 2 will be edited and made smaller.

--

--