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