DEV Community: Jorge Méndez Ortega

De POO a SOLID explicado con Pokémon - Los cinco principios de SOLID

Jorge Méndez Ortega — Sun, 06 Sep 2020 09:17:58 +0000

GUÍA PARA ENTENDER LOS CINCO PRINCIPIOS DE SOLID.

JavaScript — Los cinco principios de SOLID

Genial estamos por terminar nuestra aventura Pokémon, finalmente veremos los cinco principios de SOLID, para poder llegar hasta este punto fue necesario pasar los siguientes retos.

📕 El paradigma de la Programación Orientada a Objetos
📗 Los cuatro principios de la Programación Orientada a Objetos

Si seguiste el tema desde el primer artículo deja decirte gracias 👏, regresando al tema que nos compete y posible mente la pregunta que te estés realizando al igual que yo es, pero ¿Que son los cinco principios de SOLID?

📝 Nota: Para entender los principios de SOLID es recomendable tener bases de los temas anteriores.

Pero, 🤔 ¿Qué son los principios de SOLID?

Es una serie de cinco reglas o principios que son aplicados en la POO cuyas iniciales dan como resultado el acrónimo SOLID este nombre es definido por Michael Feathers el cual hace referencia a los principios definidos por Robert C. Martín (Tío Bob) y Barbara Liskov.

Aplicar y conocer dichos principios tiene como consecuencia un desarrollo.

En términos más generales se puede conseguir un mejor diseño de arquitectura y un código de mayor calidad, cada una de las letras de SOLID hace referencia a uno de sus principios.

Los principios de SOLID no solo son aplicables a POO también son aplicables en Funciones (Programación funcional), pero es muy común verlo aplicado en POO, Estos principios son aplicables a cualquier lenguaje de programación.

🔖 Nota: Todos los ejemplos de código utilizados están basados en JavaScript usando las especificaciones más actuales hasta el momento.

📕S: Single Responsability Principle / Principio de Responsabilidad Única

Una Clase solo debe tener solo una razón para cambiar, esto quiere decir que una clase solo debe contar con una sola responsabilidad.

Si una Clase contara con múltiples responsabilidades esto puede implicar que al realizar un cambio de alguna de ellas puede tener como consecuencia la modificación de otras responsabilidades lo que aumenta la posibilidad de incluir errores y poder afectar otras partes del sistema sin saberlo.

🔖 Nota: Single Responsability Principle **también se conoce como SRP** por sus siglas en ingles.

Interesante, pero generemos un ejemplo utilizando la vieja confiable Clase Pokémon.

Como podemos apreciar el ejemplo anterior no está aplica SRP ya que la Clase **consta de más de una **responsabilidad.

Al contar con múltiples responsabilidades se complica aplicar cambios ya que es posible que insertemos un error porque hacer un cambio de alguna responsabilidad, podría afectar a otras sin que nosotros lo sepamos, es momento de aplicar SRP.

Aplicando SRP vemos que entra en juego una nueva clase llamada DataBasela cual es encarga de manipular la Base de datos y por otro lado la Clase Pokemonsolo se encarga de definir nuevos Pokémons, de esta manera cada Clasetiene una responsabilidad además podemos conseguir una alta cohesión.

alta cohesión: Se refiere a la media que módulos de un sistema tiene una sola responsabilidad.

📗O: Open-Closed Principle/ Principio de Abierto-Cerrado

Una entidad de SoftWare tiene que estar abierta para su extensión, pero cerrada para su modificación. Lo que establece este principio es que siempre que se desee realizar un cambio o nueva característica, se tendría que agregar código nuevo en lugar de modificar el existente.

Si una se desea que una Clase realice más funciones, lo ideal es extender las funcionalidades ya existentes y no modificarlas.

🔖 Nota: Open Closed Principle también se conoce como OCP por sus siglas en ingles.

Nuevamente utilizaremos la vieja confiable Clase Pokémon, para generar el ejemplo.

Como podemos apreciar el ejemplo anterior no está aplica OCP ya que la Clase ProcessAtack está abierta para recibir nuevos cambios.

Al momento de que nuestra la Clase está abierta a recibir nuevos cambios es posible que insertemos un error, porque estaríamos modificando código ya existente, para aplicar OCP utilizaremos el principio de Herencia y **Polimorfismo.

Al aplicar OCP en la Clase ProcessAttack lo primero que vemos es que ya no le importa saber el tipo de Pokémon solo le interesa el resultado del método attack para poder realizar la acción de ataque, con este nuevo diseño para poder agregar nuevos ataques por tipo de Pokémon solo es necesario crear nuevas SubClases de la Clase Pokémon, esto es un diseño mucho más robusto y fácil de extender.

📘 L: Liskov Substitution Principle/Principio de Sustitución de Liskov

Puede que por su nombre asuste un poco 😱, pero en realidad es más sencillo de lo que parece. Este principio lo que dice es, Si S es un subtipo de T, los objetos de tipo T en un programa pueden reemplazarse por objetos de tipo** S** sin alterar ninguna de las propiedades del programa.

Este …ehm… como te digo que eso no suena tan sencillo como lo imaginaba.

De una manera más simple, el principio declara es que una, SubClase (clase hija) debe ser sustituible por su Super Clase (clase padre), si al hacer esto la clase falla estamos violando el principio🤯.

🔖 Nota: Liskov Substitution Principle también se conoce como LSP por sus siglas en ingles.

Nuevamente utilizaremos la vieja confiable Clase Pokémon, para generar el ejemplo.

El ejemplo anterior está rompiendo el principio LSP ya que como podemos apreciar la Sub-Clase (Charmander) tiene un comportamiento que difiere de la Clase-Padre (Pokémon),

Al momento que una Sub-Clase no puede realizar las mismas acciones que la Clase-Padre esto puede provocar errores, para poder aplicar LSPutilizaremos el principio de Herencia.

Al aplicar LSP entra en juego PokemonFly que hereda de Pokémon y tiene el método canFly, de esta manera podemos definir quién puede volar y quien no, este principio es una advertencia de que el polimorfismo es poderoso, pero no siempre es fácil de aplica correctamente.

📙 I: Interface Segregation Principle/ Principio de Segregación de Interfaces

Los clientes no tienen que verse forzados a depender de interfaces que no utilicen, en otras palabras, cuando un Cliente A depende de una Clase que implementa una interfaz cuya funcionalidad el Cliente A no utilice, pero otros si, él Cliente A estará siendo afectados por los cambios que fuercen otros clientes.

Este principio suena muy similar a SPR ya que ambos están centrados en la cohesión de responsabilidades.

Este …ehm… pero en JavaScript no existen las interfaces genio.

Por lo que este principio no es aplicable estrictamente como otros, lo ideal es implementar pequeñas interfaces simuladas.

🔖 Nota: Interface Segregation Principle también se conoce como ISP por sus siglas en ingles.

Nuevamente utilizaremos la vieja confiable Clase Pokémon, para generar el ejemplo.

Como podemos apreciar el ejemplo anterior no está aplica ISP ya que la Clase Pokemon tiene métodos que no son aplicables en todos las SubClaseslas cuales se ven obligadas aplicar acepciones o comportamientos diferentes para los métodos que no utilizan.

Al momento de que nuestra la Clase consta de métodos que pueden o no aplicar a sus descendientes es muy fácil que insertemos errores, la solución para poder implementar ISP es necesario separar el código en pequeñas partes así de cada clase podrá usar los métodos que realmente utilice.

🔖 Nota: En JavaScript solo se puede tener una clase padre, por lo que la herencia múltiple de manera directa no es posible, para eso usaremos los mix-ins.

Al aplicar ISP entran en juego el manejo de interfaces, pero como sabemos en JavaScript por lo que implementamos Mix-ins con los cuales podremos simular un comportamiento parecido a las interfaces con lo que podremos agregar solo los métodos que realmente necesite nuestra Subclase.

📒 D: Dependency Inversion Principle / Principio de Inversión de Dependencia

Realmente este principio dicta dos puntos importantes los cuales son

Los módulos de alto nivel no deben depender de los módulos de bajo nivel, Ambos tiene que depender de abstracciones.

Las abstracciones no deben depender de los detalles. Los detalles deben depender de abstracciones.

Hay un momento puede que esto no suene tan sencillo inicialmente, pongamos en claro los términos utilizados.

Módulo de Alto Nivel (Clase): Clase con la que se ejecuta una acción utilizando una herramienta
Módulo de Bajo Nivel (Clase): La **herramienta necesaria para ejecutar la acción
Abstracción: Representa la interfaz que conecta a las 2 clases
Detalles: Cómo funciona la herramienta.

🔖 Nota: Dependency Inversion Principle tambiénse conoce como DIP por sus siglas en ingles.

En este ejemplo crearemos una clase llamada Pokedex ya que desde mi punto de vista es como el mejor ejemplo que se presta para la explicación.

Revisando el ejemplo podemos ver que la Clase Pokedex tiene una dependencia directa a ApiPokemon. por esta razón el principio de DIP no se aplica ya que una de las Clases tiene conocimiento de cómo se implementa ApiPokemon.

Para poder implementar DIP utilizaremos inyección de dependencias así la Clase Pokedex solo se encargará de solicitar data.

Al momento de realizar una inyección de Dependencias la clase Pokedex, eliminamos la dependencia que se tenía de la clase ApiPokemon, de esta manera cumpliríamos con el principio de DIP.

🔖 Nota: La implementación de DIP regular mente puedes se utiliza con interfaces en este caso podríamos haber usado mix-in.

Conclusiones

Como podemos ver cada uno de los principios de SOLID consigue un objetivo en concreto.

Principio de Responsabilidad Única:
Su propósito es separar los comportamientos.
Principio Abierto/Cerrado:
Su objetivo es ampliar el comportamiento de una clase sin modificar el comportamiento existente.
Principio de Sustitución de Liskov:
**Su objetivo es aplicar coherencia entre clases.
Principio de Segregación de la Interfaz:
**Su objetivo es dividir un conjunto de acciones en conjuntos más pequeños para ejecutar solo el conjunto de acciones que se requieren.
Principio de inversiones Dependencias:
**Su objetivo es reducir la dependencia de una clase de alto nivel en la clase de bajo nivel mediante la introducción de una interfaz.

Por último, recordemos que SOLID solo es una herramienta que nos ayuda a escribir mejor código, por lo que hay que tomar en cuenta que no hay que caer en el uso excesivo de SOLID ya que puede que estos principios compliquen mucho el código si es así talvez solo sea necesario aplicar parte de estos.

De POO a SOLID explicado con Pokémon - Los cuatro principios de POO

Jorge Méndez Ortega — Wed, 26 Aug 2020 21:40:13 +0000

Guía para entender los cuatro principios de POO.

JavaScript - Los cuatro principios de POO

En un post anterior hablamos sobre el paradigma de POO aplicándolo a JavaScript, de esta manera dimos el primer paso para poder comprender SOLID.

Con anterior hablamos sobre el paradigma de POO aplicándolo a JavaScript, de esta manera dimos el primer paso para poder comprender SOLID. Si te perdiste el post anterior puedes consultarlo en el menú de arriba.

Retomando nuestra aventura Pokémon procederemos a entender los principios de POO, para entrar en materia nos preguntaremos lo siguiente.

🔖 Nota: Todos los ejemplos de código utilizados están basados en JavaScript usando las especificaciones más actuales hasta el momento.

🤔 ¿Cuáles son los principios de POO?

Todo lo que es POO es posible simplificarlos en cuatro grandes principios que permiten fundamentar dicho paradigma.

📕 Encapsulamiento

Su propósito es que nadie se meta donde no le llaman, cada objeto es responsable de su propia información, estados los cuales solo pueden ser modificados por sus propios métodos, por lo cual sus atributos internos no tienen que ser accesibles desde fuera.

🔖 Nota: Cuando un atributo de un objeto no es accesible desde fuera en POO esto se conoce como privacidad.

Utilizando como base la clase Pokémon que creamos en un POST anterior procederemos a implementar el principio de encapsulamiento.

¡Genial! nuestra clase Pokémon está utilizando privacidad para que algunos de sus atributos no san accesibles desde fuera y así es cómo funciona el principio de encapsulamiento😱.

🔖 Nota: Todas las métodos y atributos que no tienen el # son por defecto públicos, esto quiere decir que pueden ser consultados desde afuera de la clase.

📗 Abstracción

Hace pensar que los objetos son similares a cajas negras, ya que sabremos cómo interactuar con ellos, pero no conocemos su comportamiento interno, esto trae como consecuencia la capacidad de modificar el comportamiento de un objeto sin afectar a quienes lo utilicen.

Siguiendo con el tema de Pokémon, imaginemos el funcionamiento de una Pokédex el cual está abstraído del usuario, pues basta solamente con saber cómo interactuar con él para realizar ciertas acciones, pero no tenemos ni la remota idea de cómo funciona internamente.

¡Genial! ya contamos con una nueva clase llamada Pokédex con la que podemos consultar la información de un Pokémon, como podemos apreciar en el ejemplo sin importar el origen de la data el método getInfo siempre muestra la información solicitada, por lo que la manera de interactuar con dicho método no cambia solo la clase padre es la que conoce sus cambios y es así como funciona el principio de Abstracción.

📘 Herencia

Es la capacidad que permite crear objetos a partir de otros ya existentes, los métodos y atributos del objeto padre (Super Clase) pasan a ser parte de los objetos hijos (Sub-Clase) los cuales son creados a partir de la Super Clase, la herencia se basa en la reutilización de código.

Imaginemos que se necesita crear un nuevo objeto que permita definir a Pokémons de Tipo Fuego, pero este nuevo objeto tiene que contar con las características de la clase Pokémon.

¡Genial! la clase TypeFire entra a juego nos permite crear Pokémons de tipo fuego y al mismo tiempo cuenta con todos los métodos y propiedades de la clase Pokémon, además estamos reutilizando código😱 y así es cómo funciona el principio de Herencia.

🔖 Nota: Recordemos que la clase Pokémon cuenta con atributos privados los cuales no pueden ser consultados directamente por la clase TypeFire pero puede consultarlos gracias a los métodos que tienen acceso a dichos a tributos.

📙 Polimorfismo

Es la capacidad que tiene un objeto de presentar diferentes comportamientos al momento de realizar una acción, el polimorfismo se presenta cuando se aplica el principio de Herencia.

Utilizaremos nuevamente la clase TypeFire ya que con anterioridad le aplicamos el principio de Herencia, la clase Pokémon tiene un método attack con un comportamiento establecido, pero al utilizarlo dentro de la clase TypeFire su comportamiento tiene que cambiar.

¡Genial! la clase TypeFire define un nuevo comportamiento para el método attack proveniente de la clase Pokémon, de esta manera las dos clases comparten el método y cada una define un comportamiento diferente y así es como funciona el Polimorfismo.

🔖 Nota: Al igual que la herencia no podemos tener accesos a métodos y atributos privados.

🤔 Conclusiones

Aprendimos los cuatro principios que le dan fundamento al Paradigma de POO, sabes cómo aplicarlos en nuestros desarrollos, es importante saber que JavaScript no cuenta con una implementación al 100 del paradigma de Paradigma de POO pero parece que busca dar el paso.

Hemos dado un paso más para poder entender los cinco principios de SOLID ya que hasta este punto podríamos decir que entendemos las bases de POO, por lo que en el siguiente Articulo hablaremos de SOLID😱.

De POO a SOLID explicado con Pokémons - JavaScript - El paradigma de POO

Jorge Méndez Ortega — Mon, 24 Aug 2020 21:37:40 +0000

Guía para entender el paradigma de POO.

JavaScript - El paradigma de POO

En el paradigma de la Programación Orientada a Objetos (POO o OOP en sus siglas en inglés) existen los principios o reglas SOLID los cuales son una serie de normas que guían la forma en la que diseñamos nuestros sistemas. Aplicando dichos principios podemos encontrar los objetivos.

Un punto importante para poder comprender los principios de SOLID es necesario comprender el paradigma de POO, tomando lo anterior en cuenta la pregunta que tenemos que hacernos es.

🤔, Pero ¿Qué rayos es POO?

Es un paradigma de programación que utiliza la abstracción para crear modelos de objetos basados en el mundo real. Aplicando este paradigma podemos conseguir desarrollos más robustos y organizados además de conseguir beneficios tales como.

El paradigma de POO es considerado como el diseño de Software a través de conjuntos que cooperan entre sí, lo cual es muy diferente al antiguo paradigma de programación estructurada.

Muy interesante… si POO se basa en objetos la pregunta que tenemos que hacernos es.

🔖 Nota: Todos los ejemplos de código utilizados están basados en JavaScript usando las especificaciones más actuales hasta el momento.

🤔, Pero ¿Cómo logro pensar en Objetos?

Pensar en objetos es muy sencillo ya que es muy parecido a cómo lo haríamos en la vida real. Por ejemplo, imaginemos un Pokémon el cual, para poder pasarlo a un modelo de POO, diríamos que el elemento principal (también conocido como clase) es Pokémon, tomando esto en cuenta podemos realizarnos las siguientes preguntas.

🤔 ¿Qué propiedades tiene un Pokémon?

Todas las propiedades y características de un Pokémon se conocen como atributos los cuales cuentan con un identificador (nombre de la propiedad) y un tipo (conocido como tipo de dato).

🤔 ¿Qué capacidades tiene un Pokémon?

Todas las capacidades que definan el posible comportamiento de nuestro Pokémon se conocen como métodos los cuales pueden modificar a los atributos o llamar a otros métodos.

🔖 Nota: Por cuestiones de practicidad solo tomaremos algunas de las capacidades y propiedades de un Pokémon.

🤔, Pero ¿Que rayos es una Clase?

Funciona como un molde que nos permite crear objetos individuales en este caso del tipo Pokémon permitiendo así definir los atributos y métodos que describen su comportamiento y estados.

¡Genial! Poco a poco esto toma forma… ¡Ey! un momento falta realizarnos una pregunta la cual es.

🤔 ¿Entonces qué es un Objeto en POO?

Es la representación abstracta de cualquier elemento de la vida real; mediante un componente de Software por lo que un objeto es una instancia de una clase.

🔖 Nota: Se conoce como instancia a todo objeto que derive de otro. De esta forma todos los objetos son instancias menos la Clase padre que es el origen.

¡Genial! ya conocemos algunos conceptos base del paradigma de POO es momento de aplicar lo aprendió y convertirlo en código, ¡Manos a la obra!

¡Genial! hasta este punto ya generamos nuestra primera Clase aplicando los conceptos básicos del paradigma de POO, el código generado está basado en los diagramas utilizados.

Si quiere aprender un poco más sobre el uso de clase en JavaScript te recomiendo leer el siguiente POST.

Usando Clases en JavaScript. Actualmente con las nuevas… | by Jorge Mendez Ortega | Medium

Jorge Mendez Ortega ・ Jun 3, 2018 ・
Medium

Conclusiones

Aprendimos los conceptos base del paradigma de POO y los beneficios que podemos obtener cuando se aplica en nuestros desarrollos, es importante saber que gracias a las nuevas características de JavaScript podemos utilizar dicho paradigma.

Iniciamos el camino para poder entender los cinco principios de SOLID, pero antes de poder pasar al tema tenemos que conocer los cuatro principios que le dan sentido a POO, este tema lo expondremos en el siguiente Articulo.

Creando un deploy desde GitHub

Jorge Méndez Ortega — Mon, 20 Jul 2020 05:21:11 +0000

GUÍA PARA GENERAR UN DEPLOY USANDO GITHUB Y SERVICIOS ONLINE

Usando Heroku, Glitch o CodeSandBox para desplegar un proyecto desde un repositorio.

Actualmente sigo experimentando servicios online que permitan desplegar un proyecto desde GitHub.

Anterioridad, probé MongoDB Atlas para generar una Base de Datos y su respectiva conexión utilizando JavaScript.

para saber más sobre el tema se puede consultar el post.

Article No Longer Available

Existen algunos servicios que facilitan realizar un deploy desde un repositorio. La magia de estos servicios radica en que con poco esfuerzo podemos tener nuestro proyecto online🤯.

👐 Manos a la obra

Lo primero es contar con el repositorio del proyecto al que deseamos dar salida. En este caso, utilizaremos el código generado el Post mencionado anteriormente.

¿Pero por qué utilizar este código?

Cuenta con una conexión con MongoDB Atlas
Se requiere de la creación de Variables de entorno
El desarrollo en si es un servidor básico
Cuenta con los comandos básicos para levantar el servidor.

🔖Nota: Es opcional el uso del código que comparto por este medio ya que posiblemente quieras generar el deploy de un proyecto personal.

OrcaPracticas / workshop-deploy

🛠 Taller para generar Deploys en servicios gratuitos.

workshop-deploy

Ejemplo de como hacer deploy en varios servicios online

View on GitHub

Al contar con el repositorio, procederemos realizar el deploy de nuestro proyecto. Es importante tomar en cuenta que nuestro proyecto tiene que contar con tres características importantes.

El package.json tiene que contar con el comando start el cual permita levantar tu aplicación ya que este es el comando que usaran por defecto los servicios que utilizaremos.
En el caso de utilizar express o algún tipo de servidor es recomendable que el puerto que se utiliza para escuchar tiene que estar configurado en una variable de entorno.
Todo el código de nuestro proyectó es necesario que se encuentra en la rama master.

Principalmente nos enfocaremos en tres servicios, los cuales son fáciles de configurar y no es necesario ser un gurú para lograr nuestro objetivo, es importante crear o contar con una cuenta en los servicios que utilizaremos.

🔖 Nota: Otros servicios interesantes son VERCEL y NETTLIFY, considero que seria bueno dedicar un post solo para ellos.

👨🏻‍💻 CodeSandBox

Desde mi punto de vista es uno de los servicios mas populares ya que prácticamente es todo un entorno de desarrollo online ademas de que permite integrar nuestros proyectos con otros servicios, lo primero que procederemos hacer es ir directamente al sitio oficial de CodeSandBox.

📦 Cargando nuestro proyecto

Al contar con el acceso a nuestro dashboard podremos crear un nuevo SandBox y visualizar todos los proyectos con los que estamos trabajando.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Dar click en la opción Create SandBox.
2.- En el modal seleccionaremos Import Project.
3.- En la caja de texto que aparece colocaremos la URL del repositorio.
4.- Podemos seleccionar la opción Copy Link o Import and Fork.
5.- Por ultimo se mostrara la integración de nuestro proyecto.

¡Genial! haste este punto nuestro proyecto se cargo satisfactoriamente. Solo resta configurar el servidor ya que aún no levanta correctamente y esto es por qué no contamos con las variables de entorno las cuales son:

Dichas variables permiten que nuestro desarrollo pueda funcionar correctamente, existe un variable especial la cual es llamada ENV esta nos funciona para detectar desde que servicio se esta generando un nuevo registro en nuestra base de datos. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- En las opciones de lado izquierdo seleccionaremos la opción que esta debajo del engrane.
2.- En las opciones del panel que se muestra seleccionaremos la opción Secret Keys.
3.- En la primera caja de texto que se muestra colocaremos el nombre la variable en la segunda su valor correspondiente.
4.- Daremos click en la opción Add Secret.
5 .- Al crear todas las variables, daremos click en la opción Restart Server.

¡Excelente! nuestro proyecto ya esta disponible online, podemos compartir la url para que terceros puedan revisar nuestra implementación, para finalizar compartimos el resultado conseguido el cual cuenta con dos puntos de entrada los cuales son:

//Listar datos
https://kmbk6.sse.codesandbox.io/

//Crear un nuevo registro
https://kmbk6.sse.codesandbox.io/random

🔖 Nota: Es posible utilizar CodeSandBox sin la necesidad de registrarse pero algunas funciones no estarán disponibles por ejemplo la creación de variables de entorno.

🐠 Glitch

Es un servicio bastante interesante, ya que nos brinda una interacción similar a CodeSandBox. Quizá un poco limitado en comparación a otros servicios y con una interfaz radical, pero poderoso y sencillo de utilizar. Lo primero que procederemos hacer, es ir directamente al sitio oficial de glitch.

📦 Cargando nuestro proyecto

Al contar con el accesos a nuestro perfil podremos crear un nuevo proyecto y visualizar todos los proyectos con los que estamos interactuando.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Dar click en la opción New Project.
2.- En el menú de opciones seleccionaremos Import from GitHub.
3.- En el prompt que aparece colocaremos la Url del repositorio.
4.- Dar click en la opción aceptar.
5.- Por ultimo se iniciara la integración de nuestro proyecto.

¡Genial! haste este punto nuestro proyecto se cargo satisfactoriamente. Al igual como en el caso de CodeSandBox el servidor aún no levanta correctamente y esto es por qué no contamos aun con las variables de entorno las cuales son:

Como ya sabemos estas variables permiten el correcto funcionamiento del proyecto, al igual como en el caso anterior existe una variable especial la cual es llamada ENV. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- En las opciones de lado izquierdo seleccionaremos el file .env.
2.- Seleccionaremos la opción Add a Variable.
3.- En la primera caja de texto colocaremos el nombre de la variable y en la segunda su valor correspondiente.
4.- Al terminar de agregar las variables, seleccionaremos la opción share que se encuentra en el panel izquierdo.
5 .- En el menu seleccionaremos la opción Live App y la opción Copy.
6.- Abrimos una nueva pestaña y pegamos la url.

Excelente! nuestro proyecto ya esta disponible también en Glitch, ya contamos con una url para compartir, para finalizar compartimos el resultado conseguido el cual cuenta con 2 puntos de entrada los cuales son:

//Listar datos
https://treasure-certain-goal.glitch.me
//Crear un nuevo registro
https://treasure-certain-goal.glitch.me/random

🔖 Nota: Glitch tiene la posibilidad de utilizarse sin la necesidad de tener una cuenta pero su funcionalidad es un poco limitada.

👨🏻‍💻Heroku

Es una plataforma la cual facilita crear un deploy ya que solo basta con decirle que lenguaje de backend se está utilizando o qué motor de base de datos se esta utilizando para así solo preocuparnos por el desarrollo, lo primero que realizaremos es ir al sitio oficial de heroku.

📦 Cargando nuestro proyecto

Al contar con el acceso a nuestro dashboard podremos crear nuevas aplicaciones y ver un listado de las que estan disponibles.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Seleccionar la opción new.
2.- Seleccionar la opción Create new App.
3.- En la caja de texto colocaremos el nombre de nuestra app es importante que la caja de texto este en color verde.
4.- Seleccionaremos la Región por defecto podemos dejar la opción seleccionada.
5.- Por seleccionamos la opción Create App.

¡Genial! haste este punto contamos con el espacio listo para poder cargar nuestro proyecto, por lo que procederemos a realizar las configuraciones pertinentes como crear las siguientes variables de entorno:

Como ya sabemos estas variables permiten el correcto funcionamiento del proyecto, al igual que en los casos anteriores existe una variable especial la cual es llamada ENV. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- Seleccionar la opción Settings.
2.- En la nueva pantalla seleccionar Reveal Config Var.
3.- En la primera caja de texto colocaremos el nombre de la variable y en la segunda su valor correspondiente.
4.- Seleccionar la opción add.

Ya contamos con la configuración necesaria para realizar el deploy de nuestro proyecto, para poder realizar esta tarea es necesario conectar GitHub siguiendo los siguientes pasos.

1.- Seleccionar la opción Deploy.
2.- Seleccionar la opción GitHub.
3.- Seleccionar la opción Connect to GitHub.
4.- En el modal que se muestra seleccionar la opción Authorize heroku.
5.- En caso de que aparezca un error basta con recargar.
6.- En las nuevas opciones que aparecen indicaremos en que cuenta o organización esta el repositorio.
7.- Buscamos y seleccionamos el repositorio se mostraran dos nuevas opciones.
8.- Las nuevas opciones permiten seleccionar que rama utilizaremos así como indicar si queremos un Automatic Deploy o Manual Deploy.
9.- Al seleccionar una alguna opción se iniciara el deploy .
10.- Al terminar seleccionaremos la opción view para ver el resultado.

¡Excelente! nuestro proyecto ya esta disponible también en Heroku, ya contamos con una url para compartir, para finalizar compartimos el resultado conseguido al igual que los otros casos esta también cuenta con dos puntos de entrada:

//Listar datos
https://work-shop-deploy.herokuapp.com/
//Crear un nuevo registro
https://work-shop-deploy.herokuapp.com/random

🔖 Nota: Heroku cuenta con una opción de integración continua al esta opción solo esta disponible para Automatic Deploy esta opción puede generar deploy automáticos siempre que detecte un cambio en la rama que estemos utilizando.

📝 Conclusiones

Los tres servicios que revisamos cada uno tienes sus peculiaridades y poderes por ejemplo.

CodeSandBox: Prácticamente es un editor online el caul te permite configurar tu entorno de desarrollo lo que da mucha agilidad al momento de proptotipar un proyecto.
Glitch: Es un editor mas limitado pero desde mi punto de vista es como si trabajaras con Vim, glitch cuenta con una integración de terminal la cual te da mucha flexibilidad al momento de iniciar tu desarrollo.
Heroku: Este es mas un PaaS ya que solo tenemos que preocuparnos por configurar lo mínimo para que nuestro proyecto funcione correctamente.

Desde mi punto de vista no existe un servicio ideal pero sí muchas soluciones las cuales al unirlas pueden darte el resultado deseado, como recomendación es bueno que veas las capacidades de cada uno de los servicios y explotarlos al máximo.

Es importante recordar que los tres servicios al no contar con trafico por un determinado tiempo estos se bajaran temporal mente hasta que sean consultados nuevamente.

Jugando Con MongoDB Atlas y un poco con JavaScript

Jorge Méndez Ortega — Sat, 04 Jul 2020 05:29:03 +0000

Actualmente estoy jugando con algunos servicios en la nube como heroku, netlifly, vercel y MoongoDB Atlas, este ultimo me agrado ya que es muy intuitivo al momento de generar bases de datos, cluster entre otras cosas, su versión free me parece muy completa, por lo cual decide generar una breve guía de como usarlo.

🤔 ¿Que es MongoDB Atlas?

Es un servicio en la nube para bases de datos desarrollado por el equipo de mongoDB, es posible crear bases de datos las cuales son expuestas online lo cual permite conectar nuestras aplicaciones, Atlas se encarga de todos los aspectos de hosting, instalación y actualizaciones, por lo que solo nos encargaremos de las configuraciones básicas, como gestionar accesos, crear bases de datos, crear alertas, etc.

👐 Manos a la obra

El primer paso es crear una cuenta en el sitio de MongoDB Atlas. Al entrar en enlace anterior se mostrar la pagina principal en la que procederemos a seleccionar la opción Sign In.

Dicha opción nos mostrara una pantalla de Login en la que se tienen las siguientes opciones.

Acceder en el caso de tener una cuenta existente.
Acceder con una cuenta de Google.
Sign up la cual permite generar nuestro registro.

🔖 Nota: La opción de login dependerá de las preferencias del lector.

Si el registro se creo correctamente al iniciar sesión podremos ver el panel de administración, en el cual se mostrara el proyecto y cluster por defecto.

Podemos utilizar el botón “Create a New Cluster” pero con esta acción se solicitara un pago.

🚫 Borrando un Cluster

Por cuestiones didácticas procederemos a borrar el cluster y el proyecto creados por defecto al momento de crear nuestra cuenta, para esto seguiremos el flujo siguiente.

🔖 Nota: El proyecto es borrado ya que es la base para poder tener un cluster y por fines didácticos procederemos a borrar todo.

🛠 Creando un Cluster

Al borrar el proyecto y cluster procederemos a crear los propios, como la vez anterior seguiremos el siguiente flujo.

Una de las ventajas de crear el cluster es que podemos indicar a uno de los siguientes proveedores AWS, Google CloudPlatform o Azure, otro punto importante es que nos muestra los tipos de cluster que se pueden crear.

Shared Clusters: Para el desarrollo de aplicaciones pequeñas o para equipos que inician con MongoDB, prácticamente para poder probar el producto.

Dedicated Clusters: Para desarrollos avanzados o entornos de producción.

Dedicated Multi-Region Clusters: Para el desarrollo de aplicaciones de clase mundial que requieren soporte multiregional o una latencia muy baja.

🔖 Nota: Al contar con una cuenta free procederemos a seleccionar la opción Shared Clusters.

⚙️ Configurando Network Access

Al finalizar la creación procederemos a brindar el acceso a ciertas ip’s en pocas palabras generaremos un whitelist, para realizar esta tarea seguiremos el flujo siguiente.

Al generar nuestro WhiteList cómo se puede ver en el flujo anterior se muestran algunas opciones las cuales son.

Add Current IP Address: Con esta opción se agrega la ip publica del equipo con en el que estamos trabajando.

Allow Access From AnyWhere: Esta opción permite agregar la opción de darle acceso a cualquier IP.

Existe otra opción la cual es “This entry is temporary and will be deleted in” la cual permite generar el acceso por un limite de tiempo a cualquiera delas opciones mencionadas anteriormente.

📡 Conectando una Aplicación

Para poder tener accesos al cluster creado tenemos que generar un nuevo usuarios y crear la cadena de conexión, por lo que para esta acción seguiremos el siguiente flujo.

Al generar un nuevo usuario procederemos a indicar cómo realizaremos la conexión para este caso tenemos 3 opciones las cuales son.

Connect with the mongo shell: Permite conectarnos a mongoBD desde la consola del sistema siempre y cuando lo tengamos instalado

Connect your application: Permite generar la cadena de conexión a utilizarla en nuestra aplicación.

Connect using MongoDB Compass: Esta opción permite conectarnos usando la aplicación oficial de atlas.

👨🏻‍💻 Creando la aplicación

Antes de iniciar nuestra aplicación se es necesario contar son una instalación de NodeJS y se recomienda la siguiente estructura de carpetas.

Inicial mente procederemos a crear el package.json en el cual procederemos a a instalar las siguientes dependencias

moongose: Con esta dependencia procederemos a realizar la conexión con *MongoDB Atlas y podremos interactuar con la *Base de Datos.

expressjs: Lo utilizaremos para crear un servidor muy sencillo con el cual podremos ver las respuestas que nos mande Atlas.

nodemon: Se utilizara para que cada vez que generamos un cambio se genere un auto-reload.

🔖 Nota: Los próximos archivos todos serán generados dentro del directorio /src/.

El paso siguiente es crear el archivo schema.js el cual se puede considerar como un mapa de los campos a crear ademas podemos indicar el tipo de dato de cada unos de estos, en pocas palabras es el cuerpo de la colección a crear.

Una colección dentro de mongoDB es el equivalente a las tablas que se manejan en MySql o SqlServer.

Por cuestiones didácticas vamos a crear un JSON llamado fakeData.json en el cual tendremos nombres y apellidos que tomaremos de manera aleatoria para crear registros dentro de MongoDB.

Como paso final hay que generar el index.js en el cual se establecerá la conexión y contara con 2 rutas que nos permitirán consultar la Base de Datos o crear nuevos registros.

En el script anterior la conexión realizada esta envolviendo a la inicialización del servidor esto es para que dicha conexión este disponible al iniciar el server, al crear el servidor se generar dos rutas las cuales son.

Consultar los datos.
https://lr836.sse.codesandbox.io/

Crear un nuevo registro de manera aleatoria, esta ruta como se muestra en el código tiene el ejemplo base de para generar un registro.

https://lr836.sse.codesandbox.io/random

En el caso de que se tenga problemas ejecutando el código se cuenta con esta muestra para probarlo directamente o puede ir a codeSandBox.

📝 Conclusiones

Atlas es una herramienta muy completa y potente ademas esta respaldada por el mismo equipo que creo MongoDB😱, entre otras de sus fortalezas es la seguridad que nos brinda con él control de accesos y creación de usuarios.

La conectividad con nuestra aplicación que generamos no fue compleja fue de los mas sencillo y transparente, com recomendación te sugiero leas la documentación de Mongoose ya que tiene muchas funciones que permiten explotar a MongoDB Atlas.

Jugando con Git y Github (Parte-1)

Jorge Méndez Ortega — Wed, 12 Feb 2020 08:32:58 +0000

La idea de generar este post ayudar a todos aquellos que desean aprender como utilizar Git y **GitHub por lo cual para poder empezar a jugar con estos nuevos juguetes es necesario aprender algunas bases las cuales facilitaran el entendimiento de cómo trabajan.

Actualmente Git y GitHub forman parte importante en el día a día de un desarrollador especialmente cuando se trabaja en un equipo, dichas herramienta son utilizadas mucho en la industria del software, la primera pregunta qué tenemos que hacer es.

🤔 ¿Qué es un sistema de control de versiones?

Es un sistema que controla y organiza todos los cambios realizados en un archivo o conjunto de estos a lo largo del tiempo, de modo que facilita la recuperación de versiones especificas, de una manera mas fácil permite movernos en la linea de tiempo del archivo o conjunto.

Sistema de control de versiones también conocido como VCS del inglés Version Control System.

Este tipo de control es muy común en la industria informática para llevar el control del código fuente desarrollado lo cual da la pauta para los sistemas de control de código.

Sistema de control de versiones también conocido como SCM del inglés Source Code Management.

Fig 1. Ejemplo base de un sistema de control de código.

Como se puede ver en la Fig 1 se muestra el flujo de trabajo de un VCS

Se muestra la línea de tiempo del proyecto en el se marcan las fechas donde se generaron los cambios.
Se muestra el avance del proyecto conforme a la línea de tiempo.
Se muestra la manera en la que se lleva en el control de los cambios, donde se destaca el registro de actividades mediante una breve descripción del cambio y el registro de la actividad realizada.

Para poder llegar a lo que es un sistema de control de versiones como los conocemos hoy en día todo inicio con.

Control de versiones locales

Fig 2. Diagrama del Sistema de control de versiones locales

Como su nombre lo dice las versiones se manejan de manera local y en vez de mantener las versiones como archivos independientes se almacenaban en bases de datos (BullShit😱) por lo que cuando se necesitaba revisar una versión anterior del proyecto se usaba el *VSC *para acceder directamente al archivo, de esta manera solo se tenia una copia del proyecto lo cual elimina la posibilidad de confundir o eliminar versiones.

Hasta este o punto el control de versiones se llevaba en la computadora de cada uno de los desarrolladores por lo que no existía una manera eficiente de compartir código entre ellos.

Control de Versiones Centralizados

Fig 2. Diagrama del Sistema Control de Versiones Centralizados

Este sistema fue una gran evolución ya que proporcionan la facilidad de colaboración de múltiples desarrolladores en un solo proyectó, por lo que los cambios ya no se guardaban de manera local, con esta actualización los cambios se almacenan en un servidor central.

Aunque el avance contra los sistemas de versionado local fue muy grande. los sistemas centralizados trajeron consigo nuevos retos, ¿Cómo trabajaban múltiples usuarios en un mismo archivo al mismo tiempo?, lo cual era muy complejo ya que se presentaba la posibilidad de inhabilitar los cambios de otros, por lo que este tipo de sistema funcionaba muy bien donde el proyecto no sufre cambios de manera constante constantemente.

Hasta este punto el dios digital nos odiaba 🖕🏼.

Control de Versiones Distribuidos

Fig 3. Diagrama del Sistema Control de Versiones Distribuidos

En este punto bajo el diosito digital y dijo ya no existirá un solo repositorio centralizado por lo que cada miembro del equipo contara con una copia local de todo el proyecto, de esta manera se contara con una red distribuida de repositorios.

Al no contar con un repositorio centralizado, cada desarrollador puede trabajar a su propio ritmo y almacenar sus cambios de manera local por lo que al mezclar lo cambios de otros los conflictos que se presentan son menores, como cada desarrollador tiene una copia completa del proyecto los riesgos de caída del servidor, un repositorio dañado.

Si lo se la teoría es muy aburrida en ocaciones pero puede ser buena cuando queremos conseguir un entendimiento completo de lo que esta pasando.

🤯 Git y GitHub diferentes

Fig 4. Git y GitHub no es lo mismo

Si como lo acabas de leer son dos cosas completamente diferentes por lo que es importante entender las principales diferencias de estos.

Git es utilizado para trabajar de manera local pero cuando se desea colaborar con otras personas de manera remota, utilizar una interfaz web o publicar tus proyectos se utiliza Github es un sistema que guarda nuestro proyectó y los cambios de cada una de las versiones, Github es tan popular que es la red social del código(Como FaceBook o Twitter pero para programadores), es una hoja de vida (CV) que de muestra lo que sabes.

👨🏻‍💻 Jugando con la consola

Después de un poco de teoría creo que ya es bueno iniciar con le uso de comandos básicos en Git🙌 por lo que para iniciar seguiremos los pasos siguientes.

Paso 1: Descargar Git e Instalarlo, lo podemos descargar directamente de su sitio web(Descargar Git), para el caso de Windows y Mac se cuenta con un asistente de instalación por lo que no se tiene mayor problema para la instalación, para el caso de Linux se puede utilizar apt-get install git.

Paso 2: Para el caso de Linux y Mac podemos abrir la terminal propia del sistema, en el caso de Windows utilizaremos el GitBash(nos permite usar comandos de linux 🤯) que se instalo al realizar la instalación de git.

Paso 3: Al encontrarnos en la consola iniciaremos escribiremos los siguientes comandos.

Fig 5. Creando la estructura de carpetas

Paso 4: Procederemos a configurar nuestro nombre y email de manera global(para todos los repositorios) con los comandos.

Fig 6. Configurando nuestro nombre y e-mail

🔖 Nota: Si necesitaremos que cada repositorio tenga un nombre o correo diferente solo tenemos que cambiar — global por — local.

Paso 5: Para poder iniciar el uso de Git vasta con que ejecutemos el siguiente comando.

Fig 7. Iniciando nuestro primer repositorio

🔖 Nota: Se creara una carpeta oculta llamada .git esta es la que llevara el control de cambios.

Paso 6: Agregamos algo de contenido nuevo a nuestro repositorio esto lo lograremos utilizando los comandos.

Fig 8. Creamos un archivo

Paso 7: Para ver el estado del repositorio, o lo que es lo mismo un informe de los cambios realizados a archivos/directorios, vasta con que ejecutemos el siguiente comando.

Fig 8. Revisando el estado de nuestros cambios.

El comando anterior nos mostrara la información siguiente.
Rama en la que nos encontramos: Git promueve el uso de ramas, y en este punto nos indica en qué rama estamos.

Cambios que serán publicados: Los archivos que hemos modificado y serán enviados.

Cambios que no serán publicados: Si hemos hecho cambios a en un archivo pero no serán enviados.

Archivos a los que no se les esta haciendo seguimiento (untracked): Son los archivos que se encuentran presentes en el directorio, pero que aun no han sido añadidos a git para hacerles seguimiento. Inicialmente todos los archivos se encuentran de esta manera.

Paso 8: Procederemos a agregar nuestros cambios los cuales pasaran al apartado de los cambios que podrán ser enviados, , vasta con que ejecutemos el siguiente comando.

Fig 9. Preparando cambios que serán enviados.

🔖Nota: git add tiene variantes como
git add . o git add -A : Prepara todos los archivos que serán enviados.
git add ./[nombre]: Prepara solo el archivo que se le indique.

Paso 9: Mandaremos los cambios realizados a nuestro repositorio, vasta con que ejecutemos el siguiente comando.

Fig 10. Creando el primer commit.

🔖 Nota: el comando commit tiene un parámetro(-m) el cual indica que el mensaje que acompañara a los archivos enviados. Si se necesitara que un archivo no se encuentre en la área de espera se puede utilizar el comando git reset HEAD nombre_del_archivo de esta manera el archivo cambiara de posición.

Paso 10: Para poder dar seguimiento a los cambios que han sido enviados, vasta con que ejecutemos el siguiente comando.

Fig 11.Mostrando el listado de logs .

🔖 Nota: Este comando muestra información básica correspondiente al commit enviado.

Hasta este punto contamos con nuestro primer commit en nuestro repositorio local.

🌳 Manejo de Ramas

El uso de ramas es sencillo y poderoso en git, los comando que podemos utilizar son:

Fig 12.Listando ramas .

Fig 13. Creando una rama.

🔄 Combinar ramas

Para combinar una rama con otra, debemos primero pasarnos a la rama destino, y luego ejecutar el comando merge:

Fig 14. Mezclando ramas.

☠️ Eliminar una rama

Para eliminar una rama, existen dos métodos:

Fig 15. Borrando ramas de forma segura.

Fig 16. Borrando ramas.

Hasta este punto tenemos los conceptos básicos del manejo de Git y conocemos ls diferencias que tiene con GitHub ademas conocemos los diferentes tipos de VSC que existieron antes de llegar al control de versiones que conocemos hoy en día, en la segunda parte de este post veremos.

Como clono un repositorio existente.
Como se trabaja con múltiples usuarios.
Como subo mi repositorio a GitHub.

Espero les guste la entrada y recuerda dejar tus comentarios o de ser posible manda un email a jorge.mendez.ortega@gmail, no olvides dejar tus comentarios.

Recomendaciones para el manejo de ramas

Jorge Méndez Ortega — Tue, 12 Nov 2019 21:14:09 +0000

Durante el desarrollo de un proyecto es muy común que el equipo tenga la necesidad de crear branches/ramas para poder trabajar de manera aislada todos los cambios, correcciones y nuevas características del proyecto a realizar esto para no afectar el flujo de trabajo de terceros, esto evitará mezclar código de distintas líneas de desarrollo. Por lo que como se comenta en el post anterior llamado Recomendaciones para generar un buen commit, para el manejo de branches también es recomendable contar con una guía de buenas prácticas.

🚨Recordatorio

Siempre que un branch ya sea utilizado es necesario borrarla del repositorio esto es con la finalidad de contar con un repositorio limpia y evitar tener muchos branches que no sean útiles.

🏗 Estructura

El nombre de una rama se estructura de 2 partes diferentes el tipo y nombre estas partes son divididas usando / como se muestra en nuestra en el ejemplo siguiente.

Ejemplo estructura de una rama (Fig-01*).

Nota: Los nombres de las ramas tienen que ser escritos en lowerCamelCase.

🔖 Type/Tipo

El tipo es la primer parte de la estructura del branch y este puede ser ser de los siguientes tipos.

add: Se generan una nuevas funcionalidades.
fix: Se realizan correción de Bugs.
refactor: Refactorización de funcionalidades y mejoras.
delete: Se eliminan funciones o archivos.
docs: Se generar cambios en la documentación.
hotfix: Esta tipo se utiliza cuando se quiere hacer un contrato con el diablo jaja, practicamente es cuando queremos meter cambios directamente a la rama de producción.

como podemos ver los tipos son similares a los que manejamos en los commits la pequeña diferencia es que estos tiene que ser escritos en minúsculas.

🔖 Nota: los tipos que se recomiendan en este caso pueden varias dependiendo del proyecto.

🗂 Name/Nombre

El nombre es la segunda parte de la estructura del branch y este tiene que ser subjetivo y el nombre de una rama no tiene que ser mayor a 30 caracteres.

🔖 Ejemplo

Tomando en cuentas las reglas anteriores podemos ver que nuestra rama la estructura de nuestro branch quedaría de la manera siguiente.

Estructura final del branch(Fig-02).

💻 Generando ramas

Para poder generar una rama se recomienda siempre se tiene que tomar como base el branch en el cual se tienen que generar los cambios por ejemplo podríamos tomar como base la rama **master **y así nuestra nuevo **branch **contará con los últimos cambios, para crear el nuevo branch se utilizarán los comandos siguientes.

Comandos para crear nuestra nueva rama (Fig-03).

usando los comandos anteriores verificamos que el branch cuente con los últimos cambios, mientras se generan los cambios se recomienda actualizar constantemente el branchesto para estar al día con los cambios para esta tarea podemos utilizar el siguiente comando.

Comando para actualizar el branch (Fig-04)

Asi siempre nuestra rama contará con los últimos cambios que tenga master y también reducirá el riesgo de tener conflictos al momento de mandar los cambios que se realicen.

🔖Nota: Al generar una nueva rama se recomienda no mezclarla con otros desarrollos.

🗞Extras

Cuando generamos un nuevo repositorio es recomendable contar con ciertas ramas creadas por defecto las cuales pueden ser.

Develop : Esta rama es utilizada por el equipo de desarrollo principalmente para probar todos los nuevos desarrollos o refactors grandes, prácticamente es nuestro parque de diversiones.
Staging : Esta rama es utilizada para que el equipo encargado de realizar el QAse encargue de generar todas las pruebas pertinentes que correspondan a nuevos desarrollos y correcciones, en ocasiones los cambios que pasan a esta rama pueden provenir de la rama develop y esto puede pasar cuando el equipo de desarrollo terminó de realizar pruebas en el branch.
UAT : También conocido como User Acceptance Tests, en este punto el QA realizado en Staging a finalizado satisfactoriamente y los cambios están listo para que los usuarios finales puedan dar su Vo Bo y dependiendo de su Re-Test validar si los cambios pasan a la rama master(producción), o se tiene que realizar alguna corrección.
Master : Haste este punto todos los cambios y correcciones se encuentran listos para ser mandados a un ambiente de producción.

📓 Nota: Es muy común que las ramas de que utilizamos en el repositorio del proyecto cuenten con integración continua, la rama develop puede ser opcional esto depende del modo de trabajo de cada equipo.

😺 Conclusión

Contar con estándares y reglas dentro de nuestro equipo de trabajo al momento de manejar branches es algo que nos puede evitar muchos dolores de cabeza, las recomendaciones mostradas anteriormente pueden ser modificadas ya que la intención es brindar una base para poder generar nuestras propias reglas.

Recomendaciones para generar un buen commit

Jorge Méndez Ortega — Mon, 04 Nov 2019 06:18:34 +0000

Durante el desarrollo de un proyecto es muy recomendable contar con una guía de buenas prácticas la cual nos facilite redactar commits que sean claros y puedan ayudar a cualquier miembro del equipo, esto para evitar que a medida que un proyecto se prolonga, los mensajes de los commits de mi git se vuelven cada vez menos informativos y podemos encontrar mensajes como **ya funciona x parte* los cuales en ocasiones no son ni descriptivos y peor aún en ocasiones ni el *responsable** recuerda o sabe lo que generó😒.

Por lo que para poder llevar de la mejor forma un proyecto es recomendable que todos los miembros del equipo adopten un estándar que les permite la redacción de commits, con base a mi experiencia comparto las siguientes recomendaciones.

🚧 Estructura

El mensaje de un commit se divide en 3 partes diferentes el **título, **el cuerpo* y pie* como se muestra en el siguiente ejemplo.

Como se puede apreciar en la imagen anterior el título se conforma de dos partes las cuales son el tipo y del asunto del mensaje.

📓 Type/ Tipo

El tipo es contenido en el título y puede ser de alguno de los siguientes casos:

*➕ADD *: Se genera una nueva funcionalidad.

*🛠 FIX *: Se soluciona un bug.

♻️ REFACTOR : Refactorización y mejoras.

☠️ DELETE : Se eliminan funciones o archivos.

📚 DOCS : Se generar cambios en la documentación.

Es importante notar que el Type se escribe en mayúsculas y se puede utilizar emoji el cual es opcional en mi caso los utilizo ya que me facilita de primera vista saber el tipo de commit.

🔖 Nota: los tipos que se recomiendan en este caso pueden varias dependiendo del proyecto.

✉️ Subject/Asunto

El asunto no debe contener más de 50 caracteres, debe iniciar con una letra mayúscula y no terminar con un punto. Debemos ser imperativos al momento de redactar nuestro commit, es decir, hay que ser objetivos y muy importante tenemos que acostumbrarnos a escribirlos en Inglés esto es una de las mejores prácticas que podemos tener.

📝 Body/Cuerpo

Se utiliza para explicar el ¿Qué? y ¿Por qué? del commit y no el ¿Cómo?, Al escribir el cuerpo, requerimos de una línea en blanco entre el título y el cuerpo, además debemos limitar la longitud de cada línea a no más de 72 caracteres.

👣 Footer/Pie

Esta parte es muy importante ya que es donde se coloca el seguimiento de los **issues *o** tickets ***relacionados con los cambios generados.

❗️Ejemplo

Tomando en cuenta las recomendaciones mencionadas la estructura de nuestro commit se vería de la siguiente manera.

🔖 Nota: Para poder referencias un issue en el commit siempre se tiene que colocar # seguida del número de issue.

🤩Extra

Se recomienda generar commit por cambio este puede tener de uno a varios archivos lo recomendable es no tener demasiados archivos relacionados en un solo commit esto facilita la visibilidad al momento de realizar el **Code Review *ya que se puede realizar revisión por *commit.**

😺 Conclusión

Contar con estándares y reglas dentro de nuestro equipo de trabajo al momento de redactar un **commit* *es algo que nos puede evitar muchos dolores de cabeza al tratar de identificar o dar seguimiento a los cambios generados por el equipo, las recomendaciones mostradas anteriormente pueden ser modificadas ya que la intención es brindar una base para poder generar nuestras propias reglas.

Expresiones Regulares

Jorge Méndez Ortega — Sun, 18 Aug 2019 18:33:42 +0000

Como desarrollador es muy común trabajar con cadenas de texto, lo cual inicialmente puede parecer algo muy sencillo, pero conforme las cadenas se vuelven más complejas es inevitable ignorar el uso de las «evil regular expressions 😈» (muahahaha). Esto ya no suena tan sencillo, ya que para este punto un problema se convierte en 2, además de resultar un poco frustrante.

Tranquilo, antes de iniciar, tírate al suelo y repite después de mi:

😿 Las expresiones regulares son buenas, no son el diablo…

🙀 Las expresiones regulares son buenas,no son el diablo…

😸 Las expresiones regulares son buenas, no son el diablo…

Tranquilo, respira hondo y exhala… listo. El momento feo ya pasó, la pregunta que te puedes estar haciendo es:

### ¿En verdad las «evil regular expressions 😈» son buenas?

A lo que te podría contestar, claro que son muy buenas 😇 y poderosas, ya que con la combinación correcta de caracteres podemos realizar desde una búsqueda muy sencilla, hasta una muy compleja; en pocas palabras tenemos la navaja suiza para el manejo de cadenas.

📚 Un poco de historia

Antes de entrar en materia es bueno conocer un poco de historia sobre la primer aparición de expresiones regulares en el campo de la computación las cuales surgen nada más y nada menos que dentro de un editor de líneas llamado Ed, creado por el ingeniero Ken Thompson, quién entonces se encontraba trabajando en los laboratorios de Bell Labs allá por 1969.

Aquel editor de líneas apareció por primera vez como una utilidad para el sistema operativo de UNIX y era el encargado de suplir las labores para editar archivos. Similar a como se hace en la actualidad, la instrucción que había que escribir para que Edrealizará una búsqueda de texto era algo parecido a.

En el comando utilizado por Ed se colocaba al inicio g(global) y p(print) al final, ambas letras son conocidas como modificadores y lo que queda en la parte central es la combinación de caracteres que conforman las expresión regular.

En este punto surge algo muy interesante ya que la instrucción anterior da como resultado la frase “Global Regular Expression Print” cuya abreviatura conforma la palabra grep, a partir de esta característica de Ed nace el comando grep(comando presente en todos los S.O basados en UNIX) el cual nos permite realizar búsquedas a nivel del sistema de archivos.

Actualmente muchos lenguajes de programación modernos cuentan con el soporte necesario para el uso de expresiones regulares aunque la sintaxis puede cambiar para cada lenguaje, en esencia podremos hacer soluciones similares para cada uno, con todo lo anterior iniciaremos con lo divertido todos los ejemplos mostrados serán escritos en JS.

🛠️ Estructura

Antes de iniciar a jugar con las **«*evil regular expressions *😈» **y descubrir que solo son incomprendidas iniciaremos conociendo la estructura básica.

Como podemos ver las estructura es muy sencilla solo solicita 2 parámetros de momento no tomaremos en cuenta el parámetro de los modificadores ya que iniciaremos con ejemplos básicos y conforme avancemos subiremos el nivel de complejidad, como primer ejemplo realizaremos la búsqueda de caracteres.

Hasta este punto el primer ejemplo no es nada sorprendente ya que esto lo puede realizar cualquier buscador, si lo vemos un poco más a fondo podemos ver que la búsqueda está recibiendo un patrón el cual se traduce a una *expresión regular *en su expresión básica.

📗 Metacaracteres

Los «metacaracteres» o también conocidos como clases son una alternativa para poder representar grupos enteros de caracteres que se encuentren relacionados entre sí de manera semántica, para poder utilizarlos es necesario el uso de backslash seguido del nombre de la clase en minúsculas.

📓 Nota: Cuando el nombre del metacaracter se escribe en mayúsculas se considera como una negación por lo que su comportamiento será diferente a lo habitual.

Tomando en cuenta la sintaxis y la nota anterior podríamos iniciar con la evangelización de **«*evil regular expressions *😈» **para lo que iniciaremos utilizando las reglas siguientes.

💡Recordatorio: Todos los ejemplos utilizan el modificador “g” el cual permite buscar de manera global coincidencias dentro de una cadena, está opción se utiliza con fines demostrativos ya que cada metacaracter solo tomara un solo carácter.

🔖 metacaracter \w

Realiza una búsqueda de caracteres alfanuméricos es importante mencionar que también toma el underscore.

La clase «\w» cuenta con su equivalente ya consigue el mismo resultado.

El metacaracter «\w» cuenta con su variante de negación que es «\W» la cual permite buscar todo aquello que sea diferente a caracteres alfanuméricos y al underscore.

🔖 metacaracter \d

Permite realizar la búsqueda exclusiva de caracteres numéricos.

El metacaracter «\d» también cuenta con su equivalente ya que consigue el mismo resultado.

El metacaracter «\d» también cuenta con su variante de negación que es «\D» la cual permite buscar todo aquello que sea diferente a caracteres* numéricos.*

🔖 metacaracter \s

Permite realizar la búsqueda de los espacios en blanco que existen dentro de una cadena.

El metacaracter «\s» también cuenta con su variante de negación que es «\S» la cual permite buscar todo aquello que sea diferente a espacios en blanco

🔖 metacaracter .

Este es uno de los más especiales ya que podemos hacerlo coincidir con cualquier carácter que se nos ocurra, con excepción de un salto de línea.

Muy interesante las «_evil regular expressions 😈»ya no parecen tan maléficas (mmm muy interesante creo que me estoy enamorando 😍). Hasta este punto podemos decir que estamos en el camino del «Dios Digital»por lo que procederemos a realizar nuestra primera plegaria(ejemplo).

🤩 Extra

para el caso de «\d y \w» cuentan con patrones equivalentes estos patrones cuentan con una similitud muy curiosa la cual es el uso de «[]»(mmm muy interesante) los cuales facilitan una gama de posibilidades.

Rango de dígitos [0–9]
Rango de letras [a-zA-Z]
Listado de caracteres [\-]*

Como podemos ver en el ejemplo se utilizan caracteres especiales los cuales se escapan utilizando el siempre confiable backslash.

📕 Ejemplo

Para este ejemplo realizaremos una combinación de los metacaracteres que ya explicamos con anterioridad, el reto es realizar una búsqueda de un número telefónico dentro de un párrafo, el numero a buscar es «(55–30–80 77–82)» seria muy interesante que intentaras dar tu propia solución para lo cual te recomiendo el sitio siguiente RegEx .

]

📓Nota : Si quieres realizar cambios sobre la solución propuesta puedes hacerlo en el siguiente link plegaria.

Como se muestra en el ejemplo anterior se utiliza el uso combinado de metacaracteres para dar forma a la primera plegaria realizada hacia el «Dios Digital»🙌 (la solución puede variar dependiendo de la locura del lector).

📗 Contadores

Los «contadores» o también conocidos como *cuantificadores *permiten especificar el número de apariciones que puede tener un carácter o patrón dentro de una expresión regular, la sintaxis a utilizar es.

Tomando en cuenta la sintaxis mostrada podemos ver de primera vista que se utiliza una combinación entre metacaracteres y un contador, hasta este punto solo nos importa lo que está entre “{}“.

Cota Inferior: Permite indicar el número mínimo de apariciones de un carácter o patrón.

Cota Superior: Permite indicar el número máximo de apariciones de un carácter o patrón, esta cota trabaja en conjunto con la cota superior lo cual se convierte en un rango de posibles apariciones.

Con lo anterior establecido podemos seguir por el camino de la salvación y seguir en con la evangelización de «evil regular expressions 😈», para entender el uso de contadores es necesario comprender las siguientes reglas.

🔖 Contador {x}

Este opción es la forma más básica ya que solo se utiliza la *cota inferior *esta variante es muy válida en algunos lenguajes de programación y en otros casos no ya que es obligatorio colocar las dos cotas.

📓 Nota: Las dos opciones son válidas pero como somos muy buenos programadores siempre utilizaremos la opción de la derecha 😇 y esto es por que por buenas prácticas siempre es necesario declarar la «cota superior*»*.

🔖 Contador {x,}

Esta opción permite indicar un rango infinito de incidencias las cuales iniciarán desde el número que se indique en la cota inferior.

Como se muestra en el ejemplo anterior al utilizar la sintaxis «{x,}» no le importa las incidencias que aparezcan después de cumplir la condición de la cota inferior.

🔖 Contador {x ,y}

Esta opción utiliza la cota inferior(x) como la cota superior(y) esto permite indicar un rango de apariciones de un carácter o patrón cual se puede traducir como «entre “x” y “y” veces» esta notación es la más común que se maneja la comunidad.

como se muestra en el ejemplo anterior podemos se utilizan las 2 cotas las cuales permiten establecer el rango de posibles apariciones de un carácter o patrón, si esto lo comparamos con la variante anterior se puede ver que en este caso si se cuenta con una limitante.

🤩 Extra

Dentro de los contadores también existen caracteres que facilitan el conteo de las incidencias estos también se conocen como delimitadores.

Delimitador: secuencia de uno o más caracteres utilizados para especificar el límite entre regiones independientes e independientes en texto sin formato u otras secuencias de datos.

? : Puede estar o no estar

+ : Puede estar una vez o muchas veces

**** : Puede no estar o estar muchas veces***

(): Conocido como paréntesis de captura, permite recordar una expresión regular, la funcionalidad es muy parecida a los [] solo que en este caso el rango se sustituye por una expresión regular.

📕 Ejemplo

Para este ejemplo realizaremos la misma práctica que se realizó en el apartado de «metacaracteres» pero en este caso utilizaremos «contadores»,
como recordamos el ejemplo anterior consiste en la búsqueda de un número telefónico«(55–30–80 77–82)», seria muy interesante ***que intentaras dar tu propia solución para lo cual te recomiendo el sitio siguiente RegEx .

📓Nota : Si quieres realizar cambios sobre la solución propuesta puedes hacerlo en el siguiente link plegaria.

Como se muestra en el ejemplo anterior ya estamos aplicando los evangelios aprendidos, lo cual nos permitirá crear una plegaria mas potente la cual satisfacerá al «Dios Digital»🙌 (la solución puede variar dependiendo de la locura del lector).

📗 Modificadores

Con anterioridad los mencionamos y utilizamos en algunos de los ejemplos mostrados, los modificadores nos permiten redefinir los términos de búsqueda de una expresión ya que en ocasiones las búsquedas son sensibles a mayúsculas, terminan al encontrar la primera coincidencia etc, por lo que para poder modificar este comportamiento podemos utilizar la sintaxis.

Lo se es la misma imagen del inicio pero hasta este punto hace sentido ya que estamos respetando la sintaxis que se necesita para utilizar los modificadores junto con nuestra expresión regular.

📓 Nota : Los modificadores son opcionales, ademas de que son acomulables esto quiere decir que podemos utilizar más de uno al mismo tiempo.

🔖 Modificador i

Este modificador se conoce como «Búsqueda insensible a mayúsculas», este realiza una búsqueda sin importar el uso de mayúsculas.

Como se muestra en ejemplo cuando se utiliza el modificador i la selección inicia tomando la letra mayúsculas, en caso contrario iniciará la búsqueda desde las letras minúsculas.

🔖 Modificador g

Es modificador se conoce como «Búsqueda global» (utilizado en los ejemplos), este realiza una búsqueda el mayor número de coincidencias no se detiene en el primer resultado que encuentra.

Como se muestra en el ejemplo al utilizar el modificador g la búsqueda se realiza en todo el texto del párrafo en el caso de no colocar el modificador la búsqueda se queda en la primera incidencia que encuentra.

🔖 Modificador m

Es modificador se conoce como «Búsqueda multilínea», este realiza una búsqueda de manera individual en cada renglón de un texto, este modificador trabaja en conjunto con los metacaracteres

^: Se utiliza para indicar el inicio de una línea.

$: Se utiliza para indicar el final de una línea

Dichos caracteres permiten indicar la posición de la línea donde debe hacerse la búsqueda otra de las ventajas es que permite realizar el match de líneas completas.

Como se muestra en el ejemplo al utilizar el* modificador m *la búsqueda se realiza línea por línea por lo que solo tomo como resultado la incidencia que cumple con la petición a buscar.

🤩 Extra

En el caso de modificador multilínea se utilizaron los metacaracteres ^,$ de los cuales el carácter ^ cuenta con una variante la cual sirve para realizar una negación la sintaxis es la siguiente.

Como se muestra en el ejemplo para poder utilizar la negación es necesario utilizar «[]» en los cuales se indica los caracteres a negar.

Como se muestra en el ejemplo anterior al momento de que su utiliza ^ dentro de los corchetes automáticamente ignora las letras y toma los valores restantes.

📕 Ejemplo

Para este ejemplo realizaremos la misma práctica que se realizó en el apartado de «contadores» pero en este caso utilizaremos «modificadores»,
como recordamos el ejemplo anterior consiste en la búsqueda de un número telefónico«(55–30–80 77–82)», seria muy interesante que intentaras dar tu propia solución para lo cual te recomiendo el sitio siguiente RegEx .

📓Nota : Si quieres realizar cambios sobre la solución propuesta puedes hacerlo en el siguiente link plegaria.

😼 Conclusión

Como se muestra en los ejemplos mostrados durante toda la entrada podemos decir que ya estamos evangelizados por lo que toda cadena que necesitemos utilizar las «evil regular expressions *😈» **podremos aplicarles un exorcismo gracias al *«Dios Digital» 🙌 ya que contamos con el conocimiento para crear las plegarias, es importante ver que desde este momento cuando utilicemos las expresiones regulares ya no tendremos 2 problemas lo que tendremos desde este momento es un solución robusta y duradera.

👍 Las expresiones regulares si son mis amigas.

🙌 Las expresiones regulares si son mis amigas.

🤟 Las expresiones regulares si son mis amigas.

Gracias por darte una vuelta por esta entrada. Todo comentario es bien recibido en @Konami12Jorge, no olvides ayudar con 👏 y compartir este material si consideras que alguien más necesita ser evangelizado.

Patrones de diseño en JavaScript

Jorge Méndez Ortega — Fri, 16 Aug 2019 22:34:04 +0000

En este post, se mostraran algunas de las implementaciones de JavaScript y se explicarán algunos de sus patrones de diseño (para todos los ejemplo realizados se utilizará ecma2016 o 262).

En la actualidad es muy común que como desarrolladores nos preguntemos cuál es una de las mejores formas de implementar un flujo de trabajo utilizando JavaScript, realmente no existe una respuesta concreta a esta pregunta, ya que cada aplicación tiene sus propias necesidades individuales por lo que es necesario pensar cuando consideramos que un patrón nos pueda ofrecer una solución ideal, teniendo lo anterior en cuenta realicé la siguiente pregunta.

🤔 ¿Qué es un patrón de diseño?

Es la base para la búsqueda de soluciones a problemas muy comunes en el desarrollo de aplicativos y otros ámbitos referentes al diseño de interacciones o interfaces. (Fuente wikipedia).

Se podría resumir de una manera más sencilla como "una manera de resolver una problemática", un patrón de diseño tiene que cumplir por lo menos con los siguientes objetivos.

Estandarizar el lenguaje entre desarrolladores.
Evitar perder tiempo en soluciones a problemas ya resueltos o conocidos.
Crear código que se pueda reutilizar.

Manos a la obra

Después de un poco de teoría empecemos con lo divertido, hablemos de código 😁. Existen varios patrones de diseño en este caso solo hablaremos de 3 patrones.

Patrón Object Literals

Tal cual su nombre lo dice este patrón se conforma con la creación de un objeto que prácticamente es un JSON. Una de las bondades de este patrón es que nos permite escribir el código de una manera organizada y no se corrompe el scope(alcance) global con nombres innecesarios, lo cual es una muy buena práctica sobre todo para los proyectos muy grandes.

Como se comenta al principio la notación de este patrón es muy similar a la construcción de un JSON, ya que cuenta con identificadores que permite el acceso al contenido de cada uno de ellos.

// Se inicia la declaracion del patron ObjectLiteral
var MyObjectLiteral = {
    suma: function(valor_a, valor_b) {
        let resultado = valor_a + valor_b;
        console.log("EL resultado de "+ valor_a +"+"+ valor_b +" = "+ resultado);
    },
    resta: function(valor_a, valor_b) {
        let resultado = valor_a - valor_b;
        console.log("EL resultado de"+ valor_a +"-"+ valor_b +" = "+ resultado);
    },
};

// invocando a la funcion suma
MyObjectLiteral.suma(10, 90);
// invocando a la funcion resta
MyObjectLiteral.resta(90, 30);

Como podemos ver en el ejemplo anterior tenemos el ejemplo base del patrón, 😖hey un momento se supone que los ejemplos se escribirían con las nuevas mejoras que nos brinda EcmaScript, tomando en cuenta el comentario realizaremos las mejoras para que nuestro código se vea de la manera siguiente.

// Se inicia la declaracion del patron ObjectLiteral
let MyObjectLiteral = {
    suma(valor_a, valor_b) {
        let resultado = valor_a + valor_b;
        console.log(`EL resultado de ${valor_a} + ${valor_b} = ${resultado}`);
    },
    resta(valor_a, valor_b) {
        let resultado = valor_a - valor_b;
        console.log(`EL resultado de ${valor_a} - ${valor_b} = ${resultado}`);
    },
};

// Destructuración
const { suma, resta } = MyObjectLiteral;
// invocando a la funcion suma
suma(10, 90);
// invocando a la funcion resta
resta(90, 30);

🤩Genial nuestro código ya tiene muchas de las mejoras que ofrece JavaScript entre las mejoras que encontramos son.

Tomando en cuento lo anterior los ejemplo siguientes utilizaran las nuevas mejoras de JavaScript, es importante mencionar que el patrón _Object Literals es la base para el siguiente patrón, ya que lo utilizaremos para el manejo de la lógica.

Patrón Module

Para poder comprender este patrón es necesario entender el siguiente concepto de esta función.

// Módulo anónimo
(() => console.log("Me ejecuto de manera inmediata . . . . 😬"))();

Ese tipo de declaración se conoce como IIFE (Immediately-Invoked-Function-Expressions), y como su nombre lo dice es una función que se ejecuta de manera inmediata. Esta función crea un nuevo scope y genera "privacidad", sin embargo JavaScript no maneja el concepto de "privacidad", pero al generar un nuevo scope podemos simularlo, esto se logra envolviendo toda la lógica del aplicativo dentro de un contenedor. La idea es solo retornar las partes que nosotros necesitamos, y dejar las otras partes del código fuera del scope global.

Después de crear el nuevo scope, necesitaremos un namespace para tener acceso al código que el módulo anónimo retorne.

NameSpace : Variable con la que se genera la referencia a nuestro módulo anónimo.

// Modulo anónimo
const MyModule = (() => "Me ejecuto de manera inmediata . . . . 😬")();
// Ejecutamos el módulo anónimo
console.log(MyModule);

Hasta este momento podemos tener acceso a lo que retorne el módulo anónimo.

Con anterioridad se habló de "privacidad" dentro de este patrón, para poder mostrar este concepto funcionando analizaremos el siguiente ejemplo.

// Modulo anónimo
const MyModule = (() => {
    // generamos el objeto que tendra todas las funciones publicas
    let publicFunction = {};
    // esta variable es privada
    let total = 0;

    //=========================================//
    // Metodos Privados                        //
    //=========================================//

    privateFunction = () => total * 1000;

    //=========================================//
    // Metodos Publicos                        //
    //=========================================//

    publicFunction.suma = (valor_a, valor_b) => {
        const SUMA = valor_a + valor_b;
        total += SUMA;
        console.log(`El resultado de la suma es = ${SUMA}`);
    };

    // Retornamos nuestras funciones publicas
    return publicFunction;
})();

// Ejecutando nuestro metodo publico
MyModule.suma(100, 400); // el resultado es 500

// Intentando acceder a nuestra funcion privada
MyModule.privateFunction(); // esto nos manda un error

Como se muestra en el ejemplo generamos un módulo el cual nos permite realizar una suma sin embargo a simple vista podemos ver un código común y corriente, lo interesante es que ya se está manejando el concepto de "privacidad", y no podemos tener acceso al método privateFunction, pero si al método suma

Esto se debe a que solo estamos retornando todo lo que contenga la variable publicFunction y lo que no se encuentre dentro de ésta será privado por lo que solo se tendrá acceso dentro del scope de nuestro módulo 🙀😺.

La pregunta que te puedes estar realizando hasta este momento es ¿Cómo consulto la respuesta de privateFunction?, para esto tendríamos que generar una función pública que obtenga el resultado que retorna "privateFunction", como se muestra a continuación.

// Modulo anónimo
const MyModule = (() => {
    // generamos el objeto que tendra todas las funciones publicas
    let publicFunction = {};
    // esta variable es privada
    let total = 0;

    //=========================================//
    // Metodos Privados                        //
    //=========================================//

    privateFunction = () => total * 1000;

    //=========================================//
    // Metodos Publicos                        //
    //=========================================//

    publicFunction.suma = (valor_a, valor_b) => {
        const SUMA = valor_a + valor_b;
        total += SUMA;
        console.log(`El resultado de la suma es = ${SUMA}`);
    };

    publicFunction.getPrivateFunction = () => console.log(`Valor de privateFunction => ${privateFunction()}`);

    // Retornamos nuestras funciones publicas
    return publicFunction;
})();

// Ejecutando nuestro metodo publico
MyModule.suma(100, 400); // el resultado es 500

// Consiguiendo el valor de private function
MyModule.getPrivateFunction(); // esto nos regresa 500000

// Intentando acceder a nuestra funcion privada
MyModule.privateFunction(); // esto nos manda un error

Podemos ver que este patrón nos permite manipular el concepto de "privacidad", el cual resulta muy útil cuando no queremos que toda la funcionalidad del aplicativo esté expuesta.

Existen diversas maneras de poder escribir el código del patrón module, algunas de ellas se muestran en el siguiente ejemplo.

Nota : en este patrón es común ver que todos los métodos privados cuentan con el prefijo _. Tomando en cuenta la recomendación anterior nuestro código de ejemplo quedaría de la manera siguiente.

// Modulo anónimo
const MyModule = (() => {
    // generamos el objeto que tendra todas las funciones publicas
    let publicFunction = {};
    // esta variable es privada
    let _total = 0;

    //=========================================//
    // Metodos Privados                        //
    //=========================================//

    _privateFunction = () => _total * 1000;

    //=========================================//
    // Metodos Publicos                        //
    //=========================================//

    publicFunction.suma = (valor_a, valor_b) => {
        const SUMA = valor_a + valor_b;
        _total += SUMA;
        console.log(`El resultado de la suma es = ${SUMA}`);
    };

    publicFunction.getPrivateFunction = () => console.log(`Valor de privateFunction => ${_privateFunction()}`);

    // Retornamos nuestras funciones publicas
    return publicFunction;
})();

// Ejecutando nuestro metodo publico
MyModule.suma(100, 400); // el resultado es 500

// Consiguiendo el valor de private function
MyModule.getPrivateFunction(); // esto nos regresa 500000

// Intentando acceder a nuestra funcion privada
MyModule.privateFunction(); // esto nos manda un error

Patrón Prototype

Este patrón de diseño tiene como finalidad crear nuevos objetos duplicándolos, clonando una instancia creada previamente, en resumen se podría decir que el uso de este patrón es lo más cercano a POO (Programación Orientada a Objetos), con los nuevas funciones de EcmaScript esto puede armarce usando class, extends, etc.

Otra de las características es que todos los objetos en JavaScript cuentan con la propiedad proto, lo cual facilita crear nuevas funciones para clases ya existentes, prácticamente este patrón es la onda jejeje.

Para poder comprender mejor este patrón vamos a crear un ejemplo usando prototype y otro utilizando las nuevas funciones de EcmaScript.

Paso 1:

Creando la clase Persona usando prototype y Class

// Creamos la clase usando prototype

/**
 * Constructor
*/
function Persona(nombre, apellido) {
    this.apellido = apellido;
    this.nombre = nombre;
}

/**
 * Permite obtener el apellido
 *
 * @return void.
 */
Persona.prototype.getApellido = function() {
    console.log(`Mi appelido es ${this.apellido}`);
}; 

/**
 * Permite obtener el Nombre
 *
 * @return void.
 */
Persona.prototype.getNombre = function() {
    console.log(`Mi Nombre es ${this.nombre}`);
};

// Generamos la instancia de la clase
const persona = new Persona("Clark", "Kent");
// invocamos los metodos
persona.getNombre(); // Mi nombre es Kent
persona.getApellido(); // Mi apellido es Clarck

// ========================================================================= //

// Creando la clase usando la palabra reservada class

class Persona {
    /**
     * Constructor
    */
    constructor(){}

    /**
     * Permite obtener el apellido
     *
     * @return void.
     */
    getApellido() {
        console.log(`Mi appelido es ${this.apellido}`);
    }
    /**
     * Permite obtener el Nombre
     *
     * @return void.
     */
    getNombre() {
        console.log(`Mi Nombre es ${this.nombre}`);
    }
}

// Generamos la instancia de la clase
const persona = new Persona("Clark", "Kent");
// invocamos los metodos
persona.getNombre(); // Mi nombre es Kent
persona.getApellido(); // Mi apellido es Clarck

Paso 2:

Para el manejo de la herencia en EmacScript 2016 ya se puede utilizar extends, en versiones anteriores la herencia se manejaba de una manera más compleja.

// Creamos la clase y una herencia usando prototype 

/**
 * Constructor
*/
function PersonaUsandoPrototype(nombre, apellido) {
    this.apellido = apellido;
    this.nombre = nombre;
}

/**
 * Permite obtener el apellido
 *
 * @return void.
 */
PersonaUsandoPrototype.prototype.getApellido = function() {
    console.log(`Mi appelido es ${this.apellido}`);
}; 

/**
 * Permite obtener el Nombre
 *
 * @return void.
 */
PersonaUsandoPrototype.prototype.getNombre = function() {
    console.log(`Mi Nombre es ${this.nombre}`);
};

// Generando herencia

/**
 * Constructor
*/
function SuperHeroUsandoPrototype(nombre, apellido, powers) {
    // Se genera el llamado al constructor de la clase persona
    PersonaUsandoPrototype.call(this, nombre, apellido);
    this.powers = powers;
}

// generamos la herencia
SuperHeroUsandoPrototype.prototype = Object.create(PersonaUsandoPrototype.prototype);
/** 
 * Permite comnseguir los datos de nuestro heroe
 *
 * return void.
 */
SuperHeroUsandoPrototype.prototype.getSuperHero = function() {
    // invocamos los metodos de las clase person
    this.getNombre();
    this.getApellido();
    console.log(`Mi super poder es ${this.powers}`);
};

// Generamos la instancia de la clase
const HERO_PROTO = new SuperHeroUsandoPrototype("Jorge", "Mendez", "Programar como Loco 🤪");
// invocamos los métodos
HERO_PROTO.getSuperHero();
// Mi nombre es Jorge
// Mi apellido es Mendez
// Mi super poder es Programar como Loco 🤪

// ========================================================================= //

// Creando la clase y herencias utilizando las class y extends

class Persona {
    /**
     * Constructor
    */
    constructor(nombre, apellido) {
        this.nombre = nombre;
        this.apellido = apellido;
    }

    /**
     * Permite obtener el apellido
     *
     * @return void.
     */
    getApellido() {
        console.log(`Mi appelido es ${this.apellido}`);
    }
    /**
     * Permite obtener el Nombre
     *
     * @return void.
     */
    getNombre() {
        console.log(`Mi Nombre es ${this.nombre}`);
    }
}

// Generando la herencia

class SuperHero extends Persona {
    /**
     * Constructor
    */  
    constructor(nombre, apellido, powers) {
        // llamando al constructor de la clase persona
        super(nombre, apellido);
        this.powers  = powers;
    }
    /** 
     * Permite comnseguir los datos de nuestro heroe
     *
     * return void.
     */
    getSuperHero() {
        // invocamos los metodos de las clase person
        this.getNombre();
        this.getApellido();
        console.log(`Mi super poder es ${this.powers}`);
    };
}

// Generamos la instancia de la clase
const heroe = new SuperHero("Jorge", "Mendez", "Programar como Loco 🤪");

heroe.getSuperHero(); 
// Mi nombre es Jorge
// Mi apellido es Mendez
// Mi super poder es Programar como Loco 🤪

El manejo del patrón prototype es era lo más cercano a POO actualmente con las mejoras que a tenido JavaScript ya contamos con un POO mas robusto, pero si recuerdan anteriormente comentamos que todos los objetos de JavaScript cuentan con la propiedad proto, por lo que podríamos agregar nuevas funcionalidades a objetos ya establecidos, por ejemplo podríamos crear una nueva función para el Objeto String.

String.prototype.cleanString = function() {
    const STRING = this.toLowerCase().split("");
    const SPECIAL = {
        "á" : "a", "é" : "e", "í" : "i",
        "ó" : "o", "ú" : "u", "ñ" : "n",
    };
    let request = STRING.reduce((newString, item) => {
        let char = SPECIAL[item] || item;
        const ASCII = char.charCodeAt();
        let request = (ASCII === 32 || (ASCII >= 48 && ASCII <= 57) || (ASCII >= 97 && ASCII <= 122)) ? char : "";
        return `${newString}${request}`;
    }, "");
    request = request.split(" ")
        .filter(Boolean)
        .join("-")
    return request;
};

const CLEAN = "Jorge Méndez Ortega ^$#%#$%^#%$&*%&^&".cleanString();
console.log(CLEAN); // jorge-mendez-ortega

Conclusión

Los patrones de diseño son un camino para solucionar una problemática de maneras distintas, pero siempre obtendremos una solución que se podrá adaptar a nuestro aplicativo. Se podría decir que para construir nuestro aplicativo no existe un camino correcto, pero sí un patrón que nos facilite acercarnos al camino que buscamos.

DEV Community: Jorge Méndez Ortega

De POO a SOLID explicado con Pokémon - Los cinco principios de SOLID

GUÍA PARA ENTENDER LOS CINCO PRINCIPIOS DE SOLID.

JavaScript — Los cinco principios de SOLID

Pero, 🤔 ¿Qué son los principios de SOLID?

📕S: Single Responsability Principle / Principio de Responsabilidad Única

alta cohesión: Se refiere a la media que módulos de un sistema tiene una sola responsabilidad.

📗O: Open-Closed Principle/ Principio de Abierto-Cerrado

📘 L: Liskov Substitution Principle/Principio de Sustitución de Liskov

Este …ehm… como te digo que eso no suena tan sencillo como lo imaginaba.

📙 I: Interface Segregation Principle/ Principio de Segregación de Interfaces

Este …ehm… pero en JavaScript no existen las interfaces genio.

📒 D: Dependency Inversion Principle / Principio de Inversión de Dependencia

Los módulos de alto nivel no deben depender de los módulos de bajo nivel, Ambos tiene que depender de abstracciones.

Las abstracciones no deben depender de los detalles. Los detalles deben depender de abstracciones.

Conclusiones

De POO a SOLID explicado con Pokémon - Los cuatro principios de POO

Guía para entender los cuatro principios de POO.

JavaScript - Los cuatro principios de POO

🤔 ¿Cuáles son los principios de POO?

📕 Encapsulamiento

📗 Abstracción

📘 Herencia

📙 Polimorfismo

🤔 Conclusiones

De POO a SOLID explicado con Pokémons - JavaScript - El paradigma de POO

Guía para entender el paradigma de POO.

JavaScript - El paradigma de POO

🤔, Pero ¿Qué rayos es POO?

🤔, Pero ¿Cómo logro pensar en Objetos?

🤔 ¿Qué propiedades tiene un Pokémon?

🤔 ¿Qué capacidades tiene un Pokémon?

🤔, Pero ¿Que rayos es una Clase?

🤔 ¿Entonces qué es un Objeto en POO?

Usando Clases en JavaScript. Actualmente con las nuevas… | by Jorge Mendez Ortega | Medium

Jorge Mendez Ortega ・ Jun 3, 2018 ・ Medium

Conclusiones

Creando un deploy desde GitHub

GUÍA PARA GENERAR UN DEPLOY USANDO GITHUB Y SERVICIOS ONLINE

Usando Heroku, Glitch o CodeSandBox para desplegar un proyecto desde un repositorio.

Article No Longer Available

👐 Manos a la obra

¿Pero por qué utilizar este código?

OrcaPracticas / workshop-deploy

🛠 Taller para generar Deploys en servicios gratuitos.

workshop-deploy

👨🏻‍💻 CodeSandBox

📦 Cargando nuestro proyecto

🐠 Glitch

📦 Cargando nuestro proyecto

👨🏻‍💻Heroku

📦 Cargando nuestro proyecto

📝 Conclusiones

Jugando Con MongoDB Atlas y un poco con JavaScript

🤔 ¿Que es MongoDB Atlas?

👐 Manos a la obra

Podemos utilizar el botón “Create a New Cluster” pero con esta acción se solicitara un pago.

🚫 Borrando un Cluster

🛠 Creando un Cluster

Shared Clusters: Para el desarrollo de aplicaciones pequeñas o para equipos que inician con MongoDB, prácticamente para poder probar el producto.

Dedicated Clusters: Para desarrollos avanzados o entornos de producción.

Dedicated Multi-Region Clusters: Para el desarrollo de aplicaciones de clase mundial que requieren soporte multiregional o una latencia muy baja.

⚙️ Configurando Network Access

Add Current IP Address: Con esta opción se agrega la ip publica del equipo con en el que estamos trabajando.

Allow Access From AnyWhere: Esta opción permite agregar la opción de darle acceso a cualquier IP.

📡 Conectando una Aplicación

Connect with the mongo shell: Permite conectarnos a mongoBD desde la consola del sistema siempre y cuando lo tengamos instalado

Connect your application: Permite generar la cadena de conexión a utilizarla en nuestra aplicación.

Connect using MongoDB Compass: Esta opción permite conectarnos usando la aplicación oficial de atlas.

👨🏻‍💻 Creando la aplicación

Una colección dentro de mongoDB es el equivalente a las tablas que se manejan en MySql o SqlServer.

📝 Conclusiones

Jugando con Git y Github (Parte-1)

🤔 ¿Qué es un sistema de control de versiones?

Sistema de control de versiones también conocido como VCS del inglés Version Control System.

Sistema de control de versiones también conocido como SCM del inglés Source Code Management.

Fig 1. Ejemplo base de un sistema de control de código.

Control de versiones locales

Fig 2. Diagrama del Sistema de control de versiones locales

Control de Versiones Centralizados

Jorge Mendez Ortega ・ Jun 3, 2018 ・
Medium

➕ADD : Se genera una nueva funcionalidad.

🛠 FIX : Se soluciona un bug.