A2%20Programming
A2%20Programming
2025
UNIT – 4 : Programming
|
L3C31 Programming Khin Moe Makha
Contents
Introduction ................................................................................................................................................. 3
Process of Designing Student Registration App .................................................................... 3
1. Purpose of Student Registration App ........................................................................... 4
2. Gathering User Requirements of Student Registration App ........................... 4
2.1 Workflow of Student Registration app .................................................................... 6
2.2 User Interface Design ........................................................................................................ 7
......................................................................................................................................................................... 7
3. Design Review .......................................................................................................................... 10
3.1 Peer A ............................................................................................................................................ 10
3.2 Peer B ............................................................................................................................................ 11
Improvement based on Review ..................................................................................................... 12
4.1 Peer A ................................................................................................................................................ 12
Developed Designs ................................................................................................................................ 14
Peer Reviews ............................................................................................................................................. 14
Usage of Blocks in Each Screen ..................................................................................................... 15
1. Welcome Screen ...................................................................................................................... 15
....................................................................................................................................................................... 15
2. Register Screen........................................................................................................................ 16
3. Log in Screen ............................................................................................................................. 17
4. Course Selection...................................................................................................................... 18
5. Major Selection of Computer Science ......................................................................... 18
1
L3C31 Programming Khin Moe Makha
6. Major Selection of Information Technology ........................................................... 19
7. Confirmation .............................................................................................................................. 20
8. Profile ............................................................................................................................................ 21
9. Admin ............................................................................................................................................. 22
10. User Management................................................................................................................... 22
Testing Functions in Student Registration App .................................................................... 23
Optimization .............................................................................................................................................. 26
Evaluation ................................................................................................................................................... 27
Personal Responsibility ....................................................................................................................... 27
It is such a high responsibility to develop the entire student registration application
within given days. In order to accomplish it on deadline, I had to make myself a tight
schedule shown below. ............................................................................................................................. 27
Date.................................................................................................................................................................. 27
Task .................................................................................................................................................................. 27
5.1.2025 ......................................................................................................................................................... 27
Explore about User requirements ......................................................................................................... 27
6.1.2025 ......................................................................................................................................................... 27
Draw Entire flow for software ................................................................................................................ 27
7.1.2025 ......................................................................................................................................................... 27
Draw wireframes ......................................................................................................................................... 27
8.1.2025 ......................................................................................................................................................... 27
Seek for peer reviews ............................................................................................................................... 27
10.1.2025 ...................................................................................................................................................... 27
Collected and make some improvements ......................................................................................... 27
12.1.2024 ...................................................................................................................................................... 27
Start Developing ......................................................................................................................................... 27
24.1.2024 ...................................................................................................................................................... 28
Finished developing ................................................................................................................................... 28
25.1.2024 ...................................................................................................................................................... 28
Seek for reviews.......................................................................................................................................... 28
26.1.2024 ...................................................................................................................................................... 28
Collected and make improvements ..................................................................................................... 28
27.1.2024 ...................................................................................................................................................... 28
Launched the application ......................................................................................................................... 28
I followed as this schedule but there were a lot of difficulties as I am still a student.
Therefore, I had to search and read documents about functions about MIT app inventor
2
L3C31 Programming Khin Moe Makha
for better features. My creativity can be seen in the design process. Receiving several
improvements yet delivering with engaging designs for user friendliness. ......................... 28
Conclusion ................................................................................................................................................... 28
Introduction
There is a club named “Code Ninjas” in my school, well known for its creative
solutions assisting in real life problems by programming. Hence, the school provided a
task to develop an administrative task, specifically saying a responsive and dynamic
student registration app. Therefore, as a member, I am assigned to accomplish the given
task by using MIT App inventor. The goal of this report is to demonstrate how MIT app
is used to create the desired Student registration app which digitalize the old
administrative tasks by presenting step by steps of the process.
3
L3C31 Programming Khin Moe Makha
1. Purpose of Student Registration App
The primary purpose of the app is to increase the convenience of student registrations
system, to modify and update it electronically, so that students can register any time at
any location with internet access. The app can replace the hard work for school in
By digitalizing the student registration process, the school can reduce significant
amount of complex paper work, high maintenance and reduce costs with registration
papers for students too. The next section will present User Requirements which are
features required to accomplish each of these purposes.
The first step every developer has to carry out before developing any types of
software is to get to know well of what the app is intended to solve. Thus, based on the
three purposes of the app, Code Ninjas collected user requirements for consideration of
“precise features” to add in Student Registration App.
4
L3C31 Programming Khin Moe Makha
• Secure and The old students who have registered
A. Recording Valid Log in must be able to log in back with valid
Student • Secure email and passwords. New users must
Information Registration fill Student’s ID, name, Birth of Date,
from for new Email, Passwords, Phone Number and
users Address for proper validation and they
• Storing them have to be stored effectively to check
in Database back for future log in process.
5
L3C31 Programming Khin Moe Makha
2.1 Workflow of Student Registration app
Observation from the required features above, the workflow for the entire
application is structured. In the opening of the application, there will be a choice to either
log in or sign up for existing and new users. If an old student is logging in back to the
system, they are required to fill in Email, Password and Username they used during
registration process. Then, the backend will check if current inputs and old inputs
matched. If it did, the old user has signed in successfully.
For the new user, they have to fill out User Name, Email, Passwords, Phone
number, address and date of birth. If the filled information are not valid such as entering
numbers in Name, will be sent back notify of “Wrong inputs”, and will require to fix back.
If valid information will be automatically saved in the data base and then, they can move
on to the course selection with two domains: Computer Science and Information
Technology. Students that choose Computer science will be led to another screen which
only showcase fields in Computer Science such as Programming Fundamentals, Web
Development, etc. Likewise, those who choose Information Technology will also select
courses that relate only to IT such as Networking Basics, Database Management, etc.
After choosing desired course in a domain, those data will be stored in database and final
completion will be displayed on screen to notify the students.
6
L3C31 Programming Khin Moe Makha
One unique feature for accurate and effective data management is that any
student who have registered attempt to register again, instead of logging in, it will be
prevented.
TEXT
Text Textbox
TEXT TEXT
Text Textbox
TEXT TEXT
Text Textbox
Text Textbox
TEXT
TEXT
7
L3C31 Programming Khin Moe Makha
TEXT
Image
Text
Image
xt Button TEXT
Text
Image Image
Text
xt Button
Image
text
xt Button
Button Button
Text
Image Image
xt Button Text
Image
xt Button
There will be total Eight Screens in Student Registration App including Welcoming
page, Log in and sign up page, Main course Selection Page, one page of computer science
major and another page for information technology major, and display of final successful
registration.
Welcoming Page
When users enter the application, the first thing they will see is the warm, inviting
message saying “Welcome from Code Ninja!”. Then there will be two buttons featured
8
L3C31 Programming Khin Moe Makha
for old users and new users. Old users can tap the “Log in” feature to get back to their
old account while new user can sign up in the “Register” feature.
Log in
For the old users, they can log in back to their old account by filling out used
email, password and username. After filling the information, users can choose “Next” to
go to course selection page. If their current-filled passwords and the passwords they add
during old registration process do not match, they will get a notify of “Wrong inputs”,
and will not be able to continue the process. If their inputs are valid, they can continue
to the Course selection process.
Sign Up
The new user can choose “Register” button at the Welcoming Page to register their
application. In the sign-up page, new users are asked to fill out the forms with
information on their Email, Password, Student ID, Phone Number, Date of Birth and
Address. After filling required information in accurate method, for example, adding actual
number in Phone number not filling characters, the new user can move on to the course
selection page successfully. If filled information does not meet the standards of required
information, for example, adding characters in the Phone Number section. This will get
users to refill the information with a remind message to fix to be able to reach Course
Selection page.
After successful registration or log in, students can start making decision for their
favorite courses. In Code Ninja App, it offers two main majors in technical aspects:
Computer Science and Information Technology. There, students can choose one course
and then continue to specific domain selection in desired course.
Majors
Those who chosed IT fields will be given majors of Database Management, Cyber
Security, etc whereas Computer Science course offers programming fundamentals, web
or app development. In Major page, they are required to take the final major. If they
have picked one specific fields, then, students, users have successfully completed their
process.
9
L3C31 Programming Khin Moe Makha
Confirmation
After users have input all the necessary details in registration system, the backend
will store them in database and send back a check showcasing student’s name, along
with their selected course and major. The confirmation message clearly clarified the
success of registration to users.
Color Theme
The purple color (#6265ef) is used as the main theme of the app. The
bright and humid color of it is very useful to grab attention in important
theme such as buttons, sign in, and sign ups.
Pure white color (#FFFFFF) is used to contrast with the purple color
above. The contrast of these two colors give very well of calm,
professional and learning atmosphere.
The dark grey color is used to emphasize on text used as hint in input
text boxes, headers and buttons in final page of confirmation. These
three colors match and pleased users’ eyes.
This light grey is mostly used along with dark grey above as
background color to put more weight on or highlight the importance of
dark grey texts.
3. Design Review
As the UI designs are also drew based on the required features and purposes, the
designs are shown to other team members in Code Ninja. The following three detailed
reviews are collected from three teams for Home Screen, Log In and Register and Main
Course Selection Page.
3.1 Peer A
10
L3C31 Programming Khin Moe Makha
The workflow of Code Ninja App is very thoughtful and considerate for users.
Hence, the continuous design structure is also engaging. The only place to point out is
that for the two screen designs of major selection in computer science and information
technology. There, the design is kind of dull with just only one header. The major
selection section is good with images and fair layout, which can please user
eyes and make it more interactive. But the lack of highlight on header makes the
page look unprofessional. Therfore, I strongly suggest to change that design. Apart from
that design, the other designs are okay for me.
The There is nothing really to point out for betterment apart from those dim text beside
grey placement in log in and sign up buttons for information users need to add
such as Email, Password, etc. These texts are important as they are letting users
know specific data types to add in the box. But in the following design, since the text
uses grey color on white background, the text cannot be vividly seen, reducing the
spotlight of importance on the important data.
3.2 Peer B
As the app is targeted for both usage of students and administration, there is a
need of screen for administration. Admins tasks are to manage the registered students
such as how many have registered, their selected course, etc. A screen for administration
can help school officers to check out the registered system. Therefore, I strongly
suggest to create a space where admins can monitor registered students as
well as a screen for managing single user management. Moreover, after students
have successfully picked their courses and confirmation come, I think there should be a
profile screen for students to see their data too. With this, students can remember their
important data such as email, passwords, etc. Apart from needs of these two screens,
the designs and flows of registration is very user friendly and dynamic.
3.3 Peer C
The designs are good but I feel like one of the most important screen for
user is missing, the profile screen. There should be a profile screen after
users have confirmed their data. Therefore, students can make sure their
datas are accurate or not. Moreover, as a effective student registration system,
it is an essential screen for user friendliness. By adding that, it will help students
to take a look back on their filled data and their profile of registering school as
well. This is the suggestion I want to make. Apart from that, the registration
11
L3C31 Programming Khin Moe Makha
system includes other required screens such as sign up, log in, course selection,
etc.
4.1 Peer A
Image
Text
Image
Text
ext
xtText
Text Text
Image Text
Image
Text Button
Image
Image
xt Button ext
ext
xt
xt
ext ext
xt xt
Text
Image Text Text
Image Button
Image
Text
ext
Image
xt Button
ext
xt
xt
Before After
As the suggested design, there is a fix in major selection of Computer Science and
Information Technology. The change was adding an image at the centered top with a
text that describes the course either Computer Science or Information Technology. The
The design look way more user friendly and minimalistic rather than the old design with
4.2 Peer B
12
L3C31 Programming Khin Moe Makha
• To add Admin and User Management Screen
Back
Email: Text
Total Users
Address: Text
Text :
DOB Text
Ph Num Text
Delete Account
Admin Page
The admin page will showcase the number of users registered to this system.
Therefore, the admins from school can easily store and manage loads of registration by
replacing it electronically.
User Management Screen shows information of users and let the admin to delete
the account if there are some reasons to. Therefore, it gives admin full access and right
to delete accounts with unqualified data or without sufficient data.
13
L3C31 Programming Khin Moe Makha
4.3 Peer C
• A need for profile screen
Email
Image
xt
Major
Image
xt
Addres
s
xt
Date of Birth
Phone Number
Image
xt
Password
Image
xt
As Peer C suggested, I added a profile screen for users to be able to look back
their registered process. Therefore, this profile with input of email, Major, address, date
of birth, phone number, and password. When user has confirmed their selection, it will
reach to a profile screen where each details are shown in details.
Developed Designs
Peer Reviews
Peer 1
“ The design of Course selection could be displayed better by having some gaps
between each course selection. Then, with a picture above, that would be perfect. There
is not really much to improve after this as it is almost perfect”
Peer 2
14
L3C31 Programming Khin Moe Makha
“The design of Confirmation could be enhanced further by the improvement in
change of color in profile and adding some spaces in between texts and chaning text
colors into grey. I think that it could really enhance the design.”
1. Welcome Screen
The welcome page purpose is to give users sense of warm welcome and get
familiar with the app designs.
The welcome screen firstly initializes by checking user session data. The system
checks back if the current session exists in a list of active session using “is in list?”
function. Then, it also retrieves tags from tinyDB1, database to see if the current session
is valid. If it is valid, then, the system will check if current session is in list of “major”. If
major (key) is found in list, the system will automatically navigate to the “Course
Selection”. This is used in scenarios such as where logged in users want to make change
back in course selection. The other blocks are used for navigating to “Log in”, when log
in button is clicked and to “Register” when register is clicked.
15
L3C31 Programming Khin Moe Makha
2. Register Screen
The purpose of this registration system is to store the data of a new users
efficiently and use it back when they log in again.
To accomplish that, tinyDB is used. The function begins by validating if users input
all the required data such as email, address, phone number, and password confirmation
when the user click "Submit". If not, the notifier will display a message saying "Please
Check Confirm Password". if users have finished, then the filled email is not supposed to
be in the list of saved database. If it is not (the email being in the list of database), the
notifier will remind the users "User already exists! Please try again!". If the filled email
is not the list of database, the process continues to storing each inputs like email,
password, address, dob, and phone number. Moreover, the email will be specially saved
in the current session. Then, the screen will continue to "Course Selection". For Date of
birth input, I used Date picker blocks and combined it with global variable, to ensure the
date input won’t be null after date is picked.
16
L3C31 Programming Khin Moe Makha
3. Log in Screen
When the users click "Log in ", it checks if both the email and passwords textboxes
are filled. By using "trim" in the blocks of that, the system ensures that no unnecessary
stuff is included in email validation. For example, if users typed "[email protected] " with
an extra space behind, "trim" cut out the unnecessary part for more user friendly and
reliable process. Back to the log in process, if inputs are not filled, the notifier will display
"Please fill the form first!". Otherwise, the process will check if the input email is for the
admin or not. If certain specified email for admin "[email protected]" is used then, the
passwords for "[email protected]" will be checked for validation. If passwords were
correct, it would reach to admin screen. if not, a message containing "Wrong Password"
will display.
If the input email is not specified email for admin, then, the process will bring a local
variable to set up the user account and it checks in the dictionary if the email (key) is in
dictionary or not. If it is in dictionary, the system will remind user with "Email not found".
Next important step of validating if fill passwords are correct by firstly getting password
of filled account in dictionary. if not found, there will be "Wrong Password! Try again"
message will show off. if it was in found and matched with filled account, then, data will
17
L3C31 Programming Khin Moe Makha
be stored in current session with value of email for another time and the session will
successfully move on to Course selection.
4. Course Selection
The purpose of course selection is for users to be able to navigate to their desired
course. For users’ clarification, I used a separate screen. Here, usage of blocks are simple
with just function of navigating to desired courses such as when users click button of
“Explore more” in Computer Science, it will direct them to “major” screens of computer
science course and when “Explore more” of Information Technology is used, it will lead
them to “majors” in Information Technology course.
The purpose of Computer Science major selection is clear: for students to clearly
able to pick out one specific field in large scope of computer science. Therefore, there
are total four buttons for web development, programming developments, app
18
L3C31 Programming Khin Moe Makha
development, and Data science Basics. Each click event opens a new screen
“Confirmation”. If user chosed “Web Development”, the start value will be “Web
development”, if they picked “App Development”, the start value will be “App
Development”, similarly in both “Data Science” and “App Development”. The start value
help the next “confirmation” screen display relevant information about selected course.
19
L3C31 Programming Khin Moe Makha
7. Confirmation
The purpose of confirmation screen is for users to be certain of the major they
picked. Therefore, at the moment we arrived, the screen will display a text saying “please
confirm that you are trying to apply” with the major they selected at either Computer
science or Information Technology. For example, if user selected web development, the
message will display “Pls confirm that you are trying to apply Web Development”. When
user confirm it by clicking “confirm” button, the save course function is used with a local
variable to store data of current session, accessing the correct user data. The major
selected by user is stored in dictionary under key (major). By setting the value for the
key (major) with the name of account user has put in registration. Then, these data of
user account and their selected major are saved in database of this session. Then, when
the confirm button is clicked, it will call the entire function “SaveCourse” to anther screen
named “Profile”.
20
L3C31 Programming Khin Moe Makha
8. Profile
The purpose of the profile screen is to showcase the profile the user has created
by filling data in registration form and course selection. Once the “profile” screen start
initializing, the local variable named “current user” is initialized to store data. Then, the
system retrieves the current session data from data base (tiney DB) to identify the
logged in user. Then, the application obtain various user datas such as email, address,
major they chosed, their date of birth, phone number and password. It also handles
missing data by checking if the key they called are not in the list. If so, it is reminded
saying “not found” in each step. There is also “Password Reveal” button which will show
the password of the account when button is triggered. If password is visible, the textbox
ill say “true”, if its false, then it will be shown “false”. Also, when the “log out” button is
clicked, the application clears data from database by using clear tag in current session
and get back to the screen one of singing up or logging in.
21
L3C31 Programming Khin Moe Makha
9. Admin
The purpose of Main Admin screen is for effective user management system for
school. The system begins by refreshing data buy initialization with a local variable with
a list as an empty list to store user data. Then, it call function from a database to obtrain
all user data and stores it in the all users dictionary. Then the total number of users is
counted and updates in the text of “ number of users”. When the admin click on “back”
button, the current screen is closed and the admin will return to main screen. When
listVew is triggered, it will lead admin to new screen “Manage Single User”, which shows
the specific user data. This allows the admin to manage users’ details effectively.
Morover, the Admin Main Screen Initialize ensures that the user list is always up to date
whenever the screen is entered.
22
L3C31 Programming Khin Moe Makha
The purpose of User Management is be able to organize registered data effectively.
Once the screen initializes, the application obtain and display the current user data
from the database. It displays user email, address, Date of Birth, and Phone Number.
If these information are missing, the labels will automatically go to “not found”. It
begins when “Delete_Account” Button is clicked, the confirmation notifier appears
saying “Please ‘fill’ delete to confirm”. Therefore, it assures that user have the
permission to delete if the registered students decided to quit. Moreover, once the
admin inputs “delete” with some errors like “delete “, extra space, the system will
automatically cut off the extra. After the confirmation, the screen will close and signal
users that their request was successful and saved data of current user will be deleted.
23
L3C31 Programming Khin Moe Makha
3 Log_in When button “register” Pass
is clicked, make sure all
the labels are filled , if
not send the user a
notifier
If they are filled, validate pass
if input emails exist in
database, proceed to
check if passwords are
matched
If input email doesn’t Pass
exist, send a warning
If admin fill email Pass
[email protected] with
password “password@”,
navigate them to Admin
Main Screen
4 Course_Selection When user clicked Pass
“Computer Science”,
direct them to Computer
Science Screen
When user clicked Pass
“Information
Technology”, lead them
to Information
Technology
5 CS (Computer When users clicked any Pass
Science) desired major in
Computer science, save
their selected course and
direct them to
confirmation screen
6 IT (information When users clicked their Pass
Technology) selected major in IT,
save their choice and
24
L3C31 Programming Khin Moe Makha
navigate them to
Confirmation screen
7 Confirmation When users get to Pass
confirmation screen, it
will display a message
including their user
name and course they
selected
When us Pass
8 Profile screen When user reach profile Pass
screen, it will display the
data such as email,
password, etc of current
user
Warning message will Pass
display if necessary
information are not
found
When passwords reveal Pass
is clicked, user can
chose to hide or show
their password
When log out button is Pass
clicked, it will navigate
user back to welcome
page
9 Manage Single When user reach the Pass
User account page, the inputs will
display data from
current user account in
database, if not it will
display “not found”
When delete account is Pass
clicked, a message
assuring for delete with
25
L3C31 Programming Khin Moe Makha
a request to fill “delete”
to cancel the account
If deleted is typed, then Pass
the user will
automatically deletes
the information and
close the screen
10 AdminMianScreen When admin page starts Pass
initializes, the total
number of students
registered to school will
display
If number of all users are Pass
not displayed, show “NO
user Fuond”
After they have Pass
successfully displayed
the list of students,
navigate to Manage
single user account
Optimization
From the beginning the design were structured out with intention of filling purpose
in registration, course selection and user management. To fulfil that purpose, the design
was crafted as a flow of the entire software. Then, each designs for the flow of
wireframes. Then, the suggestions of each wireframe was collected from three peers.
Based on their point of views, the effective design stood out. Moreover, there were
specific suggestions such as to add three more screens: admin, single management user
and user profile. Therefore, I have to develop ideas to develop these ideas effectively.
Then, the development of application begins. After developing, the design was
then shown and reviewed by another three peers. They gave out detailed suggestions in
User interface for a better user experience. Based on their points, there were fixed User
interface which improve the user experience, better management with addition of
screens such as Admin, single user management and user profile.
26
L3C31 Programming Khin Moe Makha
Evaluation
There were total two changes throughout the design process. The more reviews
the better the outcome. From the changes made in first design, the purpose of Student
Registration System is fulfilled. The student registration system maintains three main
functions to be effective:
In order to accomplish these, the first review was indeed helpful. The original design
did meet the demand sin recording student information but not in checking course
selection and accurate and effective management of registration. In first reviews from
peers, they suggested to add new screens for better management and easier control for
admins. Hence, these improvements lay as the foundation of effective, secure and useful
data management.
Then, the second review helps in the user friendly designs for students. Moreover,
the blocks or functions of codes were also useful with less errors as possible. Now the
improved designs and process of Student Registration for school meet the client
requirements in effective user management, course selection and recording student
information.
Personal Responsibility
It is such a high responsibility to develop the entire student registration
Date Task
5.1.2025 Explore about User requirements
6.1.2025 Draw Entire flow for software
7.1.2025 Draw wireframes
8.1.2025 Seek for peer reviews
10.1.2025 Collected and make some improvements
12.1.2024 Start Developing
27
L3C31 Programming Khin Moe Makha
24.1.2024 Finished developing
25.1.2024 Seek for reviews
26.1.2024 Collected and make improvements
27.1.2024 Launched the application
Conclusion
28