Firebase: REST and Web API
DSCI 551
Wensheng Wu
1
CRUD in REST
• CRUD
– C – create PUT/POST (verbs in HTTP)
– R – retrieve/read GET
– U – update PATCH
– D – delete DELETE
• ordering and filtering
– orderBy="$key"
– orderBy="$value"
– orderBy="name"
– startAt=25, endAt=25, equalTo=25, equalTo="john"
– limitToFirst=1, limitToLast=1
2
New filtering
• startAfter
– startAfter=25 (for > 25)
– startAt=25 (>= 25)
• endBefore
– endBefore=25 (< 25)
– endAt=25 (<= 25)
3
Firebase
• A cloud-based platform to support web and
mobile app development
• Used to be Envolve, a startup founded in 2011
– For adding online chat functions into websites
• Later expanded into Firebase which was then
acquired by Google in 2015
4
Products
Also has Cloud Firestore in Beta
• Firebase (realtime) database
– Manage JSON documents
– Real-time syncing data between users and devices
• Firebase (cloud) storage
– Store images, photos, videos
• Firebase (user) authentication
– Support signin using Google, Facebook
5
Firebase realtime database
6
7
Create a Firebase account
• You may use your Google account
• Go to Firebase console:
– https://console.firebase.google.com/
8
Click on "Add project"
9
Create a firebase realtime db
10
Realtime database
11
Choose test mode
12
Open to access forever
• note .read and .write have a value of true
db-URL/users.json?orderBy="name"
this index supports this orderBy
13
14
May use this (but we expect you to
know the curl way)
15
JSON (Javascript Object Notation)
• Light-weight data exchange format
– Much simpler than XML
– Language-independent
– Inspired by syntax of JavaScript object literals
• Some differences from JavaScript objects, e.g.,
– String in JSON must be double-quoted
– Ok to single-quote in JavaScript (& Python)
16
Syntax of JSON
These are actual values
• value =
string|number|object|array|true|false|null
• object = {} | { members }
– members = pair | pair, members
– pair = string : value
• array = [] | [ elements ]
– elements = value | value, elements
17
Valid JSON or not?
• [2, "john"]
• {}
• {"name":[]}
• [{}]
• {[]}
• {"name": john}
• {name: "john"}
• {"name": 25}
• "name"
• 25
• {25}
• [25]
18
JSON is case-sensitive
• Valid or not?
– True
– true
– TRUE
– Null
– false
19
Example JSON
Value is an object
Value is an array
20
Stored in Firebase
Note: array stored as an object
Key = index of element in array
21
Check syntax of JSON
• JSON validator
– http://jsonlint.com/
22
Roadmap
• Firebase REST API
• Firebase Javascript API
– Useful for your project
23
curl
• Command line tool for data transfer
• Download from here (has Windows & Mac OS
versions):
– https://curl.haxx.se/download.html
• You may easily grab a copy of curl in Cygwin (see
next slide)
• You may also use curl on EC2 pre-installed…
24
Install curl in Cygwin
Select to install this one
25
Firebase REST API
• PUT & POST (C in CRUD)
• GET (R)
All request commands
are case sensitive (all uppercases)
• PATCH (U)
• DELETE (D)
26
GET
• curl 'https://inf551-
1b578.firebaseio.com/weather.json'
• Or
– curl -X GET 'https://inf551-
1b578.firebaseio.com/weather.json'
27
Another example
• curl -X GET 'https://inf551-
1b578.firebaseio.com/examples/phoneNumb
ers/0.json'
– {"number":"212 555-1234","type":"home"}
Note: refer to array element by index
28
PUT
• curl -X PUT 'https://inf551-
1b578.firebaseio.com/weather.json' -d '"hot"'
– "hot"
• PUT: write a given value (e.g., "hot") to the
specify node (e.g., "weather")
– Overwrite if node already has value
29
PUT
• curl -X PUT 'https://inf551-
1b578.firebaseio.com/users/100.json' -d
'{"name": "john"}'
• This will add a new node "users" (assuming it
does not exist yet) and a child of this node
with key "100" and content: {"name": "john"}
30
Example
• Is the previous command the same as this?
– curl -X PUT -d '{"100": {"name": "John"}}'
'https://inf551-1b578.firebaseio.com/users.json'
Note we now write to the "users" node
• Can you think of a situation where two
commands give different results?
31
POST
• curl -X POST -d '{"name": "John"}'
'https://inf551-
1b578.firebaseio.com/users.json'
• Note post automatically generates a new key
& then stores the value for the new key
– In contrast, PUT will simply overwrite the value
32
PATCH
NOTE: patch expects an JSON object in the
value
• curl -X PATCH -d '{"name": "John Smith",
"age": 25}' 'https://inf551-
1b578.firebaseio.com/users/100.json'
• PATCH performs the update if value already
exists (e.g., name) ; otherwise, it inserts the
new value (e.g., age)
– So... an upsert
33
DELETE
• curl -X DELETE 'https://inf551-
1b578.firebaseio.com/users/100.json'
• What does this do?
– curl -X DELETE 'https://inf551-
1b578.firebaseio.com/users.json'
34
Query: filtering by key
• curl 'https://inf551-
1b578.firebaseio.com/users.json?orderBy="$k
ey"&equalTo="200"'
Must be a string. Why?
• This returns:
– {"200":{"age":25,"name":"David"}}
35
Another example
• curl 'https://inf551-
1b578.firebaseio.com/users.json?orderBy="$k
ey"&startAt="200"'
Users with keys >= "200"
• This returns:
– {"200":{"age":25,"name":"David"},"300":{"gender
":"female","gpa":4.0,"name":"Mary"}}
36
Ways of filtering data
Key
• By key:
– orderBy="$key"
orderBy="name"
• By child key:
– orderBy="<path-to-child-key>“
– E.g., orderBy = “name”
• By value:
– orderBy="$value"
37
Parameters
• startAt
• endAt
• equalTo
• limitToFirst
• limitToLast
• startAfter
• endBefore
38
Example: filtering by child key
• curl 'https://inf551-
1b578.firebaseio.com/users.json?orderBy=“ag
e"&limitToFirst=1&print=pretty’
• What will this return?
39
Example for orderBy="$value"
• curl -X PUT 'https://inf551-
1b578.firebaseio.com/users/500.json' -d
'{"name": "jennifer", "scores": {"q1": 5, "q2":
10, "q3": 8, "midterm": 9}}'
40
Example: filtering by value
• curl 'https://inf551-
1b578.firebaseio.com/users/500/scores.json?
orderBy="$value"&limitToFirst=1&print=prett
y'
• What will this return?
41
Creating index for value/child key
• Specified in database rules:
– https://firebase.google.com/docs/database/security/i
ndexing-data
• Only required
for REST API
• No need to index key
– Done automatically by Firebase
42
Ordering
43
Ordering
44
Watch out…
• https://firebase.google.com/docs/database/re
st/retrieve-data
45
Using REST in Python
• import requests
– May need to "pip install requests" first
• url = 'https://inf551-
1b578.firebaseio.com/users.json'
• response = requests.get(url)
• response.json()
– {u'200': {u'age': 25, u'name': u'David'},…
46
Writing
• url1 = 'https://inf551-
1b578.firebaseio.com/users/888.json'
• data = '{"name": "jimmy", "gender": "male"}'
• response = requests.put(url1, data)
• response.text
• response.json()
47
Update, delete & post
• Updating
– requests.patch(url, data)
• Deleting
– requests.delete(url)
• Posting
– requests.post(url, data)
48
Requests API
• Requests for Python
– https://requests.readthedocs.io/en/latest/
49
Pretty printing
• import json
• print json.dumps(response.json(), indent=4)
{
"200": {
"age": 25,
"name": "David"
},
…
50
Roadmap
• Firebase REST API
• Firebase Javascript/Web API
– Useful for your project
51
52
Choose this for web app
53
Copy this &
replace the
firebaseConfig in
the sample html
file
54
Demo html page
val() returns a Javascript object
representing content of snapshot
55
Database reference
• firebase.database() returns a reference to the
firebase database as specified by
"firebaseConfig"
• ref(): returns a reference to the root node of
the database
• ref("weather") returns a reference to the
"weather" child of the root
– same as ref().child("weather")
56
Modify the data in database
• Observe the data automatically changed in
the browser
57
Write data using set()
• function writeUserData(userId, name, email) {
firebase.database().ref("users/" + userId).set({
name: name,
email: email
});
Setting/overwriting the data of user 123
}
• writeUserData("123", "John", "[email protected]");
58
Write data using push() and set()
• firebase.database().ref("users").push().set({na
me: "John", email: "[email protected]"});
• push() will automatically generate a key
– In this case, id for the new user
• Which REST command is this similar to?
59
Update data
• function updateUserData(userId, phone) {
firebase.database().ref("users/"+userId).update({
phone: phone
});
} Note this does not remove other data of user 123
What if you replace "update" with "set"?
• updateUserData("123", "(626)123-0000");
60
Retrieve a list of values
• userRef = firebase.database().ref("users");
• userRef.on("value", function(snapshot) {
snapshot.forEach(function(child) {
console.log(child.key + ": " + child.val());
});
});
Press Ctrl+Shift+J in Chrome for console window
61
Listening to child events instead
• userRef.on("value", function(snapshot) {…
– Will retrieve a list of values in the path specified by
userRef
– Not efficient, since entire list will be retrieved
whenever changes occur
• userRef.on("child_added", function(…)) {…
– Firebase will callback for every existing child and new
child added to the path userRef
– Other events: child_changed, child_removed
62
Filtering data
• queryRef =
firebase.database().ref("users").orderByChild(
"name").equalTo("David");
• queryRef.on("value", function(snapshot) {
snapshot.forEach(function(child) {
console.log(child.key + ": " + child.val());
});
});
63
Filtering data
• It also supports:
– orderByKey()
– orderByValue()
64
orderByValue() example
queryRef = firebase.database().ref("users/500/scores")
.orderByValue();
queryRef.on("value", function(snapshot) {
snapshot.forEach(function(child) {
console.log(child.key + ": " + child.val());
});
});
65
Resources
• Add Firebase to your JavaScript Project
– https://firebase.google.com/docs/web/setup
• Getting Started with Firebase on the Web
– https://www.youtube.com/watch?v=k1D0_wFlXgo&fe
ature=youtu.be
• Realtime Database: Installation & Setup in
JavaScript, Read & Write Data …
– https://firebase.google.com/docs/database/web/start
66
Resources
• Firebase REST API
– https://firebase.google.com/docs/reference/rest/
database/
• Requests for Python
– https://requests.readthedocs.io/en/latest/
67
Resources
• Firebase Firestore Tutorial
– https://www.youtube.com/watch?v=4d-gIPGzmK4
– On how to develop a web app using Firestore
68
