SamePage

Description

SamePage implements a connected wallpaper feature inspired by the Friendship Lamps connected touch feature; if one person changes the wallpaper, the wallpaper of everyone in the group will change to match it. A user creates a group by inputting their name, and pressing "Create Group". They are given a 6 letter room code, and they enter the group! Others can then join the same group by inputting the given number and their name. From there, users of the same group can change the group wallpaper by choosing from their camera roll, updating everyone's wallpaper to match. SamePage also allows you to see the members of the group, and identify the person who last changed the wallpaper (denoted "owner").

Inspiration

Because of the pandemic, it has gotten much harder to connect with friends and family without actively trying to organize calls or social-distanced meetups. SamePage provides a low-effort way to stay connected with no risk. SamePage is inspired by Friendship Lampslink, the lamps that turn on when a connected lamp is touched, leading to a feeling of connection and comfort, knowing that someone you care about is looking at the same thing as you.

Construction of SamePage

TreeHacks is the first hackathon for all three developers of SamePage. At first, we were not sure how to even begin. It was the first time developing an app for two out of three creators and first time doing front end work for all three developers. We had no clue how to set up an user interface, had no previous experience with firebase, cloud storage, or cloud functions, and none of us have Android devices!

We began by using the materials provided by TreeHacks, especially the Android (Java) Hackpack, we were able to set up an environment for SamePage in Android Studio. YouTube tutorials and stackoverflow were our best friends(as per usual), and eventually we were able to get a bare-bones UI up and running. From then on it was diving headfirst into our database using Firestore, which lead to incorporating Google Cloud Storage, which lead to Firebase notifications/messaging, and finally, Cloud functions! We then finished up by cleaning up the UI, and giving it some personality.

Problems

We ran into a few challenges in the development of SamePage:

One of the most difficult parts of this project was learning to use Firebase. We chose Firebase for a few reasons. To start with, Firebase's wide array of services provide seemingly endless capabilities. We also started out knowing we would at least be using both a database and Firebase notifications, so choosing to use Firestore was natural. Lastly, we wanted to make this server-less application, and Firebase cloud functions and live database features allow this to be possible. However, it became apparent that accessing and putting information was not so easy.

When starting out, we were dealing with many classes that we were not familiar with. None of us had ever dealt with Collections/Documents, Tasks, or Listeners before, so implementing methods with unfamiliar classes led us into many dead ends and bugs. Eventually, after scouring the Firebase guide, we were able to implement functions that allowed us to create, update, delete, and retrieve documents with Firestore smoothly and efficiently.

Our next big hurdle was storing and retrieving photos from Firestore. Originally, we were trying to keep everything consolidated to one Firestore collection, however, Firestore has a limit on the size of data stored in a field, and photos easily exceed that. Following a suggestion from a mentor, we incorporated Google Storage into the project, used to store the photos, and instead put URL's to those photos in Firestore. Getting the photos back from the cloud was just as taxing. We ended up using the Glide API to do this. Glide allowed us to easily access, download, and manage the images in our Storage, and fully implement the functionality we wanted!

Built With

• android-studio
• firebase
• firebase-functions
• firebase-messaging
• firebase-storage
• firestore
• github
• glide
• java
• node.js