際際滷

際際滷Share a Scribd company logo

Real-time image sharing

Jerry Jalava
Jerry Jalava

This document outlines the requirements and solution for building a real-time image sharing mobile application. The client requested the ability to sign in, upload images, see others' images in real-time, and like images. The document proposes using Firebase authentication, storage, realtime database, and UI components to quickly build the app without needing to develop the backend functionality from scratch. It provides an overview of the steps needed, including adding Firebase to the app, enabling authentication, building the basic UI, fetching and uploading images, and completing the app within days using Firebase instead of weeks of custom development.

1 of 20
Download to read offline
Senior System Architect, Google Developer Expert, Authorised Trainer REAL-TIME IMAGE SHARING JERRY JALAVA JERRY@QVIK.FI | @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 @QVIKJERRY@QVIK.FI | @W_I
DEADLINE IS SET FOR YESTERDAY @QVIKJERRY@QVIK.FI | @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 @QVIKJERRY@QVIK.FI | @W_I
BUT ALL THAT WILL TAKE AT LEAST DAYS @QVIKJERRY@QVIK.FI | @W_I
NOT NECESSARILY WHAT IF I TOLD YOU, @QVIKJERRY@QVIK.FI | @W_I
@QVIK https://鍖rebase.google.comJERRY@QVIK.FI | @W_I
LETS JUST USE FOLLOWING Firebase Auth Firebase Storage Firebase Realtime Database FirebaseUI (https://github.com/鍖rebase/鍖rebaseui) @QVIKJERRY@QVIK.FI | @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 @QVIKJERRY@QVIK.FI | @W_I
BUILDING LETS START @QVIKJERRY@QVIK.FI | @W_I
1. LETS ADD FIREBASE TO OUR APP @QVIK We head to https://console.鍖rebase.google.com/ and create new project JERRY@QVIK.FI | @W_I
1. LETS ADD FIREBASE TO OUR APP @QVIK Next we create and download Firebase con鍖guration for our app JERRY@QVIK.FI | @W_I
2. LETS ENABLE AUTHENTICATION @QVIK We head to Authentication / Sign-In method con鍖g and enable Anonymous auth JERRY@QVIK.FI | @W_I
3. LETS BUILD THE BASIC UI @QVIK (Create some amazing UI by writing layout XML) JERRY@QVIK.FI | @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 JERRY@QVIK.FI | @W_I
5. UPLOAD IMAGE TO STORAGE @QVIK Here is just one simple way of uploading a 鍖le to Firebase storage JERRY@QVIK.FI | @W_I
AND WE ARE DONEWELL, ALMOST @QVIKJERRY@QVIK.FI | @W_I
SCAN THE QR CODE TO INSTALL HTTPS://GITHUB.COM/JERRYJJ/FIREBASE-STORAGE- DEMO-ANDROID LIVE DEMO @QVIKJERRY@QVIK.FI | @W_I
Real-time image sharing
THANK YOU www.qvik.鍖

More Related Content

Real-time image sharing

  • 1. Senior System Architect, Google Developer Expert, Authorised Trainer REAL-TIME IMAGE SHARING JERRY JALAVA JERRY@QVIK.FI | @W_I
  • 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. DEADLINE IS SET FOR YESTERDAY @QVIKJERRY@QVIK.FI | @W_I
  • 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. BUT ALL THAT WILL TAKE AT LEAST DAYS @QVIKJERRY@QVIK.FI | @W_I
  • 6. NOT NECESSARILY WHAT IF I TOLD YOU, @QVIKJERRY@QVIK.FI | @W_I
  • 8. LETS JUST USE FOLLOWING Firebase Auth Firebase Storage Firebase Realtime Database FirebaseUI (https://github.com/鍖rebase/鍖rebaseui) @QVIKJERRY@QVIK.FI | @W_I
  • 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
  • 11. 1. LETS ADD FIREBASE TO OUR APP @QVIK We head to https://console.鍖rebase.google.com/ and create new project JERRY@QVIK.FI | @W_I
  • 12. 1. LETS ADD FIREBASE TO OUR APP @QVIK Next we create and download Firebase con鍖guration for our app JERRY@QVIK.FI | @W_I
  • 13. 2. LETS ENABLE AUTHENTICATION @QVIK We head to Authentication / Sign-In method con鍖g and enable Anonymous auth JERRY@QVIK.FI | @W_I
  • 14. 3. LETS BUILD THE BASIC UI @QVIK (Create some amazing UI by writing layout XML) JERRY@QVIK.FI | @W_I
  • 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. 5. UPLOAD IMAGE TO STORAGE @QVIK Here is just one simple way of uploading a 鍖le to Firebase storage JERRY@QVIK.FI | @W_I
  • 17. AND WE ARE DONEWELL, ALMOST @QVIKJERRY@QVIK.FI | @W_I
  • 18. SCAN THE QR CODE TO INSTALL HTTPS://GITHUB.COM/JERRYJJ/FIREBASE-STORAGE- DEMO-ANDROID LIVE DEMO @QVIKJERRY@QVIK.FI | @W_I