Link Search Menu Expand Document
MDB Training Program

Project 3A: MDB Social

Table of contents

  1. Introduction
  2. Setup
    1. Starter Code
    2. Google Service Info Plist
  3. Spec
    1. Requirements
    2. Sign Up
    3. Feed with Live Updates
    4. Creating an Event
    5. Detail View
  4. Submission

Due: Tuesday 11/10/2022 at 11:59 PM

Introduction

This week we will be building an app called MDBSocials which will allow members to post and RSVP to social events. We will be exploring the Authentication, Cloud Firestore, and Storage APIs in the Firebase SDK. As we mentioned, there are lots options out there for building backend and database for an iOS app. We opted for Firebase because it’s lightweight, easy to learn, and it can scale up automatically (if you are willing to pay).

The combination of these technologies (server, backend, APIs, etc.) is what’s know as the tech stack. If you are interested in this topic, here’s a great YouTube video I found:

Setup

Starter Code

As usual, use this command to get the starter code

git pull starter fa22/student/main

We will be using Firebase Auth, Cloud Firestore, and Firebase Storage for this mini-project. You should all have received an email invitation to collaborate on the firebase project.

Google Service Info Plist

To ensure that our data is only reachable by those who have access, Firebase use a GoogleServiceInfo.plist file to store all the tokens used to authenticate our app when communicating with the Firebase APIs. Therefore, to keep our API key safe, this file should always be excluded from the repository (by adding its name to .gitignore) and you will have to download it directly from Firebase. To get a copy of this file, you will go to the Firebase console and open the project page.

Firebase Setup

Click the iOS app button that says “dev.mdb.social”. This is the bundle identifier of our app. Then click the gear icon.

Firebase Setup

Under the project settings page, click the GoogleService-Info.plist download button.

Firebase Setup

After that’s done, you will move the GoogleService-Info.plist file to the project’s root folder as shown in the picture.

Go back to Xcode, under the project navigator, you should see the GoogleService-Info.plist file name turning from red to white, indicating that the file is now resolving correctly.

Run the app and make sure that you see the login screen. The build process can take about 2-5 minutes depending on your machine.

MP3 iOS Sign In Screen

Finally, check if you can login using the dummy account.

email: test@mdb.dev
password: 963258741

You can use the x button to go back to the authentication screen.

Spec

Requirements

You are allowed to use storyboards. Though we still strongly recommend you create most of your UI programmatically.

As always, good quality design is an expectation. Feel free to look at existing apps for inspiration. We will especially be looking for great design on this project so once you finish, please spend time improving your design.

Make sure your code is clean and easily readable. See this for a Swift style guide.

Sign Up

  • The user should be brought to this screen when they tap the sign up button in the login page. Require the user to input their full name, email, username, and password when signing up. Also have a second password field to use as confirm. Your app should display an error when they don’t match.

  • Once the user has filled out all the necessary info, they should tap the sign up button on this screen and be redirected to the FeedNavigationVC, which uses a FeedVC as its root view controller. You should follow the example in the sign in page.

  • The sign up should be done using the Firebase Auth service. See the documentation for more details.

  • When a user signs up, the app needs to first register the user with Firebase Auth, then use the uid returned from Firebase Auth to write the additional user information into Cloud Firestore.

  • We have provided some firebase boilerplate code in the Authentication and Database class. Make sure to follow MVC when adding the sign up. We will be checking closely for any violations!

  • Your sign up page needs to notify the users of some common errors. You are free to support as many as you want, but the one’s that are required are: email in use, weak password, passwords don’t match, and missing input fields.

  • UI fluidity matters! Remember to show activity indicator when the sign up is still loading.

  • Note: We have added security rules to check if the request you send to Firebase is legal (credit to Allison for writing all the rules!!). If you are getting access errors when writing to/reading from firebase, double check if the information you are requesting to read/add makes sense. (e.g. Access to full account info should only be granted to the corresponding user).

Feed with Live Updates

  • Display a list of events where each cell contains the following information:
    • name of member who posted
    • name of event
    • picture of event
    • number of people who RSVP’d “interested”
  • Events should be displayed in chronological order
  • When another user creates a new event, the feed screen should automatically update.

Creating an Event

  • Add a button on the FeedVC that takes the user to a social creation page.

  • Upon creating a new social, the user should be prompted to fill out the following:
    • Name of event
    • A picture for the event page. You will need to implement the UI that allows users to take a picture from their camera or to upload one from their library. The easiest way to do this is through a UIImagePickerController (Apple Documentation | Hacking With Swift Tutorial)
    • A short description of the event (up to 140 characters)
    • The start and end time of the event. This needs to include both the date and time down to the minute, which can be done using a UIDatePicker (Apple Documentation). Make sure to try out a few preferredDatePickerStyle to see which one works best for you!
  • When the user taps create, we need to stores all the information to Firebase so that others can access. However, as we mentioned, Cloud Firestore doesn’t support storing large media files such as images or videos. For that, we will have to use Firebase Storage (Documentation). It can be found on the left panel under the storage tab of Firebase console. Functionality wise, Firebase Storage allow us to upload files that can be accessed through static links later on. Therefore for us, in terms of Firebase interaction, event creation will include roughly two steps:
    • Upload the image to Firebase storage and receive a URL for the image.
    • Use the URL to construct an Event object and add the event to Firestore.
  • As a FYI, because we need to be able to efficiently download the images in FeedVC, we’ve set the maximum upload image size to 1MB. So you will likely need to resize and/or compress your image before uploading to Firebase Storage.

Detail View

  • When the user taps on a social, they should be taken to another screen with an expanded view of the same details from the FeedVC, in addition to the description of the social.

  • Display a button allowing the user to RSVP to the event. When the user has already RSVPed to the event, the button should allow the user to cancel it.

  • If the user is the owner of the event, the detail view should also display a delete button allowing them to remove the event.

Submission

Save all the files in your project, commit, and push to Github.