Programando con Rupert

Cuando la programación es una forma vida...

Author: rupert (page 1 of 6)

Instalación Ionic 2: ENOENT: no such file or directory

Hola a tod@s!!

Ya, lo sé, he estado casi un año fuera. Digamos que debido a una pequeñaja que ha llegado a mi vida, no he tenido tanto tiempo como me hubiese gustado 🙂

Pero bueno, eso no quita para que siga con otra de mis pasiones. Así que ayer me decidí a echar un vistazo al avance de Ionic 2. Así que me fui a ese maravilloso apartado llamado “Getting Started“. Y procedí a ejecutar el primer comando de terminal para instalar Ionic y Cordova mediante Node.js.

La instalación de Cordova se realizó correctamente. Sin embargo la instalación de Ionic me lanzó un error de fichero o directorio no encontrado:

Al parecer (corregidme si me he equivoco) se trata de una incompatibilidad con NodeJS 6. Después de investigar un rato, probé la solución por excelencia de cualquier programador:

¡Y resulta que funcionó! Así que si estáis intentando instalar Ionic y os suelta ese error, a mí me bastó con desinstalar e instalar Ionic. Aunque si hay alguna solución más elegante lo agradeceré.

A ver si a partir de ahora vuelvo a retomar este pequeño blog.

¡Hasta la próxima!

Rupert.

AngularJS: Routing

Con este artículo voy a dejar descansar esta serie de AngularJS y me centraré de nuevo en Ionic Framework, ahora que ya conocemos lo básico del funcionamiento. En el artículo anterior vimos cómo realizar peticiones asíncronas mediante el servicio $http. En este caso vamos a ver cómo funciona el Routing dentro de una aplicación AngularJS.

Objetivo del ejemplo

Hemos de tener en cuenta que AngularJS basa su infraestructura en las SPA (Single Page Application), es decir, que todo va a ocurrir dentro de la misma página y el módulo de AngularJS y sus controladores serán los encargados de ir mostrando unas u otras vistas. Pero todo ejecutado desde la misma página.

Para ello, en este ejemplo, vamos a tener un Layout con un menú que nos permitirá navegar a través de las diferentes vistas, un main.js que se encargará de definir y configurar el módulo y sus rutas, y una serie de vistas que representarán cada una de las páginas.

Preparación del ejemplo

Para poder trabajar con el Routing de AngularJS, hemos de añadir una referencia a angular-route:

El Contenedor

La página layout.html será la encargada de crear “el marco” de la aplicación. Tiene un menú a través del cual iremos cargando las diferentes vistas en el layout. Las url a las que vamos a apuntar han de comenzar por # (que representa la raíz de la aplicación).

Las vistas se cargarán en el elemento que contenga la etiqueta ng-view.

Por lo tanto, layout.html quedaría más o menos así:

layout.html

Las Vistas

Las vistas en este ejemplo serán páginas creadas dentro de una carpeta views. El contenido de estas vistas sólo ha de tener el html que se quiera cargar, con su respectivo acceso al Modelo.

views/inicio.html
views/gatos.html
views/acercade.html
views/error.html

El Módulo AngularJS

En este caso, estamos hablando de cuatro vistas (inicio, gatos, acercade, error), por lo tanto vamos a tener cuatro rutas diferentes y cuatro controladores diferentes. Lo primero es definir el módulo e inyectarle el módulo ngRoute, que nos permitirá configurar posteriormente las rutas de la aplicación.

Definimos los cuatro controladores, contando con que cada uno tendrá su propio scope:

Por último, se definen las rutas mediante la función config del módulo. El parámetro que recibe es el servicio $routeProvider, que nos permite definir rutas mediante el método when (para rutas definidas) y el método otherwise (para las rutas no definidas). Aparte del controlador y la plantilla, es posible utilizar redirectTo para indicar una redirección.

De esta manera, nuestra configuración de routing quedaría así:

Con esto ya hemos visto cómo funciona de manera básica el routing de AngularJS, teniendo en cuenta que Ionic Framework utiliza el mismo sistema.

¡Hasta la próxima!

Rupert.

AngularJS: Peticiones por AJAX

¡Hola de nuevo! Tras un largo periodo en que mi vida personal y laboral ha dado un giro de 180º, es momento de desempolvar el blog y continuar escribiendo algo.

En el último artículo de AngularJS vimos una pequeña introducción a la Inyección de Dependencias. Esta vez, siguiendo el “hilo argumental”,  y antes de volver a la serie de Ionic Framework, vamos a ver cómo podemos realizar peticiones por AJAX desde un controlador de AngularJS.

Objetivo del ejemplo

En este sencillo ejemplo vamos a ver cómo realizar peticiones asíncronas por medio del servicio $http. Al hacer click sobre un botón, se lanzará una petición contra el servicio localizado en http://www.programandoconrupert.com/ws/servicio-gatos.php. Dicho servicio contiene el siguiente código:

Por lo tanto, recuperaremos un array en formato JSON, que nosostros mostraremos en nuestro HTML.

Preparación del ejemplo

Para comenzar con este ejemplo vamos a tener un módulo llamado AppGatos y un controlador llamado ControladorGatos. En el $scope de ese controlador tendremos una colección que llamaremos gatos, además de una función llamada obtenerGatos, que llamaremos desde un botón en el HTML.

Y este sería el HTML que utilizaremos para llamar a la función obtenerGatos y mostrar el modelo gatos:

Servicio $http

Para realizar la llamada por AJAX al servicio que devolverá el JSON con el array, utilizaremos el servicio de AngularJS $http. Se trata de una API que permite realizar peticiones asíncronas al servidor por medio de XMLHttpRequest o por medio de JSONP.

Para utilizarlo necesitamos inyectarlo al controlador:

Llamada explícita

Como en la mayoría de frameworks Javascript con soporte AJAX, disponemos de una función general donde se pueden específicar todas las peculiaridades de la petición, y por otro lado disponemos de métodos de abreviatura que nos permiten realizar llamadas más genéricas pero de una manera más rápida.

Para utilizar la función general, se le pasa un objeto de configuración con ciertas propiedades, entre las que pueden estar:

  • method – Método HTTP con el que se realiza la petición
  • url – URL a la que realizamos la petición
  • params – Listado de parámetros GET
  • data – Listado de parámetros que se envían en la petición
  • headers – Cabeceras de la petición
  • withCredentials – Indica si la petición requiere credenciales
  • responseType – Tipo de datos que se esperan en la respuesta

Mediante el método .then() especificamos los callbacks que recibirán la respuesta, bien de success o bien de error. El objeto que recibimos tiene estas propiedades:

  • data – Contenido de la respuesta
  • status – Código de estado HTTP
  • headers – Getter del Header
  • config – Objecto de configuración que se utilizó para crear la petición
  • statusText – Texto de estado

De esta manera, en nuestro ejemplo, la llamada para recibir el listado de gatos sería así:

Métodos abreviados

Por el lado contrario tenemos los métodos abreviados para realizar peticiones. Estos métodos ahorran bastante tiempo de desarrollo, permitiendo además añadir el objeto de configuración para especificaciones adicionales. Estos métodos son:

  • $http.get
  • $http.post
  • $http.put
  • $http.delete
  • $http.head
  • $http.jsonp

Con esto hemos visto lo básico para poder comunicarnos con el servidor desde nuestra aplicación Ionic mediante AngularJS.

¡Hasta la próxima!

Rupert.

AngularJS: Introducción a la Inyección de Dependencias

En artículos anteriores ya hemos visto cómo trabajar con controladores y ámbitos y cómo añadirles eventos. En este artículo vamos a ver cómo podemos comunicar esos controladores mediante la inyección de dependencias.

Para ello vamos a ver ciertos elementos de AngularJS (value, factory y service) que nos van a ayudar a publicar valores y funciones para “inyectarlas” a los diferentes controladores.

Preparación del ejemplo

Para las opciones que vamos a ver en este artículo voy a tomar como base el siguiente código. Básicamente es una página con el módulo AppGatos declarado con dos controladores. Por cada controlador vamos a tener un div que mostrará ciertos datos, un campo de texto y un botón al que le iremos asignando funcionalidad en cada acción:

Por lo tanto si ejecutamos esta página veremos que de momento sólo contamos con el $scope de cada uno de los controladores y, al ejecutar la acción, cada actualización será independiente entre los controladores.

Inyección Implícita vs Explícita

A partir de ahora vamos a empezar a jugar con la Inyección de Dependencias. En el código base, sin embargo, ya hemos empezado a utilizarla. El sistema es el siguiente: Los módulos de AngularJS van a exponer una serie de elementos que pueden ser “reclamados” o no por otros módulos de AngularJS.

En el código base que estamos utilizando ya estamos reclamando el objeto $scope. Y en este caso hemos utilizado la Inyección Implícita, ya que obtenemos el objeto mediante el nombre de variable:

En principio no hay mucho problema en utilizar este sistema (de hecho voy a utilizar el sistema implícito en este artículo) pero puede haber problema si estamos utilizando alguna tecnología que minimice el código. Por ejemplo, en vez de $scope, lo puede transformar en a, por lo tanto ya no reconoce el objeto $scope expuesto. Para solucionarlo lo más recomendable es utilizar la Inyección Explícita, que se basa en declarar un array donde se especifica por String los elementos que vamos a inyectar en el mismo orden en el que los necesitamos en la declaración de la función:

Value

El elemento value sirve para declarar valores  que utilizarán los controladores y se declara durante la configuración

Factory

Factory es una función que devuelve un objeto con sus atributos y funciones. Devuelve ese objeto cada vez que un controlador o un servicio lo pide. Lo que se devuelve en un factory es un objeto con todos los elementos del factory.

El objeto se crea al declarar el factory y es compartido por los servicios y controladores.

Service

Service es un objeto Javascript que contiene un conjunto de funciones que realizan ciertas tareas. Puede ser inyectado en un controlador o en otro servicio.

A diferencia de Factory, se crea un nuevo objeto cada vez que se inyecta en un controlador o en un servicio.

Con esto hemos visto una pequeña introducción a la Inyección de Dependencias, en otro artículo crearé un módulo completo de AngularJS para ver cómo aplicar todo lo que hemos visto hasta ahora.

¡Hasta la próxima!

Rupert.

WordPress WP-Admin: columnas personalizadas para Custom Post Type

En un par de proyectos me he encontrado con la necesidad de personalizar el listado que WordPress ofrece para gestionar los Custom Post Types. En artículos anteriores vimos cómo crear un Custom Post Type y cómo añadirle campos personalizados.

En este artículo vamos a ver cómo podemos personalizar el listado de administración que nos ofrece WordPress.

Preparación del ejemplo

Voy a utilizar como base el plugin que creé en este artículo. Por recordar, teníamos un custom post type  Gatos que permitía gestionar un listado de Gatos. Posteriormente, en este otro artículo, le añadí los siguientes campos personalizados (meta-fields): Edad, raza, sexo y color. Sin embargo al acceder al listado aparecía lo siguiente:

Lo que vamos a hacer es añadir al listado las columnas de: Edad, Sexo y Raza. Sin embargo, la columna de Edad no mostrará el número, si no que, si el gato tiene menos de 4 años imprimirá “Cachorro“, si no imprimirá “Adulto

Añadir Cabeceras de Columnas

Antes de “rellenar” las filas del listado, se han de definir las columnas. Existen algunos nombres de columna que cogerán su valor automáticamente (title, author, date).

Así que debemos una función al filtro manage_edit-{post_type}_columns, devolviendo un array con las columnas con las que queremos trabajar.

Con la función columnas_post_type_gatos le indicamos que al entrar en la administración del post typegato” muestre las columnas que indicamos en el array. De esas columnas sólo Edad, Sexo y Raza son personalizadas. De tal manera, que estableciendo estas columnas, el listado ya nos aparecerá de la siguiente manera:

Contenido de Columnas Personalizadas

Las columnas integradas (title, author, date…) se rellenan automáticamente. Sin embargo, lo que necesitamos es imprimir un valor en nuestras columnas personalizadas.

Para ello debemos añadir una función a la acción manage_{post_type}_posts_custom_column, pasándole por parámetro la columna que se está renderizando y el id del post. Por lo tanto, si no nos interesa cambiar lo que imprimen las columnas integradas, sólo tendremos que decidir qué imprimir en nuestras columnas personalizadas.

Con este código le decimos que, por cada registro, cuando tenga que renderizar Sexo y Raza, los recupere y los imprima. Con edad, sin embargo, imprimiremos un texto u otro según el valor numérico del campo. Nuestro listado quedaría así:

Ordenar por Columna Personalizada

Para completar nuestra personalización del listado de administración, vamos a añadir a la columna Edad la posibilidad de ordenar el listado por su valor.

Para ello lo primero que debemos hacer es indicar a WordPress qué columnas tendrán capacidad de ordenación. Se ha de añadir una función al filtro manage_edit-{post_type}_sortable_columns, que recibe como parámetro las columnas previamente definidas. Se ha de asignar un “código de ordenación” a cada columna por la que queramos ordenar.

Una vez establecidas las columnas que tendrán ordenación, se ha de añadir el filtro de ordenación a la consulta principal. Para ello se añade una función al filtro ‘request‘, comprobando que se trate del post_type correcto.

Con esto ya hemos visto cómo personalizar nuestro listado de custom post type. Hemos visto cómo añadir columnas propias y cómo ordenar por ellas.

¡Hasta la próxima!

Rupert.

Entradas anteriores

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑