O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Development with NodeJS

218 visualizações

Publicada em

Develop web application with NodeJS, http and ExpressJS

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×