1.5. Exploring Web App Builders
In this session, you will:
- Demystify Web Apps: Understand the core differences between web apps and mobile apps, and their relevance in our digital landscape.
- Explore Web App Development: Discover various coding languages and tools used to create dynamic web applications.
- Get Your Tools Ready: Install and configure the essential software to begin building your own web apps.
WEB APPS
For your ICT Club project, you can choose to create either a mobile app or a web app.
If you’ve taken part in ICT club before and want to try something more advanced, or if you’re new to the program but already have some coding experience, building a web app could be a great option to challenge yourself.
Making a web app involves text-based coding and is more advanced than block-based coding with App Inventor or Thunkable.
Let’s start with a review of the difference between mobile apps, web apps, and progressive web apps.
Many participants will opt for building a mobile app, with one of our suggested app builders, App Inventor or Thunkable. If you are new to coding or know you want to use App Inventor or Thunkable to code your app, you can skip this lesson!
We will explore some beginner options for creating web apps.
A major difference compared to the platforms used for building mobile apps is that, when creating a web app, you’ll be using a text-based programming language rather than a block-based one.
There are two main languages that are used to create web apps.
JAVASCRIPT
JavaScript, or JS, is a scripting language, which means the code runs at runtime rather than being compiled ahead of time like a mobile app. It’s similar to an actor performing their lines live each time the show is on.
JavaScript is commonly used alongside HTML and CSS to build websites. While HTML and CSS are used to create static sites that display information without changing, JavaScript brings interactivity and allows the site to respond, and update based on different inputs. When a website becomes dynamic and interactive in this way, it essentially functions as a web app.
PYTHON
Python is a widely used, general-purpose programming language. It serves as both a programming and scripting language, meaning it can be compiled for execution or run directly at runtime.
Known for its simplicity and flexibility, Python is beginner-friendly and used across various areas of software development. It’s commonly used in web development and also plays a major role in machine learning. Because of this, Python is an excellent choice for building more advanced AI-powered web apps.
In this curriculum, our focus will be on creating web apps using Python. To make the process easier, we’ll use a framework called Streamlit. Streamlit makes it simple to build interactive and powerful web apps with minimal coding. It’s especially useful for apps that work with data and makes it easy to integrate AI by using Python’s machine learning libraries.
Here are some main features.
- Good option for people who have lots of blocks-based coding experience and are looking for a new challenge
- Good for people who have done some text-based coding
- Very versatile language used widely
- You will need to install software on your computer
- Python and associated libraries
- A code editor
- Streamlit does have option to run in the browser, using Github
- We won’t be cover this option in this curriculum
- You can use AI with it
- Most popular language for building and using machine learning models
- We’ll use Jupyter Notebooks in this curriculum for model building
GETTING STARTED
To code web apps for your ICT club project, you will need:
- a computer or laptop
- Internet access
You should have some basic familiarity with using the Terminal on a Mac or Linux, or the Terminal/Command Prompt on Windows. If you’re not sure what the Terminal is or haven’t used it before, it’s a good idea to watch these beginner-friendly videos before starting the activity.
Watch the appropriate video for your operating system.
Using the Terminal
3 Videos
Mac
Windows
Linux
We’ll explore two ways to develop web apps: coding directly on your computer or laptop or doing all your coding in the cloud. You’re free to choose either method, but it’s best to pick one and stick with it throughout your ICT Club project. Understanding the terminal commands mentioned earlier will be helpful no matter which option you choose.
Here are some pros and cons for each.
ON YOUR COMPUTER
| PROS | CONS |
| Files are saved on your computer | Not easy to share files and code together with your team |
| Learn to use Visual Studio Code, very popular IDE | Can be very frustrating installing packages and may take a lot of time setting up |
| You will learn a lot about using the terminal window, installing packages, etc | Potential for losing files if computer crashes |
| Complete control and choice of software used | |
| Can code without always needing internet access |
IN THE CLOUD
| PROS | CONS |
| Files are stored in the cloud | Won’t have the experience of using software locally |
| No need to install anything on your computer | Dependence on internet connection |
| Automatic link to Github for portfolio purposes | |
| Easy to share and code as a team |
Choose either Activity A or Activity B, based on whether you want to code locally on your computer or code in the cloud.
Activity A: Get started with Python on Your Computer
INSTALL SOFTWARE & CODE STARTER APP
NOTE: Following the instructions below, you might run into some issues, so be patient and be prepared to troubleshoot as you go!
- Step 1: Install Python. Here is a good set of instructions for Window, Mac, or Linux.
- Step 2: Install a code editor and Streamlit. This video shows you how to install Visual Studio Code and then install Streamlit to run it from the code editor.
- Step 3: Run a very simple Streamlit web app in the VS Code environment by following this video.
- Celebrate by taking a screenshot of your first web app and send it with a note to your mentor!
Activity B: Get started with Python in the Cloud.
CREATE ACCOUNTS & CODE AN APP
Follow the video to sign up for Streamlit.io and Github. Then connect the two accounts and make a very simple Streamlit app.
REVIEW OF KEY TERMS
Web App – application that looks like a mobile app but runs in an internet browser and is coded using HTML, CSS, and JavaScript or Python
ADDITIONAL RESOURCES
You’ll need to refer to documentation and support for help working with Python & Streamlit. Below are some good places to start.
need to refer to documentation and support for help working with Python & Streamlit. Below are some good places to start.
- Python.org beginner’s guide has some good links to learn more Python.
- Streamlit’s App Gallery
- Nileg Production’s full Streamlit course playlist
