CITC - IT Department

Computer Laboratory Activity Form

Course Code IT323

Course Title Application Development and Emerging Technology
Topics Covered Overview of Software and Hardware Technology
Objectives This innovative platform seamlessly combines the power of mobile
and web applications to transform the way you access learning
materials. Experience the freedom to learn anywhere, anytime or
other resources for offline access, making the most of commutes
or downtime with limited internet.

Materials:

1. Computers with internet access

2. Development environments for web and mobile platforms (e.g., Visual Studio Code, Android
Studio, Xcode)
3. Text editor or Integrated Development Environment (IDE)
4. Mobile devices (smartphones or emulators)
5. Internet connectivity
6. Optional: Virtual Reality (VR) headsets, Augmented Reality (AR) devices, Machine
Learning frameworks

Duration: 4-6 hours (can be divided into multiple sessions)

Description

Title : Edukada

Activity Steps:

1. Introduction to Learnify:
We have an innovative mobile educational application that aims to develop a dynamic learning
platform for cross-platform development in response to the growing needs of the digital age. This
proposal is aimed at providing complete training that will enable learners to compete favourably in
the software development industry.

A meticulously crafted curriculum is the foundation of our proposal in which the significance of
cross-platform development is explained. Our app seeks to immerse students into a transformative
world of current development practices that can lead them into deeper understanding of cutting-edge
trends and innovations influencing web and mobile app development.

Participants will go through interactive modules where they will experience hands-on learning by
undertaking fundamental developmental stages as well as mastering crucial ideas involved. Students
will gain practical skills under be guided with practical skills from system configuration for web and
mobile platforms, designing user interfaces prioritizing usability and responsiveness among others,
skills applicable directly in working situations. Come join us on this educational voyage where
innovation meets opportunity; together let’s design software’s future.
 2. Setting Up Development Environments:
Our startup for our educational mobile and web project in creating app, We must install first our
materials in VSCode, which is IDE, Extensions, Expo go, etc.

Visual Studio Code- This is the IDE we use to start our project application code.

Figure:1.0 VSCode IDE Download the VScode IDE to create an application

Installing Expo go app in android

Figure:1.3 Terminal command prompt Go to the command prompt and type this to create app
To create a react-native mobile app just type this into the cmd or commandprompt or in your Terminal

Installing dependencies
Accessible library of react components
Figure:1.4 Installing packages This Website, you can get reference packages to install in your code.

Figure:2.0 installing Django

installing for Django- This Django is useful for our project, We think this Django is better than other
backend site.
 Creating web application platform
Installing react web project

Figure:2.1 installing react web project

Figure:2.2 Terminal of command prompt

To create a react-native web app just type this into the cmd or commandprompt or in your Terminal
 Figure:2.3 Emulator for android

For mobile emulators just download multiple emulators for making mobile applications.

Figure:2.4 Expo go
 Figure:3.1 Eas login account
This expo go can make easier your applications and can use as expo go as an android emulators of your
cellphone

The last is the extensions for our VSCODE to make easier by downloading or installing the need of our code
in the following:
1. React Snippets- React snippets are pre-written pieces of code that streamline your React development
process. They act as shortcuts, allowing you to quickly insert commonly used React constructs into
your codebase, saving you time and effort.

Figure:3.2 Installing React-native-Snippets

2. Prettier- Code formatter is a popular VS Code extension that helps you automatically format your
code according to a set of predefined rules. This ensures consistency in your code style, making it
easier to read and maintain, especially when working on a project with multiple developers.

Figure:3.3 Installing Prettier

 2.1 For the development of this project, we will be making use of the software development
methodology
Agile methodology.

Figure:3.4 Agile diagram

We will be utilizing the Agile methodology, which employs a systematic but adaptable method. Agile focuses
on iterative development, with solutions evolving through collaboration among cross-functional teams. This
approach is perfect for our project, as the requirements may evolve as you gain a deeper understanding of
your users and the educational.

Step 1: Requirements Gathering

User personal: We'll create user profiles for students (main users) and
educators/librarians (content providers). This helps us understand their needs for learning
materials, quizzes, and payments.

What do they want? Through workshops or interviews, we'll gather user needs and
translate them into actionable tasks.

Prioritizing Features: Not all ideas are created equal. We'll prioritize user stories based
on importance, user impact, and development effort. This creates a product backlog, a
roadmap for development in upcoming sprints (short development cycles).

Step 2. Designing the Platform

From Ideas to Interfaces: We'll collaborate with designers to turn prioritized
requirements into user-friendly interfaces. Tools like Figma will help create wireframes
and mockups for both the website and mobile app (if applicable).

Seamless User Experience: We'll design the user journey to ensure smooth navigation
and interaction for both students and educators/librarians.

Focus on the Details:

Library Design: Browsing functionalities will be designed for various learning material
types (free and paid) with clear pricing and payment options.

Quiz Design: An intuitive interface will accommodate short and long quizzes with
different question types and answer explanations for feedback.

Payment Design: A secure and user-friendly payment flow will be ensured for
cash, online payment, or credit card transactions (if applicable). Integration with payment
gateways will be considered.

Mobile App Design (if applicable): The design will be adapted for a mobile
experience, focusing on easy browsing, quiz taking, and payment options.

Getting Feedback: We'll conduct regular design reviews with stakeholders and users to
gather feedback and continuously improve the design.

Step 3. Development of Learnify

Breaking it Down: We'll break down the development tasks into smaller, manageable
pieces and assign them to development teams.

Agile Sprints: We'll use Agile methodologies like Scrum or Kanban to manage
development in sprints. Here's a sample breakdown of potential sprints (adapt based on
your specific needs):

Core Features Sprint: Build core functionalities like searching, browsing, and accessing
free learning materials in the first sprint (1-2 weeks).

Quizzing System Sprint: Develop the quizzing system in another sprint, focusing on
both short and long quizzes, question types, and answer explanations.

Payment Integration Sprint (if applicable): Integrate a secure payment gateway for
various payment methods in a dedicated sprint. User authentication and secure payment
processing will be a focus.
Mobile App Sprint (if applicable): Develop the mobile app (React Native) in a separate
sprint, focusing on core functionalities like browsing, quizzes, and payment options
tailored for mobile devices.

Content Management Sprint: Develop functionalities for educators/librarians to upload

learning materials (with pricing options) and manage their content in a dedicated
sprint. Integration with the payment system (if applicable) for managing earnings will be
included.

Final Integration Sprint: In a final sprint, all components will be integrated and tested to
ensure a cohesive and functional platform. This includes testing, debugging, performance
optimization, responsive design for web and mobile platforms (if applicable), and quality
assurance checks.

Communication is Key: Regular sprint planning meetings will be held to define tasks for
each iteration and maintain a structured workflow. Collaboration between
developers, educators/librarians, and students is encouraged to ensure alignment with
project goals.

Step 4. Putting Learnify to the Testing

Testing Throughout: Comprehensive testing will be conducted throughout the

development process.

Testing Strategies: Here's a breakdown of potential testing strategies for each sprint:

Core Features Sprint Testing: Functionality of search, browsing experience, and access
to free learning materials will be tested.

Quizzing System Sprint Testing: Short and long quizzes, question types, answer
explanations, and quiz grading will be rigorously tested.

Payment Integration Sprint Testing (if applicable): The payment gateway for
cash, online payment, or credit card transactions will be rigorously tested to ensure
secure user authentication and payment processing.

Mobile App Sprint Testing (if applicable): We'll test functionalities on various mobile
devices, focusing on usability and performance.

Step 5. Deployment

Web Interface Launch Sequence:

Test Flight: Before takeoff, we'll deploy the web interface to our own servers for a test
run. This lets us identify and fix any glitches in a controlled environment.

Lift-off!: Once everything is functioning smoothly, we'll move Learnify to a public server
accessible to everyone online. This is the official launch!

Mobile App Deployment (if applicable):

If we're building a mobile app, here's its launch procedure:

App Store Clearance: Depending on the target devices (iOS or Android), we'll submit the
app to the respective app store for review and approval. This process can take some
time, similar to getting clearance for a new aircraft.

Limited Beta Test (Optional): Before a full public release, we might conduct a limited
test with a small group of users. This allows us to gather feedback and make final
adjustments, just like a pre-launch test flight.

The Backend: Mission Control

The backend is the unseen force behind Learnify, handling user data and payments.
Here's how we'll get it mission-ready:

Ground Control Test: Similar to the web interface, we'll test the backend on our own
servers first to ensure everything is functioning flawlessly.

Joining the Flight: Once testing is complete, the backend will move to a public server
alongside the web interface, ensuring smooth collaboration between both parts.

Step 6. Maintenance

Keeping it Fresh: The world of education and technology is constantly evolving. We'll
stay on our toes by following industry trends, listening to user feedback, and implementing
new features to improve Learnify. This could involve adding new ways to learn, like
different question types or payment options based on what users need.

Bug Zappers: No app is perfect, and unexpected bugs can pop up. We'll have a
dedicated team of bug detectives to identify, diagnose, and fix any glitches users
encounter. This ensures a smooth and frustration-free experience for everyone.

Performance Pit Crew: Regular checkups help us identify areas where Learnify might
slow down under heavy traffic. We'll be proactive and fine-tune the platform to ensure fast
loading times and a responsive user experience, keeping things running smoothly.
Security Shield: Security is a top priority when dealing with user data and transactions.
We'll continuously update our security measures and conduct regular check-ups to find
and address any weaknesses. This safeguards user information and protects against
potential security threats.

Content Refresh: Keeping the learning materials up-to-date and relevant is crucial. We'll
encourage educators/librarians to regularly update their content and add new materials to
cater to the ever-changing needs of students.

Communication is Key: We believe in open communication. We'll keep users informed

about upcoming maintenance, new features, and any important updates through clear
announcements or notifications within the platform.
 Figure:4.0 Use Case Diagram(Mobile & Web)

The diagram shows user interactions like browsing by category, taking quizzes, and potentially managing a
personal library. These can be mapped to Learnify with adjustments like "View Book" becoming "Access
Learning Material." Additionally, specific Learnify features like uploading materials (for
Educators/Librarians) or payment processing (if applicable) would need to be included.
 Figure:4.1 Context Diagram for Learnify

It shows three main user groups: Students, Instructors, and potentially an Administration team. Students
request access to courses, learning materials, and quizzes, and receive results and feedback. Instructors create
and manage courses, upload materials, and communicate with students. The Administration (optional) handles
user accounts and maintains the LMS platform for smooth operation. This is a simplified view, and the actual
LMS would have more internal processes to handle these data flows.

Figure:4.2 Data flow diagram lvl1 for Learnify

The diagram depicts actors (users) interacting with the system through various use cases (actions). Actors
include Students and Librarians/Educators. Use cases like browsing materials by subject, searching by
keyword, and viewing material details are applicable to Learnify.
Librarians/Educators would have additional use cases like uploading learning materials and potentially
managing pricing options (if the platform offers paid materials). Both user groups can access learning
materials and potentially interact with quizzes or assessments.
Assessment:

Assessment of student performance can be based on:

• Completeness and functionality of the cross-platform application.

• Clarity and accuracy of the DFD and UML diagrams.
• Creativity and usability of the user interface design.
• Integration and utilization of emerging technologies to enhance application
functionality.
• Presentation skills and ability to articulate design decisions and project insights.

Activity No : #2
Activity Name : Comprehensive Cross-Platform Application Development Laboratory:
Exploring Mobile, Web, and Emerging Technologies with DFD and UML
Documentation
Student ID : 2021300379
2021302109
Student Name : Sayan, Kenneth Angel M.
Ladra, Raff Shan Rowenn
Gucor, Nathaniel Mari
Belisario Saguindan Joe Lejan
Course & Year BSIT – 3th Year Section : R9