Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real-time image sharing

1,235 views

Published on

Presentation I held at Helsinki Android meetup on 30th of Aug 2016

  • Be the first to comment

  • Be the first to like this

Real-time image sharing

  1. 1. Senior System Architect, Google Developer Expert, Authorised Trainer REAL-TIME IMAGE SHARING JERRY JALAVA JERRY@QVIK.FI | @W_I
  2. 2. 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 @QVIKJERRY@QVIK.FI | @W_I
  3. 3. DEADLINE IS SET FOR YESTERDAY @QVIKJERRY@QVIK.FI | @W_I
  4. 4. 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 @QVIKJERRY@QVIK.FI | @W_I
  5. 5. BUT ALL THAT WILL TAKE AT LEAST DAYS @QVIKJERRY@QVIK.FI | @W_I
  6. 6. NOT NECESSARILY WHAT IF I TOLD YOU, @QVIKJERRY@QVIK.FI | @W_I
  7. 7. @QVIK https://firebase.google.comJERRY@QVIK.FI | @W_I
  8. 8. LETS JUST USE FOLLOWING ‣ Firebase Auth ‣ Firebase Storage ‣ Firebase Realtime Database ‣ FirebaseUI
 (https://github.com/firebase/firebaseui) @QVIKJERRY@QVIK.FI | @W_I
  9. 9. 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 @QVIKJERRY@QVIK.FI | @W_I
  10. 10. BUILDING LETS START @QVIKJERRY@QVIK.FI | @W_I
  11. 11. 1. LETS ADD FIREBASE TO OUR APP @QVIK We head to https://console.firebase.google.com/ and create new project JERRY@QVIK.FI | @W_I
  12. 12. 1. LETS ADD FIREBASE TO OUR APP @QVIK Next we create and download Firebase configuration for our app JERRY@QVIK.FI | @W_I
  13. 13. 2. LETS ENABLE AUTHENTICATION @QVIK We head to Authentication / Sign-In method config and enable Anonymous auth JERRY@QVIK.FI | @W_I
  14. 14. 3. LETS BUILD THE BASIC UI @QVIK (Create some amazing UI by writing layout XML) JERRY@QVIK.FI | @W_I
  15. 15. 4. FETCH THE ADDED IMAGES WITH LIVE CHANGES @QVIK Here is just one simple way of listening for changes in our images collection JERRY@QVIK.FI | @W_I
  16. 16. 5. UPLOAD IMAGE TO STORAGE @QVIK Here is just one simple way of uploading a file to Firebase storage JERRY@QVIK.FI | @W_I
  17. 17. AND WE ARE DONEWELL, ALMOST @QVIKJERRY@QVIK.FI | @W_I
  18. 18. SCAN THE QR CODE TO INSTALL HTTPS://GITHUB.COM/JERRYJJ/FIREBASE-STORAGE- DEMO-ANDROID LIVE DEMO @QVIKJERRY@QVIK.FI | @W_I
  19. 19. THANK YOU www.qvik.fi

×