Real-time Image Sharing
Transcript of Real-time Image Sharing
![Page 1: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/1.jpg)
Senior System Architect, Google Developer Expert, Authorised Trainer
REAL-TIME IMAGE SHARINGJERRY JALAVA
[email protected] | @W_I
![Page 2: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/2.jpg)
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 4: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/4.jpg)
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 8: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/9.jpg)
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 11: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/12.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/16.jpg)
5. UPLOAD IMAGE TO STORAGE
@QVIK
Here is just one simple way of uploading a file to Firebase storage
[email protected] | @W_I
![Page 18: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/19.jpg)
![Page 20: Real-time Image Sharing](https://reader031.fdocuments.net/reader031/viewer/2022021813/589d95b91a28abfb3d8b4b17/html5/thumbnails/20.jpg)
THANK YOUwww.qvik.fi