Giter VIP home page Giter VIP logo

ac-ios-final's Introduction

AC-iOS Final - Practical

Objective

Build an Instagram-like app for posting images with comments.

Summary

The app comprises three view controllers: a feed, an upload page and a login page. The designs to follow will illustrate and specify the design and relationship of these view controllers. The backend will be powered by Firebase.

Login

Users are required to log in before they can access the rest of the app.

Login Flow

Main View: Feed

Each post in the feed has two elements: a picture and a comment. The picture is a fixed square the width of the device and the text is variable height below it, resulting in non-uniform cell heights. Therefore use Auto Layout to drive automatic cell heights.

![Main Feed Flow](readme_assets/Main Feed/feed_flow_full.png)

Upload View

Uploads

Backend

Authentication

Use Email/Password authentication to you can register and log users in.

Database

The simple schema is illustrated by this diagram. This will probably make the most sense for your app.

Database Schema

Storage

The file structure of the storage is illustrated here:

Database Schema

Note the relationship between image names and objects in the database. You can use the same UID for both.

Uploading Images

Be sure to render your images into compressed JPEG format as we did in the review. Here's a line of code that takes a UIImage and generates a Data object with JPEG data.

let image: UIImage = ...obtain uiimage somehow...
let data = UIImageJPEGRepresentation(image, 0.5)

Rubric

Criteria Points
App uses AutoLayout correctly for all iPhones in portrait 8 Points
Variable Naming and Readability 4 Points
App uses MVC Design Patterns 4 Points
Login screen works as expected 4 Points
App uses Firebase's Auth appropriately 4 Points
Users can create a post and upload it to Firebase 4 Points
App uses Firebase's Storage appropriately 4 Points
Users can see well-formatted posts in their feed 4 Points
App uses Firebase's Database appropriately 4 Points

A total of 40 points

Individual Screen Details

Login


Login

Login Success Login Failure
Login Successful Screen Login Failure Screen

Feed

Main Feed

Main Feed Extended Main Feed Extended Scaling
Main Feed Extended 1 Main Feed Extended Scaling

Upload

Uploads Upload

Showing Roll: Beginning Modal Showing Roll: Mid Model Showing Roll: Finished Modal, Album View
Beginning to show modally Mid of modal show Ending modal show animation
Uploads Selected Uploads Success
Uploads Selected Uploads Successful
Main Feed - After Upload Uploads Failure
Main Feed - After Upload Uploads Failure

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.