real-time image sharing

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

Upload: qvik

Post on 10-Feb-2017

55 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Real-time Image Sharing

Senior System Architect, Google Developer Expert, Authorised Trainer

REAL-TIME IMAGE SHARINGJERRY JALAVA

[email protected] | @W_I

Page 2: Real-time Image Sharing

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

Page 3: Real-time Image Sharing

DEADLINE IS SET FOR YESTERDAY

@[email protected] | @W_I

Page 4: Real-time Image Sharing

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

Page 5: Real-time Image Sharing

BUT ALL THAT WILL TAKE AT LEAST DAYS

@[email protected] | @W_I

Page 6: Real-time Image Sharing

NOT NECESSARILYWHAT IF I TOLD YOU,

@[email protected] | @W_I

Page 8: Real-time Image Sharing

LETS JUST USE FOLLOWING‣ Firebase Auth

‣ Firebase Storage

‣ Firebase Realtime Database

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

@[email protected] | @W_I

Page 9: Real-time Image Sharing

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

Page 10: Real-time Image Sharing

BUILDINGLETS START

@[email protected] | @W_I

Page 11: Real-time Image Sharing

1. LETS ADD FIREBASE TO OUR APP

@QVIK

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

[email protected] | @W_I

Page 12: Real-time Image Sharing

1. LETS ADD FIREBASE TO OUR APP

@QVIK

Next we create and download Firebase configuration for our app

[email protected] | @W_I

Page 13: Real-time Image Sharing

2. LETS ENABLE AUTHENTICATION

@QVIK

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

[email protected] | @W_I

Page 14: Real-time Image Sharing

3. LETS BUILD THE BASIC UI

@QVIK

(Create some amazing UI by writing layout XML)

[email protected] | @W_I

Page 15: Real-time Image Sharing

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

Page 16: Real-time Image Sharing

5. UPLOAD IMAGE TO STORAGE

@QVIK

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

[email protected] | @W_I

Page 17: Real-time Image Sharing

AND WE ARE DONEWELL, ALMOST

@[email protected] | @W_I

Page 18: Real-time Image Sharing

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

DEMO-ANDROID

LIVE DEMO

@[email protected] | @W_I

Page 19: Real-time Image Sharing
Page 20: Real-time Image Sharing

THANK YOUwww.qvik.fi