Building RESTful APIs with Loopback

strongloop-workshop

<section id="welcome" data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
<h2>Building</h2>
<h1>RESTful APIs</h1>
<p>with</p>
<img style="border:none;padding:16px;" src="http://loopback.io/images/loopback-logo-anti-aliased-124px.png"/><img style="border:none;padding:16px;" src="http://loopback.io/images/masthead-cropped.png" />
<br/>
<p><i>an open source nodejs framework</i></p>
<br/>


<p class='fragment'><small><a class='fragment' href='http://gist-reveal.it/edea8255db2657e9a9de'>gist-reveal.it/edea8255db2657e9a9de</a></small></p>
<p class='fragment'><small><a class='fragment' href='http://strongloop.com'>StrongLoop.com</a></small></p>
</section>
<section data-background-transition='zoom' data-transition='linear'>
  <section id="agenda" data-background-transition='zoom' data-transition='linear' data-markdown>
    #Agenda
1. [Create a Loopback Application](#create)
2. [Basic Models and REST Services](#models)
3. [Serving Static Files](#development) 
4. [Custom Models and Service Endpoints](#custom-models-and-endpoints) 
5. [Relational Data and Access Controls](#relations-and-acls) <!-- relations --!>
6. [Client SDK and Angular UI](#client-ui) <!-- authentication --!>
<!-- 
7. [Share your results](#ship-it)
8. [Scaling](#scaling)
9. [Mobile](#mobile)
-->
  </section>
  <section id="requirements" data-markdown>
### Requirements:

Install the strongloop command line tools:

      npm install -g strongloop

Also, make sure to have [MongoDB](http://www.mongodb.com/) available and running.

  </section>
</section>
<section data-transition='concave'>
  <section id="create" data-transition='concave' data-markdown>
### Create your first 
## Loopback Application
  </section>
  <section id="scaffold" data-transition='concave' data-markdown>
### scaffolding
Scaffold up a new app with the `slc` command-line tool:

    slc loopback

<br/>
<br/>

For generator help, run:

    slc loopback --help

  </section>
  <section id="slc" data-markdown>

Test your app:

    DB=mongodb slc run

then visit [http://localhost:3000](http://localhost:3000) to verify that your server is running.

  </section>
  <section id="explorer" data-markdown>
Open up your API explorer at [localhost:3000/explorer](localhost:3000/explorer)
  </section>
</section>
<section>
  <section id="models" data-markdown>
  ##Basic Models and REST
  </section>
  <section id="parks" data-markdown>
First, define your data source:

`slc loopback:datasource`
  </section>
  <section data-markdown>
Create your Model:

`slc loopback:model`

    { "Name" : "Abraham Lincoln Birthplace National Historical Park", "pos" :  [-85.7302 , 37.5332 ] }

  </section>
  <section id="api-crud" data-markdown>
You should now have a basic REST / CRUD interface

<br/>

Next, insert a record using the API explorer:

[sample parks data](https://raw.githubusercontent.com/ryanj/restify-mongodb-parks/master/parkcoord.json)
    
  </section>
  <section id="query-data" data-markdown>

Try making a few GET requests to access your data

Or, query your new data directly using the `mongo` cli:

      mongo
      use test
      db.Park.findOne()
      db.Park.find({pos: {$geoWithin: {$box: [ [ 37.48,-122.16 ],[44.56,-93.11]] } } })

[geoWithin docs](http://docs.mongodb.org/manual/reference/operator/query/geoWithin/#op._S_geoWithin)
  </section>
  <section id="query-data" data-markdown>
`geoWithin` selections are much faster with a spatial index:

      db.Park.ensureIndex({'pos':"2d"})

  </section>
</section>

<section>
  <section id="break-one" data-state="blackout" data-markdown>
     ##### Break One
  </section>
</section>


<section data-transition='concave'>
  <section id="development" data-markdown>
  ##Local Development
  </section>
  <section id="serve-static" data-markdown>
### Serve Static Files

Add middleware for handling static content from the `client` folder:

      app.use(loopback.static(path.resolve(path.dirname(), 'client')));
  </section>
  <section id="index" data-markdown>
add a basic landing page with Leafletjs:

[example map source](https://gist.github.com/ryanj/8c02d673cf8ead66f0f1)

Add it to the `client` folder
  </section>
  <section id="reload" data-markdown>
### RESTART

restart your webserver (`slc run`)
  </section>
  <section id="web-test" data-markdown>
test your map

[http://localhost:3000/index.html](http://localhost:3000/index.html)
  </section>
</section>
<section>
  <section id="custom-models-and-endpoints" data-markdown>
  ## Custom Data Models and Service Endpoints

Extend your application by adding a new route using [loopback's `remoteMethod` function](http://docs.strongloop.com/display/LB/Defining+remote+methods):

[example source](https://gist.github.com/ryanj/ae89aa07598108ff0e75)

The example code shows how to add a custom API endpoint, validate your inputs, and craft a [selection query](http://docs.strongloop.com/display/LB/Querying+models) that will return the points within our bounding box.
  </section>
  <section id="restart" data-markdown>
### RESTART

restart your webserver (`slc run`)
  </section>
  <section id="api-test" data-markdown>
test your progress by making another call to the API, sending two bounding box coordinates:

      [{"Name": "University of St. Thomas", "pos": [44.56, -93.11]},
       {"Name": "Oakland, CA", "pos": [37.48, -122.16]}]

[/api/Parks/within?lat1=37.48&lon1=-122.16&lat2=44.56&lon2=-93.11](http://localhost:3000/api/Parks/within?lat1=37.48&lat2=44.56&lon1=-122.16&lon2=-93.11)
  </section>
</section>

<section>
  <section id="break-two" data-state="blackout" data-markdown>
     ##### Break
  </section>
</section>

<section data-transition='concave'>
  <section id="relations-and-acls" data-markdown>
## Relational Data and Access Controls
Add protected, per-user data and a relation.
  </section>
  <section id="reviews" data-markdown>
### Stars

Owned by each user, one park relation per record.

Start by adding a new Model.
  </section>
  <section id="relations" data-markdown>
Add relations with:

`yo loopback:relation`
  </section>
  <section id="acl" data-markdown>
  add access controls (ACLs)

`yo loopback:acl`
  </section>
</section>
<section data-transition='concave'>
  <section id="client-ui" data-markdown>
  ## Client SDK and Angular UI
  </section>
  <section id="javascript-client" data-markdown>
### Generate Loopback's javascript client

Add [Loopback's client-side AngularJS SDK](http://docs.strongloop.com/display/LB/AngularJS+JavaScript+SDK)

    cd client && mkdir js
    lb-ng ../server/server.js js/lb-services.js

  </section>
  <section id="angular" data-markdown>
### install angularjs

Update `client/index.html` to load the client code:

     &lt;script src="/js/lb-server.js" /&gt;

  </section>
  <section id="authentication" data-markdown>
### Authentication

Test your login / logout workflows
  </section>
  <section id="input" data-markdown>
### new inputs
Add a "Star" icon that indicates whether a user has "liked" a particular Park
  </section>
  <section id="status" data-markdown>
### Output
  Display the Star count in each map pin's popup menu.
  </section>
  <section id="ui-test" data-markdown>
### 

  Test your user interface

  The Star link should send unauthenticated users to the login page.
  </section>
</section>
<section>
  <section id="deployment" data-markdown>
## Deploy to OpenShift
Install OpenShift's command line tools:

     gem install rhc

Upload your app to github

Then, spin up your app:

     rhc app create yourapp your_app_github_url https://raw.githubusercontent.com/cgole/openshift-cartridge-strongloop/master/metadata/manifest.yml mongodb-2.4

  </section>
</section>



<!--


<section>
  <section id="ship-it" data-markdown>
#Deployment
Share your work
  </section>
</section>
<section data-transition='concave'>
  <section id="scaling" data-markdown>
  #Scaling
  ##on OpenShift
  </section>
  <section id="scale" data-markdown>
  scale up
  </section>
  <section id="bounds" data-markdown>
  set scaling min / max
  </section>
  <section id="dashboard" data-markdown>
  check the openshift dashboard to see how your app is handling the load

  generate some load and watch it respond by adding more gears?
  </section>
</section> 

<section>
  <section id="mobile" data-markdown>
  #Mobile
  </section>
  <section id="cordova" data-markdown>
  intro to cordova
  </section>
  <section data-markdown>
  ?
  </section>
  <section id="push" data-markdown>
  ship it! `git push`
  </section>
  <section id="mobile-test" data-markdown>
  test our results on a mobile device
  </section>
</section>



--!>



<section>
  <section id="links" data-markdown>
  ## Want More Info?

  1. [Loopback documentation](http://docs.strongloop.com/display/LB/)
  2. [Tutorials and Examples](http://docs.strongloop.com/display/LB/Tutorials+and+examples)
  3. [Monitoring with StrongOps](http://docs.strongloop.com/display/SLA/)


  </section>
  <section id="thank-you" data-markdown>

  ***Thanks for following along!***

  link to slides: 

  [gist-reveal.it/edea8255db2657e9a9de](http://gist-reveal.it/edea8255db2657e9a9de)
  </section>
</section>