Light Up
the Web

An Intro to Building Apps with Firebase and Angular

Created by Ryan Christie / @biasedtruth
Presenter: loginlogout

Hello There

I'm Ryan and I have thoughts

Illinois State University

So, Firebase eh?...

tell me more

  • NoSQL
  • No need for backend
  • No problems

Firebase is real time

In fact, this presentation can be controlled by Firebase!

View presentation @http://bit.ly/1WwokWx

Let's back up a bit

The decision making process

How do you make a great choice?

Forget Technology

What are you trying to accomplish?!

Case in point

Recently, I needed to buy a wheelbarrow

aka...I needed a new MAN tool

Why, you ask?

What I thought I needed

but wait...

What do I need to do?

  • move / spread dirt, mulch, rock, etc.
  • carry firewood
  • get rid of debris
  • move / mix cement
  • stand up to abuse and misuse


So, I did some research and...

4 hours later

This is what I learned:

  • 1 and 2 wheeled wheelbarrows
  • 2 and 4 wheeled carts
  • Metal and plastic trays
  • Wood and synthetic handles
  • Run-flat and pneumatic tires
  • 4 - 10 cu./ft. capacity

Conclusion / Decision

I need two carrying device tool things

  • A single tire steel wheelbarrow
  • And a large weather resistant cart

So what does this have to do with Firebase and Angular?

Nothing!

I just needed to justify the ridiculous time I spent learning about mother f'ing wheelbarrows to a captive audience.

Actually

  • Don't solve problems or make decisions only with info you already know
  • The decision making process may lead to new perspectives
  • The web changes fast...take every opportunity to change with it

Let's return to sanity

And talk about web stuff and things

Map Location Data


{
  "abrv": "fel",
  "address": "304 S. University Street, Normal IL 61761",
  "cat": ["class", "nav"],
  "description": "Fell Hall is home to the School of Communication ...",
  "district": "Historic Quad District",
  "icon": "class",
  "id": "fell",
  "locDesc": "Fell Hall is located between DeGarmo Hall and McCormick ...",
  "longdesc": "<p>Fell Hall was renovated ...",
  "name": "Fell Hall",
  "places": {
    "soc": {
      "abrv": "soc",
      "description": "The School of Communication, located on the ...",
      "display": "Communication, School of",
      "email": "Communication@IllinoisState.edu",
      "hasOwnPage": false,
      "id": "school-of-communication",
      "link": "communication.illinoisstate.edu",
      "mailcode": "4480",
      "name": "School of Communication",
      "phone": "(309) 438-3671",
      "placeCat": "academic",
      "room": "434"
    },
  "x": 40.50841,
  "y": -88.99213
}

View Fell Hall details page

How to store location data?

  • What I knew: Edit static JSON file, SQL Database
  • What I was aware of: NO SQL, MongoDB, Redis
  • What I discovered: Firebase

Why Firebase?

How will people edit the data?

  • What I knew: JSON, AJAX and jQuery, CodeIgniter, Angular
  • What I was aware of: Ember, Backbone, Laravel
  • What I discovered: AngularFire
  • Works great with user input
  • Loves JSON
  • Lots of out-of-the-box features
  • JSON list example

Firebase + Angular

A match made in web heaven

Possibilities

  • Real-time events on the map
  • Parking / Laundry / Seat Availability
  • Building / Office hours

Thank you!!

Questions?

Ryan Christie / rcchris@IllinoisState.edu