Full Stack

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 →

Realizar operaciones CRUD sobre firestore a través de una app en VUE

En este post vamos a ver como enlazar firebase con una aplicación VUE y realizar operaciones CRUD simples sobre firestore. Para ello vamos a utilizar: FirebaseVUEFirestore Primero debemos crear nuestro proyecto de firebase accediendo a la siguiente URLL https://console.firebase.google.com/ Esta es la consola de firebase y va a ser el lugar donde estará nuestra base de datos de firestore. Una vez dentro debemos crear nuestro proyecto de firebase haciendo clic sobre "Agregar proyecto". https://flic.kr/p/2mK7yTJ Creación de un proyecto firebase Una vez dentro nos pedirá un nombre para el proyecto de firebase, en mi…continue reading →

Animaciones y Sonidos con React

¿Te gustaría darle más vida a tu página web mediante animaciones y sonidos sencillos? Si tu respuestas es que si, te doy la bienvenida a mi post, donde aprenderás como con animaciones y sonidos sencillos pues hacer que tu pagina web sea mas atractiva. Para ello debemos tener previamente instalado Node.js y Yarn en el equipo. TECNOLOGÍAS REACT Es la base de este proyecto. Se trata de un framework/tecnología que trabaja en una sola pagina (Single Page App) y en sí, es una biblioteca Javascript, diseñada para facilitar la creación de interfaces de…continue reading →

CREAR API CON JSON Y LLAMADA DESDE VUE

Lo primero que necesitamos: Lo que haremos es crear una api desde cero mediante el lenguaje JSON Una api es una especificación formal que establece cómo un módulo de un software que se comunica o interactúa con otro para cumplir una o muchas funciones en nuestro caso lo que haremos es llamar a nuestra API desde nuestro Vue Librería Node.js Visual Studios CodeDependencia Express para nuestra APIFramework  utilizaremos VueLibrería JavaScript que utilizaremos AXIOS Crearemos primera nuestras carpeta donde contendrá todo nuestro proyecto https://flic.kr/p/2mLWz1j Abrimos un terminal nuevo en nuestro Visual En el terminal cambiamos…continue reading →

Paginación con Vue

Hola a tod@s, en este post vamos a crear una paginación para nuestros desarrollos con Vue. Muchas veces cuando estamos desarrollando aplicaciones nos encontramos con servicios api (o archivos locales) que al consumirlos nos devuelven muchísimos datos. Si necesitáramos mostrar en nuestra aplicación grandes cantidades de información, una solución que podemos usar seria la paginación. En este post iremos paso a paso para conseguir una paginación de manera simple (botones Anterior y Siguiente) o una paginación mas completa (numerada) utilizando una api publica. Pasos Previos Primero nos creamos nuevo un proyecto con el…continue reading →