[Cursos][carousel][4]

martes, 19 de mayo de 2020

4. Hola Mundo y primeros conceptos

5/19/2020

Bienvenidos nuevamente al curso Cocos2D en Python, el día de hoy vamos a entrar ahora sí a trabajar directamente con el framework y a familiarizarnos con algunos de los conceptos más importantes y que es esencial dejarlos completamente claros ya que los usaremos a lo largo de todo el curso y forman las bases de nuestros proyectos.

Primero vamos a explicar los conceptos y luego vamos a programar el clásico ejemplo del ‘Hola Mundo’, ejemplo obligado cuando estamos aprendiendo un nuevo lenguaje o una nueva librería, y también como veremos recoge todos los conceptos de los cuales hablaremos en la primer parte. Los conceptos en los cuales nos detendremos hoy son: 

  • Director
  • Escena
  • Layer
  • Sprite

Nos basaremos en la analogía de un estudio de cine, donde se está grabando una película ya que nos sirve para ejemplificar muy bien estos conceptos. Ya lo veremos.

Director o director

Es un objeto Singleton.
Ésto lo que significa, en términos que podamos entenderlo sin necesidad de saber patrones de diseño, es que en todo el ciclo de vida de la aplicación, en todo momento que nuestra aplicación esté corriendo, solo habrá un, y solo un objeto de la clase director, así que cuando hagamos una llamada a algún método o algún atributo de director, siempre se hará la llamada a la única instancia de este objeto.
En la analogía de la película que estamos grabando esto tiene mucho sentido, lo ideal es que sea solo un director, una sola persona la encargada de decir que ESCENA sigue y de DIRIGIR la escena actual. No tiene sentido tener más de un director ya que solo crearía confusión.

En lenguaje de Cocos, podemos decir que esta clase es la encargada de manejar las Escenas, que las veremos a continuación, por lo que sabe cuál está activa, llama una escena, pausa una escena, reemplaza la escena actual o la finaliza, también es el encargado de inicializar la ventana principal de la aplicación, y lo encontramos dentro de cocos.director, en el ejemplo veremos esto más claro y por supuesto profundizaremos en este y los siguientes conceptos en videos posteriores.

Escena o Scene

Vamos ahora a conocer la clase Escena, y que podemos ver en nuestra analogía como las diversas partes de la película, donde hay una serie establecida de personajes y una lógica común a lo que sucede en ella. En Cocos vamos a definirlas como:
Componentes individuales que componen un juego
Una escena puede ser el nivel 1, otra escena puede ser el nivel 2, otra puede ser el menú de pausa y otra sería el menú principal, todas ellas son independientes pero se unen entre sí a través de una lógica interna, como por ejemplo, podemos definir una lógica que vaya de la Escena ‘Menú Principal’ o la Escena ‘Nivel 1’ al pulsar la tecla Enter, por ejemplo. Un juego, o una aplicación en Cocos está conformada por una o más Escenas, y como vimos antes, será el Director el encargado de manejarlas, asegurándose que solo haya una y solo una, escena activa en cada momento. La forma más común de organizar las escenas y los elementos que las componen son las capas.

Capa o Layer

Las Capas o Layers, podemos verlas como hojas transparentes donde los elementos de la escena serán dibujados, pudiendo apilar una hoja sobre otra y así componer una escena completa pero separando elementos con ciertas características en común, como la distancia a la cámara, o la función que cumplen en el juego. En las capas se suele definir mucha de la funcionalidad, por ejemplo es común que sean éstas las que capturen y manejen los eventos, pero eso lo veremos luego.

Sprite

Por último, vamos a conocer los Sprites, un elemento común en todos los juegos 2D y que no son más que una imagen en dos dimensiones con la que podremos trabajar en nuestra aplicación, sea animándola o aplicándole transformaciones para dotar de atractivo visual a nuestros proyectos.


Por último decir que todos estos conceptos pertenecen a su determinada clase de la cual podremos crear instancias en nuestros proyectos, y mencionar que todas, menos director,  descienden de una clase en común llamada CocosNode, de la cual nos ocuparemos más adelante, pero que nos es útil saber en este momento que por ese simple hecho, todas estos objetos pueden ser transformados o animados, veremos luego ésto qué implica.

Podríamos decir, a grosso modo, que juego está compuesto por Escenas, que a su vez están compuestas por Capas y que las capas están compuestas por Sprites. Todo esto de un modo muy simplificado, a veces no es tan sencillo pero por ahora nos basta.



Terminamos por ahora la teoría, un video muy denso y con muchos conceptos nuevos y bastante importantes por lo que no está de más tener anotado lo que tratamos en este tema para tener estas definiciones a la mano en caso de necesitar refrescar los conceptos que acabamos de ver. Ahora sí vamos a la parte divertida, y la cual estamos ahora en capacidad de entender mucho más, si algo no queda del todo claro, no te preocupes, estoy seguro que con el pasar de las lecciones todo quedará completamente entendido.

Hola Mundo

Para el caso yo voy a usar Visual Studio Code, pero podemos trabajar con cualquier editor de código.





También les dejo acá el enlace para descargar los recursos que vamos a estar usando, vamos a descargar la carpeta y a copiarla a la carpeta donde estamos escribiendo nuestro código https://mega.nz/folder/tR00RagY

Para dar mayor claridad a la explicación dejo el video donde se ve claramente la forma en que se programa. La parte de la programación empieza en el minuto 5:56



sábado, 7 de marzo de 2020

Instalar el IDE Eclipse en Ubuntu 18.04

3/07/2020

Eclipse es un Entorno de Desarrollo Integrado (IDE) pensado para el desarrollo en Java, aunque cuenta con multitud de plugins entre los que encontramos opciones para añadir la funcionalidad de programar en otros lenguajes como JavaScript o PHP.

El paquete de instalación que trae Ubuntu 18.04 en su repositorio no está actualizado, nos ofrece la versión 3.8.1, y ya vamos por la 4.1x, con el último parche siendo el llamado "2019-12 R". Por lo que para adquirir éste vamos a recurrir a snap.

Instalando Eclipse

Lo primero será abrir nuestra consola (Ctrl + Alt + T) y seguimos estos pasos:
  • Para que Eclipse puede funcionar requiere tener instalado el JRE (Java Runtime Enviroment). Lo instalaremos con:

    sudo apt install default-jre
  • Cuando la anterior instalación finalice vamos a descargar e instalar el paquete de Eclipse a través de snap:

    sudo snap install --classic eclipse
Si la instalación fue exitosa veremos el mensaje que nos confirma que fue instalado:


eclipse 2019-12 from Snapcrafters installed


Iniciando Eclipse

Ahora podemos acceder a este IDE por medio del buscador integrado en Ubuntu y arrastrar su icono para anclarlo al menú lateral para tenerlo siempre a mano.


viernes, 6 de marzo de 2020

Patrones de diseño: Singleton

3/06/2020


El patrón de diseño que hoy les traemos en void; es el patrón Singleton, un patrón de diseño de lo más sencillo, y que podemos empezar a implementar en nuestros programas de una manera fácil. No vamos a complicar la cosa mucho, en este artículo encontrarás lo justo y necesario para pasar a dominarlo sin enredarnos con conceptos irrelevantes. Vamos a conocerlo.

Este patrón se encarga de asegurar que en nuestro programa haya una (y solo una) instancia de determinada clase y provee un punto de acceso a esta instancia. Podemos determinar acá que este patrón debe ser usado con un lenguaje que tenga el paradigma POO (programación orientada a objetos).

Cada cuál, como en todos los patrones de diseño, es el encargado de analizar el problema que esté enfrentando y determinar si el patrón Singleton puede serle útil, por ejemplo en casos donde cierta información deba ser compartida en diferentes puntos, podemos ir pasando este objeto con la información y estamos seguros que siempre vamos a estar accediendo a la misma instancia de ese objeto, que la información es la misma siempre que accedemos a ella. Claro está, con este tipo de implementaciones debemos tener especial cuidado con la seguridad y la integridad de los datos, es simplemente un ejemplo ficticio a grandes rasgos.

En la concepción original de éste patrón de diseño se plantea que el acceso a este objeto sea global, pero esto trae un montón de inconvenientes, desde seguridad hasta complejidad para hacer pruebas y para determinar un contexto bien definido donde reside el objeto, queda en nosotros lidiar con esos problemas y poder contar con su poderosa utilidad.

Veamos el diagrama UML que define nuestro patrón Singleton:

Podemos extraer una serie de conclusiones que nos van a permitir asegurar que implementemos correctamente este patrón de diseño:

  • Será la propia clase la encargada de crear la instancia, ésto será implementado en la función getInstance () que veremos más abajo en profundidad. Esta instancia será almacenada en una variable static privada de la clase Singleton. 
  • El acceso a dicha instancia se hace mediante un método de clase (con el modificador static).
  • El constructor de la clase será declarado private, con ésto evitamos que puedan ser creadas nuevas instancias en otros puntos de nuestro programa.
Recordemos que cuando definimos una atributo o un método en una clase como static, lo que logramos es permitir que se acceda a éste sin necesidad de hacerlo por medio de un objeto ya construido. Es decir, el atributo y el método no son de cada objeto, si no de la clase en sí.

Por último, vamos a mostrar cómo implementar correctamente la función getInstance () para asegurar el correcto funcionamiento de este patrón de diseño:


public static Singleton getInstance () {

    if (singleton == null) {

        singleton = new Singleton();
    }

    return singleton;
}

El ejemplo del código, hecho en Java, se basa en el UML anterior, y lo que hacemos acá es básicamente comprobar si ya hay una instancia creada: si no la hay, la creamos; si la hay no creamos una nueva ni la sobreescribimos, la dejamos tal cual. Al final, devolvemos esta instancia.
Y con ésto y tenemos lo necesario para integrar este patrón de diseño Singleton en nuestros proyectos y solucionar algunos problemas de una manera mucho más sencilla y clara.

martes, 3 de marzo de 2020

Patrones de diseño: Observer

3/03/2020

El patrón de diseño Observer o, en español, Observador, es usado cuando necesitamos establecer una relación estrecha entre objetos, en la cual uno de esos objetos debe estar constantemente enterado de los cambios de estado surgidos en el otro. Por su naturaleza es ampliamente usado en la programación dirigida por eventos. Es una relación de uno a varios.

En este patrón tenemos una entidad u objeto (el "Observable" o el "Sujeto") que notificará automáticamente a todos los observadores cuando se efectúe un cambio de estado. Para esto el Observable cuenta con funciones que permiten que las entidades interesadas en estos cambios de estado se suscriban o se desuscriban (si es que esa palabra existe, pero se sobreentiende el significado) para ser notificadas de los cambios en el esto de éste.

Este patrón es un patrón de diseño comportamental o de comportamiento.

Veamos un diagrama UML que nos pueda ilustrar mejor la relación y su implementación:

By Gregorybleiker - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=65617132

En el diagrama mostrado arriba el Observable es llamado el "Sujeto", y es éste el que irá cambiando de estado y notificando a los interesados en esos cambios cada vez que sucedan. Las tres funciones básicas que debemos implementar en este sujeto serían:
  • registerObserver (observer): Toma como parámetro un objeto de la clase Observer y lo añade a una lista dentro del sujeto, ésta lista (llamada observerCollection en el ejemplo) será la que almacenará la lista completa de observadores interesados en los cambios de estado del sujeto.
  • unregisterObserver (observer): Se le pasa como parámetro el observador que queremos sacar de la lista de observadores, por lo tanto éste observador ya no será notificado de los cambios de estado que sucedan en el sujeto.
  • notifyObservers ( ): Este método no recibe parámetros, y será el método llamado cuando dentro del sujeto suceda un cambio que deba ser notificado (pues no todos los cambios que ocurran en el sujeto son de interés para los observadores), este método lo único que hará será iterar sobre la lista de observadores y en cada uno invocar la función encargada de "hacer algo" con el nuevo estado del sujeto (función normalmente llamada update ( )).

Dentro de la clase Observer solo es necesario una función para implementar este patrón de diseño, y la mencionamos por encima en el último item de las funciones implementadas por el Sujeto. Esta función es llamada update ( ) se encarga de tomar el nuevo estado del sujeto (una forma es teniendo una referencia de la instancia del sujeto en su constructor, o sea un atributo donde esté almacenado el sujeto para poder acceder a él) y realizando las acciones pertinentes dependiendo del problema que estemos resolviendo.

jueves, 20 de febrero de 2020

JavaScript Object Notation (JSON)

2/20/2020
Cada día nos suena más familiar este término, se usa en todo tipo de conversaciones informáticas, sobre todo las que están relacionadas con las también muy populares API's, y es que JSON y las Application Programing Interface se integran muy bien, y en este artículo descubriremos el porqué.

¿Qué es JSON?

Lo primero, y más importante, es dejar claro que JSON es un formato de texto. Por lo que de esto podemos sacar un par de poderosas conclusiones. Primero, no tiene ninguna dependencia con JavaScript, ni en su implementación, ni en su uso, al ser un formato de texto puede ser capturado y procesado por cualquier lenguaje de programación, incluso la totalidad de los lenguajes de programación más usados incorporan librerías para el procesamiento de estos archivos. Me parece importante de entrada hacer esta separación entre JSON y JavaScript, ya que su nombre puede ser engañoso en este sentido. Repito, más allá del nombre y un poco de su sintaxis, no tienen ninguna otra relación. La segunda conclusión es respecto a las características que le otorga ser un archivo o un trozo de texto: por un lado poco peso, JSON es tremendamente liviano, siendo muy valioso esto para grandes volúmenes de datos; y por otro lado su facilidad a la hora de ser intercambiado entre sistemas, pues no debe adaptarse al lenguaje que va a trabajar con él, y el resultado de todos estos lenguajes o sistemas será el mismo, característica imprescindible de los formatos de intercambios de texto, como XML.

En resumen: JSON es un formato liviano para el intercambio de datos entre sistemas.

¿Cómo se estructura un archivo JSON?

La extensión de estos archivos es .json, y pueden ser leídos y modificados en cualquier programa de edición de texto: desde el Visual Studio Code hasta el bloc de notas de toda la vida.

Tomado de https://www.json.org
La imagen superior muestra de una manera gráfica muy sencilla la estructura de un objeto en JavaScript. Pero ¿no habíamos quedado en que JSON no tenía que ver con JavaScript? No del todo. Pues de su nombre inferimos que alguna relación sí tiene, ¿no? no fue capricho llamarlo así. La claridad que hicimos con respecto a estos dos términos es que el uno no dependía del otro, que los dos se pueden trabajar por separado. Pero lo que hereda JSON del lenguaje de programación es su sintaxis, la forma de escribirse, o la forma como en JavaScript se define un objeto:

var object = {
     nombre: "Juan",
     apellido: "Ardila",
     nombreCompleto: function () {
          return this.nombre + " " + this.apellido; 
     },
     edad: 22,
     casado: false,
     fechaNacimiento: new Date(1997, 06, 29)
};

Ahora veamos un ejemplo de un conjunto de datos en JSON para compararlos:

'{ "nombre": "Juan",
   "apellido": "Ardila",
   "edad": 22,
   "casado": false,
   "fechaNacimiento": "1997-07-29T00:00:00.000Z" }'

Vamos punto por punto analizando similitudes y diferencias.

Lo primero que vemos es que nuestro bloque JSON está encerrado en unas comillas simples (' '), y es lo que hemos venido diciendo todo el artículo: ¡JSON es un formato de texto! por lo que tiene todo el sentido que en nuestros lenguajes de programación esté representado por un string, que no son otra cosa que pedazos de texto que usamos en el programa.

Lo segundo, es una similitud. La estructura de ambos está definida por un conjunto de atributos representados por pares (clave:valor), éstos a su vez están separados por comas (,) y el conjunto de todo esto está encerrado entre llaves, que definen nuestro bloque. Esta característica es la que une ambos mundos, su principal y se podŕia decir único punto de convergencia.

Lo tercero, si seguimos mirando al uno y al otro, está en como se definen los pares clave-valor: en JavaScript, le damos un nombre a nuestro atributo(clave) y le asignamos un valor que puede ser de cualquiera de los tipos que nos define JavaScript, incluyendo tipos no primitivos, como Date() o unos que definamos nosotros, incluso aún, nos permite asignar como valor una función. Por otro lado, en JSON, al definir el nombre de nuestro atributo, éste debe ir entre comillas (" "), como si de un string se tratara, y los tipos de valores que podemos definir está más restringidos, pero son suficientes para definir de manera correcta nuestros datos, si sabemos cómo usarlos. Los tipos que admite el formato JSON son:
  • Number
  • String
  • Boolean
  • Array
  • Object
  • null

JSON no permite el uso de funciones, y ésto es algo que puede ser obvio, si no olvidamos su propósito: JSON es usado para intercambiar información, simple y llanamente. El programa que reciba ésta información ya podrá aplicar la parte lógica y manipular ésta información de manera conveniente.

JSON tampoco permite el uso de otro tipo de datos diferentes a los listados, así éstos ya estén definidos en el lenguaje destino, ésto favorece el intercambio, y la estandarización, ya que los tipos de datos mencionados arriba están definidos en todos los lenguajes. Cabe aclara que cuando nos referimos al tipo de dato Object, éste hace referencia a un objeto definido como JSON, con las mismas reglas y los mismo tipos de datos aceptados, básicamente es anidar, con la estructura que tenemos definida con los JavaScript Object Notation.

Por último, una particularidad que puede destacar en nuestro ejemplo es el caso de las fechas, vemos como JSON almacena un string que (suponemos) representa nuestra fecha, y es que como Date no es un tipo aceptado por éste formato, debemos convertir nuestra fecha a formato texto, y almacenarla de esta forma. En JavaScript existe una función que nos convierte de un tipo a otro con un formato universal (ISO 8601) para poder convertirlo apropiadamente en cualquier otro lenguaje.

let date = new Date(); 
let stringDate = date.toJSON();
 
let recoveredDate = new Date(stringDate); 

 

Reglas de oro para definir un archivo JSON


Siguiendo esta guía, hecha a modo de resumen, vamos a asegurar que los archivos JSON que escribimos cumplen lo que define el formato, y que no habrá inconvenientes a la hora de usarlo en nuestro progrmas o aplicaciones:

  •  Los datos en JSON están escritos dentro de llaves ( { } )
  •  Los datos están representados como pares clave-valor
  •  Las claves deben estar encerradas entre comillas ( " " )
  •  Las claves y los valores deben estar separados por 'dos puntos' ( : )
  •  Para separar los datos se usa coma ( , )
  •  Los arrays van entre corchetes ( [ ] )
  •  Los objetos van entre llaves ( { } )

Con estas siete sencillas claves vamos a asegurar que nuestros archivos JSON tienen la estructura correcta y nos ahorraremos más de un dolor de cabeza que suele ocurrir cuando olvidamos alguna.

De JavaScript a JSON, y viceversa


Por último, los dejo con un par de funciones que nos permitiran trabajar con JSON en nuestras aplicaciones JavaScript, estos métodos tienen sus equivalentes en todos lo otros lenguajes de programación.

Al ser JSON un trozo de texto, debemos convertirlo en algo con lo que poder trabajar, y hay una sencilla función que hace el trabajo sucio por nosotros, que recibe un string con nuestros datos JSON y nos devuelve un objeto JavaScript, con el que podemos trabajar como con cualquier otro objeto de lenguaje:

var jsObject = JSON.parse(jsonString);

jsonString, es la variable donde tenemos almacenado nuestro string con formato JSON, que capturamos de una API o que construimos de otra forma. Con esta sencilla linea de código obtemos a partir de nuestro string un objeto para usar a lo largo de nustro programa, podemos iterar sobre él, eliminar atributos, etc..., tal como lo haríamos con cualquier otro objeto.

La función inversa, que nos permite transformar un objeto en un string válido con formato JSON. Las funciones definidas en el objeto no se incluyen, y los tipos no aceptados por JSON se pasan a su respectiva representación en string.

var jsonString = JSON.stringify(jsObject);

Hasta aquí este post, donde nos adentramos en el formato de intercambio de datos JSON y la manera de escribir éste correctamente, analizamos sus detalles y cómo nos beneficia en nuestros proyectos. No olvides dejar tus comentarios si alguna parte no es del todo clara, si crees que se deba profundizar más en algún punto, o simplemente con un agradecimiento si la información que encontraste acá te sirvió. Hasta una próxima ocasión.

Lo último

recentposts

Random

randomposts