1. welcome to: Latinx Tech PDX
agenda: October 25th 2017
6:15 - doors open
6:30 - member intros :40 - tech rise pdx
6:50 - intro to firebase
8:00 - Q&A

2. member intros What is your name?
What technologies are you currently excited about?
What attracted you to our Meet-up?

3. Tech Rise PDX
Raquel Dorshkind

4. fabio valentino
@fabiovalentino_
Intro to Firebase
auth & db

5. What is Firebase? real-time database
user authentication
serverless functions
storage
analytics
performance tools
test tools
and more …
It’s a set of cloud based products by google
Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in wikipedia

6. We will look at Creating the Firebase project online
Reading data real-time with on vs once
writing, updating, deleting data
Authentication (user sign-up, login, via , google, FB)
Firebase read/write rules (public, private, semi-private)
Firebase server-less functions
Additional resources
Q & A
We will use a create-react-app project to
walk through the code and view results

7. Firebase database

8. Creating and Connecting a Firebase project to our Web project
Go to firebase.google.com to create a project and copy the Web/JS configuration json
Add the firebase dependency to the JS project: npm -install firebase —save
Create a firebaseUtils.js file and set the contents of the JSON object into a firebaseConfiguration const
In your firebase rules json replace auth!=null with true

9. Reading from firebase Db
Import your firebase object
Read data by referencing the path to your data within firebase:
In the web console, manually add a new item to the path you’re reading (ie members). Note the immediate update to your feed.
Now change the membersRef.on to membersRef.once and note the immediate updates are no longer in effect.

10. Write, Update & Delete data
to/from firebase db
Write new data to a path in your firebase db using .set()
Update existing data in your path using .set()
Delete an item via its Reference using .remove()

11. Firebase authentication

12. User sign-up & login via Email & Password firebase Auth
Use firebase.auth() to create a user w/ & password
User login with & password, then use: firebase.auth().currentUser to fetch the user object

13. NOTICE: the use of firebase.auth vs firebaseUtils.auth()
Login using Google firebase Auth
You must import the firebase object from the firebase library as well as your firebaseUtils object
NOTICE: the use of firebaseUtils for my import vs the real firebase from ‘firebase’
Enable Google Authentication on your firebase project
Setup a provider object from firebase.auth.GoogleAuthProvider() and call the signInWithPopup from your object’s auth()
NOTICE: the use of firebase.auth vs firebaseUtils.auth()

14. Firebase rules

15. A look at firebase Rules and the simulator
By default firebase secures access to the database. Allowing only logged in users to read/write.
firebase Rules is a JSON object that uses cascading permissions in order to allow location (ie path) specific access (read / write).
Use a $<variable> to match an element’s key, and auth.uid to match the user’s uid attempting the operation vs
secure
not secure

16. Detailed permissions firebase Rules
Using .child(), .hasChild(), .val() we can accomplish some more detailed permissions
data refers to existing data already in the path you’re at.
newData refers to incoming data. (ie. data you’re trying to write)
Get comfortable using the Rules Simulator

17. Firebase server
functions

18. Server Functions via Firebase CLI tool
Install firebase cli by running this command on your terminal: npm install -g firebase-tools
Then run firebase login
Change into the directory for your server function code and then run firebase init
Select Functions option, and select your project by name
Press Y to install dependencies and open the /functions/index.js file
Uncomment the helloWorld function and run: firebase deploy

19. What we covered today what is firebase connecting to your web project
real-time database
user authentication
serverless functions

20. Great Resources
firebase YouTube channel:
firebase Rules:
firebase Server Functions:
Contraindications - Firebase is excellent for prototyping and even many production scenarios, but it’s also not the best for certain security or business reasons . I recommend you put your server logic in a `utils` file or module, in order to minimize any future refactoring efforts.

21. Firebase Q&A
thank you! -fabio valentino