JSON in the sky.....




{sign-up for an account on firebase}

{fork and clone this repo!}

with a partner!

{start running a local server}

cd Desktop/firebase-demo
python -m SimpleHTTPServer 8080
# See page at localhost:8080

What we'll build

Set up

Create a new app on Firebase

Include the libraries in your index.html

Include dependencies!

<!-- Angular -->
<script src=""></script>

<!-- Firebase -->
<script src=""></script>

<!-- AngularFire -->
<script src=""></script>
// Create application with dependency 'firebase'
var myApp = angular.module('myApp', ['firebase'])

Enhance HTML Form

<!-- Initiate app and controller on body -->


<!-- Sign-in/sign-up form: show if userId isn't defined -->
<form name="myForm" novalidate>


<!-- Bind model "handle" to this input, set minimum length, and make it required -->
<div class="form-group">
    <input name="handle" class="form-control">	
<!-- Add an error message if the length is too short -->

<!-- Bind model "email" to this input and make it required -->
<div class="form-group">
    <input  name="email" type="email" class="form-control"></input>
<!-- Add an error message if the email is not valid -->	


<!-- Submit buttons: should only be active if certain inputs are valid 
- Sign-up needs the entire form to be valid
- Sign-in only needs email and password

Setting up firebase

Create a reference to your database

Create variables to reference child properties 

User $firebase* to define how you'll use the data 

var ref = new Firebase("https://{APP-NAME}");
var dataRef = ref.child('dataKey')
// Array or object
$ = $firebaseArray(dataRef);
$ = $firebaseObject(dataRef);



Set up Application

// Create application with dependency 'firebase'

// Bind controller, passing in $scope, $firebaseAuth, $firebaseArray, $firebaseObject

    // Create a variable 'ref' to reference your firebase storage

    // Create references to your 'tweets' and 'users' keys

    // Create a firebaseArray of your tweets, and store this as part of $scope

    // Create a firebaseObject of your users, and store this as part of $scope


Firebase authentiation object

Test if authorized

Create a user

// Create authentication object that refers to firebase
$scope.authObj = $firebaseAuth(ref);
// Test if already logged in
var authData = $scope.authObj.$getAuth();
// Create user
    email: $,
    password: $scope.password, 			
}).then(function() {
    // something else in here
// Create authorization object that referes to firebase
$scope.authObj = $firebaseAuth(ref);

// Test if already logged in
var authData = $scope.authObj.$getAuth();
if (authData) {
	$scope.userId = authData.uid;

// SignUp function
$scope.signUp = function() {
	// Create user
		email: $,
		password: $scope.password, 			

	// Once the user is created, call the logIn function

	// Once logged in, set and save the user data
	.then(function(authData) {
		$scope.userId = authData.uid;
		$scope.users[authData.uid] ={

	// Catch any errors
	.catch(function(error) {
		console.error("Error: ", error);

// SignIn function
$scope.signIn = function() {
		$scope.userId = authData.uid;

// LogIn function
$scope.logIn = function() {
	return $scope.authObj.$authWithPassword({
		email: $,
		password: $scope.password

// LogOut function
$scope.logOut = function() {
	$scope.userId = false


// Write an accesible tweet function to save a tweet
	/* Add a new object to the tweets array using the 
        firebaseArray .$add method. Include:
		text:text in textarea,
		userId:current user id,
                // this tells firebase server to save timestamp

	/* Once the tweet is saved, reset the value 
        of $scope.newTweet to empty string */

Saving data

<!-- Use ng-repeat directive to repeat a div for each element in tweets -->
<div class="tweet-box">


<!-- Put in the twitter handle and time of tweet -->
<span class="handle"></span>
<span class="time"></span>


<!-- Put in the text of the tweet -->
<div class="tweet">						

<div class="likes">
	<!-- Show a heart icon that, when clicked, 
		passes your tweet to your "like" function -->
	<!-- Show your total number of likes -->

Showing tweets

// Function to like a tweet

    // Takes in a tweet from your HTML
    // Changes a property of that tweet (likes)
    // Saves your entire tweets array

Liking tweets


Spotify Challenge (due before next class)


By Michael Freeman


  • 988
Loading comments...

More from Michael Freeman