JavaScript

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 →

UNIT TESTING EN REACT

Introducción En este post aprenderás qué es el unit testing y diferentes herramientas que se pueden utilizar, así como su implementación en proyectos de React. ¿Qué son las pruebas unitarias o Unit testing? Con Unit Testing, nos referimos a programar tests que nos sirven para comprobar que un bloque con una funcionalidad específica de nuestro código funciona como esperamos. ¿Cuál es su estructura? El cuerpo de un test consta de tres partes: Arrange: Es el primer paso, donde se crean las variables y se preparan los recursos a utilizar (componentes, clases…). Act: Donde…continue reading →

Semantic UI React

Buenas, en este post voy a explicar el uso básico de una herramienta de diseño de paginas web similar a Boostrap pero digamos que con un uso más básico que este. Antes de nada, decir que usaremos Visual Studio Code como intérprete del texto. Semantic UI es una librería de JQuery para la manipulación del DOM en la página y que será usado he interpretado por React.js. ¿Por qué Semantic es algo más simple que Bootstrap en cuanto a diseño?, porque este importa conjuntos de marcas que reciben su propio diseño a través…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 →

Subir Archivos de Imagen en React

En este post se explica como se podría capturar una imagen con react, para posteriormente poder realizar con ella las acciones requeridas. Para ello empezaremos creándonos dos Componentes React: 1. FileUploader export default class FileUploader extends Component { render() { let state = this.state, props = this.props; return ( <form name="form" id="form"> </form> ); } } FileUploader.propTypes = propTypes; FileUploader.defaultProps = defaultProps; 2.Imágenes: import React, { Component } from "react"; import FileUploader from "./FileUploader"; import axios from "axios"; export default class Imagenes extends Component { uploader = React.createRef(); render() { return ( <div>…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 →