Hi there! I’m Isabella, and my friends and I are starting a cool fashion company called Metamorphos. We take your old, ripped clothes and transform them into new accessories. Besides our website, we wanted to create an app using App Lab, and I’m going to show you how I made it.
First, I switched from code mode to design mode. This lets me see all the buttons and tools I can use to build the app. I started by changing the background color to one I liked. Then, I named the screen “Home Screen” so I know what it is.
Next, I dragged a text box onto the screen and changed the text to the title I wanted. I also adjusted the font size and moved the text to the right spot by dragging it around. To make it more interesting, I added an image by uploading a picture and centering it on the screen. I added more text by dragging another text box over.
After setting up the home screen, I created a new screen for donations. I dragged a text box onto this screen and labeled it “Donate.” I made the font size bigger and moved it to the right place. I also changed the background color to make it different from the home screen.
This page includes a quick survey using radio buttons, which allow the user to select only one option. I created a group ID called “survey” and renamed the radio buttons. I added a question: “Would you donate your clothes to us?” with “Yes” and “No” as the answers. Then, I added a “Submit” button so users can send their response and be taken to a new page.
If someone selects “Yes,” they are taken to a new screen that thanks them for their input. I named this screen “Yes.” For those who choose “No,” I created another screen called “No,” which says, “Maybe next time.”
Now that the design is ready, I moved on to coding. I set up an event for when the “Submit” button is clicked. Depending on which radio button is checked, the app takes the user to either the “Yes” or “No” screen.
I also added a dropdown menu to switch between different pages. I dragged this dropdown onto the home screen and set the options to “Home” and “Donate.” I did the same for the donate page. Then, I added code to make sure the dropdown works. If the dropdown changes to “Donate,” it switches to the donate screen, and similarly for the home screen.
Finally, I ran the app to see if everything worked. It started on the home page, and when I switched to the donate page, it worked perfectly! I selected “Yes” and submitted my response, and it thanked me for my input.
This is a simple two-page app, but in the future, you could use the data button to view and store the data that users input. If you want to share your app, you can click the share button, type in a phone number, and it will appear on your phone.
Imagine you are creating an app for a project or hobby you love. Use paper or a digital tool to sketch out the design of your app’s home screen. Think about the colors, text, and images you would use. Share your design with the class and explain your choices.
Using a tool like Google Forms, create a simple survey that asks people if they would donate to a cause you care about. Include at least two questions and a submit button. Share your survey with classmates and discuss the responses you receive.
Pair up with a classmate and take turns being the app developer and the user. The developer explains how their app works, and the user tests it by asking questions and providing feedback. Discuss what worked well and what could be improved.
Using a platform like Scratch, create a simple program where clicking a button changes the screen or background color. Experiment with different events and share your project with the class. Explain how you set up the event and what it does.
Prepare a short presentation about your app idea. Include the purpose of the app, the main features, and how you designed it. Present your app to the class, and be ready to answer questions about your design and coding choices.
Here’s a sanitized version of the provided YouTube transcript:
—
Hi, I’m Isabella, and my friends and I are starting a fashion company called Metamorphos. We take your old, ripped clothes and turn them into new accessories. In addition to the website, we wanted to create an app using App Lab, and I’m going to show you how I made that.
I’m already in code mode, so I’m going to switch to design. Now it shows me all of these buttons that I can choose to pull in and drag. I can change the background color, so I’m going to select a color that I like for the background. How about this color right here?
Now I’m going to name the screen so that I know what it’s going to be called. I’m going to call this the home screen. Next, I’m going to drag this text box on and change the text to say the title of what I want this to be called. I can also scroll down and change the font size. Additionally, I can adjust the position of the text by dragging it.
I’m also going to add an image, so I’m going to pull this image on and then choose a picture to upload. Now I can center it. After that, I’m going to add some more text by dragging another text box over.
Now that I have this screen, I’m going to add a new screen for donations. I’m going to drag this text on and call it “Donate.” I’ll also make the font size bigger and adjust its position. Now I’m going to change the background color to something different.
This page will have a quick survey, so I’m going to use radio buttons to ensure that the user can only select one option. I need to create a group ID for this, so I’ll call it “survey.” I’ll rename the radio buttons accordingly.
Now I’ll add a question: “Would you donate your clothes to us?” I’ll also provide the answers: “Yes” and “No.” Next, I’m going to add a button that says “Submit,” so when they choose either option, they can submit it, and it will take them to a new page.
If they say “Yes,” I’ll add a new screen that thanks them for their input. I’ll name this screen “Yes.” Then, I’ll add another screen for those who say “No,” and I’ll call this one “No.” This screen will say, “Maybe next time.”
Now that I have everything set up, I’m going to do the coding. I’ll drag the event for when the button is clicked and set up the conditions based on which radio button is checked. If the first radio button is checked, it will take them to the “Yes” screen; if the second one is checked, it will take them to the “No” screen.
Next, I’m going to add a dropdown menu to switch between different pages. I’ll drag this dropdown onto the home screen and set the options to “Home” and “Donate.” I’ll do the same for the donate page.
Now, I’ll go back into the code to make sure the dropdown works. If the dropdown changes to “Donate,” it will set the screen to the donate screen, and similarly for the home screen.
Now I’m going to run this to see if it works. It’s on the home page; let’s go to donate. It worked! I’ll say “Yes” and submit. Thanks for your input!
This is a simple two-page app. In the future, you could also use the data button to view and store the data that the user inputs. If you want to share your app, you can click the share button and type in a phone number, and there it is on my phone.
—
This version removes any informal language, typos, and unnecessary filler words while maintaining the core content and structure of the original transcript.
App – A software application designed to perform a specific task on a computer or mobile device. – I used a coding app on my tablet to learn how to create my own games.
Coding – The process of writing instructions for a computer to perform specific tasks. – We spent the afternoon coding a simple calculator program in class.
Design – The process of planning and creating the layout and functionality of a project or product. – Our teacher asked us to design a website for our science project.
Donate – To give something, such as time or resources, to help a cause or project. – I decided to donate my old laptop to the coding club at school.
Screen – The display part of a computer or device where information is shown. – I adjusted the brightness of my screen so I could see the code more clearly.
Text – Written words or characters displayed on a screen or document. – The text on the website was too small, so I increased the font size.
Buttons – Interactive elements on a screen that can be clicked to perform an action. – I added buttons to my app so users can easily navigate between pages.
Survey – A set of questions designed to collect information from people. – We created an online survey to gather feedback on our new app design.
Responses – The answers or information provided by people who complete a survey. – The responses from the survey helped us improve our app features.
Dropdown – A menu that appears when you click on a button or text, showing a list of options to choose from. – I used a dropdown menu in my app to let users select their favorite color.
