$30 off During Our Annual Pro Sale. View Details »

Express Workshop at DevCamp UP Diliman

Express Workshop at DevCamp UP Diliman

Johnny Estilles

February 11, 2017
Tweet

More Decks by Johnny Estilles

Other Decks in Education

Transcript

  1. Fast, unopinionated, minimalist web framework for Node.js

  2. About Me Johnny M. Estilles Engineering Manager Freelancer.com johnny@freelancer.com or

    johnny@ngmanila.org @JohnnyEstilles facebook.com/johnny.estilles
  3. About Freelancer We’re hiring! http://www.freelancer.com

  4. About the Angular Manila Developers Group contact@ngmanila.org @ngManila facebook.com/ngmanila.org meetup.com/ngmanila

  5. Objectives • Describe Express, its uses and history • Learn

    how to create an REST API using Express • Learn how to use MongoJS to connect Express to a Mongo Database • See how an Angular SPA can connect to an Express RESTful API
  6. Why Express?

  7. Express: History • Has been around since 2009 • Rights

    to manage acquired by StrongLoop on June 2014 • StrongLoop was acquired by IBM on September 2015 • Adopted by the Node.js Foundation Incubator on January 2016 • Current version of Express is 4.14.1 • Express 5.0 is still in the alpha release stage
  8. Express: Web Applications Express is a minimal and flexible Node.js

    web application framework that provides a robust set of features for web and mobile applications.
  9. Express: APIs With a myriad of HTTP utility methods and

    middleware at your disposal, creating a robust API is quick and easy.
  10. Express: Performance Express provides a thin layer of fundamental web

    application features, without obscuring Node.js features that you know and love.
  11. What does Express offer you? • Syntactic sugar on top

    of Node.js HTTP server • Declarative routing • Basic middleware pattern
  12. Express: Frameworks

  13. The Workshop

  14. Prerequisites • Node.js (https://nodejs.org/en/) • mLab Account (https://mlab.com/) • git

    (https://git-scm.com/) • Postman Chrome App (https://www.getpostman.com/) • Know JavaScript!!!
  15. Step 1 - Initial Setup $ git clone https://github.com/JohnnyEstilles /up-express-tasklist.git

    $ git branch -a $ git checkout origin/step-1
  16. Step 2 - Basic Express Server • Create server.js •

    Using basic middleware • Create basic routers • Use/Mount basic routers • Starting the Server
  17. Using Middleware var express = require('express'); var bodyParser = require('body-parser');

    // Set Static Folder app.use(express.static(path.join(__dirname, 'client'))); // Body Parser MW app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false}));
  18. Creating Basic Router var express = require('express'); var router =

    express.Router(); router.get('/', function(req, res, next){ res.send(‘Hello World!’); }); module.exports = router;
  19. Using/Mounting Routers var index = require('./routes/index'); app.use('/', index);

  20. Starting the Server app.listen(port, function(){ console.log('Server started on port '+port);

    });
  21. During development use Nodemon $ npm install -g nodemon $

    nodemon
  22. Step 3 - Basic API • Render HTML template •

    Create API endpoints • Basic mongo-js usage
  23. Render an HTML file router.get('/', function(req, res, next){ res.render('index.html'); });

  24. Creating API endpoints // Get All Tasks router.get('/tasks', function(req, res,

    next){ db.tasks.find(function(err, tasks){ if(err){ res.send(err); } res.json(tasks); }); });
  25. Basic MongoJS // Open a DB var db = mongojs('username:password@example.com/mydb',

    ['mycollection']); // find everything db.mycollection.find(function (err, docs) { // docs is an array of all the documents in mycollection });
  26. Basic MongoJS // find a document using a native ObjectId

    db.mycollection.findOne({ _id: mongojs.ObjectId('523209c4561c640000000001') }, function(err, doc) { // doc._id.toString() === '523209c4561c640000000001' }); // find all named 'mathias' and increment their level db.mycollection.update({name: 'mathias'}, {$inc: {level: 1}}, function () { // the update is complete });
  27. Testing your API using Postman

  28. Step 4 - Angular 2 App • Quick Angular 2

    overview • Stores data in memory • Data does not persist across reloads
  29. Step 5 - Link Anguilar 2 app with Express API

    • Create an Angular 2 service that calls the API • Import service provider into the App component • Use the service within the Task component
  30. Thank you!