NODEJS Y MONGO DB

¿Qué es NodeJS?

Node JS es un entorno JavaScript del lado del servidor orientado a eventos y nos sirve para varias plataformas (Windows, Linux, macOS). Basado en la máquina V8 de Google para Chrome, utiliza un único hilo de ejecución de manera asíncrona, donde toda operación que realice entradas y salidas debe tener una función callback. Dicho hilo de ejecución única también se le denomina EventLoop y almacena en una cola los callbacks que debe ejecutar una vez que las operaciones asíncronas finalicen. A lo largo de las diferentes versiones se empezaron a usar librerías como Async, para después pasar a las promesas, los yield y desde la versión 8 el uso de Async/Await.
El objetivo principal de NodeJS es consumir el mínimo posible de recursos de la máquina y mejorar el rendimiento.

Instalación y creación del proyecto

Para su instalación accedemos a nodejs y descargar la versión LTS que es la recomendada.

Realizamos los pasos del asistente de instalación.

Abrimos terminal y ejecutamos node –v para comprobar que efectivamente se ha instalado correctamente y también npm install –g npm para instalar o actualizar el gestor de paquetes npm.
Comprobamos las versiones para asegurarnos que está todo correcto.

También hará falta instalar MongoDB que puedes ver los pasos del tutorial anterior.

Luego desde cualquier directorio creamos el proyecto ejecutando npm init y nos preguntará por el nombre del proyecto, la versión, descripción, entry point, en index.js, test command no indicamos, git repository, keywords, autor, licencia y aceptamos.

 

Instalación de dependencias

Instalamos las siguientes dependencias.

express: librería para el protocolo HTTP permitiéndonos desarrollar nuestra API Rest.

npm install express –save
ver más sobre express

mongoose: librería para trabajar con la base de datos MongoDB

npm install mongoose –save
ver más sobre mongoose

Instalamos con –-save para indicar que se guarde en la lista de dependencias
No es necesario instalar todas las dependencias desde el inicio. De hecho podemos ir instalando dependencias en cualquier momento, siempre que nos demos cuenta que nos es necesaria instalarla.
Por ejemplo podemos instalar ahora mismo la librería nodemon que nos sirve para recargar el servidor cada vez que hagamos algún cambio en nuestra aplicación node. De no habernos dado cuenta, se podría instalar más tarde.

npm install nodemon –save-dev
ver más sobre nodemon

Y con –save-dev se indica que es para las listas de dependencias en desarrollo, pero no es necesario en producción.

Si abrimos con cualquier editor (Visual Studio Code por ejemplo) el directorio del proyecto, vemos que tenemos el package.json donde muestra las dependencias instaladas.

Si quisiéramos desinstalar alguna de las dependencias es simplemente con npm uninstall nombre_de_la_librería.
Por ejemplo: npm unistall nodemon

Conectando con MongoDB

Ahora ejecutamos mongod y mongo y damos uso a dbTutorial explicado en el tutorial anterior.

La colección que tiene dbTutorial es user.

Y para ver los datos que tiene usamos find()

Creamos ahora el fichero index.js que será el primer fichero que ejecuta la aplicación. Por tanto se implementa la conexión a la base de datos de MongoDB en este fichero.
Mediante el siguiente código indicando la url de la base de datos, usando por defecto el puerto 27017 en localhost

'use strict' // modo estricto para evitar sintaxis incorrec

var mongoose = require('mongoose')

mongoose.connect('mongodb://localhost:27017/dbTutorial', { useNewUrlParser: true }, (err, db) => {
    if (err) throw err
    console.log("conexión establecida a la base de datos " + db.name)
    db.close()
})

Para ser ejecutado se utiliza nodemon y se le puede indicar el comando nodemon index.js en el script del package.js para lanzarlo de forma automática.

Y comprobamos que efectivamente se establece la conexión.

 

Para una última comprobación, desde el terminal accediendo a la base de datos dbTutorial y después a la colección user, si ejecutamos lo siguiente podemos ver los datos que tenemos.

Lo mismo podemos hacer con NodeJS utilizando mongoose para conectar como hemos visto antes y haciendo la consulta con find() de forma parecida.

'use strict' // modo estricto para evitar sintaxis incorrec

var mongoose = require('mongoose')

mongoose.connect('mongodb://localhost:27017/dbTutorial', { useNewUrlParser: true }, (err, db) => {
    if (err) throw err
    console.log("conexión establecida a la base de datos " + db.name)
    db.collection("user").findOne({}, (err, result) => {
        if (err) throw err
        console.log(result)
    })
    db.close()
})


 

Otra forma sin utilizar mongoose obteniendo el mismo resultado.

'use strict' // modo estricto para evitar sintaxis incorrec

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
  if (err) throw err;
  var dbo = db.db("dbTutorial");
  dbo.collection("user").findOne({}, function(err, result) {
    if (err) throw err;
    console.log(result);
    db.close();
  });
});


Entendiendo todos estos pasos ya simplemente es ir practicando con los otros métodos: insertOne(), find(query), deleteOne(), updateOne() y más métodos para entre otras cosas poder realizar una API REST.

Manual de referencia por si tienes más interés:
docs.mongodb

MongoDB instalación y primeros comandos

¿Qué es MongoDB?

Mongo DB es una base de datos de documentos con la escalabilidad y flexibilidad que desea con la consulta y la indexación que necesita. Forma parte de los sistemas de base de datos NoSQL.

Para entender qué es NoSQL que significa “No solo SQL” puede soportar consultas de tipo SQL pero no es su lenguaje principal y es un DMS (Document Management System – Sistema de Gestión Documental) no relacional que no requiere de esquema fijo, evita combinaciones y es fácil de escalar frente a los RDBMS (Relational Database Management System – sistema de gestión de base de datos relacionales) que utiliza SQL para crear, actualizar y administrar una base de datos relacional. NoSQL se utiliza para almacenar datos distribuidos con enormes necesidades de almacenamiento de datos, abarcando una amplia gama de tecnologías de base de datos que pueden almacenar datos estructurados, semiestructurados, no estructurados y polimórficos.

Fundamentalmente hay cuatro tipos de dase de datos NoSQL:

  • Clave-Valor: Los datos se almacenan en pares clave / valor. Está diseñado de tal manera para manejar una gran cantidad de datos y cargas pesadas.
  • Orientado en columnas: Cada columna se trata por separado. Los valores de las bases de datos de una sola columna se almacenan de forma contigua.
  • Basado en grafos: Almacena entidades y las relaciones entre esas entidades. La entidad se almacena como un nodo con la relación como bordes. Un borde da una relación entre nodos. Cada nodo y borde tiene un identificador único.
  • Orientado a documentos: DB NoSQL orientado a documentos almacena y recupera datos como un par de valores clave, pero la parte de valor se almacena como un documento. El documento se almacena en formatos JSON o XML. El valor es comprendido por la DB y puede ser consultado. Mongo DB se basa en este sistema.

Descargar MongoDB

Puede descargarse de forma gratuita desde MongoDB Community Server para cualquier sistema operativo.

Instalación en Windows

Normalmente se instala en C:\mongodb\bin\ y al mismo tiempo se crea la carpeta C:\data\db donde se almacenarán los datos. Esta ruta la reconocerá MongoDB por defecto.
De esta forma se ejecuta desde shell mongod.exe y mongo.exe

C:\mongodb\bin\mongod.exe
C:\mongodb\bin\mongo.exe

Otra opción es en C:\Program Files\MongoDB\Server\3.6\bin

Se ejecuta primero desde Shell mongod.exe

Nos indicará que utilizará el puerto 27017

Y desde otro terminal mongo.exe (en este caso la versión 3.6.2 aunque actualmente está la 4.0.4).

Si los datos en lugar de almacenarlos en C:\data\db está en otra ruta, por ejemplo C:\mongodb\data\db entonces debemos ejecutar mongodb.exe de la siguiente forma especificando la ruta de los datos.

Existe el fichero mongod.cfg dentro de la carpeta bin de la ruta instalación en Windows o en una carpeta anterior a bin donde se puede configurar varios parámetros, entre ellos la ruta por defecto para los datos en
storage:
dbPath: c:\data\db

Podemos editarlo a una personalizada.

En el caso de Linux lo encontraríamos en /etc/mongo.conf y en el caso de macOS no está incluido.

También nos puede interesar el log
systemLog:
destination: file
path: c:\data\log\mongod.log

Instalación en macOS

Descargamos MongoDB que vendrá comprimido.

Lo extraemos:
tar -zxvf mongodb-osx-ssl-x86_64-4.0.4.tgz

El fichero extraído lo movemos al directorio queramos. Se recomienda /usr/local/bin o /usr/local/mongodb

sudo mv mongodb-osx-ssl-x86_64-4.0.4 /usr/local/mongodb

En este caso era la 3.6.3 pero viene siendo mismo procedimiento a la versión actual que descargues.

Y ahora para almacenar los datos creamos el directorio de la siguiente forma.

sudo mkdir –p /data/db

Se nos creará en la raiz del sistema data/db

Donde podremos ver las colecciones que se irán almacenando

Finalmente podemos crearnos un fichero profile para variables de entorno.

nano .bash_profile

Donde indicamos la ruta donde esta instalado y en la siguiente /bin donde estará los ficheros binarios mongod y mongo.

De esta forma evitamos tener que escribir toda la ruta cuando ejecutemos mongod y mongo.

Ejecutamos mongod desde un terminal
sudo mongod

Y desde otro terminal
sudo mongo

Comando básicos de Mongo DB

Para mostrar las bases de datos
show dbs

 

Para crear una base datos (por defecto nos sitúa en la base de datos)
use dbTutorial

Para usar la base de datos es también con use indicándonos que cambia a la base de datos que le hemos indicado
use dbTutorial

 

Borrar base de datos
Nos situamos primero con el comando use y después.
db.dropDatabase()

 

Insertar y crear una colección
Previamente habremos hecho un use para situarnos en / crearnos la base de datos. Las colecciones vienen a ser parecido a las tablas.

db.[coleccion].insert( [documento en formato JSON] )
ejemplo db.user.insert ({nombre: “dlrjad”})
nos indicará -> WriteResult({ “nInserted”: 1 })

 

Consultar las colecciones de la base de datos
show collections

 

Mostrar registros
Nos muestra la lista de documentos de una colección. Podemos filtrar o enviar al comando find para especificar los resultados de la búsqueda
db.user.find() lista todos los usuarios de la colección.

 

Cursores
var miCursor = db.users.find()
while(miCursor.hasNext()){
printjson(miCursor.next());
}

Nos muestra todos los registros que viene ser db.users.find()

 

Si usamos skip lo que estamos diciendo al curso es que se salte n registros
db.users.find().skip(2)
En este caso se saltaría los dos primero nos muestra:

 

Si usamos limit, queremos el numero de registros indicado.
db.users.find().limit(2)
Nos muestra:

 

Se puede concatenar ambas ordenes
db.users.find().limit(1).skip(1)
Nos muestra un solo registro y se sale un registro.

 

Filtros
Para añadir un filtro tenemos que pasar un documento JSON como parámetro
db.users.find({“_id”: ObjectId(«5aa66f1e47fad2032ddf3e6b») })
Nos muestra:

{ «_id» : ObjectId(«5aa66f1e47fad2032ddf3e6b»), «name» : «Admin», «surname» : «Admin», «email» : «admin@admin.com», «role» : «ROLE_ADMIN», «image» : «null», «password» : «$2a$10$C08R6uOQbbY1QDw9FvCaN.g3k8Z98rhJjQ2dDJz3eUsMwultfA6Py», «__v» : 0 }

db.users.find(“role”: “ROLE_ADMIN”)
Nos muestra:

{ «_id» : ObjectId(«5aa66f1e47fad2032ddf3e6b»), «name» : «Admin», «surname» : «Admin», «email» : «admin@admin.com», «role» : «ROLE_ADMIN», «image» : «null», «password» : «$2a$10$C08R6uOQbbY1QDw9FvCaN.g3k8Z98rhJjQ2dDJz3eUsMwultfA6Py», «__v» : 0 }

 

Proyecciones
db.users.find({},{“name”:1})
Nos muestra todos los registros únicamente con el campo name

{ «_id» : ObjectId(«5aa66ca949498d0326250130»), «name» : «Juan» }
{ «_id» : ObjectId(«5aa66f1e47fad2032ddf3e6b»), «name» : «Admin» }
{ «_id» : ObjectId(«5aec43b3ac7dfb0257465087»), «name» : «Salvador» }

Si lo queremos sin id entonces
db.users.find({},{“name”:1, ”_id”:0})

{ «name» : «Juan» }
{ «name» : «Admin» }
{ «name» : «Salvador» }

 

findOne
Devuelve un documento concreto.
db.users.findOne()

Queremos encontrar el usuario el usuario con cierta id y muestre su registro menos los campo id y password
db.users.findOne({_id: ObjectId(«5aa66f1e47fad2032ddf3e6b») },
{“_id”:0, “password”:0})

Nos mostrará

"name" : "Admin",
	"surname" : "Admin",
	"email" : "admin@admin.com",
	"role" : "ROLE_ADMIN",
	"image" : "null",
	"__v" : 0

 

findAndModify
Este comando recibe los siguientes parámetros:

  • Query: Igual que en find y en findOne. Aunque la consulta devuelva varios documentos, solo se modificará uno de ellos.
  • Sort: Podemos especificar un orden para tener control sobre el documento que se modificará en caso de que se devuelvan varios resultados.
  • Remove: Campo booleano. Este parámetro no es necesario si se añade el parámetro Update. Si el valor es true, se borrará el documento encontrado.
  • Update: este parámetro no es necesario si se añade el parámetro Remove. En este campo deberemos introducir un JSON con la sentencia de actualización.
  • New: Campo booleano. Si es true se devuelve el documento ya modificado, si es false se devuelve el original.
  • Fields: Proyección con los datos que queremos devolver.
  • Upsert: Campo booleano. Si es true y la consulta no encuentra documentos, se creará un documento nuevo. En otro caso se actualizará el documento.

Así que con nuestros datos, podríamos ejecutar un comando similar a este:

db.users.find({«_id»:ObjectId(«5aa66ca949498d0326250130»)});

Debemos tener cuidado al actualizar un documento pues en este caso solo especificamos el email y nos lo actualiza interpretando que los demás campos ya no se incluyen. En este caso nos quedamos solamente con el email

 

De forma correcta indicamos el campo que queremos actualizar junto a los demás.

 

Hay más comandos y consultas que podemos hacer en MongoDB pero para comenzar esto sería lo esencial.

Magento 2 – Modelo

Empezando por el Schema

Seguimos tras el tutorial Magento 2 – Vista y Controlador para desarrollar ahora el modelo.

Comenzamos primero con los data scripts del modelo.
Dentro del modulo creamos la carpeta Setup y después InstallSchema.php que creará el esquema de las tablas y columnas de nuestro modelo.

InstallSchema implementa el método install de InstallSchema. El primer parámetro (SchemaSetupInterface) nos proporciona las funciones que necesitamos para trabajar con base de datos y el segundo parámetro (ModuleContextInterface) nos proporciona información sobre nuestro modelo.

Creamos la configuración de nuestra tabla. Lo primero es obtener la conexión a nuestra base de datos, para crear la tabla y le indicamos un nombre, indicando el namespace y el nombre del módulo. Después añadimos las columnas indicando el tipo.
Lo siguiente será crear una tabla basado en esta configuración, volviendo a obtener conexión y crea la tabla con la configuración.

Después será crear InstallData para casos que queramos tener datos predeterminados. Implementa el método install de InstallDataInterface y tendrá también dos parámetros. Vemos que todo está entre $setup->starSetup() y $setup->endSetup() permitiendo a Magento ejecutar correctamente el script.


Obtenemos la conexión para insertar datos en la tabla que hemos creado.

Vamos a Services (desde NetBeans, con otro IDE será diferente) para conectar a la base de datos y ejecutamos en SQL

select * from setup_module where module = "ejemplo_holamundo";

Lo que hacemos es borrarlo para instalar el del modelo.

delete from setup_module where module = "ejemplo_holamundo";

Y desde consola realizamos un upgrade.

Comprobamos que podemos ver los datos.

select * from ejemplo_holamundo_item;

Creamos ahora UpgradeSchema y realizará una actualización si la versión del módulo (que está en etc/module.xml) es menor que la versión especificada, añadirá la columna descripción.


Siguiente paso es crear UpgradeData, indicando en quoteInto que el cambio será en el primer item y el segundo item no tendrá descripción.

Y en module.xml debemos cambiar la versión a la 1.0.1 o no se ejecutará los script. ¿Y por qué hay que cambiar la versión si la 1.0.0 es menor que la 1.0.1? La razón es porque antes de ejecutar el upgrade, nuestra versión es 1.0.0 y se cumple la condición, sin embargo debe haber un cambio en la versión, hay que indicar que tenemos una nueva versión del modelo y por tanto debemos cambiarlo a la 1.0.1 de lo contrario no se verá ningún cambio.

Desde consola realizamos un upgrade. Si de casualidad se produce este error…

Entonces ejecutar…

bin/magento deploy:mode:set developer

Y después volver hacer el upgrade.

bin/magento setup:upgrade

Conectando a la base de datos ejecutamos el comando SQL

select * from ejemplo_holamundo_item;

Y veremos la columna description.

De esta forma hemos hecho cambio en la tabla.

 

Implementando el Modelo

Ahora creamos desde el módulo la carpeta Model para el modelo. Dentro de Model creamos la carpeta ResourceModel y el fichero Item.php.

En el constructor especificamos la tabla y el campo ID que identifica las instancias.

Creamos el fichero Item en la carpeta Model, la página (o el bloque) llamará a Item del namespace Model. Como inicializa de la clase Item de ResourceModel, podremos invocar métodos de esa clase como por ejemplo setters y getters para los campos de nuestro modelo. En este caso no es necesario pues la propia clase Item de ResourceModel inicializa de la tabla de nuestra base de datos.

Desde ResourceModel creamos Collection.php que heredera de AbstractCollection, donde se carga la tabla de los items que conoce la clase Item de ResourceModel y la clase Item de Model nos permite cargar los datos. De esta forma podemos trabajar con colecciones que usamos en ResourceModels y Models.


Aquí puedes ver la documentación de extensiones (módulos) y plugins donde podemos ver diagramas, código fuente y descripción de cada uno de ellos.

 

Ya sólo nos queda modificar el bloque y la vista.

En el bloque Hello.php que creamos en el tutorial anterior, añadimos una dependencia (inyección de dependencia) con la clase Collection de Items. Nos permitirá usar Factory siempre que tengamos el sufijo de alguna clase y este caso lo tenemos de la clase Collection pues es la clase Modelo. Magento creará la clase Factory y lo podemos ver en generated > namespace > modulename > Model > ResourceModel > modelname > ClassFactory.php.
En este caso: generated > Ejemplo > HolaMundo > Model > ResourceModel -> Item > CollectionFactory.php

Es posible que también lo veamos en var/generation/’vendor_name’/’module_name’/Model/ClassFactory.php.
Pero si estamos en modo desarrollador, es posible que no tengamos la carpeta generation.

Implementamos el método getItems devolviendo un array de items que será llamado en la vista para mostrarlos.

Editamos index.phtml

Y recargamos la página localhost/programas/magento2/holamundo/index/test

Con esto ya hemos completado un MVC sencillo en Magento2.

Dejo enlace del repositorio por si puede interesar.

Sourcetree versión 2.7.6

Sourcetree es una herramienta muy útil para gestionar todos tus repositorios. Anteriormente había hecho hace cuatro años un tutorial sobre Source Tree.

Si bien su funcionamiento sigue siendo el mismo, han cambiado algunas cosas que merecen ser vistas. Pero antes hay que descargarlo desde Atlassian y necesitarás registrarte que además te servirá como cuenta de Bitbucket.

Una vez instalado elegimos un directorio como primer repositorio local.

Añadir o crear un repositorio local existente.

O en remoto conectaríamos una cuenta Bitbucket o Github, según nuestra preferencia para que se sincronice nuestros proyectos en remoto. O directamente clonar indicando la url del repositorio remoto.


Elegimos crear un repositorio local eligiendo el directorio y accedemos al repositorio.


Vemos que hay ficheros no preparados. Marcamos la casilla de Ficheros no preparados y automáticamente quedarán todos los ficheros preparados para después realizar el commit. También se pueden elegir individualmente los ficheros no preparados por si no queremos añadirlos todos al commit. En la parte derecha nos muestra el contenido de cada fichero.


En la parte inferior nos aparece Mensaje para Anotar que servirá como descripción del commit. Un commit es como guardar una instantánea del proyecto en ese momento, por eso es muy importante este tipo de herramientas como control de versiones.

Al dar al icono del usuario, nos preguntará nuestro nombre y correo para así identificar quién realizó el commit.

Esto solo se realizará la primera vez aunque si queremos otro usuario diferente que no sea el nuestro y también forma parte del proyecto, pulsamos sobre icono usuario y podremos tener un usuario alternativo.

Volvemos escribir la descripción y después pulsar opción Anotar.

Nos vamos al historial y podremos ver el commit realizado.

Ahora vamos a Configuración, después a la pestaña Remotos y botón Añadir.

Indicamos los datos para el repositorio remoto, con el nombre del repositorio que hayamos creado en GitHub o Bitbucket, la url y nuestro nombre de usuario.

Tendremos que darle a OK para que termine de agregarse el repositorio remoto correctamente.

Ahora vamos a Push para enviar el repositorio local al remoto. Vemos que nos aparece para marcar la rama master (después se irán teniendo más ramas). Damos OK y nos pedirá las credenciales de la cuenta GitHub/Bitbucket para el repositorio remoto.


Si comprobamos nuestro repositorio en GitHub o Bitbucket, veremos que ya está subido.

Cuando realizamos un nuevo commit desde local, Sourcetree nos avisa que una de las ramas está más avanzada que la otra, en este caso la master local frente a la master remota y nos sugiere si queremos hacer un Push para actualizar la remota. Vemos además que en la parte derecha nos muestra los cambios que hay en el fichero, resaltando en rojo lo que había antes frente a lo verde que es el cambio realizado.


 

Olvidé comentar que cuando Sourcetree nos detecta nuevos cambios para realizar un commit, si vamos al historial se nos mostrará en la gráfica por encima de los demás commit que si han sido realizados. Cambios sin un commit.

 

Lo siguiente es trabajar con una rama local nueva que llamaremos develop. Siempre se recomienda trabajar con una rama distinta a la master y será nuestra rama de desarrollo.

Al crearla podemos comprobar que estamos en ella viendo en RAMAS que tenemos marcada develop.

Realizamos cambios y después un commit. Vemos entonces que develop avanza al último commit mientras que master se queda en la anterior.

Realizamos ahora unos test (algo que veremos en un próximo tutorial) de nuestro código y tras el siguiente commit podemos ver que develop sigue avanzando.

Puede ocurrir que ahora realicemos cambios muy pequeños y queramos añadirlos al último commit guardado. En este caso se nos notifica que hay cambios sin un commit y queremos agregarlos a test.

Cuando vayamos hacer el commit, si nos fijamos en la parte derecha vemos que tenemos Opciones de la anotación… Lo que tenemos que marcar es la opción Corregir la ultima anotación y automáticamente nos marcará la anotación del ultimo commit, en este caso test, pero previamente con un mensaje de advertencia que no recomienda esta acción si ya tenemos el cambio anterior en el repositorio remoto. En el caso de no tenerlo le damos aceptar.


Una vez que hayamos hecho los test necesarios para garantizar que los avances de develop son seguros, es hora de fusionar la rama master con develop. Para ello vamos primero a RAMAS para elegir la rama master y después a la opción Integrar. Se nos mostrará la siguiente ventana donde podemos elegir en qué commit queremos fusionar, en este caso en test que es el último, para después marcar algunas de las Opciones que nos ofrece. Si estamos en una situación que no debería haber conflictos entonces con marcar la primera opción ya es suficiente.


A tener en cuenta que si eliminamos ficheros en nuestro proyecto, estos también será detectados y quedan marcados en rojo de la siguiente forma (amarillo con puntos suspensivos son ficheros modificados y con interrogante son ficheros nuevos).

Si tenemos tanto ramas locales como remotas y hacemos un commit en una local, en este caso develop, podemos ver que las ramas que no han hecho el commit aunque sean remotas, nos lo indicará.

Pero claro, eso no significa que si se hacen cambios en el repositorio remoto, estos queden reflejados en local. Para ello tendremos que hacer un Pull (la opción Recibir).

Por supuesto en los casos que hagamos Push, siempre tenemos que asegurarnos en que no habrá problemas y no entre en conflicto con una rama del cual no se desee o no se tenga que modificar en ese momento.

De esta forma iremos teniendo nuestro control de versiones de forma correcta, habituándonos a trabajar con ramas.

 

Para terminar si estamos habituados a los comandos git podemos abrir el terminal desde la opción Terminal que se encuentra en la parte superior derecha.

Ejecutando comando git podremos ver los comandos que se usan habitualmente.

Y la documentación para ver los comandos con más detalle siempre la podremos ver desde git documentation.

Magento 2 – Vista y Controlador

Detalles a tener en cuenta

Continuando con el anterior tutorial Magento 2 – Crear módulo y una vez tenemos creado el módulo, comenzamos por cargar la página siendo localhost/programas/magento2/ en mi caso y veremos lo siguiente.

Eso se debe a que el diseño del sitio web está roto y para solventarlo ejecutamos el siguiente comando desde el terminal.

bin/magento setup:static-content:deploy -f

Este comando lo debemos usar cuando ha habido cambios en ficheros CSS, JS o html, todo lo relacionado con la parte frontend. De esta forma solventaremos el problema.

 

Vamos a crear dentro de la carpeta etc, la carpeta frontend y después el fichero routes.mxl dejándolo vacío y cargamos la página.

Se nos produce un error y nos viene un identificador del log. Para verlo vamos a var > report y desde ahí veremos el log.

Nos indica que no encuentra ninguna etiqueta en el fichero xml. Lo importante de esto es saber localizar los log cuando se nos produzca algún error.

 

Continuamos con el fichero routes.xml. En Magento las rutas se divide en tres partes: frontname, controller y action.

<route id="holamundo" frontName="holamundo" >

Tanto en id como en frontName podemos poner el namespace o el nombre del módulo, por lo general se suele poner el nombre del módulo. Además frontName será la primera parte de la ruta y en este caso nuestra ruta sería:

localhost/programas/magento2/holamundo

Podemos especificar la ruta para el administrador. Para ello dentro de etc creamos la carpeta adminhtml y el fichero router.xml que será casi igual cambiando standard por admin.

 

Desarrollar el controlador

Vamos a por el controlador. Para ello creamos desde la raíz del módulo la carpeta Controller, dentro de ella la carpeta con el nombre del controlador Index y el fichero php que será la clase controlador index.php.

En namespace empezamos por el namespace Ejemplo, seguido del nombre del módulo > Controller > nombre del controlador > nombre del fichero php.
La clase Index hereda de Action que lo podemos encontrar en vendor > magento > framework > App > Action.

Y usa ResultFactory indicando el tipo RAW.

Si accedemos a vendor > magento > framework > Controller > Result > Raw.php ahí veremos el método setContens.
Para el administrador creamos dentro de Controller la carpeta Adminhtml, a su vez carpeta index y dentro index.php con algunos cambios.

Vamos al terminal y ejecutamos el siguiente comando que es necesario siempre que hagamos cambios para verlo al recargar la página.

bin/magento cache:flush

Y cargamos la página localhost/programas/magento2/holamundo.
De esta forma verificamos que el controlador funciona con la ruta especificada en el frontname de router.xml.

Y desde el panel administrador, accediendo con el usuario y contraseña vamos primero a Stories > Configuration.

Después a Advanced > Admin y desmarcamos Add Secret to URLs para que no se muestre al cargar la pagina desde el panel administrador.

Finalmente cargamos la página HolaMundo siendo administrador.

 

Y ahora la vista

Continuamos y dentro de nuestro módulo creamos la carpeta Block y en Block el fichero Hello.php donde la clase extiende de Template y un método simple que llamaremos a la vista para mostrar un texto.

Por tanto, creamos dentro del módulo las carpetas view > frontend > layout y creamos el fichero acorde a la acción del controlador. Siguiendo la ruta del proyecto, tendrá el nombre del módulo (que a su vez habíamos especificado en el id de la etiqueta route en el fichero routes.xml) seguido de guión bajo, nombre de la carpeta del controlador seguido de guión bajo y nombre del controlador. En este caso holamundo_index_index.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Ejemplo\HolaMundo\Block\Hello" name="holamundo_index_index" template="Ejemplo_HolaMundo::index.phtml" />
        </referenceContainer>
    </body>
</page>

Con la etiqueta page estamos indicando la estructura del diseño a una columna con layout=»1column (que puede ser diferente dependiendo de lo que queremos hacer) y la URN para la configuración del diseño de la página.
Con referenceContainer indicamos donde queremos que el contenido sea mostrado. Si indicamos content, será mostrado en el contenedor del centro de la página pero podemos poner header si lo queremos en encabezado, footer en pie de página o cualquier otro elemento de la página que queramos especificar.
En block indicamos la clase de nuestro bloque; name viene siendo un identificador único que nos puede servir como referencia a ese bloque (no es obligado especificar name pero si es recomendable) y template donde indicamos el fichero phtml que ejecutará el/los método/s del bloque para ser visualizados en la vista.

Dentro de la carpeta frontend creamos la carpeta templates y el fichero index.phtml.

En los ficheros phtml que es donde desarrollamos nuestras plantillas (o encontramos plantillas ya hechas) hacemos referencia al bloque utilizando la variable block.

Realizamos un cambio en el controlador. Tenemos que eliminar ResultFactory::TYPE_RAW pues esto ignora los layouts que tengamos. Para ello lo resolvemos implementando el método Execute.

Limpiamos la cache desde el terminal.

bin/magento cache:flush

Ejecutamos la página y vemos el resultado.

 

Acciones del controlador

Si queremos ejecutar según la acción del controlador, podemos hacer el siguiente cambio en el controlador.

Limpiamos la cache y al recargar la página es posible que veamos este error.

Esto se debe que una antigua firma aún está almacenada en caché. Lo podemos solventar cambiando al modo desarrollo ver documentación Magento mode.
En la documentación nos indica que al cambiar de producción a desarrollo, debemos eliminar los contenidos de los directorios de var/generation y var/di para evitar error inesperados.

rm -rf <your Magento install dir>/var/di/* <your Magento install dir>/var/generation/*

Al hacer el cambio a desarrollo o a producción, se limpian los contenidos de los siguiente directorios.
var/cache
var/di
var/generation
var/view_preprocessed
pub/static

Una vez leído la documentación y sabemos qué hace el comando, ejecutamos:

bin/magento deploy:mode:set developer

Es posible que nos aparezca el siguiente aviso por falta de permisos en ciertos directorios y hay que asignárselos.

Si todo ha ido bien nos indicará que ya está disponible el modo desarrollador.

IMPORTANTE: es posible que aún estando en modo desarrollo, nos pueda volver a pasar aunque limpiemos la caché. Ejecutaríamos el comando aún estando en modo desarrollo para solventarlo.

Recargamos la página y se nos muestra otra vez correctamente.

Lo que ocurre es que si recargamos como localhost/programas/magento2/holamundo/ también nos hará lo mismo. Eso se debe porque el controlador y la acción son index, luego los puede omitir. Pero podemos hacer un cambio renombrando la acción Index a Test y tenemos que renombrar también el nombre del fichero layout.


Recargamos la página con el enlace localhost/programas/magento2/holamundo para ver el error 404.

Recargamos la página con el enlace localhost/programas/magento2/holamundo/index/test y se ejecutará correctamente.

Nos quedará por ver como crear el modelo para completar el patrón de diseño MVC.