In your ICT Club project, you may choose to build:
-
A Mobile App
-
A Web App
-
A Progressive Web App
For beginners, mobile apps (using MIT App Inventor) are recommended.
However, if your team:
-
Has prior coding experience
-
Has done block-based coding before
-
Wants a more advanced challenge
-
Wants stronger AI integration
Then building a web app may be the right choice.
πΉ MOBILE APP vs WEB APP vs PWA
π± Mobile App
-
Installed on phone
-
Works offline
-
Can access phone sensors (GPS, camera)
-
Platform specific (Android or iOS)
Example in Uganda:
Offline revision app for rural schools.
π Web App
-
Runs in browser (Chrome, Firefox, Edge)
-
Works on any device
-
Requires internet
-
Built with text-based languages
Example in Uganda:
-
School results portal
-
Farmer price dashboard
-
SACCO management system
π Progressive Web App (PWA)
-
Runs in browser
-
Can be installed like an app
-
Can work offline partially
Example:
Market price monitoring tool for farmers.
IMPORTANT DIFFERENCE: WEBSITE vs WEB APP
Website:
-
Static information
-
Does not change based on user input
Web App:
-
Interactive
-
Responds to user input
-
Can store data
-
Can run AI models
For competition purposes: A simple static website is NOT acceptable.
You must build a dynamic web app.
πΉ MAIN LANGUAGES FOR WEB APPS
There are two main options:
πΉ OPTION 1: JavaScript (JS)
JavaScript:
-
Runs inside browser
-
Executes at runtime
-
Adds interactivity to websites
Combined with:
-
HTML (structure)
-
CSS (design)
Used for:
-
Interactive dashboards
-
Real-time updates
-
Dynamic forms
Best for: Students already comfortable with coding.
πΉ OPTION 2: Python (Recommended)
Python is:
-
Easy to learn
-
Powerful
-
Widely used globally
-
Strong for AI & Machine Learning
For this curriculum, we recommend:
π Python + Streamlit
πΉ WHAT IS STREAMLIT?
Streamlit is a Python framework that allows you to build web apps easily.
Advantages:
β Simple syntax
β Works well with data
β Supports charts
β Easy AI integration
β Runs locally or in cloud
β Used worldwide
Example Uganda Scenario:
Problem:
Farmers donβt know weather forecasts.
Web App Solution:
-
User selects district
-
App shows rainfall predictions
-
Uses AI weather prediction API
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!
πΉ AI + WEB APPS
Web apps are powerful for AI integration because:
-
Python is the most popular language for Machine Learning
-
Many AI libraries exist
Examples:
-
Crop disease detection
-
Student performance prediction
-
Waste classification system
-
Health symptom checker
AI libraries used in Python:
-
Scikit-learn
-
TensorFlow
-
PyTorch
-
OpenAI API
πΉ GETTING STARTED
You need:
β Laptop
β Internet
β Basic comfort with typing commands
πΉ TWO DEVELOPMENT OPTIONS
OPTION A: Code on Your Computer (Local Development)
Pros:
β Full control
β Can work offline
β Learn real software setup
β Good for serious programmers
Cons:
-
Setup may be difficult
-
Requires installing Python
-
Requires using terminal
OPTION B: Code in the Cloud (Recommended for Schools)
Pros:
β No installation needed
β Easy team collaboration
β Saves files online
β GitHub integration
Cons:
-
Requires stable internet
Recommended Tools:
-
Streamlit Cloud
-
GitHub
-
Google Colab
πΉ ACTIVITY A: LOCAL SETUP (45 Minutes)
Step 1: Install Python
Step 2: Install Visual Studio Code
Step 3: Install Streamlit
Step 4: Run first app
Example basic code:
Run using:
πΉ ACTIVITY B: CLOUD SETUP (Recommended)
-
Create GitHub account
-
Create Streamlit Cloud account
-
Connect repository
-
Deploy simple app
No installation required.
πΉ REALISTIC PROJECT EXAMPLES (WEB APPS)
1οΈβ£ School Fee Tracking System
2οΈβ£ Market Price Dashboard
3οΈβ£ Youth Employment Portal
4οΈβ£ Climate Alert Dashboard
5οΈβ£ SACCO Loan Calculator
πΉ REFLECTION QUESTIONS
-
Was text-based coding harder than block coding?
-
Did installation present challenges?
-
Which development method fits our team?
-
Does our problem require a web-based solution?
-
Will AI improve our web app?
πΉ KEY TERMS
Web App β Interactive app running in browser
HTML β Structure
CSS β Design
JavaScript β Interactivity
Python β Programming language
Streamlit β Python web framework
IDE β Integrated Development Environment
πΉ STRATEGIC RECOMMENDATIONΒ
For most schools:
β Start with MIT App Inventor
β Move to Python + Streamlit for advanced teams
Web apps are powerful for:
-
Data-heavy solutions
-
AI integration
-
Dashboard-style apps