Inicio del curso

1

驴Qu茅 vamos a construir en el curso avanzado de Node.js?

Introducci贸n a Node.js

2

Conoce qu茅 es node.js

3

Caracter铆sticas de la plataforma Node.js

4

驴Qu茅 tipo de aplicaciones podemos desarrollar con Node.js?

Preparando el entorno de Desarrollo

5

C贸mo instalar Node.js en macOS

6

C贸mo instalar PostgreSQL y Redis en macOS

7

C贸mo instalar Visual Studio Code en macOS

8

C贸mo instalar Ansible en macOS

Arquitectura del Proyecto (Platziverse)

9

Arquitectura y Componentes del proyecto

Introducci贸n a protocolos y patrones de aplicaciones en tiempo real

10

C贸mo funciona el modelo Pub/Sub en MQTT y Web Sockets

Creando M贸dulo de Base de Datos (platziverse-db)

11

Estructura b谩sica de un m贸dulo de Node.js

12

Definici贸n de entidades de base de datos

13

Implementaci贸n de modelos con sequelize

14

Implementaci贸n de un m贸dulo b谩sico de base de datos

15

Implementaci贸n de script de inicializaci贸n de base de datos

16

Creando una advertencia sobre el borrado de base de datos

17

Introducci贸n a pruebas unitarias con Ava.js

18

Introducci贸n a code coverage con nyc

19

C贸mo hacer Mocks y Stubs con Sinon

20

Creaci贸n de fixtures y definici贸n b谩sica del servicio de Agent

21

Implementaci贸n de findbyId y pruebas en el servicio Agent

22

Implementaci贸n de createOrUpdate

23

Revisi贸n del servicio Agent

24

Implementaci贸n del servicio Metric

25

Realizando un ejemplo con el m贸dulo de base de datos

26

Reto: C贸mo modificar el script de inicializaci贸n de la base de datos

Construyendo un servidor en tiempo real para Internet de las Cosas con Mosca/MQT

27

Definici贸n de un Broker de Mensajer铆a

28

Definici贸n de los tipos de mensajes

29

Implementaci贸n del servidor MQTT

30

C贸mo recibir mensajes

31

C贸mo integrar el servidor MQTT con la base de datos

32

C贸mo almacenar la informaci贸n del agente y reportar el agente conectado

33

C贸mo almacenar la informaci贸n de las m茅tricas

34

Probando el servidor MQTT (Ejemplo con mqtt client)

Construyendo el agente de monitoreo (platziverse-agent)

35

C贸mo implementar un custom EventEmitter usando ES6 classes

36

Definiendo un timer de ejecuci贸n continua (setInterval)

37

Implementaci贸n del cliente MQTT

38

Implementaci贸n de m茅tricas personalizadas

39

Probar agent (ejemplo)

Construyendo una API REST con Express (platziverse-api)

40

Implementaci贸n de un servidor b谩sico con express

41

Definici贸n de rutas del API

42

Implementaci贸n de manejo de errores con express

43

Pruebas b谩sicas de Integraci贸n con Ava y supertest

44

Integraci贸n con el m贸dulo de base de datos

45

Implementaci贸n de ruta del API

46

Pruebas de Integraci贸n con Ava, Supertest y Sinon

Asegurando nuestra API REST con JWT

47

Definici贸n de JWT

48

Asegurando nuestra API con express-jwt

49

Modificando las pruebas de integracion

50

Implementando permisos con express-jwt-permissions

Creando un Dashboard Web en tiempo real con WebSockets (platziverse-web)

51

Implementaci贸n de un servidor web est谩tico con express

52

Integrando socket.io con express

53

Integrando agente de monitoreo con socket.io

54

Implementaci贸n de rutas proxy con la API

55

Presentaci贸n de nuestro cliente frontend en Vue.js

56

Integraci贸n del cliente frontend con API (Metric)

57

Integraci贸n del cliente frontend con socket.io (Metric)

58

Integraci贸n del cliente frontend con API (Agent)

59

Integraci贸n del cliente frontend con socket.io (Agent)

Creando un Dashboard para la terminal en tiempo real con Blessed (platziverse-cl)

60

Implementaci贸n de un CLI B谩sico con Node

61

Introducci贸n a Blessed / Blessed Contrib

62

Implementaci贸n del layout b谩sico con Blessed Contrib

63

Integraci贸n con el agente de monitoreo 1

64

Integraci贸n con el agente de monitoreo 2

65

Integraci贸n con el agente de monitoreo 3

Depurando Aplicaciones Node.js

66

Utilizando longjohn para mejores stacktraces

67

Depurando en Desarrollo con node --inspect

68

Depurando en Desarrollo con Visual Studio Code

Preparando nuestra aplicaci贸n para producci贸n

69

Preparando Proyecto para Producci贸n 1

70

Preparando Proyecto para Producci贸n 2

71

Creaci贸n de scripts para despliegue con Ansible

72

Probando el database rol con Vagrant

73

Creando scripts del rol de platziverse db y mqtt (script de automatizaci贸n .yml)

74

Terminando los scripts faltantes

75

Creaci贸n de servidores en DigitalOcean

Desplegando nuestra aplicaci贸n a producci贸n

76

Ejecutando los Scripts de Despliegue

77

Utilizando Aplicaci贸n en Producci贸n y cierre del curso

Bonus: Utilizando platziverse-agent en BeagleBone Black y Raspberry PI

78

Implementaci贸n platziverse-agent con Johnny-Five

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Presentaci贸n de nuestro cliente frontend en Vue.js

55/78
Recursos

Aportes 14

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Si al correr el ejemplo, en la console obtienes un error con el m茅todo Line.Extend, entonces intenta esta nueva sintaxis del m贸dule vue-chartjs

'use strict'

const { Line, mixins } = require('vue-chartjs')
const { reactiveProp } = mixins

module.exports = {
  extends: Line,
  props: ['options'],
  mixins: [ reactiveProp ],
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(this.chartData, this.options)
  }
}

Espero que les sea 煤til.

Saludos

Por si les dio problemas al integrar el cliente aqui les dejo mi repo con los cambios de versiones y c贸digo para que funcione. Revicen el package.json y client/line-chart.js, esos me toco cambiar

Hola!! Si les esta saliendo este error lo solucione colocando en el package.json la misma version, es decir as铆:
鈥渧ue-template-compiler鈥: 鈥2.4.2鈥,
鈥渧ue鈥: 鈥2.4.2鈥.

ERROR
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using [email protected]>=10.0, simply update vue-template-compiler.
If you are using [email protected]<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

dentro de client/ falta app.vue, este es el c贸digo

<template>
    <div>
        <agent
                v-for="agent in agents"
                :uuid="agent.uuid"
                :key="agent.uuid">
        </agent>
        <p v-if="error">{{error}}</p>
    </div>
</template>

<style>
    body {
        font-family: Arial;
        background: #f8f8f8;
        margin: 0;
    }
</style>

<script>
  module.exports = {
    data () {
      return {
        agents: [],
        error: null
      }
    },
    mounted () {
      this.initialize()
    },
    methods: {
      initialize () {
      }
    }
  }
</script>

Hola al parecer me sale un erro y no entiendo por que
Repo: https://github.com/FranciscoGustavo/netofings

Tengo una duda, como sabe npm que debe correr el script de prestar-dev antes de start-dev? si en ninguna parte se especifica eso鈥

que alternativa podriamos usar si elegimos react?

Hola tengo un problema al correro el servidor:


  platziverse-web git:(master) 鉁 npm run start-dev

> [email protected]1.0.0 prestart-dev /home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web
> npm run build


> [email protected]1.0.0 build /home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web
> browserify -t babelify -t vueify client/app.js -o public/bundle.js

Error: Cannot find module 'chart.js' from '/home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/vue-chartjs/dist'
    at /home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /home/mrromo/Documentos/NodeJS/PlatziVerse/platziverse-web/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:158:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 build: `browserify -t babelify -t vueify client/app.js -o public/bundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mrromo/.npm/_logs/2018-08-01T03_07_10_012Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 prestart-dev: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 prestart-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mrromo/.npm/_logs/2018-08-01T03_07_10_096Z-debug.log

este es mi package.json

{
  "name": "platziverse-web",
  "version": "1.0.0",
  "description": "A simple IoT Platform - WEB Dashboard",
  "main": "server.js",
  "scripts": {
    "start": "NODE_ENV=production node server.js",
    "prestart": "npm run build",
    "start-dev": "DEBUG=platziverse:* nodemon server.js",
    "prestart-dev": "npm run build",
    "build": "browserify -t babelify -t vueify client/app.js -o public/bundle.js",
    "lint": "standard"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MrRomo/platziverse.git"
  },
  "author": "Ricardo <[email protected]> (https://twitter.com/JRicardo_Romo)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/MrRomo/platziverse/issues"
  },
  "homepage": "https://github.com/MrRomo/platziverse#readme",
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "nodemon": "^1.18.3",
    "standard": "^11.0.1",
    "vueify": "^9.4.1"
  },
  "dependencies": {
    "chalk": "^2.4.1",
    "debug": "^3.1.0",
    "express": "^4.16.3",
    "platziverse-agent": "file:../platziverse-agent",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "socket.io": "^2.1.1",
    "vue": "^2.4.2",
    "vue-chartjs": "^2.8.1"
  }
}

Probablemente, al estar el curso muuuuuy desactualizado (lo que es un poco molesto), se tenga algunos errores al querer buildear el front.
Particularmente, al buildear luego de instalar con dependencias de desarrollo babel y demas yerbas, me salia este error cuando ingresaba al server

Uncaught TypeError: Line.extend is not a function

Esto se debe a como se debe exportar el modulo del archivo line-chart. La forma correcta seria la siguiente

'use strict'

const { Line, mixins } = require('vue-chartjs')
const { reactiveProp } = mixins

module.exports = {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}  

De este modo desaparece el error de tipo

Hola, prefer铆 configurar con webpack ya que es algo mas estandar en la industria y con las ultimas versiones de todas las dependencias.

El curso es muy bueno, pero deber铆an realizar actualizaciones.

platziverse-web github

Dependencias de desarrollo

npm install babel-plugin-transform-runtime @babel/core @babel/preset-env babelify browserify vueify --save-dev

Dependencias de producci贸n

npm install chart.js vue vue-chartjs --save

package.json

{
  "name": "platziverse-web",
  "version": "1.0.0",
  "description": "A Simple IoT Platform - Web Dashboard",
  "main": "server.js",
  "scripts": {
    "start": "NODE_ENV=production node server.js",
    "prestart": "npm run build",
    "start-dev": "DEBUG=platziverse:* nodemon server.js",
    "prestart-dev": "npm run build",
    "build": "browserify -t babelify -t vueify client/app.js -o public/bundle.js",
    "lint": "standard --fix"
  },
  "author": "Eric Gomez",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "nodemon": "^2.0.7",
    "standard": "^16.0.3",
    "vueify": "^9.4.1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env"
          ]
        }
      ]
    ]
  },
  "dependencies": {
    "axios": "^0.21.1",
    "chalk": "^4.1.0",
    "chart.js": "^2.9.4",
    "debug": "^3.2.7",
    "express": "^4.17.1",
    "platziverse-agent": "file:../platziverse-agent",
    "socket.io": "^3.1.2",
    "vue": "^2.6.12",
    "vue-chartjs": "^3.5.1"
  }
}

Chicos tengo este error al iniciar el servidor

MacBook-Pro:platziverse-web JulianFlorez$ npm run start-dev

> [email protected]1.0.0 prestart-dev /Users/JulianFlorez/minka/platziverse/platziverse-web
> npm run build


> [email protected]1.0.0 build /Users/JulianFlorez/minka/platziverse/platziverse-web
> browserify -t babelify -t vueify client/app.js -o public/bundle.js

module.js:540
    throw err;
    ^

Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/JulianFlorez/minka/platziverse/platziverse-web/node_modules/babelify/index.js:2:14)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 build: `browserify -t babelify -t vueify client/app.js -o public/bundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/JulianFlorez/.npm/_logs/2018-02-20T00_08_52_687Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 prestart-dev: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 prestart-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/JulianFlorez/.npm/_logs/2018-02-20T00_08_52_727Z-debug.log

Este es mi package.json

{
  "name": "platziverse-web",
  "version": "1.0.0",
  "description": "A simple IoT Platform - Web Dashboard",
  "main": "server.js",
  "scripts": {
    "start": "NODE_ENV=production node server.js",
    "prestart": "npm run build",
    "start-dev": "DEBUG=platziverse:* nodemon server.js",
    "prestart-dev": "npm run build",
    "build": "browserify -t babelify -t vueify client/app.js -o public/bundle.js",
    "lint": "standard"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/platzi/platziverse.git"
  },
  "author": "Julian Florez",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/platzi/platziverse/issues"
  },
  "homepage": "https://github.com/platzi/platziverse#readme",
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^16.1.0",
    "nodemon": "^1.14.12",
    "standard": "^10.0.3",
    "vueify": "^9.4.1"
  },
  "dependencies": {
    "chalk": "^2.3.1",
    "chart.js": "^2.7.1",
    "debug": "^3.1.0",
    "express": "^4.16.2",
    "express-asyncify": "^1.0.0",
    "platziverse-agent": "file:../platziverse-agent",
    "request": "^2.83.0",
    "request-promise-native": "^1.0.5",
    "socket.io": "^2.0.4",
    "vue": "^2.5.13",
    "vue-chartjs": "^3.2.1"
  }
}

Gracias de antemano.

Estaba experimentando un error raro鈥 que dice:

SyntaxError: platzi/.babelrc: Error while parsing JSON - Unexpected EOF at line 1 column 2 of the JSON5 data. Still to read: "" while parsing file

es porque ese archivo .babelrc estaba en uno de los directorios padres en mi proyecto鈥 despu茅s de leer en stackoverflow un buen rato entend铆 que tenia que borrarlo y se arreglo mi problema. Lo dejo aqu铆 por si le sucede a alguien m谩s.