Coders Workshop: API First Mobile Development Featuring Angular and Node
7 likes1,064 views
This document provides an agenda and overview for a workshop on API-driven app development. The agenda includes sections on Node.js, RESTful API best practices, Apigee 127, AngularJS, mobile backend as a service (mBaaS), and building a sample application that integrates these technologies. It discusses Node.js, why it is popular, and provides a crash course on key concepts. It also covers RESTful API design best practices and introduces Apigee 127 for building and deploying APIs. The document introduces AngularJS and Ionic for building hybrid mobile apps, and using a mBaaS like Apigee's API platform. It concludes with an exercise of integrating these pieces to build
![Create an a127 account
a127 account create Apigee
[?] Provider? apigee
[?] Do you already have an account on apigee? Yes
[?] Base URI? [Just hit Return]
[?] Organization? YOURORGNAME
[?] User Id? YOUREMAILADDRESS
[?] Password? ****************
[?] Environment? test
[?] Virtual Hosts? [Just hit Return]
[?] Create account service? Yes
[?] Service Type? RemoteProxy
[?] Service name? RemoteProxy [or whatever you want to name it]
92](https://image.slidesharecdn.com/iloveapis2015codersworkshop-151021060001-lva1-app6891/85/Coders-Workshop-API-First-Mobile-Development-Featuring-Angular-and-Node-92-320.jpg)
Coders Workshop: API First Mobile Development Featuring Angular and Node
- 4. Why do we do this workshop? 4
- 5. Apigee is always free for developers Free Hosted Accounts 25GB storage limit, 10M push notifications/month no API/bandwidth limit Commercial use OK 5
- 6. Paid plans available for large companies if you need to deploy on your own servers or SLAs, 4 nines, multi-region, phone support, more storage, etc. 6
- 7. Apigee SMB 7
- 10. Agenda Section 1 Node.js Crash Course Section 2 RESTful API Best Practices Section 3 Intro to Apigee127 Section 4 Intro to AngularJS and Ionic 10
- 11. Agenda Section 5 Intro to mBaaS Section 6 Putting It All Together Section 7 { OKTOBERFEST: IPAs } 11
- 13. Why node.js? โข Javascript running on the server โข Asynchronous, event-driven โข HTTP is a first-class citizen of the Node world โข Exploding in popularity 13
- 14. Who is using Node.js? 14
- 15. Node.js success stories โข LinkedIn moved to Node.js from Rails for their mobile traffic, reducing the number of servers from 30 to 3 (90% reduction) and the new system was up to 20x faster.โจ โข PayPal measured a 2x increase in developer productivity, where it took half the number of developers to deliver an application when compared to Java, and it was delivered in less time 15
- 16. Node.js success stories โข WalMart Labs had a bumper launch with Node.js in 2013, where they put all of their Mobile traffic through Node.js on Black Friday.โจ โข Servers didnโt go over 1% CPU utilization and the team did a deploy with 200,000,000 users online. 16
- 19. The worldโs simplest web server 19
- 21. The world of npm 21
- 22. Modules must be installed 22
- 23. Installing modules โข Individual modules must be installed using the NPM command line โข Once installed (node_modules folder), they are added to the app using require(โmodule nameโ) 23
- 24. Installing multiple modules โข When a Node.js app launches, it looks for a file, package.json, in the same folder as the main JS file to determine if all of its โpiecesโ are present โข Using npm install will install all of the listed dependencies at one time. 24
- 25. Best Practices in RESTful API Design
- 27. SOAP and XML-RPC 27 <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <soapenv:Header> <ns1:RequestHeader soapenv:actor="http://schemas.xmlsoap.org/soap/actor/next" soapenv:mustUnderstand="0" xmlns:ns1="https://www.google.com/apis/ads/publisher/v201403"> <ns1:networkCode>123456</ns1:networkCode> <ns1:applicationName>DfpApi-Java-2.1.0-dfp_test</ns1:applicationName> </ns1:RequestHeader> </soapenv:Header> <soapenv:Body> <getAdUnitsByStatement xmlns="https://www.google.com/apis/ads/publisher/v201403"> <filterStatement> <query>WHERE parentId IS NULL LIMIT 500</query> </filterStatement> </getAdUnitsByStatement> </soapenv:Body> </soapenv:Envelope>
- 28. The dawn of REST 28
- 29. Representational State Transfer 29 โข Resources and resource identifiers ย โข Transport and semantic independence ย โข Statelessness ย โข Interface/contract uniformity ย โข Metadata and shared understanding of data types ย โข Self-descriptive messages ย โข Hypertext as the Engine of Application State (HATEOAS)
- 30. What could be easier? 30 GET https://www.googleapis.com/adexchangebuyer/v1.3/accounts
- 31. Web Point of Sale Partner Mobile ESB, SOA, App Servers, Databases Apps Backend ServicesAPIs
- 32. Teaching a dog to REST
- 35. It happens in the real world 35
- 37. Resource modeling We only need two base URLs for a resourceโจ A collectionโจ โจ A resource 37 /dogs /dogs/1234
- 39. Sweep complexity behind the โ?โ 39 /dogs?color=red&state=running&location=park
- 41. Never EVER Never Break The Client. EVER. 41 unlessโฆ
- 43. Intro to Apigee 127
- 44. Apigee 127 on the web 44 https://github.com/apigee-127
- 45. Installing Apigee 127 โข Apigee 127 is installed using the command line โ note that you may have to use sudo on a Macโจ npm install -g apigee-127 โข Using the -g option installs Apigee 127 as a globally available app โ this is recommended 45
- 46. Starting an Apigee-127 Skeleton Project โข a127 project create <project name> โข cd <project name> โข a127 project edit โข a127 project start (run this in a different tab/window) 46
- 47. Disable Response Validation โข Open config/default.yaml โข Change to validateResponse: false 47
- 48. Creating an Apigee 127 Project โข Using the command line, navigate to the place where you want to create a new project a127 project create api-workshop 48
- 49. Apigee 127 App Structure 49
- 50. Try it out โข Navigate inside the project folder, then execute the command โจ a127 project start โข Open a browser window and navigate to:โจ http://localhost:10010/hello?name=YOUR-NAME-HERE 50
- 51. Launching the Editor โข Launch the local Swagger editor by runningโจ a127 project edit 51
- 52. How Do Controllers Work? โข All controllers are stored in the api/controllers folder โข The name of the controller (.js file) must match the โจ x-swagger-router-controller: value in the swagger doc 52
- 53. How Do Controllers Work? โข Each controller exports an array of name/value pairings where the name corresponds to the operationId: in the swagger document and the value is the function within the controller 53
- 54. Intro to AngularJS & Ionic
- 55. npm install -g cordova ionic 55 Install Ionic & Cordova
- 56. What is AngularJS? โข JS Model-View-Controller (MVC) framework โข Declarative UI programming โข Imperative logic programming โข DOM manipulation decoupled from app logic โข Many built-in directives to handle DOM manipulation โข Single page app development 56
- 57. 57
- 58. 58
- 59. Model-View-Controller (MVC) Model โข Data stored as JavaScript variables โข Set/updated in the view and/or controller View โข What the user sees and interacts with โข HTML template filesโจ Controller โข Defines business logic โข Written in JavaScript 59 $scope.name = โAlexโ; <p>Hello, {{name}}!</p> if (!$scope.name) { $scope.name = โStrangerโ; }
- 60. So What? โข Clear, succinct and modular component structure โข Easy to build/collaborate on large apps โข Extensible (dependency injection) โข Improves testability โข Two-way data bindings 60
- 61. One-way Data Binding (traditional) 61 Source: https://docs.angularjs.org/guide/databinding
- 62. Two-way Data Binding (AngularJS) 62 Source: https://docs.angularjs.org/guide/databinding
- 63. Ionic โข Hybrid mobile app frameworkโจ (no native development required) โข Mobile-optimized Angular constructs (directives, events) โข Leverages AngularJS and Apache Cordova โข Build once, deploy everywhereโจ iOS, Android, Kindle, Windows Phone?, Blackberry??? โข Performant! 63
- 64. Create Ionic Skeleton App 64 ionic start myApp blank
- 65. Super Simple Ionic Hello World App 65 http://j.mp/ionic-hello โข Add a two-way data-binding to template โข Create a controller โข Add a value to the model โข Inject the controller into the app โข Update the model with an input field
- 66. Intro to API BaaS
- 67. API BaaS 67 Apache Usergrid 4+ years in OSS 500+ stars 200+ forks 35 contributors
- 68. Why use a BaaS? 68 โข Data Store โข Push Notifications โข File/Asset Storage โข Social Graph โข User Management โข Geolocation โข Error/Crash Monitoring
- 70. Apigee Edge 70
- 71. API BaaS โข Locate your org name in the upper lefthand corner of the API BaaS portal โข For the workshop, youโll be using the sandbox app โข Your database is located atโจ http://api.usergrid.com/YOURORGNAME/sandbox 71
- 72. Database Model Restaurants name: "AZ Bread Companyโ address: "315 W Elliot Rdโ city: โTempe" state: โAZ" phone: "+1-480-831-1300" category: โจ "Breakfast & Brunch" location: { โlatitude": 33.348763010085996, "longitude": -111.94435105010001 } restID: 20 72 Reviews title: "All around good food" body: "Can't complain about a very consistent joint. Get there early on a Friday though, because it tends to fill up quickly." rating: 4 restID: 5, reviewer: "johnnyapples"
- 73. Populate the database โข In your browser, go to the following URL, changing YOURORGNAME to your own org name and a location (city or address) of your choiceโจ http://grewis-test.apigee.net/api-restaurants/ setup/YOURORGNAME?location=Phoenix,AZ 73
- 74. Exercise - a127 โข Define an API to return a list of restaurants 74 j.mp/api-to-app-swagger-01
- 75. Exercise - a127 โข Create the restaurants controller โrestaurants.jsโ in the controllers folder 75 j.mp/api-to-app-restaurants-01
- 76. Putting It All Together
- 77. Starter Project โข Download the starter project 77 j.mp/ionic-starter-files
- 78. Exercise โข Add the following to app.jsโจ j.mp/ionic-app-js-01 โข Add the following to controllers.jsโจ j.mp/ionic-controllers-js-01 78
- 79. Exercise โข Create an API definition to return all of the reviews for a specific restaurant 79 j.mp/api-to-app-swagger-02
- 80. Exercise โข Create the corresponding controller for the reviews API (use restID as the unique key) 80 j.mp/api-to-app-restaurants-02
- 81. Exercise โข Add the following to app.jsโจ j.mp/ionic-app-js-02 โข Add the following to controllers.jsโจ j.mp/ionic-controllers-js-02 โข Add the following to services.jsโจ j.mp/ionic-services-js-01 81
- 82. Exercise โข Add the following to directives.jsโจ j.mp/ionic-directives-js-01โจ โข Test the app. Tap/click on a restaurant to move to the details page 82
- 83. Exercise โข Create an API definition to allow a user to POST a new review 83 j.mp/api-to-app-swagger-03
- 84. Exercise โข Create the corresponding controller for the reviews API (use restID as the unique key) 84 j.mp/app-to-api-reviews
- 85. Exercise โข Add the following to app.jsโจ j.mp/ionic-app-js-03 โข Add the following to controllers.jsโจ j.mp/ionic-controllers-js-03 โข Test the app and add a review 85
- 86. Exercise โข Add the following to controllers.jsโจ j.mp/ionic-controllers-js-04 โข Test the app 86
- 87. Exercise โข If all else has failedโฆโจ j.mp/api-to-app-final-filesโจ โข You'll need to change YOURORGNAME in the restaurants.js and reviews.js files in a127-API/api/ controllers/ 87
- 89. Using Apigee Edge An a127 account is needed to deploy to the Apigee Edge platform. An a127 app can also be deployed to AWS, Heroku or anywhere that a Node.js app can run. 89
- 90. Apigee Edge โข Log into your Apigee account at โจ http://accounts.apigee.com โข Click on API Management to access your account 90
- 91. Creating an a127 account โข Create an a127 accountโจ a127 account create {NAMEYOURACCOUNT} โข Select apigee as the provider and follow the prompts (see the next slide) 91
- 92. Create an a127 account a127 account create Apigee [?] Provider? apigee [?] Do you already have an account on apigee? Yes [?] Base URI? [Just hit Return] [?] Organization? YOURORGNAME [?] User Id? YOUREMAILADDRESS [?] Password? **************** [?] Environment? test [?] Virtual Hosts? [Just hit Return] [?] Create account service? Yes [?] Service Type? RemoteProxy [?] Service name? RemoteProxy [or whatever you want to name it] 92
- 93. Deploying โข To deploy to Apigee Edge, ensure that you are in the root of your a127 project directoryโจ a127 project deploy โข After the upload is complete copy the URI of your APIs 93
- 94. Deploying โข If the upload times out โ which can happen due to the server needing to run npm install โ you can chose to have it upload your node_modules using the -u modifierโจ a127 project deploy -u 94
- 95. Congratulations! โข Open the API Management console and choose API Proxies from the API menu โข Click on your API to view info about it such as the base URL 95
- 96. Got docs? โข a127 docs: โจ https://github.com/apigee-127/a127- documentation/wiki โข API BaaS docs:โจ http://apigee.com/docs/api-baas 96
- 97. Get more training Advanced class? Training for your company? Still free! [email protected] or [email protected]
- 98. Congratulations! We donโt accept tips but I do accept tweets! Greg Rewis [email protected] @garazi Alex Muramoto [email protected] @alexmuramoto
- 100. Sad, but trueโฆ 100
- 101. Using Volos โข Volos provides a way to leverage common features such as OAuth 2.0, Caching, and Quota management into your APIs โข OAuth 2.0 supports bearer tokens and all standard grant types โUses Redis or the Apigee platform for data storage โข Quota counts API calls and rejects them when the defined limit is exceeded during the specified time period โข Caching can be in memory, using Redis or the Apigee platform 101
- 102. Implementing a Cache โข In the swagger spec, add the following to the โจ x-volos-resources key to apply a 10 second cache โข Apply the cache to the /restaurants API by adding the following code 102
- 103. Implementing a Cache โข Using the Chrome Developer Tools (Cmd+Opt+I on Mac, F12 on Windows), call the /restaurants API then click on restaurants in the Network tab to see the Cache being set 103
- 104. Adding a Quota โข Add the following to x-volos-resources to set a limit of 2 calls per hour* โข Apply the quota to the POST operation of the restaurants API 104 * this is a completely silly example, but at least you can see it happen easily
- 105. Adding a Quota โข Refresh the /restaurants API a few times and watch as the limit is applied using the Chrome Developer Tools 105
- 106. A Word of Caution โข Our example is letting us hit the request more than twice because it is allowing the request as long as the cache is still valid โข The order of the policies determines their order of execution โ in other words, if you reverse the cache and quota order in the Swagger document, quota will be enforced first and you will only be able to make two requests each hour โข Go aheadโฆ give it a try! 106
- 107. Adding oAuth2 โข To use Apigee Edge for oAuth weโll first need to generate a client id and client secret โข Open the Apigee Edge Dashboardโจ https://accounts.apigee.com/accounts/dashboard/ โข Launch the API Management portal โข Go to Publish > Developer Apps 107
- 108. Adding oAuth2 โข Click on the Remote Proxy app or whatever you named your service. โข Use the Show buttons to reveal your Consumer Key and Consumer Secret 108
- 109. Adding oAuth2 โข Implementing oAuth in a127 requires several additions/ changes to your Swagger doc. โข Please visit the following page and follow the steps, starting with step 4. 109 j.mp/adding-Apigee-oAuth
- 110. Obtaining an Access Token โข Using Postman (or any REST client), POST to the โจ /accesstoken API โข Set the Header to โจ Content-Type: application/json โข Pass the credentials as a raw JSON 110
- 111. Access Token โข Copy the returned access_token value to pass with requests to the /restaurants API 111
- 112. Passing an Access Token โข The access token must be passed in the request header as the value of the Authorization header โข The token is passed together with the Bearer keyword 112
- 113. Token Expiry โข When a token expires (like it might have happened to you, if you were too slow), a new token must be issued โข Change the tokenLifetime in the Swagger document to something more reasonable! โข 1 hour = 3600000 โข 1 day = 86400000 โข 1 week = 604800000 โข Repeat the steps to request a token โ then change the token in the /restaurants request 113
- 114. Thank you