LearningSpaces Web SiteLearningSpaces Web Site A Discussion on Architecture & FunctionalityA Discussion on Architecture & Functionality Created By: Pragati Kunwer Created Date: 12/15/2016
Pre-requisites for DevelopmentPre-requisites for Development  Exposure to Angular and JavaScript JWT (JSON Web Tokens for Authentication https://jwt.io/  Node.js and npm (Node Package Manager) installed on your machine https://github.com/nodejs/node/wiki  General understanding of ES6 This includes new syntax and features for JavaScript, Ex: import/export, class, let, const, arrow functions, etc. https://ponyfoo.com/articles/es6  Knowledge of component-based development and web components Components allow for a clear separation of concern and allow you to build highly reusable code  Understanding of Production Deployment in Cloud Ex: Cloud Foundry or Docker (Containers)
Overview of FunctionalityOverview of Functionality  It’s a Social Learning Site known as LearningSpaces  Comprises of all features required for social interaction and learning  Follow Users  Like Articles  Add Comments  Global Feed  Personal Feed
Dev StacksDev Stacks  Front-end o Angular2, Angular JWT (for authentication), Bootstrap  Back-end o Node.js, express, REST services  Database o Mongo DB (NoSql) and mongoose (ORM Support)  Git o Source Code management  Bluemix and mlab for Production environment  Cloud deployment using Cloud Foundry
AuthenticationAuthentication  Crypto (https://www.npmjs.com/package/cryptojs ) o Provides standard and secure cryptographic algorithms for NodeJS o Supports MD5, SHA-1, SHA-256, SHA-512, RC4, Rabbit, AES, DES, PBKDF2, HMAC, OFB, CFB, CTR, CBC, Base64  To Store Password o Generate a long random salt using randomBytes(). o Prepend the salt to the password and hash it with a standard password hashing function like Argon2, bcrypt, scrypt, or PBKDF2. o Save both the salt and the hash in the user's database record  What is JSON Web Token? https://jwt.io/introduction/ JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA
Build & PackagingBuild & Packaging  What is Webpack? https://angular.io/docs/ts/latest/guide/webpack.html Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file
Cloud DeploymentCloud Deployment  Options o Amazon EC2 o Microsoft Azure o Google Cloud o IBM Bluemix  WebApp URL: https://learningspaces.mybluemix.net/  API URL: https://learningspacenode.mybluemix.net/api
Next Steps (Release 2)Next Steps (Release 2)  Mobile Friendly UI (Already Achieved)  Cart Handler  Payment handler  Online Video Support
Architecture & Functionality for Learning Spaces Website
Architecture & Functionality for Learning Spaces Website

Architecture & Functionality for Learning Spaces Website

  • 1.
    LearningSpaces Web SiteLearningSpacesWeb Site A Discussion on Architecture & FunctionalityA Discussion on Architecture & Functionality Created By: Pragati Kunwer Created Date: 12/15/2016
  • 2.
    Pre-requisites for DevelopmentPre-requisitesfor Development  Exposure to Angular and JavaScript JWT (JSON Web Tokens for Authentication https://jwt.io/  Node.js and npm (Node Package Manager) installed on your machine https://github.com/nodejs/node/wiki  General understanding of ES6 This includes new syntax and features for JavaScript, Ex: import/export, class, let, const, arrow functions, etc. https://ponyfoo.com/articles/es6  Knowledge of component-based development and web components Components allow for a clear separation of concern and allow you to build highly reusable code  Understanding of Production Deployment in Cloud Ex: Cloud Foundry or Docker (Containers)
  • 3.
    Overview of FunctionalityOverviewof Functionality  It’s a Social Learning Site known as LearningSpaces  Comprises of all features required for social interaction and learning  Follow Users  Like Articles  Add Comments  Global Feed  Personal Feed
  • 4.
    Dev StacksDev Stacks Front-end o Angular2, Angular JWT (for authentication), Bootstrap  Back-end o Node.js, express, REST services  Database o Mongo DB (NoSql) and mongoose (ORM Support)  Git o Source Code management  Bluemix and mlab for Production environment  Cloud deployment using Cloud Foundry
  • 5.
    AuthenticationAuthentication  Crypto (https://www.npmjs.com/package/cryptojs) o Provides standard and secure cryptographic algorithms for NodeJS o Supports MD5, SHA-1, SHA-256, SHA-512, RC4, Rabbit, AES, DES, PBKDF2, HMAC, OFB, CFB, CTR, CBC, Base64  To Store Password o Generate a long random salt using randomBytes(). o Prepend the salt to the password and hash it with a standard password hashing function like Argon2, bcrypt, scrypt, or PBKDF2. o Save both the salt and the hash in the user's database record  What is JSON Web Token? https://jwt.io/introduction/ JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA
  • 6.
    Build & PackagingBuild& Packaging  What is Webpack? https://angular.io/docs/ts/latest/guide/webpack.html Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file
  • 7.
    Cloud DeploymentCloud Deployment Options o Amazon EC2 o Microsoft Azure o Google Cloud o IBM Bluemix  WebApp URL: https://learningspaces.mybluemix.net/  API URL: https://learningspacenode.mybluemix.net/api
  • 8.
    Next Steps (Release2)Next Steps (Release 2)  Mobile Friendly UI (Already Achieved)  Cart Handler  Payment handler  Online Video Support