Creación de un Observable

Clase 6 de 36 • Curso de Programación Reactiva con RxJS

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

Marcelo Arias

teacher•

En esta clase crearás tu primer observable 😊.

Estos son los comandos para crear la carpetas de ejercicios de RxJS:

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

También puedes acceder al repositorio de este curso donde se encuentran los archivos de configuración (como ).

Víctor Andrés Córdova Poma

student•

Estoy tomando el curso, pero usando Typescript. Aquí el ejemplo del profe.

import { Observable, Subscriber } from "rxjs";

// Las variables que sean observables se les argega el $
const observableAlfa$ = new Observable<number | string>(subscriber => {
	subscriber.next(1); //Dentro del flujo de información del observable solo hay numeros.
	subscriber.next(2);
	subscriber.complete();
	subscriber.next(20);
});

//Se va a crear un observador que se subscribirá al observable.
const observator = {
	next: (value: number | string) => {
		console.log(`The value is: ${value}`)
	},
	complete: () => {
		console.log(`The observable has no values`)
	},
	error: (error: Error) => {
		console.error(error.message);
	}
}

observableAlfa$.subscribe(observator);

Santiago Dulcey

student•

sabes cual puedo encontrar de este mismo tema pero enfocado en typescript?

Víctor Andrés Córdova Poma

student•

No hay ese curso dentro de platzi, pero no hay necesidad. Solo necesitas experiencia con Ts, que la puedes obtener en los cursos de Ts que están en platzi(son muy buenos). Por ejemplo, en el ejemplo que coloqué me basé en el módulo de Genéricos del curso de POO y asincronismo con TS.

Ramiro De La Cruz Navarro

student•

Para los que quieran usar typescript instalan ts-loader

npm install ts-loader --save-dev

Y pegan esto en webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
}

Yamid Noguera

student•

Cuando se hace complete(), se libera en memoria ? o sigue la información en la ram de alguna forma ?

Marcelo Arias

teacher•

¡Hola Yamid! Buena pregunta. Cuando usamos el método .complete() se librerará la memoria asignada.

Diego Fernando Caviedes Camaho

student•

que buen dato.

Felipe de Jesús Ramirez Rodriguez

student•

Create project

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

Create webpack.config.js


const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  mode: 'development'
}

Add script start to package.json (optional --open)

"start": "webpack serve --open"

Create index.js and index.html public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso RXJS</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

src/index.js

import { Observable } from "rxjs";

// agregar $ al final
const observableAlfa$ = new Observable(suscriber => {
  suscriber.next(10);
  suscriber.next(2);
  suscriber.next(3);
  suscriber.next(1);
  suscriber.complete() //observable finished
  //suscriber.error('Error en el flujo') //observable finished
})

const observador = {
  next: (value) => {
    console.log('Value', value);
  },
  complete: () => {
    console.info('Finished');
  },
  error: (error) => {
    console.error(error)
  }
}

observableAlfa$.subscribe(observador);

npm start to start the project

Marcelino Sosa A

student•

Hola a todos, tengo la siguiente duda, estaba ejecutando el comando "npm start", pero me retorna el sig. error:

For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           ouput: …
         }
       })
     ]

saben como puedo continuar, xfa, gracias

Marcelo Arias

teacher•

¡Hola Marcelino! Claro. El error ocurrió porque en el archivo de configuración de Webpack (webpack.config.js) agregaste como propiedad ouput, en lugar de output. Falta la letra t después de la u.

Manuela Barba Guerra

student•

NOTAS:

La convención al nombrar los observables es que se les coloque un signo $ al final. Eso es lo que distingue a los observables. Ejemplo:

const observableAlfa$ = new Observable;

En el observador sólo el método next y error emiten valores, emiten información, next emite el valor en sí y el error el error. Ejemplo:

const observador = {
    next: (value) => {},
    complete: () => {},
    error: (error) => {},
};

Alex hernandez mitre

student•

Rx es la creme de la creme _

Carlos Dugarte

student•

Intento andar el npm start pero me aparece este error en la consola

Uncaught TypeError: (0 , _util_pipe__WEBPACK_IMPORTED_MODULE_3__.pipeFromArray)(...) is not a function
    at Observable.pipe (Observable.js:87:85)
    at eval (index.js:19:17)
    at ./src/index.js (bundle.js:443:1)
    at __webpack_require__ (bundle.js:472:33)
    at bundle.js:1545:37
    at bundle.js:1547:12

Marcelo Arias

teacher•

👋 ¡Hola Carlos! ¿Podrías escribir tu código en una respuesta? Luce como un error de sintáxis al crear el observable.

Carlos Andrés Pupiales Córdoba

student•

Pero que clase tan buena..!!

Platzi Team

student•

Creacion de un Observable

Para este ejecicio lo haremos en Js asi que para eso, primero inicalizacimos nuestro proyecto de npm y instalamos la dependencia de RsJS y Webpack para el renderizado de nuestra aplicacion:

npm init -yes
npm i rxjs
npm i webpack webpack-dev-server

y luego configuramos webpack:

const path = require('path');
module.exports = {
	module: {	},
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	}
}

creamos un nuevo script en nuestro package.json:

{
	...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack serve --open --mode development" 
  },
	...
  "dependencies": {
    "rxjs": "^7.8.1",
    "webpack": "^5.87.0",
    "webpack-dev-server": "^4.15.1"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }

Y ahora creamos nuestro observable

En primer lugar, se importa la clase Observable de la librería RxJS.

import { Observable } from 'rxjs'

A continuación, se crea una instancia de Observable llamada observableAlfa$. El signo '$' al final del nombre es una convención que indica que es un Observable.

const observableAlfa$ = new Observable(suscriber => {
	suscriber.next('Alfa')
	suscriber.next('Beta')
	suscriber.next('Gamma')
	suscriber.next('Delta')
	suscriber.error('Error')
	suscriber.complete()
});

En este caso, se emiten varios eventos utilizando el método next() del suscriptor. Los valores 'Alfa', 'Beta', 'Gamma' y 'Delta' son enviados secuencialmente como eventos.
Después, se simula un error utilizando el método error() del suscriptor. Esto provoca que el Observable emita un error.
Finalmente, se llama al método complete() del suscriptor para indicar que la emisión de eventos ha finalizado.

A continuación, se define un objeto llamado observador que tiene tres métodos: next, error y complete. Cada uno de estos métodos simplemente imprime el valor recibido en la consola.

const observador = {
	next: (value) => { console.log(value) },
	error: (error) => { console.log(error) },
	complete: () => { console.log('complete') }
}

Finalmente, se suscribe el objeto observador al Observable observableAlfa$ utilizando el método subscribe(). Esto significa que el objeto observador actuará como el suscriptor y recibirá los eventos emitidos por observableAlfa$.

observableAlfa$.subscribe(observador)

Elmer Danilo Hernandez

student•

Creación de proyecto con vite.js

npm create vite@latest course-rxjs
cd course-rxjs
npm install
npm i rxjs
npm run serve

Diego Fernando Caviedes Camaho

student•

el Observer es un callback

Andres Ossa

student•

Buena tarde profesor Marcelo tengo 51 años nunca realice ninguna programacion llegue a la case 6 pero lamentablemente veo que el curso es para personas que tiene un esquema conceptual previo de la progtramacion , no se la verdad como iniciar .

Solo podemos responder preguntas relacionadas con esta clase.

Angie Loreina García Delgado

student•

En mi caso no logro hacer que me muestre los resultados en el navegador, seguí todos los pasos de la configuración, no comprendo muy bien que esta pasando. La consola del navegador solo no muestra nada o este mensaje : Failed to load resource: the server responded with a status of 404 (Not Found)

Tanelo Mondaca Silva

student•

Comparte el código en tus archivos para poder ayudar

Luis Dominguez

student•

Hola AngieLore, a mi me pasaba igual, en mi caso salía error 404 porque configuré mal el webpack.config.js. En ves de poner module.exports = {....} tenía puesto module.export = {...}, en resumen no le había puesto la "s" al exports Puede que en tu caso sea un tema similar.

import { Observable, Subscriber } from "rxjs";

// Las variables que sean observables se les argega el $
const observableAlfa$ = new Observable<number | string>(subscriber => {
	subscriber.next(1); //Dentro del flujo de información del observable solo hay numeros.
	subscriber.next(2);
	subscriber.complete();
	subscriber.next(20);
});

//Se va a crear un observador que se subscribirá al observable.
const observator = {
	next: (value: number | string) => {
		console.log(`The value is: ${value}`)
	},
	complete: () => {
		console.log(`The observable has no values`)
	},
	error: (error: Error) => {
		console.error(error.message);
	}
}

observableAlfa$.subscribe(observator);

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso RXJS</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

import { Observable } from "rxjs";

// agregar $ al final
const observableAlfa$ = new Observable(suscriber => {
  suscriber.next(10);
  suscriber.next(2);
  suscriber.next(3);
  suscriber.next(1);
  suscriber.complete() //observable finished
  //suscriber.error('Error en el flujo') //observable finished
})

const observador = {
  next: (value) => {
    console.log('Value', value);
  },
  complete: () => {
    console.info('Finished');
  },
  error: (error) => {
    console.error(error)
  }
}

observableAlfa$.subscribe(observador);

For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           ouput: …
         }
       })
     ]

Uncaught TypeError: (0 , _util_pipe__WEBPACK_IMPORTED_MODULE_3__.pipeFromArray)(...) is not a function
    at Observable.pipe (Observable.js:87:85)
    at eval (index.js:19:17)
    at ./src/index.js (bundle.js:443:1)
    at __webpack_require__ (bundle.js:472:33)
    at bundle.js:1545:37
    at bundle.js:1547:12

{
	...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack serve --open --mode development" 
  },
	...
  "dependencies": {
    "rxjs": "^7.8.1",
    "webpack": "^5.87.0",
    "webpack-dev-server": "^4.15.1"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }

const observableAlfa$ = new Observable(suscriber => {
	suscriber.next('Alfa')
	suscriber.next('Beta')
	suscriber.next('Gamma')
	suscriber.next('Delta')
	suscriber.error('Error')
	suscriber.complete()
});

Creación de un Observable

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables