Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Prototyping a
Social
NetworkAngularJS: Firebase integration with
AngularFire
Pizza++
AngularJS: Firebase integration with AngularFire5/7/2017 2
Pizza++ Feature Set
• Find top pizzas to eat near me
• Post pizzas
• Rate pizzas
• Review (comment) pizzas
• Discuss about pizzas with my friends
5/7/2017 3AngularJS: Firebase integration with AngularFire
Pizza++
• Ingredients for frontend
– HTML5
– CSS3, with the help of the Bootstrap framework
(http://getbootstrap.com)
– JS, with the AngularJS framework
(http://angularjs.org/)
• Ingredients for backend
– None
– We will rely on Firebase (https://firebase.google.com)
5/7/2017 4AngularJS: Firebase integration with AngularFire
FIREBASE
Getting started…
5/7/2017 5AngularJS: Firebase integration with AngularFire
Firebase• A powerful platform for mobile or web applications
– https://firebase.google.com
• Overview (video)
– https://youtu.be/ySmWlU9j3j4
• Quickstart for the Web
– https://firebase.google.com/docs/web/setup
5/7/2017 6AngularJS: Firebase integration with AngularFire
Realtime Database
• The Firebase Realtime Database is a cloud-
hosted database
• Data in our Firebase database
– stored as JSON
– synchronized in realtime to every connected client
• Automatically scales with your app
• Works offline
5/7/2017 7AngularJS: Firebase integration with AngularFire
Realtime Database
5/7/2017 8AngularJS: Firebase integration with AngularFire
Realtime Database: Structuring Data
• "Everything is a JSON"
• Avoid nesting data:
– with nested design, iterating through the data becomes
problematic
5/7/2017 9AngularJS: Firebase integration with AngularFire
Realtime Database: Structuring Data
• Prefer flattened data:
– split data into separate paths
5/7/2017 10AngularJS: Firebase integration with AngularFire
Authentication
• Built-in support for user authentication
• Support
– Social Login (Facebook, Twitter, GitHub, Google)
– Anonymous Login
– Login with username and password
– Custom auth system integration
• Handle user login entirely with client-side code
• Integrate authentication with your existing
backend
– if needed
5/7/2017 11AngularJS: Firebase integration with AngularFire
Authentication
5/7/2017 12AngularJS: Firebase integration with AngularFire
Hosting
• Deploy your web app in seconds
– Hosting gives you the infrastructure, features, and
tooling tailored to deploying and managing static
websites
• Hosting gives your project a subdomain on the
firebaseapp.com domain
• All of your content is served over HTTPS
– SSL by default
5/7/2017 13AngularJS: Firebase integration with AngularFire
Hosting
5/7/2017 14AngularJS: Firebase integration with AngularFire
Cloud storage
• store and serve user-generated content
– It is possible to store images, audio, video, or other
user-generated content
• It adds Google security to file uploads and
downloads
• On the server, use Google Cloud Storage to
access the same files
5/7/2017 15AngularJS: Firebase integration with AngularFire
Cloud storage
5/7/2017 16AngularJS: Firebase integration with AngularFire
HOW TO INTEGRATE
FIREBASE IN ANGULARJS
Getting started with Pizza++ and Firebase
5/7/2017 17AngularJS: Firebase integration with AngularFire
Integrate Firebase in AngularJS
5/7/2017 18
http://lmgtfy.com/?q=angularjs+firebase
AngularJS: Firebase integration with AngularFire
AngularFire
• Firebase library for AngularJS
– https://github.com/firebase/angularfire
• The officially supported AngularJS binding for
Firebase
• Getting started guide
– https://github.com/firebase/angularfire/blob/master/doc
s/quickstart.md
5/7/2017 19AngularJS: Firebase integration with AngularFire
(GUIDED) EXERCISE
Getting started with Pizza++ and Firebase
5/7/2017 20AngularJS: Firebase integration with AngularFire
(Guided) Exercise
• Starting from the knowledge of the previous
lab…
– https://github.com/SoNet-2017/angularjs-lab7/releases
1. integrate AngularFire and Firebase
2. read/write the JSON data from/to Firebase
5/7/2017 21AngularJS: Firebase integration with AngularFire
Step 1: create a Google account
5/7/2017 22AngularJS: Firebase integration with AngularFire
Step 2: create a new project
5/7/2017 23AngularJS: Firebase integration with AngularFire
5/7/2017 24
• Open the file data/pizzas.json
• Modify the structure so that it has a "pizzas" path as
origin of the tree:
Step 3: recreate the pizza++ data structure
AngularJS: Firebase integration with AngularFire
5/7/2017 25
• Import the data in Firebase
Step 3: recreate the pizza++ data structure
AngularJS: Firebase integration with AngularFire
5/7/2017 26
• Import the data in Firebase
Step 3: recreate the pizza++ data structure
AngularJS: Firebase integration with AngularFire
5/7/2017 27
• Default security rules require users to be authenticated
Step 4: Don't forget RULES
AngularJS: Firebase integration with AngularFire
5/7/2017 28
• We want to read data without authentication, so ->
Deactivate this rule by typing the following code (and
pressing PUBLISH):
Step 4: Don't forget RULES
AngularJS: Firebase integration with AngularFire
5/7/2017 29
• https://github.com/firebase/angularfire/blob/master/docs/q
uickstart.md
Step 5: Use the documentation
AngularJS: Firebase integration with AngularFire
5/7/2017 30
Tip: to get config info
AngularJS: Firebase integration with AngularFire
Step 1:
5/7/2017 31
Tip: to get config info
AngularJS: Firebase integration with AngularFire
Step 1:
Step 2: Project Settings
5/7/2017 32
Tip: to get config info
AngularJS: Firebase integration with AngularFire
Step 1:
Step 2: Project Settings
Step 3: Add Firebase to your web app
Questions?
Teodoro Montanaro
01QYAPD SOCIAL NETWORKING: TECHNOLOGIES
AND APPLICATIONS
License
• This work is licensed under the Creative Commons “Attribution-NonCommercial-ShareAlike Unported (CC BY-NC-SA 3,0)” License.
• You are free:– to Share - to copy, distribute and transmit the work
– to Remix - to adapt the work
• Under the following conditions:– Attribution - You must attribute the work in the manner specified by the
author or licensor (but not in any way that suggests that they endorse you or your use of the work).
– Noncommercial - You may not use this work for commercial purposes.
– Share Alike - If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
• To view a copy of this license, visit http://creativecommons.org/license/by-nc-sa/3.0/
5/7/2017 34AngularJS: Firebase integration with AngularFire