Embedded Files
Learning Goals and Success Criteria
Task:Your task is to create an app that tells some information about yourself.
You are required to create the following pages:Page 1: Landing page that has a title for your app as well as a picture of yourself.Page 2: A list of your top three favourite foods included with picturesPage 3: Name a minimum of three hobbies or activities that you like to doPage 4: Name the people in your immediate family and a family portrait of yourselves.
Things that have to be included:
Design skills
Demonstrate knowledge about what the Thunkable platform is and the cross-platform concept.
Design an application interface.
Learn about speech recognition
Understand and work with text-to-speech and Y translator
Technical Skills
Technical Skills
How to design an application interface
How to build basic phone apps
How to build a translator application
Task:Your task is to create an app that tells some information about yourself.
You are required to create the following pages:Page 1: Landing page that has a title for your app as well as a picture of yourself.Page 2: A list of your top three favourite foods included with picturesPage 3: Name a minimum of three hobbies or activities that you like to doPage 4: Name the people in your immediate family and a family portrait of yourselves.
Things that have to be included:
- Pictures on each page
- A navigation bar that takes you from page to page
- Text to write the information needed
- Make each page a different colour
Getting Started With Thunkable:
Make sure you are signed in with your Crestwood Google Account as the website will automatically save it to your profile!
Once signed in, you will be taken to your workspace where all of your projects will be saved to and stored (note there is a maximum number of projects you can have at a time).
Starting your first project!
On your workspace page, in the upper right-hand corner there is a blue box that says "Create new project". Click on that in order to bring up the prompt to get started on making your first app.
It will then prompt you to create a title and what category it belongs to. Name this project 4.1 Intro (Your Name). Then for the category it belongs in - you can put "education". Ensure that the project is Public so when you submit it, your teacher is able to view it.
On your workspace page, in the upper right-hand corner there is a blue box that says "Create new project". Click on that in order to bring up the prompt to get started on making your first app.
It will then prompt you to create a title and what category it belongs to. Name this project 4.1 Intro (Your Name). Then for the category it belongs in - you can put "education". Ensure that the project is Public so when you submit it, your teacher is able to view it.
Thunkable Layout
Upper Left-Hand Corner "Component Tree"This is your panel that is very similar to Photoshop where you see all of your "layers".
In Thunkable you will be creating "Screens" which correspond to each page of your app.
Within those screens you can add components which are listed right below it; these could be images, labels, buttons, etc.
Those components can then be edited or changed on the right-hand side of your screen where you can change things such as fonts, background colours, etc.
Upper Left-Hand Corner "Component Tree"This is your panel that is very similar to Photoshop where you see all of your "layers".
In Thunkable you will be creating "Screens" which correspond to each page of your app.
Within those screens you can add components which are listed right below it; these could be images, labels, buttons, etc.
Those components can then be edited or changed on the right-hand side of your screen where you can change things such as fonts, background colours, etc.
Changing the colour of your screen
When you select your screen on the "Component Tree" you can then edit it on the right-hand side. There is a section that says "Background" and you can click on it to then pick the colour you want your background to be.
Creating Text
In the components list on the left-hand side you will see under "Basic" that there is something named a "Label". Drag and drop that icon onto the screen in the middle of the page that looks like a phone.
You will now have a label box added onto your screen.
On the right-hand side you can then edit the text inside, change the font, alter the colour as well as give the label box a background colour as well.
Note on the left-hand side, you can rename the different screens and components on the pages as well which will help you identify what is what. For example, the screen is now labelled "Landing page" and the label component is named "Title".
When you select your screen on the "Component Tree" you can then edit it on the right-hand side. There is a section that says "Background" and you can click on it to then pick the colour you want your background to be.
Creating Text
In the components list on the left-hand side you will see under "Basic" that there is something named a "Label". Drag and drop that icon onto the screen in the middle of the page that looks like a phone.
You will now have a label box added onto your screen.
On the right-hand side you can then edit the text inside, change the font, alter the colour as well as give the label box a background colour as well.
Note on the left-hand side, you can rename the different screens and components on the pages as well which will help you identify what is what. For example, the screen is now labelled "Landing page" and the label component is named "Title".
Adding Images
In the components list where you found the label you will also find the "image" component which you can drag and drop it onto the screen.
On the right-hand side where you can customize your components you will then see a section that says "picture", if you hover over it you will see the option to upload a file from your computer or input a url (website link). Once you upload it in, you will then see your image appear (note: try to use a .JPG image as they tend to work the best.
You can drag and move the image around to where you would like it to be.
In the components list where you found the label you will also find the "image" component which you can drag and drop it onto the screen.
On the right-hand side where you can customize your components you will then see a section that says "picture", if you hover over it you will see the option to upload a file from your computer or input a url (website link). Once you upload it in, you will then see your image appear (note: try to use a .JPG image as they tend to work the best.
You can drag and move the image around to where you would like it to be.
Making a Navigation Bar
We will be creating a "bottom tab navigator" which will help us change from page to page at the bottom of our screens.
Creating your navigator you go to your "Component Tree" and go to the drop down menu that then allows you to create new screen or add navigator. You will then select the "Bottom Tab Navigator".
We will be creating a "bottom tab navigator" which will help us change from page to page at the bottom of our screens.
Creating your navigator you go to your "Component Tree" and go to the drop down menu that then allows you to create new screen or add navigator. You will then select the "Bottom Tab Navigator".
Once you create your navigator you will get new screens added to your page because of the navigator: "home", "About", "Contact", "Setting". You can delete them as you will not need them.
The landing page that you created will need to be added to your navigator bar. You can drag and drop it onto the navigator to ensure that it creates the button for your page at the bottom.
Also reminder, every page you make after putting on the navigation bar needs to be added to it as well.
Also reminder, every page you make after putting on the navigation bar needs to be added to it as well.
Page updated
Report abuse