![StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('quotes').snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new CircularProgressIndicator();
default:
return PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, position) {
final document = snapshot.data.documents[position];
Read with StreamBuilder
(widget with which we can convert network streams into UI objects)](https://image.slidesharecdn.com/firestoremenadigitaldays-200518201104/85/Firestore-MENA-digital-days-GDG-Abu-dhabi-28-320.jpg)
Firestore MENA digital days : GDG Abu dhabi
- 1. Shashank Kakroo GDG Abu Dhabi, UAE Introduction to Firebase : Firestore with Flutter
- 4. No registration needed Qwiklabs Code: bit.ly/menadd-apr Feedback: bit.ly/menadd-feedback Weekly challenge: bit.ly/menadd-challenge MENA Digital Days - Together we learn! Join us YouTube.com/c/GDGMENA Website: bit.ly/menadd-website Each week Sunday-Thursday 7-11pm (Dubai Time) Content: 20+ LIVE workshops, Talks, & hackathons Speakers: Googlers, Experts & 200+ communities. Stay Home! Stay Safe! Keep learning!
- 5. Two more things ✌ Help us improve this initiative 1. ATTENDANCE CERTIFICATE weekly after filling feedback bit.ly/menadd-feedback 2. JOIN MENA DIGITAL DAYS CHALLENGE … bit.ly/menadd-challenge (Code: bit.ly/menadd-apr) All winners who solve 6 quests this week Wins SPECIAL GIFT BOX! 🎁 All winners who solve 12 quests this week Wins Google Home Mini 🤩
- 6. Agenda for Today ● Introduction to Firebase ● Brief about Firebase products ● Cloud Firestore Database ● Introduction to Flutter ● Setup firebase and flutter project ● CRUD Operations with Firebase & Flutter ● Sample App with Code references
- 8. Firebase is google’s app development platform ● Abstracts any typical backend platform. ● Complete package for all app development needs. ● Works well with Node, Python, Java etc. on many platforms like android, ios and web. ● Well documented and easy to adopt. ● Free for small experiments and scales according to user growth. ● Has many products which can be used independently or in combination according to your development needs.
- 12. Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps - at global scale. ● Its a document database, stores data in form of big tree like structures but all in form of documents and collections. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- 13. Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps - at global scale. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- 14. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. ● Data Model – In Firebase Real-time Database stores data in a large JSON tree. In Cloud Firestore, data is stored as a collection of documents. You can use subcollection in the documents. Cloud Firestore requires less normalization. ● Real-time and Online Support – Real-time Database: Offline support only for mobile (Android & iOS) devices. Cloud Firestore: Offline support for mobile (Android & iOS), web clients as well. ● Querying - Real-time Database: You can use deep queries. But have some limitations on filtering and sorting the functionalities. Cloud Firestore: You can use index queries with good compound filtering and sorting. You can use sorting, combine filtering and chain filter on every property in one single query. ● Scalability - In real-time database, the scaling process is not automatic, we have to scale on your own. In the Cloud Firestore Scaling process is automatic. Firebase does it on their own. CLOUD FIRESTORE VS. REALTIME DATABASE
- 15. Creating Firebase Project Flutter with Firebase
- 21. What is Flutter? Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. ● First announced as stable at December 2018 ● Key values: ○ Fast Development ○ Expressive and Flexible UI ○ Native Performance
- 26. Words Of Wisdom - Quotes App C - Create R - Read U - Update D - Delete Firestore Operations
- 27. Future addUserToFirebaseDB(FirebaseUser data) async { try { return await Firestore.instance .collection('users') .document(data.email.toString()) .setData( {'email': data.email, 'name': data.displayName }); } catch (e) { print(e); } } FirebaseUser user = await GoogleLogin.signInWithGoogle(); addUserToFirebaseDB(user).then((value) { setState(() { isLoading = false; }); Navigator.pushReplacement( context, CupertinoPageRoute(builder: (context) => QuotesPage(true))); }); Login and Create
- 28. StreamBuilder<QuerySnapshot>( stream: Firestore.instance.collection('quotes').snapshots(), builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { if (snapshot.hasError) return new Text('Error: ${snapshot.error}'); switch (snapshot.connectionState) { case ConnectionState.waiting: return new CircularProgressIndicator(); default: return PageView.builder( scrollDirection: Axis.horizontal, itemCount: snapshot.data.documents.length, itemBuilder: (context, position) { final document = snapshot.data.documents[position]; Read with StreamBuilder (widget with which we can convert network streams into UI objects)
- 29. Future addQuotesToFirebaseDB() async { try { String author = authorController.text.toString(); String quote = quotesController.text.toString(); final collRef = Firestore.instance.collection('quotes'); DocumentReference docReference = collRef.document(); return await docReference.setData( {'author': author, 'quote': quote, 'id': docReference.documentID}); } catch (e) { print(e); } } Addition of Document
- 30. Future updatePostClap(String postID, count) async { try { await Firestore.instance .collection('posts') .document(postID.toString()) .updateData({ 'clapCount': int.parse(count), }); } catch (e) { print(e); } } Update
- 31. Simple and Compound Queries : Indexing await Firestore.instance .collection("posts") .where("language", isEqualTo: lang) .orderBy("clapCount", descending: true) .orderBy("timestamp", descending: true) .getDocuments() .then((QuerySnapshot snapshot) { snapshot.documents.forEach((element) { listOfPost.add(PostContent.fromFirestore(element)); }); });
- 32. Securing Firestore : Database Rules
- 33. Securing Firestore : Database Rules
- 34. Securing Firestore : Database Rules service cloud.firestore { match /databases/{database}/documents { match /users/{userId} { allow read, write: if request.auth.token.email == userId; } match /languages/{document=**} { allow read, write: if request.auth.uid != null; } match /posts/{document=**} { allow read, write: if request.auth.uid != null; } match /sections/{document=**} { allow read, write: if request.auth.uid != null; } } }
- 37. Resources & References Firebase docs : https://firebase.google.com/docs Cloud Firestore docs : https://firebase.google.com/docs/firestore Code References for Quotes App : https://github.com/shashankkaroo/WordsOfWisdom-Quotes-App Candid Feeds App : https://play.google.com/store/apps/details?id=com.candidfeeds&hl=en Getting started with Flutter : https://flutter.dev/docs Sample Flutter Projects for References : https://itsallwidgets.com/ Udacity Free courses for Flutter : https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905
- 38. Shashank Kakroo shashankkakroo@gmail.com GDG Abu Dhabi, UAE Thank You!