Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web Development with NodeJS

232 visualizaciones

Publicado el

Develop web application with NodeJS, http and ExpressJS

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Web Development with NodeJS

  1. 1. WEBDEVELOPMENT NODEJS
  2. 2. INTRO BASICWEBAPPLICATIONARCHITECTURE HTTP Request HTTP Response Client Server Database
  3. 3. INTRO HTTPREQUEST GET / HTTP/1.1 Host: example.com:3000 Accept: text/html,application/ xhtml+xml,application/xml
  4. 4. INTRO HTTPRESPONSE HTTP/1.1 200 OK Content-length: 47281 Content-Type:text/html,application/xhtml+xml,application/xml <!DOCTYPE html><html><head><title>Express </title> ...
  5. 5. INTRO
  6. 6. INTRO HTTPSTATUSCODERANGES 100-199 -> Informational 200-299 -> Successful 300-399 -> Redirection (something moved) 400-499 -> Client error 500-599 -> Server error
  7. 7. INTRO HTTPVERBS GET Retrieves a resource POST Creates a new resource PUT Updates an existing resource DELETE Removes a resource READ CREATE UPDATE DELETE CRU D
  8. 8. WebApplicationIn Nodejs
  9. 9. HTTP Modulehttps://nodejs.org/dist/latest-v6.x/docs/api/http.html
  10. 10. HTTP MODULE CREATESERVER const http = require('http') http.createServer((request, response) => { response.writeHead(200, { 'Content-Type': 'text/plain' }) response.end('Hello, Bandungn') }).listen(5432, '127.0.0.1') console.log('Server running at http: //127.0.0.1:5432')
  11. 11. Fast,unopinionated, minimalist web framework for Node.js Fast,unopinionated, minimalist
  12. 12. $ npm install --save express EXPRESS GETTINGSTARTEDWITHEXPRESS
  13. 13. EXPRESS GETTINGSTARTEDWITHEXPRESS const express = require('express') const app = express() app.get('/', (request, response) => { response.send('Hello, Bandung!') }) app.listen(5432, () => { console.log('Magic happen at http: //localhost:5432') })
  14. 14. EXPRESS WHATEXPRESSGIVESUS Middleware Routing Extends Request ,Response View Layer
  15. 15. MIDDLEWARE
  16. 16. EXPRESS INEXPRESS,EVERYTHINGISMIDDLEWARE HTTP Request HTTP Response Client Server (request, response, next) => {} (request, response, next) => {}
  17. 17. EXPRESS MIDDLEWAREEXAMPLE app.use((request, response, next) => { console.log('Satu') next() }) app.use((request, response, next) => { console.log('Dua') next() }) app.get('/', (request, response) => { response.send(‘Halo, Bandung!') })
  18. 18. EXPRESS 3RDPARTYMIDDLEWARE Session Logger JSON Web Token express-sass-middleware
  19. 19. ROUTING
  20. 20. EXPRESS ROUTINGEXAMPLE localhost:5432/ localhost:5432/echo GET POST GET app.get(‘/‘, handleGetRoot) app.get(‘/echo/name’, handleGetEcho) app.post(‘/echo’, handleGetEcho) localhost:5432/echo/fox
  21. 21. EXPRESS ROUTINGEXAMPLE const handleGetRoot = (request, response) => { response.send('This is / route') } const handleGetEcho = (request, response) => { response.send(`This is /echo route. Hello ${request.params.name}`) } app.get('/', handleGetRoot) app.get('/echo/:name', handleGetEcho)
  22. 22. EXTENDINGREQUESTAND RESPONSE
  23. 23. EXPRESS EXTENDSEXAMPLES app.get('/hacktiv8', (req, res) => { res.redirect('https: //hacktiv8.com/') }) app.get('/sending', (req, res) => { res.sendFile('/Users/riza/Music/cool_song.mp3') }) http://expressjs.com/en/api.html
  24. 24. HANDLINGVIEWLAYER
  25. 25. $ npm install --save hbs EXPRESS INSTALLINGVIEWENGINE
  26. 26. EXPRESS VIEWENGINESETUP const path = require('path') const express = require('express') const app = express() // view engine setup app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'hbs') app.get('/', (req, res) => { res.render('index', {data: 'Hello, Bandung!'}) }) app.listen(5432, () => { console.log('Magic happen at http: //localhost:5432') })
  27. 27. EXPRESS VIEWENGINESETUP <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Welcome to Express </title> </head> <body> <h1>{{ data }} </h1> </body> </html>
  28. 28. Let’sBuildSomethign WithExpress Image credits: egghead.io

×