Manual For Grafia
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 38
Universidad de Puerto Rico
Recinto de Río Piedras
Departamento de Ciencias en Cómputos
Grafía Application Manual for iOS and
Android
Luis Fernando
Kevin Legarreta
David J. Ortiz Rivera
Enrique Rodriguez
CCOM4030-0U1
Prof. Carlos Corrada
Grafía Application Manual
I. Layout and Functionality
A. Splash Activity
1. Animation
: When the application starts we see the logo load on display.
2. Figures
:
a) Splash Activity when app is launched.
Grafía Application Manual
B. Login
1. Text Authentication
a) Email form: Receives user registered email .
b) Password form: Receives user registered password.
c) No form should be left blank.
d) If not a registered user, presented with
Create Account
(I.C)
button.
e) If password was forgotten, user is presented with
Forgot Password (I.D)
button.
2. Biometric Authentication
a) After account is created, credentials are stored in device upon approval
from user. Onwards biometric authentication (fingerprint or facial
recognition) will be triggered automatically or by user.
b) If user changes password, the next successful login will display a dialog box
that asks if credentials should updated.
3. Figures
a) Main Login View
(1) User is presented with validation forms and necessary buttons to
create, regain access to registered account or biometric login.
Grafía Application Manual
b) Incorrect Login
(1) Displays message telling user that the used credentials were incorrect.
It doesn’t display which credential was incorrect, improving security.
Grafía Application Manual
c) Empty forms
(1) Display a message to the user indicating that all fields are required.
Grafía Application Manual
d) Biometric Login
(1) Ask user to authenticate using fingerprint or facial recognition.
(2) Currently only fingerprint authentication is available on android
platforms.
Grafía Application Manual
Grafía Application Manual
e) Non-verified Users
(1) On login success the non-verified users will not be taken directly to the
Dashboard (I.E).
Instead, they are taken to the
Not Verified View
.
(2) The option is presented to resend an email with the expiring
verification link.
C. Create Account
1. Registration
a) Name form
(1) Name of the user.
b) Email form
(1) Valid email since user will be sent verification link.
(2) Database does not allow duplicate email entries.
c) Password form
(1) User’s desired password.
(2) A string of at least 8 characters that contains a combination of
alphanumeric characters and symbols, is suggested.
Grafía Application Manual
d) Confirm Password form
(1) Should match password form.
e) Birth Year form
(1) Valid calendar year.
(2) Will be used for the
Change Password (I.D)
request.
f) On Success
(1) A prompt appears, asking user if registered credentials are to be stored
for biometric login.
(2) An email is sent to verify user’s account.
(a) The sent link expires.
2. Figures
a) Create Account View when
Create Account
button is pressed at
Login
(I.B)
Grafía Application Manual
b) Email sent to user to verify account.
c) When verification is successful
Grafía Application Manual
d) When Link expires
Grafía Application Manual
D. Change Password
1. Making a Request
a) Email form
(1) User’s registered email
b) Birth Year form
(1) User’s registered answer from
Create Account (I.B.1.e)
2. Email
a) After forms are filled correctly a recovery email will be sent to the given
email. The email contains a link to a webpage that expires after it’s
clicked.
3. Webpage
a) After accessing link, user is presented with forms for the new passwords.
4. Figures
a) Forgot Password
button is pressed at
Login (I.A)
screen, user is presented
with request forms.
Grafía Application Manual
b) Email sent to user to recover his account by change of password.
c) Webpage that allows user to type in new password.
Grafía Application Manual
d) When password change is successful
E. Dashboard
1. Dashboard View
a) After successful login, user will be taken to a dashboard that contains all
projects said user is a participant of, and the options to create projects, go
to friends menu, or log out.
2. Friends Menu
a) Allows user to search and add friends, to later make them participants in
projects where said user is the administrator.
b) Displays users that have sent friend requests giving the option to accept or
reject requests
c) Displays user’s friends list
d) When searching for another user, one must search by email and query
should contain at least 15 characters in length including the “@” with
extension and the “.com”
e) Rejecting a user on Android displays a message saying“Rejected Request”.
On iOS if the request was successfully rejected, it takes user to
Dashboard
.
f) Accepting a friend request on Android displays a message saying “Accepted
Request”. On iOS if the request was successfully accepted, it takes user to
Dashboard
.
Grafía Application Manual
3. Create Project View
a) Allows user to create a project where participants can store their data, on
creation the user is sent to the
Project View (I.E.4)
(1) Project Name
(a) Identify the project
(2) Description
(a) Brief description of the project
(3) Location
(a) Where is the project taking place?
4. Projects View
a) Project Activity displays all the files stored on the server for this item. More
specifically images, videos, text notes and audio recordings that are
related to the Project.
(1) Project Administrators (Creators) can add participants to Project and
upload/download files onto/from Project
(2) Non-Admin participants are limited to upload/download files
onto/from Project
b) The list presented with file names is selectable and upon selection the user
is moved to a view that will allow file download if file type is image or
video, text visualization for notes, and audio playback for audio files .
c) The format for the name of the files is: FileType_UserID_timestamp.
d) The Project View
also contains camera, video, audio recorder and notes
buttons that move the user to create new data. If the user is the creator
(admin) it will also display an add participants button.
e) Add Participants
(1) Search and Add participants from user’s friends list to a Project
5. Camera
a) Data Creation
(1) Allows project participants to load an image to activity by importing
from gallery or capturing from the camera. It also gives participant the
option to upload image to the
Project
or save to local gallery if the
image was not imported from gallery.
(2) When selecting from gallery on Android the image must be stored
locally, it doesn’t support google drive. Also the public download
directory is not allowed for upload to the server.
b) Data Download
(1) Image is downloaded from server and presented to the user with the
option to save image to gallery.
6. Videos
a) Data Creation
(1) Allows project participant to load a video to activity by importing from
gallery or recording it from the camera. It also gives participant the
option to upload video to
Project
or save to gallery. When selecting
from gallery on Android the video must be stored locally, it doesn’t
support google drive. Also the public download directory is not allowed
to be uploaded to the server.
Grafía Application Manual
(2) Buttons to record a video from the camera, import videos from gallery,
save video to gallery, and upload video to
Project
respectively at the
top. At the bottom we have Stop, Play and Pause control buttons for
videos.
b) Data Download
(1) On iOS this View will stream video from server and on Android the
video is downloaded and played. The encoding of the videos in iOS is
not playable on all the Android devices therefore we are changing the
encoding of every video on the server this way they will be playable.
7. Notes
a) Data Creation
(1) Allows participant to create a text file.
(2) Presents participant with input text boxes for name an actual text of
notes, displays character count and clear field of text and save buttons.
The save button uploads to the server.
b) Data Download
(1) When note is downloaded from server it is no longer editable, the user
can copy from it and read it..
8. Audio
a) Data Creation
(1) Allows participant to create audio and play, pause and restart (with
stop) the recorded audio.
b) Data Download
(1) Downloads file from server and loads it into view for playback.
9. Figures
a) Dashboard of a user that participates in projects
Grafía Application Manual
Grafía Application Manual
b) Searching for another user to add as a friend
Grafía Application Manual
c) User’s Pending Friend Requests
Grafía Application Manual
d) Rejecting a friend request
Grafía Application Manual
e) Accepting a Friend Request
Grafía Application Manual
f) A user’s Friends list
Grafía Application Manual
g) Forms for user to distinguish his project from any others. We suggest to
include the administrators name to distinguish project name.
Grafía Application Manual
h) Project View displays files currently in the project.
Grafía Application Manual
i) Adding a participant to a project.
Grafía Application Manual
j) When the user is added by the admin, we send an email notification to the
user.
Grafía Application Manual
k) Buttons to capture an image from using the camera, import images from
gallery, save image to gallery, and upload image to
Project
respectively.
No image is currently in the view.
Grafía Application Manual
l) Image loaded in the view
Grafía Application Manual
m) When importing from gallery in android the user is given the choice to use
online content or external application content.
Grafía Application Manual
n) Image is downloaded from server and loaded into view.
Grafía Application Manual
o) Video view presents user with video control, and import/export buttons
Grafía Application Manual
p) Video loaded on view.
Grafía Application Manual
q) Video loaded from server via direct download (Android) or stream (iOS).
Grafía Application Manual
r) User is presented with text field to create a note.
Grafía Application Manual
s) Note displayed as a read only entity.
Grafía Application Manual
t) Presents participant with the options to record from the microphone and
upload to
Project
and audio control buttons.
Grafía Application Manual
u) Audio recording is loaded in view.
Grafía Application Manual
II. Non Functional Attributes:
A. Lost Connection
1. An alert box is displayed to notify the user that the connection was lost.
Android users have the option to retry connection or log out. iOS users will
be notified and the app will stay put until an interaction with the view that
requires an internet connection is performed.
2. Figures
a) Alert box notifies user that connection is lost and presents options to
take.
