Slide 1

Slide 1 text

Rapid Prototyping with Flutter & Firebase Building a social network

Slide 2

Slide 2 text

About me - Ahmed Youssef - Mobile Developer at Shopify - 6 years Android, 10 years Java - Love to build apps that solve everyday problems

Slide 3

Slide 3 text

Smart Home Controller Integrate home controls with media center Walkie Talkie Push-To-Talk chat Hub for gamers Platform for gamers to network and hang out with players in different time zones

Slide 4

Slide 4 text

Common Elements Unified Login User Database Publish Content User Interaction Push Notifications

Slide 5

Slide 5 text

Build Test Rapid Prototyping

Slide 6

Slide 6 text

Local API Storage, database, sync, caching Cloud API Storage, database, push notifications Multiplatform Support Android, iOS, Web

Slide 7

Slide 7 text

Build Test Not So Rapid Prototyping SQLite Storage Cloud API Push Notify Login

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Firebase (April 2012) Realtime database with login, storage, and push notifications Flutter (May 2017) Android, iOS, and web support

Slide 10

Slide 10 text

Flutter Connect: A Social Network built using Flutter and Firebase

Slide 11

Slide 11 text

Common Elements (revisited) Login using FB, Google, email User Profile Publish To Blog Message Users New message notification

Slide 12

Slide 12 text

pubspec.yaml

Slide 13

Slide 13 text

Project Structure 13 Files

Slide 14

Slide 14 text

main.dart

Slide 15

Slide 15 text

root.dart

Slide 16

Slide 16 text

home.dart

Slide 17

Slide 17 text

chat.dart friends.dart blog.dart

Slide 18

Slide 18 text

post_list.dart

Slide 19

Slide 19 text

post_item.dart

Slide 20

Slide 20 text

post_composer.dart

Slide 21

Slide 21 text

login.dart

Slide 22

Slide 22 text

Auth.dart

Slide 23

Slide 23 text

Auth_provider.dart

Slide 24

Slide 24 text

Flutter Connect Demo

Slide 25

Slide 25 text

● Create project on Firebase ● Add creds files to Android and iOS versions ● Create Facebook App with Facebook Login product ● Add and apply Google Services plugin to Android (using gradle) ● Add Facebook meta-data and activities in Android manifest ● Add Facebook meta-data to info.plist in XCode ● Make Android app multi-dex (using gradle) ● Add and configure sign in methods in Firebase ● Add URL Scheme to info.plist for Google sign-in Extra Steps

Slide 26

Slide 26 text

Gathering resources and dependencies 1 Hour Writing Code 1 Hour Extra Steps 1 Hour = 3 Hours Resource Breakdown

Slide 27

Slide 27 text

Synchronized Friend List Cloud function Push Notifications New message or post State Management BLOC pattern Next Steps & Improvements

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Thank You! - Questions - [email protected] - Github @yucef-ca