Chapter 4: System Design and
Implementation
4.1 Introduction
This chapter presents the design and implementation of the mobile application developed for
learning computer science concepts in diploma programmes. The system was designed to
provide students with an interactive and user-friendly platform for accessing tutorials,
practice questions, and self-assessment tools. The chapter discusses system requirements,
design methodologies, system architecture, and implementation tools. Screenshots of the
application interface and results from system testing are also presented.
4.2 System Requirements
4.2.1 Hardware Requirements
● Android smartphone with at least 2 GB RAM.
● Minimum storage of 500 MB free space.
● 1.2 GHz processor or higher.
● Internet connectivity (for synchronization, though offline features are supported).
4.2.2 Software Requirements
● Operating System: Android 8.0 (Oreo) or higher.
● Development Environment: Android Studio.
● Programming Language: Dart (using Flutter framework).
● Database: Firebase Firestore.
● UI Design Tool: Figma.
4.2.3 User Requirements
● Easy navigation and intuitive interface.
● Accessibility of tutorials and practice quizzes.
● Ability to track progress and performance.
● Offline access to downloaded content.
4.3 System Architecture
The system architecture is based on a three-tier structure:
1. Presentation Layer (Front-End): The mobile app interface developed with Flutter,
responsible for user interactions such as reading tutorials, attempting quizzes, and
viewing results.
2. Application Layer (Logic): Handles business logic such as quiz evaluation,
progress tracking, and authentication.
3. Data Layer (Back-End): Firebase Firestore database that stores user accounts,
quizzes, tutorials, and performance records.
4.4 System Design
4.4.1 Use Case Diagram
The use case diagram models the interactions between users (students and lecturers) and
the system.
Actors:
● Student
● Lecturer
● Admin (optional for content management)
Use Cases:
● Login/Register
● View Tutorials
● Take Quiz
● View Progress Report
● Upload Content (Lecturer/Admin)
4.4.2 Data Flow Diagram (DFD)
Level 0 (Context Diagram):
● Student interacts with the system to request tutorials and quizzes.
● System retrieves data from Firebase and displays it to the user.
● Results are stored back in the database.
Level 1:
● Login Module → Validates user credentials.
● Content Module → Provides tutorials and notes.
● Quiz Module → Presents questions, evaluates answers.
● Progress Module → Tracks performance and generates reports.
4.4.3 Entity Relationship Diagram (ERD)
Entities include:
● User: user_id, name, email, password, role.
● Tutorial: tutorial_id, title, content, subject.
● Quiz: quiz_id, question, options, correct_answer, tutorial_id.
● Result: result_id, user_id, quiz_id, score, date.
Relationships:
● A user can attempt many quizzes.
● A tutorial can have many quizzes.
● A user can generate multiple results.
4.4.4 User Interface Design
The app interface was designed with simplicity and usability in mind. The following screens
were created:
1. Splash Screen: Displays the app logo.
2. Login/Registration Screen: Allows users to sign in or create an account.
3. Home Screen: Provides navigation to Tutorials, Quizzes, and Progress Tracker.
4. Tutorial Screen: Displays notes and explanations of computer science concepts.
5. Quiz Screen: Presents multiple-choice questions with instant feedback.
6. Progress Report Screen: Shows charts of performance over time.
4.5 Implementation
4.5.1 Tools Used
● Flutter (Dart): For cross-platform app development.
● Firebase Firestore: For backend database storage.
● Figma: For interface prototyping.
● Android Emulator & Physical Devices: For testing.
4.5.2 Coding
The mobile app was implemented using Flutter. Example code snippet for a quiz question
display:
class QuizPage extends StatelessWidget {
final List<String> questions = [
"What does CPU stand for?",
"Which language is primarily used for Android development?"
];
final List<List<String>> options = [
["Central Processing Unit", "Control Program Utility", "Compute Process Unit"],
["Java", "Python", "C++"]
];
final List<String> answers = [
"Central Processing Unit",
"Java"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Quiz")),
body: [Link](
itemCount: [Link],
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(questions[index]),
subtitle: Column(
crossAxisAlignment: [Link],
children: options[index].map((opt) {
return ElevatedButton(
onPressed: () {
if (opt == answers[index]) {
[Link](context).showSnackBar(
SnackBar(content: Text("Correct!"))
);
} else {
[Link](context).showSnackBar(
SnackBar(content: Text("Wrong answer"))
);
}
},
child: Text(opt),
);
}).toList(),
),
),
);
},
),
);
}
}
4.6 System Testing
4.6.1 Unit Testing
Individual modules (Login, Tutorial, Quiz, Progress Tracker) were tested separately to
ensure correctness.
4.6.2 Integration Testing
Modules were integrated and tested together to confirm smooth data flow between Firebase
and the app interface.
4.6.3 Usability Testing
A group of 20 diploma students tested the app and provided feedback. Most students rated
the app as easy to use and helpful for self-learning.
4.7 Results/Output
The following were observed from testing:
● Students successfully logged into the app and accessed tutorials.
● Quizzes provided instant feedback, which improved engagement.
● Progress tracking helped students identify weak areas.
● Lecturers noted that the app could reduce workload in continuous assessments.
4.8 Discussion of Findings
The development and testing of the mobile application revealed that integrating mobile
learning into diploma programmes is highly feasible. Students found the system engaging,
accessible, and effective in clarifying complex computer science concepts. The results
support earlier studies (see Chapter Two) that mobile learning improves academic
performance.
4.9 Summary
This chapter presented the system design and implementation of the mobile application. It
discussed requirements, system architecture, diagrams, interface design, coding, and
testing. The findings show that the app is functional and effective in enhancing learning. The
next chapter (Chapter Five) will present the summary, conclusion, and recommendations of
the study.