Computer Science
Beginner
80 mins
Teacher/Student led
+30 XP
What you need:
Chromebook/Laptop/PC

Overview of ALT 1: Introduction to Interactive Information Systems

In this lesson, you'll explore the basics of interactive information systems. Follow steps to understand the task, review key skills, brainstorm ideas, form teams, and plan your project. This will take 120-180 minutes over several days.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Introduction

    This lesson provides an overview of ALT 1: Interactive Information Systems.

    You'll learn about the task, review relevant skills from previous modules, brainstorm ideas, form teams, and reflect on your approach. This should take about 120-180 minutes so you'll be working on this over a number of days according to your timetable.

    ALT 1 focuses on creating an interactive information system, which is essentially a database-driven website or application that allows users to interact with data. For example, think of a system where users can add, view, update, or delete information, like a simple online library catalogue or a student grade tracker.

    2 - Reviewing Key Concepts

    Before diving into ALT 1, let's review what you've learnt in prior modules. This will help you build on your existing skills.

    From Introduction to Web Frontend: In this module, you learnt the fundamentals of building web pages that users can interact with directly in their browsers.

    HTML forms the backbone by providing structure, allowing you to create essential elements such as headings, paragraphs, lists, and interactive forms for user input.

    CSS enhances the visual appeal and usability by handling styling, including colours, fonts, layouts, and responsive designs that adapt to different screen sizes.

    JavaScript brings interactivity to life, enabling features like dynamic form validation (e.g., checking if an email address is correctly formatted before submission), event handling (such as button clicks), and updating page content without needing to reload the entire page. For instance, you might have created a simple registration form that uses JavaScript to provide instant feedback on input errors.

    From Python Web Backend: This module introduced you to server-side programming, where the magic of data processing and storage happens behind the scenes. You explored Flask, a flexible and lightweight web framework in Python, which allows you to build web applications efficiently.

    Key skills included setting up routes to handle different types of HTTP requests (like GET for retrieving data and POST for submitting forms), rendering dynamic templates using Jinja2 to display data from the server, and integrating with databases for persistent storage.

    With SQLite, a straightforward embedded database, you practised essential SQL operations: SELECT to query and retrieve specific data, INSERT to add new records, UPDATE to modify existing information, and DELETE to remove unwanted entries. For example, you could have built a basic web app that stores user-submitted notes in a database and displays them on a webpage, demonstrating how backend logic connects user actions to data management.

    Take 10 minutes to jot down one example from each module that you think will be useful for ALT 1.

    3 - Understanding the Task Requirements

    In ALT 1, you'll work in teams to design and build an interactive information system. This is essentially a web-based application that uses a database to manage and interact with data in meaningful ways. The artefact must include:

    • A database to store information securely and efficiently.
    • A user interface for interacting with the data (e.g., CRUD operations: Create new entries, Read or view existing data, Update information, and Delete records as needed).
    • Additional features like search functionality, filtering options (e.g., by date or category), or user authentication to control access.

    The system should solve a real-world problem, such as managing event registrations, tracking inventory in a small business, or organising a community library's book loans. It must be user-friendly, with intuitive navigation and clear layouts, and demonstrate good design principles like accessibility and responsiveness across devices.

    You should follow structured stages to develop your project:

    1. Plan (define the problem and requirements)
    2. Design Database (create schemas for tables and relationships)
    3. Build Backend (set up server logic and database interactions)
    4. Develop Frontend (create the user-facing interface)
    5. Test (check for bugs and usability)
    6. Refine (make improvements based on feedback).
    Remember, the goal is to create something practical that showcases your skills in both frontend and backend development, while addressing a genuine need.

    4 - Forming Your Team

    ALTs are team-based tasks, designed to encourage collaboration and allow you to combine your strengths with others. Teams should consist of 2-4 students, making it easier to divide tasks and share ideas effectively.

    Instructions:

    1. Discuss with your classmates to form a team based on shared interests or complementary skills. For example, if you're strong in frontend design, pair up with someone who enjoys backend coding.
    2. Assign roles within the team to ensure everyone contributes uniquely: for instance, one person could focus on database design, another on frontend development, someone else on backend logic, and another on testing and debugging.
    3. Decide on communication tools to stay connected, such as shared online documents, and group chats. Also, set up a regular meeting schedule, perhaps weekly check-ins, to track progress and address any issues.
    Remember, effective teamwork is key to success – skills like active listening, sharing responsibilities, and resolving conflicts constructively. Working in a team will help you build a more robust interactive information system.

    5 - Brainstorming Artefact Ideas

    Now, apply what you've learned by brainstorming ideas for your artefact. Spend 20-30 minutes on this guided activity to generate creative and practical concepts for your interactive information system.

    Step 1: Think of a real-world problem that could be solved with a database-driven website or app. Consider issues in your school, community, or personal life. Examples: A recipe sharing app where users can upload and browse recipes, a book review system for a school library, or a fitness tracker that logs workouts and progress.

    Step 2: List key features that your system would need. Be specific about how it interacts with data. For a recipe app: Allow users to add recipes (storing details like ingredients and instructions in a database), search by category or ingredient, update existing recipes, and delete old ones. Think about additional features like user ratings or favourites.

    Step 3: Sketch a simple wireframe on paper or digitally. Outline the main pages and user flow. Include elements like a home page with a search bar, an 'add item' form, a view list page with filters, and perhaps a user profile section. This helps visualise the interface early on.

    Step 4: Consider what technologies you will use and why they fit. For example, HTML/CSS/JavaScript for the frontend to create responsive and interactive pages, Python with Flask for the backend to handle server logic and routes, and SQLite for the database to manage data storage and queries efficiently. Jot down any potential challenges, like integrating frontend validation with backend data submission.

    Once done, review your ideas and pick one that excites you most – this will form the basis of your ALT 1 project.

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more