Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Share point 2013 apps and i mean it

4,218 views

Published on

Combine SharePoint Online and SharePoint 2013 Apps with the MEAN stack, MongoDB, Express, Angular JS and NodeJS, a JavaScript based full stack solution.

Published in: Education

Share point 2013 apps and i mean it

  1. 1. SharePoint 2013 Apps and I “MEAN” It http://pxml.ly/EO-SP-MEAN Eric Overfield SharePoint Advocate and Enthusiast PixelMill
  2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd ericoverfield.com @EricOverfield Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
  3. 3. What You Will Learn  A MEAN stack overview  Why we might use MEAN with SharePoint  Configuring the MEAN stack  Join SharePoint to make it MEAN @EricOverfield - pixelmill.com
  4. 4. What is the MEAN stack?  MongoDB @EricOverfield - pixelmill.com  Express  AngularJS  NodeJS  Plus many smaller components  End to end JavaScript / JSON based application framework
  5. 5. MongoDB  Open source database, lightweight, self contained  MongoDB will store our data and is enterprise ready  JSON based, using “collections” and “documents” @EricOverfield - pixelmill.com  MSSQL / relational DB admins?  MongoDB will rock your world!  Not strongly typed, using JSON for CRUD
  6. 6. Express @EricOverfield - pixelmill.com  NodeJS package  Minimalist web framework  Fast, robust, extendable  Essentially NodeJS middleware calls  Routes, Views, Controller
  7. 7. AngularJS  Client side JavaScript library, built by Google @EricOverfield - pixelmill.com  Handles UI and data binding  Often used for creating SPAs  Alternatives such as Backbone.js, Ember, Knockout*
  8. 8. NodeJS  Our base framework to build our business line app  Note: NodeJS is not a full featured web server OOTB @EricOverfield - pixelmill.com  Network Application Framework  Based on Chrome JavaScript engine  Event-driven, non-blocking I/O model  Lightweight and efficient, great at I/O
  9. 9. Why Use MEAN? @EricOverfield - pixelmill.com
  10. 10. The Open SharePoint App Model  IIS/Azure/MSSQL/.Net  Apache/mySQL/PHP/Python/Ruby  NodeJS/MongoDB/JavaScript/MEAN @EricOverfield - pixelmill.com
  11. 11. Reasons to use MEAN  Open source, inexpensive framework  Very scalable, extremely fast processing  NodeJS is very good at dispatching requests and heavy I/O  Large community with large support base  Not based on .NET, C#, MSSQL, etc  May already be using for other business applications @EricOverfield - pixelmill.com
  12. 12. Setting Up MEAN Stack @EricOverfield - pixelmill.com
  13. 13. MongoDB and NodeJS Pick your server architecture  Windows, Linux, iOS, BSD - Azure, cloud, on-prem @EricOverfield - pixelmill.com MongoDB  Download MongoDB from http://mongodb.org  *Review their documentation, insightful NodeJS  Download NodeJS from http://nodejs.org  *Have installer add node and npm to path
  14. 14. Tools: Git, Grunt, Bower, Notepad++ Extra tools to help make life easier  Git – source control, quickly download existing projects  http://git-scm.com/downloads  Bower – NodeJS package manager (Similar to PHP’s Composer)  npm install –g bower  Grunt – NodeJS task runner, aids running packages  npm install –g grunt-cli  Notepad++ - Powerful source editor, NodeJS plugin exists  http://notepad-plus-plus.org @EricOverfield - pixelmill.com
  15. 15. Express and AngularJS @EricOverfield - pixelmill.com  Can install each component on its own  http://expressjs.com/ - “npm install express -g” or “npm install express-generator -g”  https://angularjs.org/  Create own Express/NodeJS app, download and include AngulaJS  Or, use a NodeJS package!  Mean.io (node package), MeanJS.org (git project)  MeanJS.org  git clone https://github.com/meanjs/mean.git meanjs  Modify app settings in package.json  npm install
  16. 16. Steps to Connect to SharePoint @EricOverfield - pixelmill.com  Install components and create NodeJS app with Express  Need SSL certificates as well (review references for howto’s)  Create SharePoint App in Visual Studio  Register App in SPO to get Client Id and Client Secret  /_layouts/15/AppRegNew.aspx  Update NodeJS App to complete oAuth authorization, returns accessToken  Start with Passport for SharePoint  https://github.com/QuePort/passport-sharepoint  Create Model, View and Controller in NodeJS using Express methods and AngularJS  Bust out that JavaScript and JSON!
  17. 17. SharePoint Browser 1 ACS nodeJS 1. Browser requests app from SharePoint / SPO via page with app, or site contents Special thanks to Todd Baginski for original flowchart http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC030
  18. 18. SharePoint Browser 1 ACS nodeJS 2 2. SharePoint contacts ACS, requesting a signed context token for user / browser
  19. 19. SharePoint Browser 1 ACS nodeJS 2 3 3. ACS returns signed context token to SharePoint
  20. 20. SharePoint Browser 1 ACS nodeJS 2 3 4 4. SharePoint returns the signed context token with auth code to browser
  21. 21. SharePoint Browser 1 ACS nodeJS 2 3 4 5 5. Browser is redirected to nodeJS server endpoint and posts context token for authentication
  22. 22. SharePoint Browser 1 ACS nodeJS 2 3 4 5 6 6. nodeJS will take context token from POST request and send to ACS for validation
  23. 23. SharePoint Browser 1 ACS nodeJS 2 3 4 5 6 7 7. After validation at ACS, ACS will return an accessToken to nodeJS App for access to SharePoint
  24. 24. SharePoint Browser 1 ACS nodeJS 2 3 4 5 6 7 8 8. nodeJS app may now use client accessToken to make requests to SharePoint as user
  25. 25. SharePoint Browser 1 ACS nodeJS 2 3 4 5 6 7 9 8 9. SharePoint returns requested data to nodeJS app based on valid accessToken and authorization
  26. 26. SharePoint Browser 1 ACS nodeJS 2 3 4 5 6 7 9 8 10 10. nodeJS will return final data to browser, in our case JSON data in the form of an API
  27. 27. SharePoint 2 3 4 Browser 1 ACS 9 8 nodeJS 5 nodeJS / express routes 6 7 10 /sharepoint/auth /beerapp /beers /beerskus /beerskudocs
  28. 28. nodeJS nodeJS / express routes 2 3 4 express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs nodeJS Controllers SharePoint Browser 1 ACS 5 6 7 9 8 10 ACS OAuth Core / AngularJS Model / mongoDB REST / SharePoint
  29. 29. SharePoint 2 3 4 Browser 1 ACS 5 6 7 9 8 10 nodeJS express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs ACS OAuth Core / AngularJS Model / mongoDB REST / SharePoint nodeJS / express routes nodeJS Controllers
  30. 30. nodeJS express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs ACS OAuth Core / AngularJS Model / mongoDB angularJS / Client Side Routes / Views /beerapp#!/beers /beerapp#!/beers/create /beerapp#!/beers/:beerSku /beerapp#!/beers/:beerSku/edit REST / SharePoint nodeJS / express routes nodeJS Controllers
  31. 31. Creating a MEAN Stack App with SharePoint @EricOverfield - pixelmill.com Demo
  32. 32. A Quick Review @EricOverfield - pixelmill.com  A MEAN stack overview  Why we might use MEAN with SharePoint  Configuring the MEAN stack  Join SharePoint to make it MEAN
  33. 33. Special Thanks to Those Who Got Me Here Passport for SharePoint – QuePort and Thomas Herbst https://github.com/QuePort/passport-sharepoint SharePoint 2013 and NodeJS - Bjørn Einar https://github.com/bjartwolf/SP2013Node Todd Baginski SharePoint 2013: node.JS Remote Event Receiver http://msdn.microsoft.com/en-us/library/office/dn775099%28v=office.15%29.aspx Building Cloud-hosted apps for SharePoint with PHP and node.JS http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC030 @EricOverfield - pixelmill.com Chris Beckett – Inspiration and guidance
  34. 34. Set Up Secure Certificates for NodeJS/Express  Based on: http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-certificate-for-node-dot-js/ @EricOverfield - pixelmill.com  Install openssl (cygwin with openssl packages)  Create a Certificate Authority set RANDFILE=.rnd openssl genrsa -des3 -out ca.key 1024 openssl req -new -key ca.key -out ca.csr openssl x509 -req -days 365 -in ca.csr -out ca.crt -signkey ca.key  Create a Server Certificate openssl genrsa -des3 -out server.key 1024 openssl req -new -key server.key -out server.csr  Then, remove the passphrase from the server certificate: cp server.key server.key.org openssl rsa -in server.key.org -out server.key  And then, generate your self-signed certificate openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
  35. 35. Resources Install MongoDB http://docs.mongodb.org/manual/installation/ MEAN Boilerplates http://meanjs.org – http://mean.io Run NodeJS in IIS https://github.com/tjanczuk/iisnode Setting up MEAN stack http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/ http://thecodebarbarian.wordpress.com/2013/07/29/introduction-to-the-mean-stack-part-two-building-and-testing-a-to-do-list/ Passport for SharePoint https://github.com/QuePort/passport-sharepoint SharePoint 2013, NodeJS and Passport project https://github.com/bjartwolf/SP2013Nodev Authentication Code OAuth flow for apps in SharePoint 2013 http://msdn.microsoft.com/en-us/library/office/jj687470%28v=office.15%29.aspx @EricOverfield - pixelmill.com Node Windows - Turn node into service https://github.com/coreybutler/node-windows
  36. 36. SharePoint 2013 Apps and I “MEAN” It http://pxml.ly/EO-SP-MEAN Thank You “Pro SharePoint 2013 Branding and Responsive Web Development” Eric Overfield @EricOverfield ericoverfield.com (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd

×