real-time image sharing

20
Senior System Architect, Google Developer Expert, Authorised Trainer REAL-TIME IMAGE SHARING JERRY JALAVA [email protected] | @W_I

Upload: jerry-jalava

Post on 16-Apr-2017

810 views

Category:

Presentations & Public Speaking


0 download

TRANSCRIPT

Senior System Architect, Google Developer Expert, Authorised Trainer

REAL-TIME IMAGE SHARINGJERRY JALAVA

[email protected] | @W_I

CLIENT ASKS FOR POC…‣ Users should be able to easily sign-in

(which is required)

‣ Users should be able to upload images from their camera

‣ Other users should see these images immediately

‣ Users should be able to manage their own images

‣ Users should be able to like images of others

@[email protected] | @W_I

DEADLINE IS SET FOR YESTERDAY

@[email protected] | @W_I

SO WHAT DO WE NEED TO DO‣ Some server to handle our uploads and

other api requests

‣ Scalable storage system for storing the images

‣ A mechanism to notify all users at once about new images, and fetch them

‣ Build the Authentication and Listing views to Android client

@[email protected] | @W_I

BUT ALL THAT WILL TAKE AT LEAST DAYS

@[email protected] | @W_I

NOT NECESSARILYWHAT IF I TOLD YOU,

@[email protected] | @W_I

LETS JUST USE FOLLOWING‣ Firebase Auth

‣ Firebase Storage

‣ Firebase Realtime Database

‣ FirebaseUI(https://github.com/firebase/firebaseui)

@[email protected] | @W_I

NOW WE HAVE SOLVED‣ Some server to handle our uploads and

other api requests

‣ Scalable storage system for storing the images

‣ A mechanism to notify all users at once about new images, and fetch them

‣ For UI, we will use ready components as much as possible

@[email protected] | @W_I

BUILDINGLETS START

@[email protected] | @W_I

1. LETS ADD FIREBASE TO OUR APP

@QVIK

We head to https://console.firebase.google.com/ and create new project

[email protected] | @W_I

1. LETS ADD FIREBASE TO OUR APP

@QVIK

Next we create and download Firebase configuration for our app

[email protected] | @W_I

2. LETS ENABLE AUTHENTICATION

@QVIK

We head to Authentication / Sign-In method config and enable Anonymous auth

[email protected] | @W_I

3. LETS BUILD THE BASIC UI

@QVIK

(Create some amazing UI by writing layout XML)

[email protected] | @W_I

4. FETCH THE ADDED IMAGES WITH LIVE CHANGES

@QVIK

Here is just one simple way of listening for changes in our images collection

[email protected] | @W_I

5. UPLOAD IMAGE TO STORAGE

@QVIK

Here is just one simple way of uploading a file to Firebase storage

[email protected] | @W_I

AND WE ARE DONEWELL, ALMOST

@[email protected] | @W_I

SCAN THE QR CODE TO INSTALL HTTPS://GITHUB.COM/JERRYJJ/FIREBASE-STORAGE-

DEMO-ANDROID

LIVE DEMO

@[email protected] | @W_I

THANK YOUwww.qvik.fi