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.
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
This expo go can make easier your applications and can use as expo go
Figure:3.1 Eas login account

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.
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.2 Installing React-native-Snippets

Figure:3.3 Installing Prettier
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 forcash,
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
dedicatedsprint. 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 betweendevelopers,
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.
PHASE 4: CUTOVER
-Receiving input from users
-Enhancing the system
-Including extra functionalities

4. Designing the User Interface:

FIGURE 13.0 MOBILE WIREFRAME

FIGURE 13.1
MOBILE
PROTOTYPE
FIGURE 13.2 WEB PROTOTYPE

5. Implementing the Web Interface:

Text Editor / IDE:
We rely on Visual Studio Code (VSCode) to shape the code that powers our website. It offers a tidy and
effective environment where our developers can effortlessly write and refine code. With its wide range of add-
ons and adaptable features, VSCode simplifies the development process, ensuring efficiency and accuracy in
coding tasks.

Figure 13.3 vscode website

React JS:
We've chosen to implement our project using React.js for several key reasons. Firstly, React's component-
based architecture allows us to break down our user interface into reusable and modular components. This not
only enhances code organization but also facilitates scalability as our project grows. React's virtual DOM also
enables efficient rendering of UI updates, ensuring a smooth and responsive user experience. With React's
declarative syntax, we can easily define how our UI should look based on the underlying data, making our code
more readable and maintainable. Furthermore, React's one-way data binding simplifies data management and
reduces the risk of unexpected side effects. Lastly, React's extensive ecosystem and active community provide
us with a wealth of resources and support to accelerate our development process and address any challenges we
encounter along the way. Overall, choosing React.js for our web implementation empowers us to build a
robust, scalable, and user-friendly project.

Figure 13.4React js website

Next.js
We've opted to utilize Next.js for the implementation of our project for several compelling reasons. First and
foremost, Next.js offers a powerful framework built on top of React.js, providing us with a solid foundation for
building server-rendered and statically-generated web applications. This approach ensures that our project is
not only highly performant but also optimized for search engines and social media sharing, ultimately
enhancing its visibility and accessibility. Moreover, Next.js simplifies the development process by offering
features such as automatic code splitting, route prefetching, and hot module replacement, thereby streamlining
our workflow and improving developer productivity. Additionally, Next.js seamlessly integrates with popular
technologies like TypeScript, GraphQL, and CSS-in-JS, allowing us to leverage modern tools and techniques to
enhance the functionality and aesthetics of our project. Furthermore, Next.js provides robust support for server-
side rendering and API routes, enabling us to create dynamic and interactive web experiences while
maintaining a clean and maintainable codebase. Overall, by choosing Next.js for our web implementation,
we're able to deliver a fast, scalable, and feature-rich project that meets the demands of modern web
development.
Figure 13.5 Next.js website
Tailwind CSS:
We've chosen Tailwind CSS for our project's web implementation because it offers a streamlined, utility-first
approach to styling. With its extensive set of pre-defined utility classes, Tailwind CSS allows us to rapidly
build and customize our user interface while promoting code maintainability and scalability. Its seamless
integration with modern front-end workflows and extensive customization options make it the ideal choice for
creating a polished and responsive design that aligns with our project's goals.

Figure 13.6 Tailwind CSS website

6.Developing the Mobile Application:

Text Editor / IDE
We rely on Visual Studio Code (VSCode) to shape the code that powers our website. It offers a tidy and
effective environment where our developers can effortlessly write and refine code. With its wide range of add-
ons and adaptable features, VSCode simplifies the development process, ensuring efficiency and accuracy in
coding tasks.
Figure 14.1 vs code website

React Native
We're using React Native for our mobile implementation because it enables cross-platform development with
JavaScript, streamlining the process and saving time. With access to native components and APIs, React Native
ensures a native-like experience and smooth performance. Its hot reloading feature speeds up development and
enhances productivity, allowing us to create high-quality apps for both iOS and Android platforms efficiently.

Figure 14.2 React Native Website

Expo
We've opted for Expo Go for our mobile implementation because it allows us to develop and preview React
Native apps directly on our devices with ease. Its simplicity, real-time updates, and access to pre-built
components streamline development and enhance productivity, enabling us to focus on delivering a great user
experience efficiently.
Figure 14.3 Expo Go Website

Clerk Auth
We've chosen Clerk Auth for our project's mobile implementation because it offers a seamless and secure
authentication solution. Clerk Auth provides ready-to-use authentication flows, including login, registration,
and password reset, reducing the development time and effort required to implement these features. With Clerk
Auth, we can easily integrate authentication into our mobile app with just a few lines of code, saving us
valuable development resources. Additionally, Clerk Auth offers advanced security features such as multi-
factor authentication and passwordless login, ensuring the protection of our users' accounts and data. Its
intuitive dashboard allows us to manage users and permissions effectively, providing us with greater control
and visibility over our app's authentication system. Overall, by using Clerk Auth for our mobile
implementation, we can provide a smooth and secure authentication experience for our users while minimizing
development overhead.

Figure 14.4 Clerk Auth website

:
7.Integrating Mobile and Web Components:
 The mobile application and the online interface should be able to communicate and
synchronize data with ease.
 adding the functionality that enables users to move between the application's web and mobile
versions with ease.

8.Creating UML Diagrams:

FIGURE 14.1 CLASS DIAGRAM FOR EDUKADA

-User class has a 1 to many Relationship with the Course class, as 1 user can enroll in 1 or multiple courses,
and each course is associated with only 1 specific user.
-Course is made up of four subjects, forming the core structure of the curriculum. Each subject is exclusively
linked to one course, ensuring they remain integral to the course's existence.
-Progress Status for each course is collected and stored, creating an Aggregation Relationship between Progress
Status and Course.
 FIGURE 14.2 SEQUENCE DIAGRAM FOR EDUKADA
1.) Login
The User initiates the authentication process by contacting the System Validation component to verify
their credentials with the System. If the credentials are valid, the System Validation component confirms
successful authentication, allowing the User to proceed.
If the credentials are invalid, the System Validation component signals a login failure, prompting the User
to retry.
2.) Accessing Homepage:
Upon successful authentication, the System Validation component directs the User to the homepage.
The User can now browse courses available on the platform.

3.) Course Selection:

The User selects specific courses of interest. The System retrieves details of the selected courses.

4.) Displaying Course Details:

The User sends a request for course details to the System. The System processes the request and displays
the details of the selected course to the User.

5.) Taking Course Quiz:

The User proceeds to take a quiz associated with the course. The System evaluates the quiz responses and
computes the score.

6.) Displaying Quiz Score:

After the User completes the quiz, the System displays the quiz score to the User.

7.) Returning to Homepage:

Once the quiz interaction is complete, the User returns to the homepage for further exploration or
interaction with the system.
 FIGURE 14.3 ACTIVITY DIAGRAM FOR EDUKADA WEB
Upon entering the Edukada website, users are prompted to log in to access the platform's features. After
logging in, users can freely browse the homepage of Edukada, which provides an overview of the available
courses and educational resources.If users choose a specific course from the homepage, they can access
detailed course information and materials. Users can view detailed information about the course, including its
objectives, content, and instructor details. Upon selecting the course, users can access lectures, assignments,
quizzes, and other materials. Users can navigate to their profile or dashboard to manage the selected course
and track their progress. Users have the option to log out from their profile or dashboard, ending their session
on the Edukada website.
 FIGURE 14.4 ACTIVITY DIAGRAM FOR EUKADA MOBILE

Users begin by logging into the Edukada Mobile App. If login fails, they're directed to register; if successful,
they proceed to the homepage. If users choose to register, they provide necessary details and are then
redirected back to the login screen. Users land on the homepage, where they find buttons for Courses,
Explore, and Profile. Users can view available courses by selecting the Courses button. Users can take trivia
quizzes by selecting the Explore button. Users can view their profile, including credentials (username, email),
and can log out from their profile. The activity concludes once the user logs out or finishes their session.
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