Social Mobile Application - Udrop
Social Mobile Application - Udrop
CSUSB ScholarWorks
8-2022
Recommended Citation
Oraiqat, Mahmoud, "SOCIAL MOBILE APPLICATION: UDROP" (2022). Electronic Theses, Projects, and
Dissertations. 1539.
https://scholarworks.lib.csusb.edu/etd/1539
This Project is brought to you for free and open access by the Office of Graduate Studies at CSUSB ScholarWorks.
It has been accepted for inclusion in Electronic Theses, Projects, and Dissertations by an authorized administrator
of CSUSB ScholarWorks. For more information, please contact [email protected].
SOCIAL MOBILE APPLICATION: UDROP
A Project
Presented to the
Faculty of
San Bernardino
In Partial Fulfillment
Master of Science
in
Computer Science
by
Mahmoud Oraiqat
August 2022
SOCIAL MOBILE APPLICATION: UDROP
A Project
Presented to the
Faculty of
San Bernardino
by
Mahmoud Oraiqat
August 2022
Approved by:
simply “dropping” content at designated locations for select users. Users can
drop content in the form of texts, short videos, and pictures, which users will then
be able to share with their friends. Udrop features will provide an interactive user
experience for users to socialize and expand their social circles. Udrop ensures
anywhere from 5 to 15 records, drops, per user. Udrop’s end-user interface and
internal system design ensure that user requirements such as low latency, clear
graphical design, and reliable service are addressed. Udrop will provide
everyday social media users a new take on how their social media can provide a
iii
TABLE OF CONTENTS
Background................................................................................................ 1
Significance ............................................................................................... 1
Purpose ..................................................................................................... 2
Scope......................................................................................................... 3
Memory ........................................................................................... 5
Operation ........................................................................................ 6
Security ........................................................................................... 6
Users ......................................................................................................... 8
Constraints................................................................................................. 9
iv
Software Interfaces ....................................................................... 13
REFERENCES ................................................................................................... 34
v
LIST OF FIGURES
Figure 2.1 Udrop Client Flow Chart Between Cloude Services. .......................... 7
Figure 3.8 Drop Media Page After Providing A Custom Location.. .................... 29
Figure 3.9 Home Page After Sending A Drop To User Jeffry.. .......................... 30
vi
CHAPTER ONE
INTRODUCTION
Background
Social media apps are being published every day; however, the majority
seem to branch further and further away from reality. This is in a large part due to
how enticing socializing has become through technology. Popular apps such as
Facebook, Instagram, or Twitter allows user to send and receive their social
media with the push of a button. Although users are guaranteed convenience,
these applications are depriving users from physical interaction. Udrop attempts
to bridge the gap between the virtual and real world by essentially allowing their
users to send virtual care packages within the real world for the users to retrieve.
This will allow users and their friends to have a more meaningful interaction with
one another, an interaction that will not end at the press of a button. Udrop allows
Significance
Udrop will be a new platform for everyday app users to have a more
meaningful interaction with their audience. This will be achieved by allowing user
limitation to a user’s creativity when creating a drop. Drops can used as the
1
medium to make their everyday social media post more meaningful for them and
their audience.
Udrop will one day be published on the Google Play and App Store for
distribution.
Purpose
Udrop is being developed for users that want more from their social media
apps. Udrop will allow users to drop messages in the form of text, images, or
interaction with their media drop. For example, say a user walked into a grocery
store, they check their phone, and they notice they unlocked a Udrop message.
The message contains a grocery list that their significant other had verbally
mentioned to them that morning. However due to a long workday this user forgot
everything they were told. Fortunately, their significant other sent them a drop
with the grocery list at the store’s location in case they forgot when they arrived
at the store. Now, said user can send a confident message back in the form of a
comment, notifying their significant other mission complete. In this scenario the
2
scalability. This document will define the app’s functionalities, limitations and
Scope
pages: Home, Friends, Account, Drop Location View, Create Drop, Login, Create
Account, Notifications, and splash pages. The pages will be functional, easy to
navigate, and provide the same aesthetic in both iOS and Android platforms.
Udrop will use cloud service technology to handle all server (back-end)
functionality to manage user data and client connections. The main objective of
way for users to expand their network. Udrop will enhance social interactions by
connecting people through a mutual friends drop. Allowing users to share their
3
CHAPTER TWO
OVERALL DESCRIPTION
Product Perspective
service. Udrop will allow users to send and receive drops in the form of a
message, image, or short video. These drops will be a user creation and will be
The application is designed in a way where users have the option to send
a drop to multiple users thus bringing people together at the drop location. Once
the drop is received users are then able to provide feedback by leaving a
comment that all user who received the same drop will be able to view.
To get desired functionality, Udrop will have one main component in the
form of a client which will connect to multiple cloud services. The client will be
responsible for all user interface components and communication between the
cloud services through SDKs. The cloud services will then manage data, client
tools/services.
User Interfaces
Friends, Account, Drop Location View, Create Drop, Login, Create Account,
Notifications, and splash pages. The pages will be functional, easy to navigate,
and provide the same aesthetic in both iOS and Android platforms. Within
4
selected pages, the client will communicate with cloud services to dynamically
Cloud Services
There are four main cloud services that will be used for the development
of Udrop:
Communication Interfaces
SDKs within the React Native client to handle different functionality. The client
will then manipulate data between the services to provide a cohesive system
Memory
and AWS S3. The amount of memory used will follow cloud services storage
model where Udrop’s available storage will scale in accordance with the amount
used.
download the app. Udrop will be able to run on any smart device with Android or
5
Operation
solution), and provides user authentication. While AWS S3 will store pictures
and videos that be can readily accessed through URL links. By using these cloud
services Udrop can ensure cost efficiency, elastic scalability, rapid iteration, low
Security
addressed accordingly so that users won’t be put into risky situations. Although
users are responsible for adding Friends they trust, Udrop may provide a way to
authenticate identity before accepts any drops from users they may not fully trust.
email authentication. Once user authenticate one another they will be allowed to
Product Functions
are independent from one another as shown in Figure 2.1. The user interface will
provide multiple pages that the user can navigate between to access different
6
features of Udrop.
Figure 2.2. Majority of the arrows shown below are double sided indicating that a
user will be able to go back and forth between pages. However, there are some
cases where the client determines which page to present to the user based on
their user data. For example, if the user’s data confirms that the user signed in
7
Figure 2.2. Udrop Interface Flow Map
Users
The general users of Udrop are individuals who would like to connect with
provide a fresh take on social media interaction and will be available to any
individual with a smart device. The target audience are those that would like their
discourse to be more involved with the content they share. Similarly, Udrop is
meant for users that would like to be proactive in receiving new content from
those that they admire most such as friends, family, or even celebrities. It should
8
Constraints
google ads.
between Users, Friends, Drop messages, and Notifications classes. Users will
on their activity. While Drops can have media content and may have feedback in
9
Figure 2.4 UML Use Case Diagram
Profiles
credentials.
10
c. User Validation: Realm System will verify users and their
friends on Udrop.
c. Create a Drop: Users with friends can create drops that are
location.
notifications.
Specific Requirements
menus. While functionality should be implemented such that all fail cases are
11
User Interfaces
1 Login Page: Allows the user to sign into their account, then navigate to the
user to the homepage. If the user does not already have an account, the user
successfully created, user will be taken to Login Page (Figure 3.1 Right).
3 Welcome Page: Allow first time users to setup their account by providing a
user icon, display name, and phone number. Once data is submitted
successfully, users are directed to Preferred Location Page (Figure 3.3 Left).
4 Preferred Location Page: Allow users to provide a location they would prefer
5 Home Page: Allows the users to see their drops and navigate to Account or
Page at any time. Users can also navigate to a Drop’s comment page view
6 Account Page: Allows users to change their profile picture, update their
preferred location, and log out. There is also a floating button to navigate to
12
7 Friends Page: Allows users to view friends, add friends, delete friends, and
select a friend to drop to. There is also a floating button to navigate to Drop
8 Drop Creation Page: Allows users to choose/modify their target user(s) and
9 Add Media Page: Allow users to provide a message or media in the form of
10 Drop Location Page: Allow users to toggle between their real time location
and the drop location on a google map. Once users are within 30-meters,
they will be directed to the Home Page to view the drop (Figure 3.11 Left).
11 Comments Page: Users can leave a comment for their sender or other
12 Notification Page: Allows users to view their notification that are generated
Software Interfaces
Account and Media Page have access to the AWS S3 SDK to upload their
user icon profile and any media they wish to attach to their drop. The return data
from AWS S3 will be in the form of a URL link that will then be saved to
MongoDB Atlas through the MongoDB Realm SDK. The React Native client will
provide a realm instance where data will be synced between all client
connections. This allows users to received real time updates when there is a
relevant change to user data: receiving notifications and drops from other users.
13
Lastly, the React Native client leverages Google Map API to display locations,
set location markers, and view the 30-meter range around a drop location for
specific pages.
Function Requirements
created the user will then be able to setup their account by providing a
profile image, display name, preferred drop location ,and phone number.
All data is saved in their respective unique user documents within the
database.
2. Choose a Drop Location: Users will be able to send drops to one or more
friends that are registered in their Friend’s List. Once the drop target(s) are
identified, the user will then choose one of three options to indicate the
drop location. Firstly, users have the option to send a drop to their
they would like to drop to. Finally, they can select an exact location on a
map and provide a custom description of their desired drop location. Also,
as an added feature users will be able to see their recent drop locations
3. Adding Media to Drop: Once users choose a drop location they are then
able to add a message and/or media to their drops. The media can be in
14
the form of a picture or a 10 second video that they can either take in the
friend’s email or display name. Once the friend request is sent, they will
recipient of the friend request will then decide whether to accept or deny
the friend request. Once users become friends, each user has the power
within the friends list will be updated in real time for both users.
5. Unlocking a Drop: Once a user received the drop the user must be in the
30-meter ranged of the specified location to unlock the drop. Unlocking the
drop allows the user to see the contents of the drop from the sender.
Users can then “heart” or comment on the drop within the comments
page.
6. Change Preferred Location and Profile Image: Users can navigate to the
new drop or friend request. User can accept or deny the friend request
only in the Notification Page. While the drop notification will navigate the
user to the Drop Location Page to toggle between their location and the
drop location. Once a notification is interacted with, they are then deleted.
15
Performance Requirements
Udrop will be available on the App Store and Google Play and expect to
run on most versions of Apple iOS and Android. The backend must be able to
handle many requests with low latency, scalable storage and efficient in-app data
processing.
Design Constraints
components must be formatted reliably so that regardless of the device used the
designated drop zone. Users should not be able to see what the user sent until
Drops can only be sent to friends that have already accepted the friend
request. User should not be able to see friends with a “pending” status within the
The assumption can be made that the user will provide Udrop access to
the internet and geological location for the application to send/receive messages,
and utilize different features as intended. In addition, users are expected to have
a basic familiarity of enabling their GPS and finding desired locations on a map.
16
CHAPTER THREE
Expected Results: Udrop fulfilling all test case objectives and displaying
all features in a visually pleasing and practical manner. There should not be any
purpose.
17
Process and Actual Result: Udrop will automatically be on the sign-In
page when user open the app. Users are then able to locate and navigate to the
create account page as shown in Figure 3.1. Users will then fill in their desired
email and password they would like to associate with their account. Once users
tap “Create Account”, the client will interact with MongoDB Realm SDK to create
a new user with the email and password provided, while also creating a new user
object. New users will now be added to the list of authenticated users as shown
in Figure 3.2.
18
Figure 3.1: Login Page And Create Account Page
19
Figure 3.2: Mongo DB Users Portal.
Once the Realm instance is successful, the client will then navigate back
to user login, where user can sign into their new account. Udrop will complete
new User creation by navigating users to the Welcome page where users can
provide a display name, phone number, and choose a preferred location. Once
credentials if the following conditions are violated: Empty email or password field,
20
Figure 3.3: User Inputting Additional Information. (Using A Fake Phone Number)
Friends page. This entails finding another user with the same email
21
2. Users should not be able to add one another if users are already
database.
conveyed to the user by delete the pending request from the user’s
friend list.
4. Users should be able to delete any friend on their friends list. The
Udrop must update both users of the change in their friends list
display name. Alert the user to any errors such as an invalid email or display
name. Update Udrop’s user interface when requests are successful and there is
navigating to the Friends page from their Home page then tapping the “Add
Friend” button located at the top right of the screen. A pop-up widget will allow
users to input an email or display name to add (Figure 3.4). If the user is found,
the pop-up widget will close, and the friends list will populate a new friend
component displaying the desired user’s display name with a pending status.
However, if the user is not found, the pop-up widget will display red text
indicating the failed request, allowing users to try again. Once the recipient
22
accepted the friend requests both users will see the change within their Friends
23
Figure 3.5: Change In Friend Status.
Users will also be able to delete a friend by tapping on the user’s friend
component they wish to delete and press “Unfriend” on the pop-up widget (Figure
3.6). This will remove one another as friends between both users. Users would
24
Test Case 3: Sending a Drop to Users
1. Users can send a social media drop to one or many of their friends.
2. Users can choose from three different options when specifying the
6. Lastly the client should not direct the client until any media is saved
Expected Results: Udrop will meet all requirements listed above while
maintaining a visually pleasing user interface. Any conditions that have not been
fulfilled will promptly notify the user to make corrections. Lastly, all visual
Procedure and Actual Results: Users will first need to choose a friend to
send a drop to. This can be done in two ways, the first being navigating to the
“Friends” page and tapping the friend widget and selecting “Send Drop”(Figure
3.6). This will direct the user to the “Create Drop” page where their specified
25
recipient is selected. Another option would be to press the floating “+” button
found on any primary page (Home, Friends, Account). This will direct users to the
“Create Drop” page where users can click another “+” button which will open a
26
Figure 3.7: Drop Creation Page.
Once the recipient field is no longer empty, users can then choose their
desired drop locations from three options. First, users can send their drop to their
recipients’ preferred drop location by clicking the toggle button provided. If the
toggle button is enabled all other options will be visually unavailable until the
toggle is switched off. Secondly, users can provide an address they would like to
send their drop to, which will update the google map to display their desired
27
address location. Lastly, users can choose a location anywhere on google maps
and provide a custom description of their desired location. If users have already
sent a drop before they can also choose a recent or favorites drop locations.
Once users are satisfied with their drop location, users can then tap the
“Set Location” Button found on the bottom of the screen (Figure 3.7 Right). Users
will then be directed to the Add Media page where they are required to add a
message. Users can also add Media in the form of a picture or a 10s video that
can be taken in the moment or selected from their device’s storage. In Figure 3.8,
it can be seen how the user interface adapts to adding the media content to the
drop. Users have the option to remove the media by tapping the “X” next to the
content container. It should be noted that if users do not provide a message, the
28
Figure 3.8 Drop Media Page After Providing A Custom Location.
Finally, once the user is satisfied with their drop they can press “Send
Drop” where depending on the size of their content, they will see a loading
screen. The loading screen indicated that Udrop is still uploading content to
Udrop’s backend. Once this is completed users will be taken to the home page
where they can see their newly created drop (Figure 3.9).
29
Figure 3.9: Home (Update) And Account Page.
Now that the drop has been sent, the receiver will be notified
immediately and populate their notification page with a new notification. The
receiver can then navigate to their notification page via a local phone notification
(Figure 3.10 Left) or view the drop from the home page (Figure 3.10 Right).
Using either method, the receiver will be able to navigate to the drop location
30
page (Figure 3.11 Left) where they will be able to view their location and the
drop location. Once the user is within the 30-meter range of the drop, indicated
by the drop zone graphical component, the receiver will be automatically directed
back to the home page with an unlocked drop (Figure 3.11 Right). Both users,
the sender and receiver, will be able to provide feedback on the drop using the
31
Figure 3.11 Drop Location And Home (Unlocked) Page
32
Figure 3.12 Comments Page.
33
REFERENCES
34