Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The MEAN Stack

Jeff Dickey
October 20, 2015

The MEAN Stack

Jeff Dickey

October 20, 2015
Tweet

Other Decks in Technology

Transcript

  1. THE MEAN STACK EXPRESS.JS let express = require('express'); let app

    = express(); app.get('/statuscheck', function (req, res) { res.json({status: 'success'}); }); app.listen(process.env.PORT || 3000);
  2. THE MEAN STACK DATA MODEL USERS USERNAME (STRING) PASSWORD (STRING)

    AVATAR_URL (STRING) FOLLOWINGS ([]ID) POSTS USER (ID) BODY (STRING)
  3. THE MEAN STACK POST MONGOOSE DB SCHEMA let Post =

    db.model('Post', { body: {type: String, required: true}, user: {type: db.Schema.ObjectId, required: true, ref: 'User'}, }); module.exports = Post;
  4. THE MEAN STACK GET /API/POSTS RESPONSE JSON [ { "_id":"56250ece393a86f3e78e516b",

    "body":"jeff's second post", "user": { "_id":"56250b0239c39309e6d8c7db", "avatarUrl":"//www.gravatar.com/avatar/…", "fullName":"Jeff Dickey", "email":"[email protected]", "username":"dickeyxxx", } }, {…}, {…} ]
  5. THE MEAN STACK EXPRESS GET API HANDLER app.get('/api/posts', function (req,

    res) { Post.find() .where('user').in(req.user.followings) .sort('-_id') .populate('user') .exec(function (err, posts) { res.json(posts); }); });
  6. THE MEAN STACK ANGULAR CODE angular.module('app') .service('PostSvc', function ($http) {

    this.fetch = function () { return $http.get('/api/posts'); }; }) .controller('FeedCtrl', function ($scope, PostSvc) { PostSvc.fetch() .then(function (posts) { $scope.posts = posts; }); });
  7. THE MEAN STACK ANGULAR TEMPLATE <div ng-repeat="post in posts"> <img

    ng-src="{{post.user.avatarUrl}}"/> <a ng-href="#/users/{{post.user.username}}"> {{post.user.fullName}} </a> {{post.body}} </div>
  8. THE MEAN STACK JWT let payload = { _id: user._id,

    username: user.username, }; let token = jwt.sign(payload, 'mysecretkey'); token === 'eyJ0eXAiOiJKV1QiLCJhbG…'; jwt.verify(token, 'mysecretkey')._id === user._id; let jwt = require('jsonwebtoken');
  9. THE MEAN STACK JWT WITH EXPRESS app.post('/api/login', function (req, res)

    { // get user, validate password with bcrypt res.send(jwt.sign(user, 'mysecretkey')); }); app.use(function (req, res, next) { let token = req.headers['Auth-Token']; req.user = jwt.verify(token, 'mysecretkey'); next(); });
  10. THE MEAN STACK EVENTS CAPPED COLLECTION r.post('/api/posts', function (req, res)

    { // ... post.save(function (err, post) { let event = new Event({ type: 'Post', of: post._id, by: post.user }); event.save(); }); });
  11. THE MEAN STACK TAILING CAPPED COLLECTION TO WEB SOCKET let

    io = require('socket.io')(server); io.on('connection', function (socket) { }); let eventStream = Event.where(…) .tailable() .stream(); eventStream.on('data', function (event) { socket.emit(event.type, event); });
  12. THE MEAN STACK RESPONDING TO WEBSOCKET EVENT IN ANGULAR .controller('FeedCtrl',

    function (…) { WebSocketSvc.on('Post', function (post) { }); PostSvc.find(post.of) .then(function (post) { $scope.posts.push(post); });
  13. THE MEAN STACK CHAT FEATURE let event = new Event({

    type: 'ChatMessage', to: user, content: {body: 'hey buddy!'} });
  14. THE MEAN STACK GEO NOTIFICATION // get gps coords in

    browser let pos = navigator .geolocation.getCurrentPosition(); // in server let eventStream = Event .where('pos').near({ center: pos, maxDistance: 5, }).tailable().stream(); eventStream.on('data', function (event) { socket.emit(event.type, event); });
  15. THE MEAN STACK FUNCTIONALITY ▸ Simple, scalable API ▸ Maintainable

    front-end ▸ Push updates ▸ Geo notifications