Creación de una WishList utilizando Amazon Elastic Cache

En esta ocasión os voy a enseñar a como crear y implementar Elastic Cache consumiendo los servicios de Amazon Web Servicies. Elastic Cache es una herramienta muy útil que nos permite almacenar, como dice su propio nombre, en la Cache la información que nosotros queramos de nuestra aplicación. Sus usos son variados, lo pueden implementar tanto para Session, como para una WishList o un Carrito de Compras. AWS Lo primero que necesitamos es tener una cuenta activa en AWS al entrar debemos comprobar que estamos en el Norte de Virginia, lo siguiente que…continue reading →

Realizar búsquedas y filtrar datos utilizando Casting en NetCore.5

Para esta aplicación necesitaremos crear un entorno de trabajo en MVC NetCore 5, tambien debemos tener a nuestra disposición una base de datos con la cual trabajar. En mi caso tendré Una base de datos denominada Kibunshi con tres tablas una de Peliculas , Superheroes y Mundos Base de datos: Como vemos a continuación yo tengo tres tablas en las cuales Pelis será destinada para la búsqueda y Mundo y Superhéroes serán destinadas para el filtro ya que los dos comparten el campo Id_Mundo ASP.NET CORE MVC: Creamos una aplicacion que sea de…continue reading →

Como usar Material Icons con React

Hola, bienvenidos a este post donde veremos como trabajar con “icon”, que es un componente del framework material UI. Como introducción, Material UI es un framework que nos permite usar algunas herramientas para mejorar el interfaz de nuestra página. Una de estas herramientas de la que disponenemos es el componente “icon”, que nos permite usar iconos en nuestra página web, a continuación se explicará como implementar Material y como usar el componente mencionado desde cero. Necesitamos la aplicación cmder ( también sirve la consola de windows ) y Visual Studio Code. Material funciona…continue reading →

Manejo de Pistas de Audio en Vue

¿Cómo insertar audios en tecnología Vue? En este post veremos como insertar pistas de audio en tecnología vue de manera sencilla y concisa, sin uso de tecnologías externas o librerías para un primer acercamiento a este sistema. Primeros Pasos Esto es algo que hemos visto en clase pero por si acaso y para que todo el mundo pueda probarlo veremos como abrir un proyecto nuevo y como lanzar el servidor. Para ello necesitaremos los siguientes comandos: pm install -g @vue/cli Con este comando instalaremos vue a través de node.js Una vez hecho esto…continue reading →

Implementación de notificaciones en React

Bienvenidos al post de Implementación de notificaciones en React, donde aprenderéis a implementar la librería de notificaciones react-hot-toast en React y poder así ofrecer un diseño mas llamativo a vuestras webs de cara al usuario. https://flic.kr/p/2mLC9vB Tendréis disponibles al final del post el código de GitHub, además de un link hacia el proyecto subido para que podáis ver la funcionalidad de las notificaciones. Requerimientos Para poder seguir el post correctamente, es necesario que tengáis un proyecto de React funcional. React-Hot-Toast, instalación e importación Empezamos por instalar la dependencia en nuestro proyecto mediante el…continue reading →

Reproductor de video responsivo con React

¿Quieres reproducir videos de una web externa o directamente de tu PC? En este post vamos a aprender a crear un reproductor de video desde cero ya sea con videos de webs externas como YouTube, como con videos que tengas en tu propio PC. Para realizarlo será necesaria la instalación del componente React-Player que nos proporciona React. Una vez instalado este componente realizaremos un ejemplo sencillo aunque conciso de como realizar nuestro reproductor. React-Player React-Player es un componente de React para reproducir una variedad de URL, incluidas rutas de archivos, YouTube, Facebook, Twitch,…continue reading →

Creación de Chatbot con React Simple Chatbot

Si has llegado hasta aquí es posible que conozcas lo que es un Chatbot o que tengas curiosidad por descubrir qué es. De ambas formas al acabar de leer este Post, conocerás qué es, cómo funciona a un nivel básico y sabrás como programar tu propio Chatbot de una manera sencilla y eficaz. Un Chatbot es una aplicación que permite simular una conversación real. Sin embargo, como usuarios, estaremos hablando con un montón de código programado con preguntas y respuestas fijas, o bien a día de hoy, con inteligencias artificiales que conocen gran…continue reading →

Como hacer routing en React

¿Cómo realizar una navegación entre componentes de React? Para poder realizar la navegación entre componentes en React, el framework que estamos utilizando en el lado cliente, tiene como prerrequisito principal instalar la librería react router dom. Comandos necesarios Para poder usar tanto bootstrap como react router necesitas usar una serie de comandos que debemos instalar para poder utilizar ambas librerías. Comenzaremos listando los comandos para instalar la librería de react router dom: npm install --save react-router-dom Elaboración del proyecto Una vez tengamos nuestro proyecto creado y estructurado, debemos instalar las librerías necesarias a…continue reading →

Uso de webcam en proyecto React

Hola, soy Álvaro Moya Herraiz, alumno del máster de Desarrollo Web Full Stack, MultiCloud y Multiplataforma y voy a enseñaros a como acceder a la webcam en vuestro proyecto de React. Imaginemos que tenemos una aplicación web con React la cual requiere el uso de la webcam, ya sea para hacer fotos, grabar vídeo en tiempo real, etc. En este post os enseñare detalladamente a hacerlo de forma clara y sencilla Primero de todo, deberemos acceder a nuestro proyecto desde la consola de comandos e introducir el siguiente comando: Gracias a este comando…continue reading →

Detectar el idioma del navegador con react.

En este post voy a explicar cómo realizar una aplicación web capaz de detectar parámetros del navegador web en el que se lanza, más concretamente la configuración de  idioma para presentar el contenido en el idioma que se detecte. Usare el framework React para ello. El primer paso será crear un nuevo proyecto con react, para ello ejecutaremos el comando: Una vez este creado el proyecto, crearemos la carpeta “components” dentro de src, donde crearemos cualquier componente que queramos usar. Por organización, también crearemos carpetas dentro de components para diferenciar cada componente. Una…continue reading →