Forem: Sandy Marmolejo

Introducción a TypeScript para Desarrolladores Principiantes: Conceptos, Ventajas y Más

Sandy Marmolejo — Wed, 17 Apr 2024 18:21:39 +0000

¡Hola!👋

En el vertiginoso mundo del desarrollo web, es crucial mantenerse al día con las últimas tecnologías. Si eres nuevo en el desarrollo web o simplemente estás buscando ampliar tu conjunto de habilidades, este post está diseñado para ti.
Vamos a sumergirnos en los conceptos básicos de TypeScript, explorar su importancia y ventajas, compararlo con JavaScript puro y, por supuesto, aplicarlo en un ejemplo sencillo pero poderoso.

¿Qué es TypeScript?
TypeScript es un superconjunto tipado de JavaScript que agrega tipos estáticos a tu código. Esto significa que puedes definir el tipo de tus variables, parámetros de funciones y más, lo que hace que tu código sea más predecible y menos propenso a errores.

Importancia y ventajas:

Mayor robustez: brinda una capa adicional de seguridad y robustez a tu código, especialmente en proyectos grandes y complejos.
Mejor mantenibilidad: los tipos explícitos hacen que tu código sea más legible y comprensible, lo que facilita el mantenimiento y la colaboración en equipo.
Productividad mejorada: obtienes un desarrollo más rápido al detectar errores en tiempo de compilación y al proporcionar autocompletado inteligente en tu editor de código.

Versus JavaScript puro:

Tipado estático vs. Tipado dinámico: Mientras que JavaScript es dinámicamente tipado, lo que significa que los tipos de variables se resuelven en tiempo de ejecución, TypeScript ofrece tipado estático, lo que permite detectar errores antes de la ejecución del código.
Escritura de código más segura: TypeScript te ayuda a evitar errores comunes, como la manipulación inadvertida de tipos de datos, lo que puede ser una preocupación en JavaScript puro.

Aplicación práctica con un ejemplo:

¡Es hora de poner manos a la obra! Imagina que quieres crear una función simple para sumar dos números en TypeScript:

function sumar(a: number, b: number): number {
    return a + b;
}

console.log(sumar(5, 3)); // Output: 8

En tu editor de codigo
El plugin "Pretty TypeScript Errors" para Visual Studio Code, el cual mejora la visualización de los errores y advertencias del compilador de TypeScript en el editor. Proporciona una presentación más legible y detallada de los mensajes de error, lo que facilita la identificación y resolución de problemas en el código TypeScript.

¡Felicidades, has dado tus primeros pasos en el emocionante mundo de TypeScript! Espero que este post te haya ayudado a comprender los conceptos básicos de TypeScript, su importancia y ventajas sobre JavaScript puro, y cómo aplicarlo en un ejemplo práctico. Ya sea que estés desarrollando una pequeña aplicación o un proyecto a gran escala, TypeScript puede ser tu mejor aliado para escribir código más seguro y mantenible. ¡Sigue explorando y nunca dejes de aprender!

¡Nos vemos en el próximo post!😊

Instalación de Vue CLI en las versiones 2.9 y 4.5 y sus principales diferencias

Sandy Marmolejo — Thu, 05 Nov 2020 13:06:30 +0000

Hola a todos

Vue es una de mis tecnologías favoritas porque es uno de los frameworks más ligeros para desarrollar aplicaciones modernas y escalables en el lado del cliente, aquí te explicaré como instalar Vue CLI en las versiones 2.9 y 4.5 e identificaremos las diferencias que hay en cada versión.

Pasos previos

Instalar Node y Npm

Vue requiere Node.js, así que para poder empezar deberás tener instalado Node.js

Puedes comprobar si lo tienes instalado desde el terminal.

node --version

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js en https://nodejs.org/es/download/

Instalar Vue CLI

Ahora vamos a instalar el CLI de Vue, el cual nos va ayudar a crear un proyecto de Vue desde cero. La instalación será de manera global para que esté disponible en todos los proyectos de tu computadora. Se recomienda ejecutar este comando como administrador. En la terminal, escribe el siguiente comando dependiendo de la versión que hayas elegido instalar.

Para la versión 2.9

npm install -g vue-cli

Para la versión 4.5

npm install -g @vue/cli

Después de la instalación, en el terminal vamos a verificar la versión de vue instalada:

vue --version

Para la versión 2.9

Para la versión 4.5

Creando tu primera app en Vue

Para la versión 2.9

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente según lo básico o complejo que quieres que sea tu proyecto. La documentación oficial lo explica a detalle.

Actualmente los templates oficiales disponibles son: webpack, webpack-simple, browserify, browserify-simple, simple y pwa.

En este caso elegiremos el template con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Desde la terminal colocamos:

vue init webpack nombreDelProyecto

Para la versión 4.5

En la terminal colocamos el siguiente comando:

vue create nombreDelProyecto

Cuando se ejecuten estos comandos te darán opciones y preguntas, acerca del proyecto a generar.

Para la versión 2.9

Para la versión 4.5

Ya con esto se va a empezar a crear el proyecto, es normal que demore unos minutos por la instalación de las dependencias.

Ahora tenemos creado una carpeta con el nombre de nuestro proyecto.

Vamos a nuestra carpeta y encontrarás en el boilerplate varias carpetas y archivos.

Para la versión 2.9

Para la versión 4.5

Las principales diferencias que encontramos en el boilerplate de ambos proyectos es que en la versión 2.9 tenemos una carpeta router, test, config y otros archivos que hemos elegido en las opciones del template y en boilerplate 4.5 tenemos una carpeta public que a diferencia de la version 2.9 no aparece dicha carpeta pero el archivo contenido index.html sí se encuentra para ambas versiones en diferentes ubicaciones.

Se recomienda usar el nuevo CLI que incluye cambios considerables si vas a empezar con un proyecto desde cero.

Luego de esto ejecutaremos los siguientes comandos

Para la versión 2.9

cd nombreDelProyecto

npm install

Para arrancar nuestra aplicación de Vue en el servidor.
Ejecutamos en la consola

npm run dev

O en algunos casos te indicará el siguiente comando

npm run serve

Te aparecerá un localhost: 8080 (a tí te puede salir otro puerto 😊) al cual deberás de darle ctrl + click.

Este comando sirve para compilar y levantar en nuestro servidor local, de este modo podemos acceder a ella desde un navegador web y tendremos nuestra primera aplicación en Vue.

Hasta aquí hemos podido ver como instalar dos versiones de Vue de una manera fácil y sencilla. No te pierdas los próximos posts donde iremos profundizando en esto. Hasta la próxima 😏

Instalación de Vue CLI y diferencias en la versión 2.9 y 4.5

Sandy Marmolejo — Mon, 02 Nov 2020 18:06:32 +0000

Hola a todos

Pasos previos

Instalar Node y Npm

Vue requiere Node.js, así que para poder empezar deberás tener instalado Node.js

Puedes comprobar si lo tienes instalado desde el terminal.

node --version

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js en https://nodejs.org/es/download/

Instalar Vue CLI

Para la versión 2.9

npm install -g vue-cli

Para la versión 4.5

npm install -g @vue/cli

Después de la instalación, en el terminal vamos a verificar la versión de Vue CLI instalada:

vue --version

Para la versión 2.9

Para la versión 4.5

Creando tu primera app en Vue

Para la versión 2.9

Actualmente los templates oficiales disponibles son: webpack, webpack-simple, browserify, browserify-simple, simple y pwa.

En este caso elegiremos el template con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Desde la terminal colocamos:

vue init webpack nombreDelProyecto

Para la versión 4.5

En la terminal colocamos el siguiente comando:

vue create nombreDelProyecto

Cuando se ejecuten estos comandos te darán opciones y preguntas, acerca del proyecto a generar.

Para la versión 2.9

Para la versión 4.5

Ya con esto se va a empezar a crear el proyecto, es normal que demore unos minutos por la instalación de las dependencias.

Ahora tenemos creado una carpeta con el nombre de nuestro proyecto.

Vamos a nuestra carpeta y encontrarás en el boilerplate varias carpetas y archivos.

Para la versión 2.9

Para la versión 4.5

Luego de esto ejecutaremos los siguientes comandos

Para la versión 2.9

cd nombreDelProyecto

npm install

Para arrancar nuestra aplicación de Vue en el servidor.
Ejecutamos en la consola

npm run dev

O en algunos casos te indicará el siguiente comando

npm run serve

Te aparecerá un localhost: 8080 (a tí te puede salir otro puerto 😊) al cual deberás de darle ctrl + click.

Este comando sirve para compilar y levantar en nuestro servidor local, de este modo podemos acceder a ella desde un navegador web y tendremos nuestra primera aplicación en Vue.

Hasta aquí hemos podido ver como instalar dos versiones de Vue de una manera fácil y sencilla. No te pierdas los próximos posts donde iremos profundizando en esto. Hasta la próxima 😏

Leer archivos JSON desde Angular 10

Sandy Marmolejo — Mon, 05 Oct 2020 19:31:26 +0000

Hola,

Hay veces que necesitamos leer un archivo JSON para leer datos o un archivo de configuración. Para hacer esto tenemos que hacer lo siguiente:

Imaginemos que tenemos el siguiente JSON:

{
    "Menu": [
      {
        "id": "b1",
        "name": "Café americano",
        "price": 5,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/coffee.png"
      },
      {
        "id": "b2",
        "name": "Café con leche",
        "price": 7,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/latte.png"
      }
    ]
}

Lo único que tenemos que añadir es la siguiente función en tu componente o servicio

import * as data from '../../assets/menu.json'; //aqui es la ruta donde importas el archivo json
...
...
...
  getJsonContent()
    return (data as any); // aqui obtenemos el JSON completo
  }

  getMenuJsonContent()
    return (data as any).Menu; // aqui obtenemos el array de elementos de la propiedad Menu
  }

Mapeando el contenido a un array de clases

Si necesitamos mapear los datos del archivo JSON a una clase de nuestro modelo, podemos hacer lo siguiente:

Creamos una clase con la misma estructura que tiene el JSON que queremos mapear:

export interface Product {
    id: string;
    name: string;
    price: number;
    count: number;
    type: string;
    subType: string;
    image: string
}

Añadimos una función getProducts(): Observable<Array<Product>> donde indicamos que retornará un Array de Product (IMPORTANTE: Para que funcione, el array debe tener la misma estructura que la clase Product)

import { Observable } from 'rxjs';
import * as data from '../../assets/menu.json';
import { Product } from '../models/product';
...
...
...
 getProducts(): Observable<Array<Product>> {
    return (data as any).Menu;
  }

Y con esto ya tenemos un array de Products desde el JSON. Como ven, ya se puede leer un archivo JSON desde Angular 10, espero les sirva, hasta la próxima :)

Instalación de Angular 10

Sandy Marmolejo — Wed, 30 Sep 2020 18:15:58 +0000

Hola a todos

En este post te explicaré como instalar Angular 10 en tu aplicación y los pasos previos para el entorno. Esta publicación requiere conocimientos de HTML y JavaScript.

Pasos previos

Instalar Node y Npm

Angular requiere Node.js. Así que para poder empezar deberás tener instalado Node.js

Puedes comprobar si lo tienes instalado desde el terminal.

node --version

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js en https://nodejs.org/es/download/

Instalar Angular CLI

Ahora vamos a instalar el CLI de Angular, el cual nos va a ayudar a crear un proyecto de angular desde cero. La instalación será de manera global para que esté disponible en todos los proyectos de tu computadora. Se recomienda ejecutar este comando como administrador. En la terminal, escribe el siguiente comando:

npm install -g @angular/cli

Creando tu primera APP en Angular

Estamos listos para empezar a trabajar con Angular, en este caso utilizaremos la versión 10.

En la terminal, ve al directorio donde quisieras colocar tu proyecto y ponle un nombre a tu app. Para crear el proyecto, ejecutemos el siguiente comando:

ng new nombreDeTuApp

En la consola saldrán varias preguntas, la primera es si queremos tener routing, es decir añadir rutas a tu aplicación de Angular. El routing sirve para tener algo así como distintas pantallas en nuestra aplicación a las cuales podemos navegar y se muestren presentando la pantalla correcta en cada momento. Para este ejemplo responderemos No con N del (Y/N) y presionamos enter.

La otra opción es qué tipo de estilos utilizar. En Angular, podemos utilizar CSS, Scss, Sass, Less y Stylus.

Para nuestro ejemplo, elegimos Sass utilizando las flechas de desplazamiento.

Ya con esto se va a empezar a crear el proyecto, es normal que demore unos minutos por la instalación de las dependencias.

Ahora tenemos creado una carpeta con el nombre de nuestro proyecto.

Vamos a nuestra carpeta y encontrarás en el boilerplate varias carpetas y ficheros.

Para arrancar nuestra aplicación de Angular 10 en el servidor.
Ejecutamos en la consola el comando

ng serve

Te aparecerá un localhost:4200 (a tí te puede salir otro puerto 😊) al cual deberás de darle ctrl + click.

Este comando sirve para compilar y levantar en nuestro servidor local, de este modo podemos acceder a ella desde un navegador web y tendremos nuestra primera aplicación en Angular 10.

Esto es el primer paso para crear tu primera app en Angular, no te pierdas los próximos posts donde iremos profundizando en esto. Hasta la próxima 😏

Desplegando una app de React en Heroku

Sandy Marmolejo — Tue, 22 Sep 2020 09:56:46 +0000

Hola a todos,

Una de las formas gratuitas y fáciles de alojar tus aplicaciones web es usando Heroku.

Para subir tu aplicación REACT debemos hacer lo siguiente:

Cambios en React

Instalar en tu proyecto de React los siguientes paquetes

npm i express
npm i express-favicon

Añadir un archivo llamado server.js en el root del proyecto que use express en nuestra aplicación de React

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

Modificar el start en el package.json (SÓLO PARA DESPLEGAR A HEROKU)

"start": "node server.js",

Cambios en Heroku

Crear una nueva app en Heroku

Poner el nombre a tu app y escoger la región donde quieres que se despliegue (EEUU o Europa)

Desplegando tu app desde el terminal

Ejecutando en el terminal de tu aplicación los siguientes comandos:

heroku login

El terminal te pide pulsar cualquier tecla (menos la letra q). Esto te abrirá una ventana en el navegador para que aceptes el login.

Suscribiéndote el repositorio remoto de tu app en Heroku

heroku git:remote -a miprimeraappenheroku

Subiendo el código a heroku

git add .
git commit -am "Subiendo a heroku"
git push heroku master

Si has seguido los pasos correctamente, se inicia el despliegue y tendrías tu app desplegada en heroku :)

Y aqui el proyecto desplegado
https://miprimeraappenheroku.herokuapp.com/

Espero les sirva, hasta la próxima :)