Login red social React

Es este tutorial aprendrás a iniciar sesión mediante una red social. En este proyecto utilizaremos la herramienta Firebase que nos facilitará el desarrollo de nuestra aplicación. En su plataforma donde podremos anclar y pedir permisos a la aplicaicón de terceros para poder inciar sesión a partir de las redes sociales. Tutorial Primero abrimos el símbolo de sistema de Windows. Agregamos el comando create-react-app y a continuación creamos el nombre del proyecto. Ej: npx create-react-app tutorialenfirebase A continuación, instalaremos las librerías de Firebase: entramos a la carpeta de nuestro nuevo propyecto :np tutorialenfirebase. yarn…continue reading →

Internationalization (i18n) angular

En este tutorial de Angular 9/8 veremos cómo traducir una aplicación Angular usando la librería ngx-translate. Ngx-translate es una biblioteca de internacionalización para Angular que permite internacionalizar la aplicación en varios idiomas. Puede convertir fácilmente datos estáticos o dinámicos en varios idiomas.  Proporciona un servicio útil, una directiva y una tubería para manipular cualquier dato. ¿Qué es la internacionalización? La internacionalización es el proceso de diseño y preparación de su aplicación para poder utilizarla en diferentes idiomas. La localización es el proceso de traducir su aplicación internacionalizada a idiomas específicos para entornos locales particulares.angular.io…continue reading →

Introducción a Material en Angular

Hola, bienvenidos a este nuevo post donde veremos una breve introducción a Material en Angular. ¿Qué es Material? Es un kit de componentes que nos permite incorporar elementos tales como botones, tablas, paginadores con un diseño, animaciones creados ya predeterminados. A continuación se empezará la explicación desde cero, necesitamos Visual Studio Code y la consola de Windows para poder trabajar. Empecemos! Para crear el proyecto debemos abrir la terminal de Windows e ir hacia la ruta que deseemos para guardar nuestro proyecto, nosotros lo haremos en una carpeta en el escritorio llamada Angular.…continue reading →

Lectura Servicios API en Angular

En esta ocasión lo que haremos es mostrar el paso a paso detalladamente para leer un servicio API que hemos creado en Azure, se trata de consultas de selección de todos los alumnos, por curso y por detalles de alumno.La URL que usaremos será: https://apialumnos.azurewebsites.net/ la cual contendrá todos las consultas de lectura del servicio. Las peticiones serán: Alumnos: URL + api/Alumnos Alumnos por Curso: URL + api/Alumnos/detallesAlumno/{codigo} Detalles Alumno: URL + api/Alumnos/getalumnosGrado/{grado} Bien, lo primero que haremos es ir a la ruta de la dirección donde queremos guardar nuestro proyecto, utilizaremos una…continue reading →

Filtrar contenido con pipe Angular

La tecnología de Pipe sirve para transformar visualmente los datos de nuestra web, en este ejemplo voy a enseñaros como filtrar serie de post en una tabla con un buscador. 1-Vamos a empezar creándonos un proyecto nuevo de angular 2-Creamos un nuevo component y una carpeta con el pipe Con el comando code . abrimos el proyecto en visual code y con ng serve lo iniciamos 3-Vamos a utilizar bootstrap para la apariencia de la web (opcional) //BOOTSTRAP 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"…continue reading →

Paginación en Angular

Vamos a aprender de una forma rápida y sencilla a realizar paginaciones en Angular. He creado una pequeña aplicación que muestra todos los empleados de un hospital, pero son demasiados y me gustaría poder paginarlos y que no se vean todos a la vez. https://www.flickr.com/photos/187087725@N06/49698124241/in/dateposted-public/ ¿Cómo se hace eso? Muy simple. Para empezar nos dirigimos a https://www.npmjs.com/package/ngx-pagination. Y como vemos para empezar a usar la paginación en nuestra aplicación tenemos que ejecutar el siguiente comando en el cmd de nuestro proyecto: npm install ngx-pagination --save. Una vez instalado, en el app.module.ts tenemos que…continue reading →

Subir Archivos de Imagen en Angular con API

En este proyecto veremos como subir imágenes a una Base de Datos atreves de una API, para empezar el siguiente proyecto necesitaremos varios requisitos: Tener una Base de Datos donde guardar el archivoTener un enlace o crear una API para la subida del archivo En mi caso la API tiene un modelo Archivo en el que tendra 3 campos: IDNombre de la imagenTipo Upload-File.component export class Archivo { constructor( public id: number, public nombre: string, public imagen: string ) {} } Y un repositorio el cual recibirá un objeto tipo "Archivo" y lo…continue reading →

Encriptar/Desencriptar con Angular

En este post vamos aprender como encriptar y desencriptar mensajes que enviamos por internet, asi conseguiremos aumentar la seguridad entre usuarios y dar un valor añadido a nuestras webs Mediante unos sencillos pasos entenderemos como funciona y como podemos aplicar estos conociemientos en un pequeño proyecto para ver su funcionalidad Para enteder bien este post empezaremos ententiendo que es Encriptar y Desencriptar : Encriptar es el proceso por el cual se cifra un texto usando una clave , esta clave es un codigo de signos que se interpretan segun determinadas reglas para que…continue reading →

Despliege de aplicaciones React y/o Angular

En este post veremos como se puede desplegar una aplicación React o Angular en distintos tipos de servidor. Se enseñara como configurar el servidor correctamente para que el sistema de enrutado de las aplicaciones funcione correctamente. React y Angular tienen la particularidad que son webs de una sola página, cualquier simulación de enrutado se hace en cliente y no en servidor como una página web tradicional. Esta caracteristica requiere una configuración especial en el servidor que defina que cuando se hace una petición a quela url del servidor responda devolviendo un solo archivo…continue reading →