- Learn about web apps and how they differ from mobile apps
- Learn about different options for coding and building web apps
- Install the necessary software to build a web app
These are the activities for this lesson:
WEB APPS
For your Technovation project, you have the option of building a mobile app or a web app.
For participants who have participated in Technovation before and are looking for a new challenge, or for new participants that have prior coding experience, you might consider making a web app for your Technovation project.
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!
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.
Mobile App
- a program that runs natively on the phone
- downloaded and installed on the device
- can access the phone’s features, such as GPS and camera
- platform-specific (iOS or Android)
- coded with particular languages to match the operating system
Web App
- looks a lot like a mobile app
- runs in an internet browser
- not native to a particular device (iOS or Android)
- is generally coded with HTML, CSS, Javascript and Python
- cannot run when offline
Progressive Web App
- special type of web app that is a hybrid between a mobile app and web app
- runs in a browser
- can also be installed on the mobile device like a regular mobile app
- can run even when user is offline
Note that a web app differs from a website. A website is static, coded using HTML and CSS. Web apps are dynamic and changing, based on user input and other external interactions. For your Technovation project, a website is not acceptable.
We will explore some beginner options for creating web apps.
One big difference from the app building platforms we cover for mobile apps is that you will create a web app using a text-based programming language instead of a block-based language.
There are two main languages that are used to create web apps.
JAVASCRIPT
Javascript, or JS, is a scripting language. This means that the code is executed at runtime, instead of being compiled, like a mobile app. It’s like an actor running through her script during a show each time the show runs.
Javascript is often combined with HTML and CSS to make websites. HTML and CSS are used to make static websites, which can present information but do not change. Javascript adds interactivity and the ability for the website to change and update based on external factors. And a dynamic, interactive website is essentially a web app.
PYTHON
Python is a very popular general-purpose programming language. Python is both a programming language and a scripting language, so it can be compiled to run but also can execute at runtime.
It is seen as a straightforward, versatile language that is accessible for new coders. It is used in many different aspects of software development. One area is web development. Another is machine learning. So, Python is a great option for learning and developing more advanced AI web apps.
In this curriculum, we will focus on making web apps with Python. To easily build a web app using Python, we’ll use a framework called Streamlit. Streamlit allows you to build powerful, interactive web apps with little code. It specializes in apps involving data, and allows you to easily use Python machine learning libraries to incorporate AI in your apps.
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 Technovation project, you will need:
- a computer or laptop
- Internet access
You should be somewhat comfortable using the Terminal window on a Mac or Linux and either Terminal or command prompt on Windows. If you do not have experience, or even know what the Terminal window is, then check out these beginner videos before moving on to the activity.
Watch the appropriate video for your operating system.
We are going to cover two options for developing web apps. You can either code on your computer or laptop, or you can code everything in the cloud. You can choose either option, but it is recommended you choose one option and stick with it through your Technovation project. Knowing how to use the terminal commands above come in handy with either option.
Here are some pros and cons for each.
ON YOUR COMPUTER
PROS:
- Files are saved on your computer
- Learn to use Visual Studio Code, very popular IDE
- You will learn a lot about using the terminal window, installing packages, etc
- Complete control and choice of software used
- Can code without always needing internet access
CONS:
- Not easy to share files and code together with your team
- Can be very frustrating installing packages and may take a lot of time setting up
- Potential for losing files if computer crashes
IN THE CLOUD
PROS:
- Files are stored in the cloud
- No need to install anything on your computer
- Automatic link to Github for portfolio purposes
- Easy to share and code as a team
CONS:
- Won’t have the experience of using software locally
- Dependence on internet connection
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
- 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
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
REFLECTION
Congratulations on trying out some text-based coding! Here are some reflection questions for you to consider with your team and with your mentor.
ADDITIONAL RESOURCES
You’ll 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
