Build a Mobile App for Weather Broadcast with AI Code Generation Assistant

Date: 24 Oct 2025 (Fri) & 31 Oct 2025 (Fri)

Time: 14:30 - 16:30

Venue: M403 / Online

Target Audience: All current students

Medium of Instruction: English

**Participants are required to join both sessions (2.0 hrs x 2)

Objective:

To design and develop a mobile weather app using React Native, APIs, and modern mobile development techniques.

What You Will Learn:

1. Understand React Native and its role in mobile development.
2. Understand APIs and how they work, including API endpoints, requests, and responses.
3. Learn how to parse JSON data and handle errors and exceptions.
4. Build a weather app using React Native, JavaScript and JSX.
5. Understand the basic operation of GitLab

Agenda:

1. Introduction to React Native
   - Overview of React Native
   - Setting up the development environment
2. Building the App Structure
   - Creating a new React Native project
   - Building the basic UI for the weather app (Header, Main Content, Footer)
3. Fetching Weather Data
   - Introduction to APIs and RESTful services
   - Choosing a weather API (e.g., OpenWeatherMap, WeatherBit)
   - Making API calls using React Native's fetch or Axios
4. Working with State and Props
   - Understanding React's state and props
   - Managing state in React Native (useState hook)
   - Passing data between components using props
5. Styling the App
   - Overview of React Native's styling system
   - Creating reusable styles with StyleSheet
6. Adding Interactivity
   - Handling user input (TextInput, Button)
   - Allowing users to search for locations
7. Navigation and Routing
   - Introduction to React Navigation
   - Setting up navigation stack
   - Navigating between screens (e.g., Home, Settings, Search)
8. Debugging and Testing
   - Debugging techniques in React Native
9. Deploying the App
   - Building the app for production (iOS and Android)
   - Submitting the app to app stores (Apple App Store and Google Play Store)