Tutorial: Crear tienda online con WooCommerce – parte 3 – Instalar un theme y configurar la apariencia.

Vamos a continuar con el tutorial para aprender a crear tiendas online con WordPress y Woocommerce. Hoy vamos a ver cómo instalar un theme y configurar algunos aspectos para cambiar la apariencia de nuestra web.

Tabla de contenidos

Apariencia: Temas

Lo primero que vamos a hacer es instalar un tema para nuestra tienda.
Los temas son plantillas que dan un estilo predeterminado a nuestra web y que normalmente nos permiten configurar ciertas características como la cabecera, colores, fuentes etc.

Existen infinidad de temas, algunos gratuitos y otros de pago. Algunos vienen ya preparados para una temática en concreto y traen consigo un montón de funcionalidades preestablecidas, algunas incluyen un maquetador visual (veremos más adelante qué son) y un montón de widgets preestablecidos. Los widgets son elementos que se pueden colocar en determinados espacios de tu web, como por ejemplo, la barra lateral o el pie de página.

Hay muchos tipos de widgets: pueden ser imágenes, texto, formularios de suscripción, botones de redes sociales, menús, categorías, etc.


Sin embargo, cuanto más complejo sea un tema más pesado es y más tiempo tarda en cargarse, y la velocidad es clave para el posicionamiento de tu web en los buscadores.
Además las plantillas que incluyen muchas funcionalidades hacen que si más adelante decides cambiar a otro tema no puedas recrear esas funcionalidades y tengas problemas de compatibilidad y eso hace que sea mucho más complicado mantener la web. Puede que la empresa o el desarrollador que en su día realizó el tema no lo mantenga actualizado en el futuro y tengas problemas a la hora de actualizar la versión de wordpress.

Yo prefiero usar el principio KISS (del inglés Keep It Simple, Stupid!:«¡Mantenlo sencillo, estúpido!») es un acrónimo usado como principio de diseño.

El principio KISS establece que la mayoría de sistemas funcionan mejor si se mantienen simples que si se hacen complejos.

Por lo tanto un tema debe servir para dar un aspecto visual a nuestra web, pero para las funcionalidades extra que podamos necesitar usaremos plugins, el concepto de plugin lo veremos más adelante, pero de momento quédate con que un plugin es un añadido que se instala en wordpress y da funcionalidades extra a nuestra web.

Instalar el tema Astra

El tema que vamos a utilizar en este tutorial se llama Astra, es uno de los más populares, es rápido, fácil de configurar y ofrece una flexibilidad más que suficiente para adaptarlo a nuestras necesidades. Tiene una versión de pago, pero la versión gratuita es suficiente para las necesidades que vamos a tener a la hora de montar nuestra tienda online.

Para instalar un nuevo tema en las opciones de la barra de la izquierda pulsamos en “Apariencia” y seleccionamos “Temas”:

Con la instalación de WordPress vemos que ya viene incluido por defecto tres temas, para añadir el tema Astra pulsaremos el botón “Añadir nuevo”:

Al ser uno de los temas más populares es posible que ya te aparezca entre los primeros, si no es así en el cuadro de búsqueda escribiremos “Astra” para que aparezca el tema que queremos instalar:

Después posicionamos el cursor con el ratón encima del tema y pulsamos en el botón “Instalar”:

Una vez instalado pulsamos en el botón “Activar”:

Ya tenemos nuestro tema instalado, vamos a acceder a la parte pública de nuestra web para ver como ha cambiado el aspecto, para ello en la parte superior izquierda ponemos el ratón sobre el nombre de nuestra tienda al lado del icono de la casita y hacemos clic en “Visitar el sitio”:

Como podemos observar el aspecto de nuestra web ha cambiado, aunque sigue sin ser gran cosa, no te preocupes, poco a poco iremos dando forma a nuestra web.

Quitar la barra lateral

De momento vamos a hacer un pequeño ajuste, vamos a quitar la barra lateral, por lo que vamos a volver al panel de administración de WordPress, para ello en la barra de arriba, a la izquierda posicionamos el ratón sobre el nombre de nuestra tienda y hacemos clic en “Escritorio”:

Ahora en las opciones de la barra de la izquierda seleccionamos “Apariencia” y hacemos click en “Personalizar”:

En el siguiente menú de opciones seleccionamos “Barra lateral”:

En el desplegable “Diseño por defecto” debemos seleccionar “Sin barra lateral” y después debemos pulsar en el botón “Publicar” de arriba para que se haga efectivo el cambio.

Una vez publicado los cambios vamos a volver al menú anterior pulsando en la flecha izquierda “<”:

Añadir un logotipo

Para situarnos, en este momento tenemos que estar en Apariencia →  Personalizar, si vienes del apartado anterior ya estás situado.

Vamos a añadir un logotipo y vamos a quitar el título de la tienda, para ello en el menú de personalización vamos a hacer clic en “Maquetador de cabeceras”:

En el siguiente menú debemos seleccionar “Título y logotipo del sitio”:

El siguiente paso que vamos a dar es hacer clic en “Seleccionar El logotipo”:

Al hacer clic en “Seleccionar El logotipo” se abrirá la galería de imágenes para que seleccionemos una. En estos momentos no tenemos todavía ninguna imagen en la galería,  para subir nuestro logo vamos a hacer clic en  “Seleccionar archivos”:
En el siguiente post veremos el panel de administración de WordPress aprenderemos a configurar todo lo necesario.

Se abrirá el navegador de archivos para que seleccionamos la imagen del logotipo de nuestra tienda que tengamos en en nuestro ordenador, una vez subida pulsamos en el botón “Seleccionar” que se encuentra abajo a la derecha:

Después nos da la opción de recortar la imagen, ajusta el recuadro como creas conveniente para que se ajuste bien a tu logo y pulsa en “Recortar la imagen” o en “Omitir el recorte” si no quieres hacer ningún recorte:

Ahora vamos a ajustar el ancho del logotipo hasta que quede bien. En mi caso lo voy a dejar en 200 pixels, prueba distintos tamaños moviendo la barra hasta que te guste como queda:

Como nuestro logo ya incluye el título de la tienda vamos a ocultarlo desactivando el selector “Mostrar título del sitio”:

El pequeño icono que hay al lado del selector indica como se verá en cada uno de los posibles tamaños de pantalla (ordenador, móvil, tablet…), vamos a desactivar la opción “Mostrar el título” para todos los tamaños de pantalla, para ello debemos pulsar en el pequeño icono con forma de pantalla y desactivar la opción:

Por último guardamos los cambios pulsando en el botón “Publicar” y volvemos al menú anterior haciendo clic en la flecha para volver atrás:

Y de nuevo en la flecha de la izquierda para volver al menú principal de personalización:

Personalizar colores:

El tema Astra trae unos colores por defecto para el texto, los enlaces, los botones etc. Lo normal es personalizar estos colores para que queden bien con el diseño de nuestra página, por ejemplo si ya tenemos definidos unos colores corporativos para nuestro logo.

Para personalizar los colores en el menú principal de personalización (Apariencia → Personalizar) seleccionamos la opción “Global”:

En el siguiente menú  vamos a seleccionar “Colores”:

En “Color de tema” hacemos clic en el círculo del color y seleccionamos el color principal que va a tener la web, yo por ejemplo he seleccionado el mismo color que el carrito del logo:

Una vez seleccionado el color pulsamos el botón “Publicar”.

En “Color de los enlaces” voy a seleccionar el mismo color otra vez, tu elije el color que más te guste, aquí es donde entra en juego tu creatividad:

Por último guardamos los cambios pulsando el botón “Publicar” y cerramos el editor de configuraciones pulsando en el aspa (“X”) de arriba a la izquierda:

Más adelante haremos más cambios en el diseño de nuestra web, pero de momento ya tenemos la base para empezar a trabajar. 

El próximo post veremos cómo instalar WooCommerce para añadir la funcionalidad de tienda online en nuestra web.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 2 – Panel de administración de WordPress

En el post anterior vimos cómo instalar WordPress en nuestro Hosting, hoy vamos a continuar aprendiendo a realizar algunas configuraciones sencillas en el panel de administración de WordPress.

Tabla de contenidos

El panel de administración de WordPress

Nuestra web va a tener dos partes diferenciadas: La  parte pública y la parte privada.

La parte pública es la que los visitantes y usuarios pueden ver cuando acceden a tu tienda online.

La parte privada corresponde a la  administración de la misma, protegida con usuario y contraseña, donde solo podrás acceder tú (o bien otro usuario con rol de administrador al que autorices). En la parte privada  podrás crear y modificar el contenido de la página, y gestionar todo lo referente a la tienda online. 

Esta parte privada es el panel de administración de WordPress y para acceder a él tienes que añadir /wp-admin a la url de tu tienda en la barra del navegador que se encuentra en la parte de arriba. Recuerda que la url de tu tienda es el dominio que compramos al contratar el hosting.

Por ejemplo si la url de tu tienda es www.supertienda.com en la barra del navegador escribiremos www.supertienda.com/wp-admin.

Lo primero que veremos al acceder es una ventana donde debemos introducir nuestro nombre de usuario y la contraseña que obtuvimos en el proceso de instalación de wordpress:

Una vez introducido el nombre y la contraseña accederemos al panel de administración:

Aquí es donde realizaremos todas las acciones para cambiar el aspecto de nuestra web y desde donde introduciremos todo el contenido que luego los visitantes de nuestra web podrán ver.

Como podemos ver en la parte izquierda hay una barra con una serie de opciones: Escritorio, Entradas, Medios, Páginas, Comentarios, Apariencia, Plugins, Usuarios, Herramientas, Ajustes…

Veamos una breve explicación de qué es cada opción:

En la sección “Escritorio” tenemos dos opciones: “Inicio” y “Actualizaciones”.

En “Inicio” tenemos varios paneles con una serie de links de acceso a diferentes opciones de wordpress, información sobre el sitio, noticias de wordpress, etc.

En “Actualizaciones” aparecerán aquellos elementos que tienen una actualización disponible: puede ser una nueva versión del propio wordpress, del tema o de algún plugin que estemos utilizando….. no te preocupes, veremos que es cada cosa.
Las “Entradas” son los artículos del blog, normalmente se muestran por orden cronológico. Por defecto viene con una entrada “Hola Mundo” creada, podemos eliminarla.

WordPress fue creado inicialmente como una herramienta para crear blogs, tener un blog en nuestra tienda puede ser una buena estrategia de marketing para atraer clientes hacia nuestra web, pero requiere que introduzcamos contenido regularmente para que sea eficaz. Si no vas a incluir un blog en tu tienda no debes preocuparte por esta sección. 

En la sección “Medios” encontraremos las imágenes que subimos para mostrar en la web, puede ser el logo de nuestra tienda, imágenes de fondo, las imágenes de nuestros productos, etc. Además de imágenes también podemos subir otro tipo de archivos como videos, audios, archivos PDF etc.

En “Páginas” crearemos aquellas secciones fijas que queremos mostrar en nuestra web. Por ejemplo, la página de Inicio, página de contacto, página de quienes somos… etc.

Al instalar wordpress se crea por defecto una página llamada “Página de ejemplo” que podremos eliminar, y un borrador de “Política de privacidad”:

Cuando instalemos Woocommerce se crearán automáticamente varias páginas para el funcionamiento de la tienda. Lo veremos más adelante.

En “Comentarios” se muestran aquellos comentarios que escriban los lectores del blog en las entradas que escribimos, podemos permitir o no que los lectores puedan dejar comentarios. También en las páginas podemos permitir comentarios, en principio, salvo que incluyas un blog en la tienda no vamos a tener comentarios.

En “Apariencia” es donde podemos seleccionar el tema o plantilla que queremos utilizar, personalizar el estilo, crear el menú, modificar la cabecera… etc. En resumen desde aquí es donde definiremos la apariencia visual de nuestra web.

Los “Plugins” son añadidos que se instalan en WordPress y dan funcionalidades extra a nuestra web. Por defecto vienen instalados dos plugins, uno es para evitar spam en los comentarios y el otro es un plugin de ejemplo. Podemos eliminar los dos. 

En la sección “Usuarios” tenemos los usuarios que están dados de alta, ahora mismo solo aparecerá nuestro usuario. Existen varios perfiles de usuario, cuando instalemos Woocommerce se creará también un perfil para cliente y otro para gestores de la tienda.

Si vas a autorizar a otras personas para que gestionen la tienda online deberás crearles un usuario aquí.

En “Herramientas” tenemos varias opciones para importar y exportar contenidos, exportar y borrar datos personales etc. En principio no necesitaremos tocar nada aquí para crear nuestra tienda.

En “Ajustes” podemos cambiar algunas configuraciones básicas de nuestra web, lo veremos con más detalle enseguida.

Si es la primera vez que trabajas con wordpress puede que te parezcan demasiadas opciones y te resulte un poco intimidante la primera vez, pero no te preocupes, te explicaré paso a paso todo lo que necesitas saber según vayamos avanzando en la creación de la tienda y una vez te hayas familiarizado con el panel te resultará sencillo realizar cambios.

Ajustes

Vamos a realizar unos pequeños cambios en ajustes:

Ajustes generales

Accedemos a los ajustes generales haciendo clic en “Ajustes”.

Lo primero que vamos a hacer es poner el título de nuestra tienda y la descripción corta. El título será el que pusimos cuando instalamos WordPress, si queremos cambiarlo podemos hacerlo aquí.


En la descripción corta pondremos algo que defina nuestra tienda. Por ejemplo “La mejor ropa de hogar al mejor precio”:

Aquí también podemos cambiar la dirección de correo electrónico de administración, si deseas que los avisos de la web lleguen a una dirección de correo diferente a la de tu usuario puedes cambiarla aquí.

Hay otras opciones que puedes cambiar aquí, como el idioma del sitio o la zona horaria, el formato de fecha etc.

Dependiendo de tu país deberás seleccionar la zona horaria o ciudad que corresponda, por ejemplo si tu tienda está en España deberás seleccionar la zona horaria de Madrid:

Finalmente pulsamos en el botón “Guardar cambios”:

Enlaces permanentes

Un enlace permanente (del inglés, permanent link y en abreviatura permalink) es una URL que se utiliza para llegar a una página o post en tu sitio web de WordPress.

Para configurar los enlaces permanentes en la sección “Ajustes” vamos a seleccionar “Enlaces permanentes”.

Las URLs pueden tener diferentes formatos, para que las URLs sean más legibles y se posicionen mejor en los buscadores vamos a seleccionar “Nombre de la entrada”:

Para que se haga efectivo el cambio pulsaremos el botón “Guardar cambios”:

En el próximo post veremos como instalar un theme y configurar algunas cosas para cambiar el aspecto de nuestra web

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 1 – Contratar hosting e instalar WordPress.

Hoy voy a comenzar un tutorial para aprender a crear tiendas online con WordPress y Woocommerce, a lo largo de varios posts iremos desgranando todos los pasos que hay que dar desde cero crear una tienda online.

Tabla de contenidos

Cosas que vas a necesitar para crear tu tienda online

Hosting y dominio.

Te enseñaré cómo comprar un dominio para tu tienda y cómo contratar un hosting adecuado para tu negocio online. 

Una página web se compone básicamente de archivos que generan el contenido que el visitante verá desde su navegador. También suele disponer de una base de datos donde se guarda la información, por ejemplo la información de los productos que vamos a vender en nuestra tienda se guardarán en una base de datos.

Un hosting es el espacio en un servidor donde se encuentran los archivos de tu página y la base de datos. Los proveedores de hosting también suelen incluir otros servicios como cuentas de correo electrónico.

Para que una persona pueda visitar tu web necesita escribir una dirección en la barra del navegador, esta dirección es lo que se llama dominio, normalmente acabará con .com, .net, .es, .org etc.

Por decirlo de alguna manera, el hosting es la casa donde está el contenido de tu web y el dominio la dirección de esa casa.

Por lo tanto necesitas contratar un hosting para alojar tu web y un dominio que apunte a ese hosting. 

Imágenes de productos y logotipo:

Te recomiendo que tengas en tu ordenador preparada una carpeta para las imágenes que vas a utilizar en un sitio donde las localices fácilmente, puede ser en el escritorio o donde tú te organices mejor. 

Ten preparadas las fotos de los productos que vas a vender y también un logotipo.

Si no tienes un logotipo creado es recomendable que crees uno o encargues a un diseñador el diseño de un logotipo. Si no tienes presupuesto para encargar a un diseñador un logotipo no te costará mucho trabajo encontrar en internet información sobre cómo crear un logotipo. 

Contratar hosting y dominio

Como vimos en la introducción dos de las cosas que necesitas para montar tu tienda online es un hosting y un dominio.

Puedes contratar por separado el hosting y el dominio o contratarlo todo con la misma empresa. 

Como el objetivo de este libro es que puedas tener tu tienda en funcionamiento en el menor tiempo posible y de la manera más sencilla vamos ver cómo contratar las dos cosas en el mismo proceso.

Existen muchos proveedores de hosting de diversos precios y calidades, aunque el proceso de contratación e instalación de wordpress en cualquiera de ellas puede ser similar, puedes encontrar diferencias en el proceso según que tipo de panel para gestionar el hosting utilicen. 

En este libro voy a explicar como es el proceso de contratación e instalación en Webempresa, considero que es un hosting con calidad contrastada, con una buena relación calidad-precio, disponen de servidores rápidos y optimizados para wordpress y ofrecen un gran nivel de seguridad lo que es muy importante a la hora de tener una tienda online. Además ofrecen un buen soporte lo cual agradecerás si tienes algún problema en algún momento. No obstante te aconsejo contrastar otros proveedores y elegir el que más te convenza, si decides elegir otro proveedor de hosting, el proceso de contratación e instalación de wordpress puede variar a lo que explico aquí, aunque por lo general no deberías tener problemas siguiendo las instrucciones que te de la empresa de hosting para realizar el proceso.

En primer paso por lo tanto va a ser contratar el hosting, puedes acceder a la zona de hostings para woocommerce de webempresa haciendo clic aquí

(* Enlace de afiliado).

El enlace nos llevará a la zona de la web de Webempresa para contratar un hosting optimizado para Woocommerce, si nos desplazamos por la página veremos que tenemos tres planes que podemos contratar (Plan Mini, Plan Medium y Plan Maxi):

Si tu tienda va a tener pocos productos a la venta y no prevees una gran cantidad de visitas es posible que el Plan Mini sea suficiente, de lo contrario, si te lo puedes permitir te recomiendo el Plan Medium ya que además de más espacio en disco y más memoria ram disponible en el servidor, incluye soporte adicional especializado en wordpress y woocommerce lo que te va a dar mayor tranquilidad a la hora de resolver problemas que puedan surgir.


Por último si vas a tener gran cantidad de productos a la venta en tu tienda y prevees una gran cantidad de visitantes puedes optar por el Plan Maxi, en cualquier caso siempre puedes cambiar a un plan superior si el plan contratado se te queda pequeño.

Cualquiera de los tres planes incluye el dominio gratis el primer año.

Una vez seleccionado el plan que más nos conviene pulsamos en el botón “CONTRATAR”:

En la siguiente pantalla debemos de seleccionar el nombre de dominio, seguramente es algo que ya tendrás pensado, el primer paso es comprobar que el dominio está libre, de lo contrario deberás pensar otro nombre de dominio.

El dominio se compone de dos partes, un nombre y una extensión, la extensión es lo que va después del nombre separado por un punto, normalmente .com, .es, .net, .org, etc.

Puedes elegir el que prefieras, aunque el más utilizado por las empresas sigue siendo el .com.

Por lo tanto escribimos el nombre de dominio que hemos pensado para nuestra tienda, y en el desplegable seleccionamos la extensión, después pulsamos el botón “Comprobar”, lo que nos dirá si ese dominio está libre o ya está ocupado.

En caso de que esté libre pulsaremos en el botón “Continuar” que se mostrará más abajo.

En el momento de escribir estas líneas la contratación tiene un cupón de descuento de 50% que ya se aplica automáticamente así que lo único que nos queda es pulsar en el botón “CONFIRMAR PEDIDO

En la siguiente pantalla debemos introducir nuestros datos de cliente:

Introducimos el país y la provincia de residencia:

Después seleccionamos si somos un particular/autónomo o una empresa e introducimos el NIF o DNI.

A continuación introducimos nuestros datos personales (Nombre, Apellidos, Email, Teléfono, Dirección, Ciudad y Código postal):

En el siguiente apartado tenemos la posibilidad de registrar el dominio a nombre de otra persona, o si va a ser a nuestro nombre. Si va a ser a nombre de otra persona debemos seleccionar “Añadir nuevo contacto” en el desplegable, en caso contrario lo dejamos como está:

Por último debemos introducir una contraseña para acceder al panel de webempresa, debemos introducir la misma contraseña en el campo “Confirmar contraseña”.

Por último solo nos queda marcar la casilla “He leído la política de privacidad y acepto los  Términos del Servicio y Condiciones de Uso“ y pulsar el botón “Finalizar el Pedido”:

Una vez realizado el pago ya tenemos contratado nuestro hosting y dominio y podremos acceder al área de clientes de Webempresa para instalar WordPress.

Instalar WordPress:

Una vez finalizado el pedido para contratar el hosting y dominio te llegarán varios correos de Webempresa, te aconsejo guardar estos correos y tenerlos localizables porque en ellos viene la información para acceder a la administración del hosting.

Ahora lo primero que debemos hacer es acceder a cPanel.

cPanel es el panel de control más popular para cuentas de hosting web. Te permite administrar cómodamente todos los servicios en un solo lugar. Actualmente, cPanel es el estándar. Desde cPanel controlarás el contenido de tu web, la base de datos, copias de seguridad, etc.

En uno de los correos que te han llegado de  Webempresa informándote de que el Hosting WordPress está activado te indicarán cómo acceder al cPanel, en el correo te indicarán algo como esto:

Debes hacer clic en en el enlace que viene indica “Dirección de acceso al panel de control WePanel”:

Guarda este enlace en tus marcadores, así podrás acceder a él con facilidad siempre que lo necesites. Al pinchar en el enlace nos pedirá usuario y contraseña para acceder:

El usuario y la contraseña vienen en el mismo email, justo después del enlace en que has hecho click para acceder:

Guarda tu usuario y contraseña a buen recaudo.

Una vez introducido el usuario y contraseña hacemos clic en el botón “LOG IN” y accederemos al panel de administración de tu hosting:

Ahora debemos desplazarnos hacia abajo por la página y buscar la sección “Aplicaciones Webempresa”, y hacemos click en instalar wordpress:

A pesar de que Webempresa ya nos ofrece la posibilidad de instalar WordPress con Woocommerce desde el inicio, nosotros vamos a instalar solo WordPress e instalaremos Woocommerce más adelante desde el propio WordPress, de esta manera entenderás mejor cómo funciona WordPress y su sistema de plugins, además si decides utilizar otro hosting puede que no tengas estas opciones. Por lo tanto vamos a hacer clic en “Instalar WordPress”:

En la siguiente pantalla escribiremos el nombre de nuestra tienda:

Después seleccionamos el dominio en el desplegable, vemos que tenemos varios, Webempresa nos facilita también un dominio temporal que nos puede ser útil para hacer pruebas, nosotros vamos a seleccionar el dominio definitivo que acabamos de contratar:

Es de resaltar que automáticamente Webempresa nos instala un certificado ssl para poder utilizar poder utilizar https y que nuestra tienda sea segura. Si no entiendes estos conceptos no te preocupes, solo con saber que está todo en orden es suficiente.

La ruta la dejamos en blanco para que la web cargue  en la raíz del dominio, dejamos también seleccionada la opción “Crear una contraseña aleatoria y recibir por correo electrónico” y pulsamos en el botón “Instalar”:

La instalación comenzará a realizarse y tras unos segundos ya tendrás tu web lista para empezar a trabajar, te avisa de que tu nuevo sitio WordPress ya está listo y te indica el enlace que debes utilizar para acceder a tu web, debajo también nos indica el enlace para acceder a la parte de Administración de nuestra web, con el usuario y contraseña:

Pulsando en el icono del ojo podemos ver la contraseña, en cualquier caso en este momento habrás recibido un correo con la url, el usuario y contraseña para acceder a la parte de administración de la web, te recomiendo que guardes este email a buen recaudo:

Una vez Instalado WordPress si accedemos a la parte pública (la que verán nuestros visitantes) utilizando la url con nuestro dominio veremos algo como esto:

Si has instalado WordPress en otro hosting es posible que la pantalla de presentación sea algo diferente, no importa, vamos a ir dando forma a nuestra web para convertirla en una tienda online atractiva y funcional.

En el siguiente post veremos el panel de administración de WordPress aprenderemos a configurar todo lo necesario.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Libro: Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar

Este libro es la guía perfecta para cualquier persona que quiera montar su propia tienda online sin tener que programar.

Si eres un emprendedor o empresario que quiere comenzar a vender en línea, o simplemente quieres aprender a crear una tienda online para otras personas como negocio, nuestro libro te mostrará todo lo que necesitas saber. Aprenderás cómo utilizar WordPress y WooCommerce para crear una tienda online desde cero, cómo configurar tu tienda, cómo añadir y gestionar productos, cómo aceptar pagos y cómo hacer seguimiento de tus ventas.

Con imágenes paso a paso y un lenguaje fácil de entender, este libro es la guía definitiva para montar tu tienda online con éxito.

¡Visita la ficha del libro en Amazon para obtener más información y para comprar tu copia hoy mismo! ¡Estamos seguros de que disfrutarás del libro y de todo lo que te enseñará sobre el mundo del comercio electrónico!

Ya disponible en Amazon:

Como virtualizar de manera gratuita Ubuntu Linux en los Mac con chip M1

Hola a todos:
Hoy vamos a ver cómo podemos virtualizar Ubuntu en un Mac con chip M1 utilizando Multipass.
Los nuevos procesadores M1 qué incorporan los Mac recientes les otorgar una gran potencia, sin embargo por el momento no existen muchas opciones para poder virtualizar Linux en ellos de una manera solvente. Si te dedicas al desarrollo es probable que te interese tener una maquina virtual con linux para determinadas tareas.
De momento VirtualBox y VMWare no son compatibles con esta nueva arquitectura. Tenemos la opción de utilizar Parallels, pero esta herramienta es de pago.
Por suerte Canonical nos ofrece la herramienta Multipass que ahora nos permite virtualizar ubuntu también en los nuevos Mac con chip M1.
Multipass nos permite realizar con un sólo comando todo el proceso de configurar una máquina virtual, buscar y verificar una imagen de disco, instalar el sistema operativo y lanzar la máquina virtual. Pueden activar o destruir rápidamente varias máquinas virtuales con facilidad, y los desarrolladores pueden elegir entre un catálogo cada vez mayor de imágenes y máquinas para fines especiales.

Bien, una vez hecha la presentación pasemos a la acción que es lo que nos interesa.

Tabla de contenidos

Instalar Multipass

Lo primero que vamos a necesitar es instalar Multipass para ello podemos seguir las instrucciones que se indican en su repositorio en GitHub.

La opción más sencilla es utilizar Homebrew para su instalación,
Si no tienes instalado Homebrew deberás instalarlo primero con el siguiente comando, (si ya lo tienes instalado puedes saltarte este paso):

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Para más información puedes consultar en la web https://brew.sh/

Una vez tengamos instalado Homebrew para instalar Multipass solo tienes que utilizar el siguiente comando:

brew install --cask multipass

Una vez terminada la instalación ya estaremos listos para crear máquinas virtuales con ubuntu.

Crear nueva máquina virtual nueva

Para saber que imágenes tenemos disponibles para crear una instancia utilizaremos el comando multipass find:

multipass find

Para crear una nueva máquina virtual nueva utilizaremos el comando launch desde el terminal y el alias de la imagen que queremos instalar, por ejemplo si queremos instalar la versión 18.04 de ubuntu utilizaremos el comando multipass launch bionic:

multipass launch bionic

Para crear una una nueva instancia del Ubuntu LTS actual utilizaremos el comando launch ubuntu desde el terminal:

multipass launch ubuntu


Esto descargará e instalará y lanzará una instancia de ubuntu y en unos segundos tendrás lista una máquina virtual.

Hay que decir que la instancia se crea por defecto con un espacio de disco pequeño y uso de memoria limitado, si solo vas a utilizar aplicaciones de consola puede que sea suficiente, pero si quieres utilizar un entorno de escritorio como veremos más adelante puede que no sea suficiente para que funcione con la fluidez necesaria. Si quieres otorgarle mas espacio debes indicarlo en el momento de utilizar el comando launch añadiendo algunos parámetros:

multipass launch -c 2 -d 20G -m 4G ubuntu

En este ejemplo con el parámetro “-c” le indicamos el numero de núcleos de procesador que queremos que utilice nuestra instancia, en este ejemplo de decimos que 2.

Con el parámetro “-d” le indicamos el tamaño de disco que va a utilizar, en este caso 20G.

Con el parámetro “-m” le indicamos la memoria ram que queremos que tenga, en ese ejemplo 4G.

Si no se le indica ningún nombré multipass asignará un nombre por defecto a la instancia creada, si deseamos que se cree con un nombre personalizado podemos usar el parámetro “-n” al crear la instancia con el comando launch.

Una vez termine el proceso de instalación de máquina ya podremos acceder a nuestra instancia.

Conectarnos por consola a una instancia:

Para ver las instancias que tenemos instaladas usaremos el comando multipass list:

multipass list

En el listado de maquinas que tengas instaladas nos indicará el nombre de la instancia, el estado (si está corriendo o parada) la ip que se le ha asignado a la maquina y el tipo de imagen que hemos instalado.

Apunta la ip que tiene asignada la instancia porque más tarde la vamos a necesitar para acceder al entorno de escritorio.

Si la instancia está parada (Stopped) tendremos que arrancarla primero, para ello utilizaremos el comando multipass start [nombre de la instancia].

Para conectarnos por consola a la instancia lanzada utilizaremos el comando multipass shell [nombre de la instancia]:

multipass shell vocal-jaeger

En lugar de “vocal-jaeger” tienes que poner el nombre de la máquina a la que quieres conectarte.

Ahora podremos ejecutar comandos dentro de la máquina virtual que hemos creado.

Escritorio gráfico en Multipass

Puede que no sea suficiente el acceso a la consola de la máquina virtual y necesites o quieras tener también un entorno gráfico completo con su escritorio.
Para poder ejecutar ubuntu en entorno gráfico debemos instalar un entorno de escritorio, para ello desde el terminal una vez conectados a la instancia utilizando multipass shell como vimos en el apartado anterior vamos a ejecutar los siguientes comandos:

sudo apt update 
sudo apt install ubuntu-desktop xrdp

Tras un rato instalando paquetes tendremos instalado en nuestra instancia el entorno de escritorio de ubuntu.

Ahora necesitamos un usuario con una contraseña para iniciar sesión. Una posibilidad es establecer una contraseña para el usuario “ubuntu” que se crea por defecto. Para ellos vamos a utilizar el siguiente comando:

sudo passwd ubuntu

Nos pedirá dos veces la contraseña:

El comando multipass shell que vimos anteriormente solo nos sirve para conectarnos a la maquina virtual por consola, pero para acceder al entorno gráfico vamos a tener que instalar alguna aplicación que nos permita conectarnos a un escritorio remoto, Microsoft Remote Desktop es una buena opción, para instalarlo vamos a App store y escribimos “Microsoft Remote Desktop” en el buscador:

Lo instalamos y una vez instalado abrimos la aplicación:

Pulsamos en el botón “Add PC” para crear una nueva conexión:

En la siguiente ventana debemos introducir la IP de la maquina a la que nos queremos conectar, recuerda que anteriormente con el comando multipass list nos mostraba la IP de las instancias.
Tambien podemos darle un nombre opcionalmente:

Ya solo nos queda hacer doble click en la conexión que ha creado para acceder a nuestra máquina virtual con entorno gráfico:

Al conectarnos nos pedirá usuario y contraseña, recuerda que el usuario es “ubuntu” y contraseña la que le pusiste anteriormente cuando ejecutaste el comando passw.

Una vez dentro nos pedirá de nuevo la contraseña, la volvemos a introducir y listo, ¡ya tenemos Ubuntu con entorno gráfico funcionando en un Mac con chip M!

Ahora pulsamos en el botón Next, seccionamos el idioma, volvemos a pulsar next, en la siguiente pantalla pulsamos tambien next y hemos terminado:

¡Así de fácil!
Ahora cada vez que queramos utilizar ubuntu desde nuestro Mac tendremos que arrancar la maquina desde el Terminal con el comando multipass start [nombre de la instancia] y conectarnos desde Microsoft Remote Desktop.

Tutorial de IONIC: Formularios reactivos

Hola a todos, hoy vamos a hablar de los formularios reactivos.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

En la aplicación de acertar números utilizamos [(ngModel)] para hacer  Data Binding entre la vista y el controlador.

Aunque este enfoque es sencillo y es una característica que viene heredando angular desde sus primeras versiones, en formularios complejos puede dificultar la gestión de los campos, además está previsto que se marque como deprecated en futuras versiones de Angular. 

Por otro lado Angular nos ofrece los formularios reactivos que nos permite gestionar de una manera más organizada  y escalable los campos de un formulario facilitando la validación.

Como siempre la mejor forma de comprender como funciona es con un ejemplo, así que vamos a crear un nuevo proyecto al que llamaremos formulario:

ionic start formulario blank

Seleccionamos Angular como framework y para este ejemplo no es necesario integrar nuestra app con Capacitor.

El primer paso que debemos dar es importar ReactiveFormsModule en el módulo de la página donde vayamos a utilizar un formulario, en este caso en home.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomePage } from './home.page';
 
import { HomePageRoutingModule } from './home-routing.module';
 
 
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Tabla de contenidos

Crear un FormControl

Ahora en home.page.ts vamos a importar la clase FormControl y a crear una instancia para un campo que en este caso llamaremos nombre:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  nombre = new FormControl('');
 
  constructor() {
  }
 
}

Vemos que al constructor FormControl le pasamos como parámetro una cadena vacía (‘’), este es el valor inicial que tomará el campo, si queremos que el campo tenga un valor de inicio podemos pasarle este valor en el constructor.

Veamos ahora cómo se utiliza un Form control en la plantilla, editamos el archivo home.page.html, eliminamos todo lo que hay dentro de ion-content y añadimos lo siguiente:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-item>
    <ion-label>Nombre</ion-label>
    <ion-input [formControl]="nombre"></ion-input>
  </ion-item>
</ion-content>

Simplemente en el campo ion-input indicamos que este campo va a utilizar el formControl nombre. 

Si queremos mostrar en tiempo real el valor de nuestro campo podemos utilizar el atributo value, para verlo vamos a añadir una etiqueta p donde se mostrará el valor de nuestro campo a medida que vamos escribiendo:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-item>
    <ion-label>Nombre:</ion-label>
    <ion-input [formControl]="nombre"></ion-input>
  </ion-item>
  <p class="ion-padding">{{ nombre.value }}</p>
</ion-content>

Si ejecutamos ahora nuestro proyecto al escribir algo en el campo nombre veremos como va apareciendo debajo los caracteres a medida que vamos escribiendo:

Los formularios reactivos tienen métodos que nos permiten cambiar el valor de un control mediante programación, lo que permite actualizar el valor sin la interacción del usuario.

Por ejemplo vamos a crear un método en home.page.ts llamado cambiarNombre() que nos permita cambiar el valor del campo nombre:

cambiarNombre(){
  this.nombre.setValue('Ornitorrinco');
}

Con el método setValue asignamos el valor que deseemos al campo, en este caso el campo tomará el valor ‘Ornitorrinco’.

Para llamar a este método vamos a crear un botón en home.page.html:

<ion-content>
  <ion-item>
    <ion-label>Nombre:</ion-label>
    <ion-input [formControl]="nombre"></ion-input>
  </ion-item>
  <p class="ion-padding">{{ nombre.value }}</p>
  <p class="ion-text-center">
    <ion-button (click)="cambiarNombre()">Cambiar nombre</ion-button>
  </p>
</ion-content>

Hemos metido el componente ion-button dentro de una etiqueta p con la clase ion-text-center para que salga centrado.

Si ejecutamos ahora nuestra aplicación veremos que al pulsar el botón Cambiar nombre el campo nombre cambiará su valor por la palabra Ornitorrinco.

Agrupando FormControls: 

Los formularios generalmente contienen varios controles relacionados. Los formularios reactivos nos permiten agrupar múltiples controles relacionados en un solo formulario de entrada.

FormGroup

Vamos a ver cómo podemos agrupar varios controles utilizando FormGroup.

Lo primero que debemos hacer es editar home.page.ts e importar FormGroup:

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

Ahora en lugar de el campo nombre que teníamos vamos a crear una propiedad llamada usuario que será un FormGroup que contendrá a su vez dos instancias tipo FormControl, una para el nombre y otra para el email, quedando de la siguiente manera:

...
export class HomePage {
 
  usuario = new FormGroup({
    nombre: new FormControl(''),
    email: new FormControl(''),
  });
 
  constructor() {
  }
...

Los controles de formulario individuales ahora se recopilan dentro de un grupo.

Vamos a modificar la vista en home.page.html para ver cómo se utilizar un FormGroup en la plantilla:

<ion-content>
  <form [formGroup]="usuario">
    <ion-item>
      <ion-label>Nombre:</ion-label>
      <ion-input formControlName="nombre"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email:</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
 </form>
 <p class="ion-padding">{{ usuario.controls.nombre.value }}</p>
 <p class="ion-text-center">
   <ion-button (click)="cambiarNombre()">Cambiar nombre</ion-button>
 </p>
</ion-content>

Bien, vayamos por partes:

En primer lugar hemos añadido una etiqueta form a la cual mediante el parámetro [formGroup] le indicamos que los campos del formularios van a estar asociados al FormGroup usuario que hemos creado en el controlador.

En el campo nombre ya no indicamos mediante el parámetro [formControl] que lo asociamos con el control nombre sino que al pertenecer a un FormGroup necesitamos utilizar el parámetro formControlName.

Hemos añadido otro campo para recoger el email del usuario, la estructura es identica al campo nombre, solo que como formControlName le asignamos email.

Dentro de la etiqueta p donde mostramos el contenido del campo nombre ya no podemos acceder directamente a nombre.value, ahora para acceder al valor del campo que pertenece a un FormGroup debemos especificarlo accediendo al control dentro del formgroup usuario de la siguiente manera:

<p class="ion-padding">{{ usuario.controls.nombre.value }}</p>

Si lo intentamos ejecutar nos dará un error porque en el método cambiarNombre() estamos accediendo al valor del nombre directamente, debemos modificar este método en home.page.ts para que quede de la siguiente manera:

cambiarNombre(){
  this.usuario.controls.nombre.setValue('Ornitorrinco');
}

Guardar los datos del formulario:

Lo habitual es tener un un botón en el formulario que al pulsarlo se procesan los datos del formulario, ya sea para enviarlos al servidor para guardarlos en una base de datos o para realizar cualquier operación con ellos.

Vamos a añadir ngSubmit a la etiqueta form para detectar cuando es lanzado el formulario y procesar los campos, en este caso le diremos que ejecute el método guardarDatos() que definiremos posteriormente en el controlador, por lo tanto la etiqueta form deberá quedar así:

 <form [formGroup]="usuario" (ngSubmit)="guardarDatos()">

Ahora para poder lanzar el formulario necesitamos incluir en el formulario un botón de tipo submit:

<ion-content>
  <form [formGroup]="usuario" (ngSubmit)="guardarDatos()">
    <ion-item>
      <ion-label>Nombre:</ion-label>
      <ion-input formControlName="nombre"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email:</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
    <p class="ion-text-center">
      <ion-button type="submit">Guardar</ion-button>
    </p>  
  </form>
    <p class="ion-padding">{{ usuario.controls.nombre.value }}</p>
    <p class="ion-text-center">
      <ion-button (click)="cambiarNombre()">Cambiar nombre</ion-button>
    </p>
</ion-content>

Bien, ahora solo nos quedaría recoger los datos de nuestro formulario en la función guardarDatos() y hacer lo que necesitemos con ellos, en este caso simplemente vamos a mostrar en consola el contenido de los campos, por lo que en home.page.ts crearemos la función guardarDatos que quedará de la siguiente forma:

 guardarDatos(){
   console.log(this.usuario.value);
 }

Si ejecutamos nuestra aplicación en el navegador, introducimos el nombre y el email y posteriormente pulsamos en el botón Guardar veremos en la consola del navegador se mostrará un objeto como este:

{ nombre: “Eduardo”, email: “edu.revilla.vaquero@gmail.com }

Con los datos del formulario contenidos en this.usuario.value realizaremos las operaciones que necesitemos.

Validar campos

Podemos validar los campos que introduce el usuario de una manera sencilla.

Lo primero que necesitamos es importar Validators de @angular/forms:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
...

Ahora vamos a hacer que el campo nombre sea obligatorio y que además tenga que tener como mínimo 4 caracteres, además vamos a hacer que se compruebe que el campo email contiene una dirección de email válida.

Para ello vamos a modificar los FormsControls para que queden de la siguiente manera:

usuario = new FormGroup({
  nombre: new FormControl('', [Validators.required, Validators.minLength(4)]),
  email: new FormControl('', Validators.email),
});

Como vemos al crear el FormControl nombre le pasamos como segundo parámetro un array con dos Validators, con Validators.required indicamos que el campo es obligatorio, y con Validators.minLength(4) le estamos diciendo que el campo tiene que tener al menos 4 caracteres.

Por otro lado al crear el FormControl email le pasamos como segundo parámetro Validators.email que hará una comprobación de si el campo cumple con la estructura de un email válido. Como el campo email solo tiene un único validador no es necesario que esté contenido en un array.

Ahora vamos a hacer que el botón de guardar sólo esté activo cuando se cumplan las condiciones que le hemos marcado en los validadores. Editamos home.page.html y modificamos el botón de guardar para que quede de la siguiente manera:

<ion-button type="submit" [disabled]="!usuario.valid">Guardar</ion-button>

Con esto le estamos indicando que el botón esté deshabilitado si los campos del formGroup usuario no son válidos.

Si ejecutas ahora la aplicación verás que debemos cumplir con los requisitos que le hemos indicado para que se active el botón de guardar.

Por último vamos a modificar la plantilla para mostrar mensajes de error cuando no se cumplan las validaciones, editamos home.page.html y modificamos el formulario para incluir lo siguiente:

<form [formGroup]="usuario" (ngSubmit)="guardarDatos()">
    <ion-item>
      <ion-label>Nombre:</ion-label>
      <ion-input formControlName="nombre"></ion-input>
    </ion-item>
    <ion-label color="danger" *ngIf="usuario.controls.nombre.errors?.required && (usuario.touched || usuario.dirty)">* El nombre es obligatorio </ion-label>
    <ion-label color="danger" *ngIf="usuario.controls.nombre.errors?.minlength && (usuario.touched || usuario.dirty)">* El nombre tiene que tener al menos 4 caracteres.</ion-label>
    <ion-item>
      <ion-label>Email:</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
    <ion-label color="danger" *ngIf="usuario.controls.email.errors?.email && (usuario.touched || usuario.dirty)">* El email no es válido.</ion-label>
    <p class="ion-text-center">
      <ion-button type="submit" [disabled]="!usuario.valid">Guardar</ion-button>
    </p>  
  </form>

En el campo nombre hemos añadido dos componentes ion-label. En el primero mostramos un mensaje advirtiendo que el campo nombre es obligatorio, se mostrará cuando se cumpla la condición que le endicamos enla directiva ngIf:

<ion-label color="danger" *ngIf="usuario.controls.nombre.errors?.required && (usuario.touched || usuario.dirty)">* El nombre es obligatorio </ion-label>

En esta directiva comprobamos primero si se ha producido el error required, es decir que el campo esté vacío. 

Accedemos al control a través de usuario.controls.nombre, dentro de este, en errors se encuentran los tipos de errores de validación que se hayan producido, observa que hemos puesto una interrogación después de errors, esto es porque si no se ha producido ningún error errors valdrá null y dará un error al intentar acceder a la propiedad required. Poniendo una interrogación solo accede a esta propiedad si existe errors.

Además hemos añadido otra condición que se debe cumplir: (usuario.touched || usuario.dirty) esta comprobación es para  evitar que el validador muestre errores antes de que el usuario tenga la oportunidad de editar el formulario.

En el segundo label comprobamos que haya pasado el validador minlength, para mostrar el error de que el nombre tiene que tener al menos 4 caracteres:

<ion-label color="danger" *ngIf="usuario.controls.nombre.errors?.minlength && (usuario.touched || usuario.dirty)">* El nombre tiene que tener al menos 4 caracteres.</ion-label>

Finalmente en el campo email mostramos un error si el email no es válido:

<ion-label color="danger" *ngIf="usuario.controls.email.errors?.email && (usuario.touched || usuario.dirty)">* El email no es válido.</ion-label>

FormBuilder

Para facilitar la tarea de crear formularios Angular nos proporciona el servicio FormBuilder.

Para utilizar FormBuilder debemos importarlo de @angular/forms e inyectarlo en el constructor:

import { FormBuilder } from '@angular/forms';
 
…

 constructor(private fb: FormBuilder) {
  }

FormBuilder nos permite definir los controles del formulario en forma de array haciendo mucho más cómodo.

En home.page.ts tenemos la definición del nuestro FormGroup usuario:

usuario = new FormGroup({
  nombre: new FormControl('', [Validators.required, Validators.minLength(4)]),
  email: new FormControl('', Validators.email),
});

Lo vamos a sustituir por lo siguiente:

usuario = this.fb.group({
  nombre: ['', [Validators.required, Validators.minLength(4)]],
  email: ['', Validators.email],
});

Como vemos no necesitamos llamar a new FormControl en cada control, simplemente le asignamos un array con sus propiedades, en este caso el valor por defecto que es una cadena vacía y los validadores.

Puede que al tener solo dos campos en este pequeño ejemplo no le veas mucho ahorro, pero en formularios complejos con muchos campos hace que sea mucho más cómodo de definir los campos y facilita la lectura del código.

Si quieres saber más sobre el desarrollo de aplicaciones con IONIC puedes adquirir mi libro, es esta entrada puedes ver el índice de contenidos del libro:

Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.

Muchas gracias

Tutorial de IONIC: Peticiones http

Hola a todos, hoy vamos a ver cómo podemos comunicar una aplicación desarrollada con ionic con una API REST, para ello vamos a aprender cómo realizar peticiones a un servidor remoto a través de http.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

En esta pequeña prueba vamos acceder a una API REST para obtener desde un servidor remoto un listado de usuarios. Para este pequeño ejemplo vamos a utilizar RANDOM USER GENERATOR que como se indica en su web es una API libre de código abierto para generar datos de usuario aleatorios para realizar pruebas. Cómo Lorem Ipsum, pero con personas.

Lo que vamos a hacer es simplemente realizar una llamada a esta API donde recibiremos como respuesta un listado de usuarios que mostraremos en nuestra vista.

Antes de nada vamos a crear una nueva aplicación de prueba:

ionic start pruebahttp1 blank

Seleccionamos Angular como framework pulsando enter y le podemos decir que no queremos integrarlo con Capacitor, si deseas probarlo desde un dispositivo móvil entonces le diremos que sí, aunque puedes integrarlo después si lo deseas.

Una vez generado el proyecto como siempre desde el terminal con cd pruebahttp1 entramos dentro de la carpeta que acabamos de crear.

Ahora vamos a crear un servicio donde gestionaremos la comunicación con el servidor remoto:

ionic g service services/http

Se habrá creado una carpeta services y dentro  un archivo .ts con el nombre http.service.ts.

Por defecto contendrá el siguiente código:

import { Injectable } from '@angular/core';
 
@Injectable({
 providedIn: 'root'
})
export class HttpService {
 
 constructor() { }
}

Para realizar las peticiones al servidor vamos a utilizar un paquete de angular llamado HttpClient, así que vamos a importarlo en nuestro servicio:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(public http: HttpClient) { }
}

Ahora debemos importar y declarar como provider en app.module.ts el servicio que acabamos de crear, también debemos importar y declarar en los imports HttpClientModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpService } from './services/http.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HttpService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

http.get

Vamos a añadir un método que llamaremos loadUsers a nuestro servicio para obtener la lista de usuarios desde el servidor, por lo tanto editamos el archivo http.service.ts y añadimos el siguiente función después del constructor:

 loadUsers() {
   return this.http
   .get('https://randomuser.me/api/?results=25')
 }

 En este caso llamamos a randomuser y le decimos que devuelva 25 resultados (?results=25).

http.get devuelve el resultado de la solicitud en forma de un observable.

Como resultado de la petición obtendremos un JSON con un formato parecido a este:

{
 "results":[
   {
     "gender":"male",
     "name":{"title":"mr","first":"denis","last":"vieira"},
     "location":{
       "street":"666 rua sete de setembro ",
       "city":"rondonópolis",
       "state":"minas gerais",
       "postcode":44819,
       "coordinates":{"latitude":"-73.8339","longitude":"-19.7138"},
       "timezone":{"offset":"-2:00","description":"Mid-Atlantic"}
     },
     "email":"denis.vieira@example.com",
     "login":{
       "uuid":"4f51bc76-8f49-4043-841d-7b2978bd7665",
       "username":"beautifulswan509",
       "password":"down",
       "salt":"I9rLbtmc",
       "md5":"3689e6b1cb08345ac5ab67b179358250",
       "sha1":"4f0e8bf0fea756dbaa8f4e7e01b7c6a8de328abf",
       "sha256":"a23a5af4e8622e69c464a2a30f608066e77aa8d36f037ecdb171d452b20e5c96"
     },
     "dob":{"date":"1984-02-04T02:47:36Z","age":35},
     "registered":{"date":"2004-07-29T23:10:42Z","age":14},
     "phone":"(45) 7844-4365",
     "cell":"(73) 5854-2157",
     "id":{"name":"","value":null},
     "picture":{
       "large":"https://randomuser.me/api/portraits/men/62.jpg",
       "medium":"https://randomuser.me/api/portraits/med/men/62.jpg",
       "thumbnail":"https://randomuser.me/api/portraits/thumb/men/62.jpg"
     },
     "nat":"BR"
   }, ...

Ahora vamos a crear la vista en home.page.html para mostrar un botón que llamará a la función cargarUsuarios, y un listado de items con los usuarios que crearemos recorriendo con *ngFor el array usuarios que posteriormente vamos a crear en el controlador:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Usuarios
   </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <ion-list>
   <ion-item *ngFor="let usuario of usuarios">
     <ion-avatar slot="start">
       <img [src]="usuario.picture.medium">
     </ion-avatar>
     <ion-label>
     <h2>{{ usuario.name.first }}</h2>
     <p>{{ usuario.email }}</p>
   </ion-label>
   </ion-item>
 </ion-list>
 <ion-button expand="block" (click) = "cargarUsuarios()">Cargar Usuarios</ion-button>
</ion-content>

Vamos a modificar home.page.ts para obtener los datos desde el servicio y mostrarlos en la vista para ello editamos home.page.ts e importamos el service httpProvider que acabamos de crear:

import { HttpService } from '../services/http.service';

Para poder utilizarlo debemos inyectarlo en el constructor:

constructor(private http: HttpService) {}

Justo antes del constructor vamos a definir una variable miembro donde guardaremos el array de usuarios que recibamos desde el servidor:

...
export class HomePage {

 usuarios: any[];

 constructor(private http: HttpService) {}
...

Ahora vamos a crear un método en home.page.ts que que a su vez llamará al método loadUsers de nuestro provider para recibir los datos de los usuarios:

cargarUsuarios(){
  this.http.loadUsers().subscribe(
    (res: any) => {
      this.usuarios = res.results;
    },
    (error) =>{
      console.error(error);
    }
  );
}

Como podemos observar llamamos al método loadUsers que hemos definido en el servicio, pero no utilizamos then sino subscribe, esto es porque http no devuelve una promesa si no que devuelve un observable. Un observable se queda a la espera de recibir datos y nosotros nos “suscribimos” recibiendo estos datos en cuanto estén disponibles.

Esta cualidad se puede utilizar para suscribirnos a una url y observar si ha habido cambios, como por ejemplo si es un sitio de noticias donde se están continuamente renovando.

La diferencia entre promesas y observables a groso modo es que la promesa devuelve los datos una única vez cuando estos son recibidos mientras que un observable se queda “vigilando” si se han producido cambios y se ejecuta cada vez que un cambio se produce, aunque hasta que no te suscribes a un observable éste no se ejecutará.

Si solo necesitamos recibir los datos una única vez sin necesidad de observar si se han producido cambios podemos utilizar promesas. Una promesa se ejecuta una vez que se haya resuelto la llamada y recibimos los datos en la función .then(res=>{… }).

El código del provider en el archivo http.ts utilizando una promesa quedaría de la siguiente manera:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
 
@Injectable({
 providedIn: 'root'
})
export class HttpService {
 
 constructor(public http: HttpClient) { }
 
 loadUsers() {
   return this.http
   .get('https://randomuser.me/api/?results=25').toPromise();
 
 }
 
}

Simplemente  debemos añadir toPromise() después del get.

Ahora en home.ts solo tenemos que sustituir subscribe por then:

cargarUsuarios(){
  this.http.loadUsers().then(
    (res: any) => {
      this.usuarios = res.results;
    },
    (error) =>{
      console.error(error);
    }
  );
}

Si ejecutamos la aplicación con ionic serve y pulsamos en el botón Cargar Usuarios podremos ver algo como esto:

 

Podéis observar como cada vez que pulsemos el botón la lista de usuarios cambia ya que Random User Generator como su propio nombre indica devuelve una lista aleatoria de usuarios.

http.post

RANDOM USER GENERATOR  nos ha servido para aprender ha hacer una petición get a una API REST para recibir datos, en este caso una lista de usuarios.

Si queremos conectarnos con un servicio que tengamos corriendo en un servidor remoto y necesitamos pasarle datos desde la aplicación para que se guarden en el servidor tenemos que usar http.post.

Vamos a imaginar que tenemos corriendo un servicio en PHP cuya url sea https://www.miservicio.com/adduser/ que está programado para recibir vía post un nuevo usuario para guardarlo en la base de datos del servidor.

En nuestro servicio tendremos que crear una función similar a esta:

postDatos() {
  const datos = { nombre: 'Edu', email: 'edu.revilla.vaquero@gmail.com'};

  const options = {
     headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  };

  const url = 'https://www.miservicio.com/adduser/';

  return this.http.post(url, JSON.stringify(datos), options).toPromise();
}

En la variable datos  tenemos un objeto con los datos del usuario que queremos enviar al servidor, en este caso nombre y email.

Después definimos la variable options donde a su vez definimos las cabeceras en la variable headers, dependiendo de la configuración del servidor podría necesitar parámetros diferentes en la cabecera.

Como vemos http.post es bastante parecido a http.get, solo que como segundo parámetro le pasamos la variable que contiene los datos que queremos enviar convertida a formato JSON con JSON.stringify(datos), como tercer parámetro le pasamos options.

En data recibiremos la respuesta que nos de el servidor.

Vamos a ver un ejemplo de cómo obtendremos los datos enviados desde nuestra aplicación con un servicio desarrollado en PHP en el servidor:

<?php
  header('Access-Control-Allow-Origin: *');
 
  $postdata = file_get_contents("php://input");
  if (isset($postdata)) {
   $request = json_decode($postdata);
   $request->recibido = 'OK';
   echo json_encode($request);
  }
 
?>

Por seguridad muchos sitios solo admiten peticiones que se hagan desde su propio dominio,  para no tener problemas de Cross-Origin en la primera línea le asignamos la opción header para indicarle que está permitido cualquier origen:

header('Access-Control-Allow-Origin: *');

También hay que tener en cuenta que el navegador puede bloquear peticiones a dominios que no sean https, por lo que sí estás intentando acceder a un servidor que no tenga activado https puede que el navegador bloquee la petición y te muestre un error en consola.

Si vas a hacer pruebas en un servidor local existen complementos para Chrome que evita el bloqueo de las peticiones Cross-Origin.

 

En este ejemplo tan sencillo lo único que hacemos en la siguiente línea es recoger los datos que hemos enviado desde la aplicación:

$postdata = file_get_contents("php://input");

Después miramos si no está vacío $postdata y en $request guardamos el objeto resultante al decodificar el json.

$request = json_decode($postdata);

Le añadimos una propiedad más al objeto para indicar que hemos recibido la petición:

$request->recibido = 'OK';

Por último simplemente sacamos un echo de $request convertido de nuevo a json.

Es decir que recibiremos como resultado en la app lo mismo que hemos enviado más un campo recibido que contendrá la palabra ‘OK’.

Evidentemente en otros lenguajes de programación del lado del servidor el código para recibir los datos sería diferente, pero se escapa del propósito de este libro el abordar como sería en cada lenguaje.

Para probar esto podemos añadir un botón al al home.page.ts del ejemplo anterior y que llame a una función de definiremos después en el controlador:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Usuarios
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <ion-list>
   <ion-item *ngFor="let usuario of usuarios">
     <ion-avatar slot="start">
       <img [src]="usuario.picture.medium">
     </ion-avatar>
     <ion-label>
     <h2>{{ usuario.name.first }}</h2>
     <p>{{ usuario.email }}</p>
   </ion-label>
   </ion-item>
 </ion-list>
 <ion-button expand="block" (click) = "cargarUsuarios()">Cargar Usuarios</ion-button>
 <ion-button expand="block" (click) = "post()">Peticion POST</ion-button>
</ion-content>

Definimos entonces la función post en home.page.ts:

post() {
    this.http.postDatos().then(res=>{
      alert(JSON.stringify(res));
    })
 }

Esta función simplemente va a realizar una llamada a la función postDatos que tendremos creada en nuestro servicio http y saca un alert del resultado obtenido convirtiéndolo a texto utilizando el método stringify de JSON.

Si no tienes la posibilidad de tener un servidor para hacer pruebas puedes utilizar algún servicio online que te permite hacer pruebas como por ejemplo http://httpbin.org, pudiendo quedar el método postDatos de nuestro servicio de la siguiente manera:

postDatos() {
   const datos = { nombre: 'Edu', email: 'edu.revilla.vaquero@gmail.com'};
 
   const options = {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     }
   };
 
   const url = 'http://httpbin.org/post';
 
   return this.http.post(url, JSON.stringify(datos), options).toPromise();
 }

Si quieres saber más sobre el desarrollo de aplicaciones con IONIC puedes adquirir mi libro, es esta entrada puedes ver el índice de contenidos del libro:

Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.

Muchas gracias

Tutorial de IONIC: Componentes personalizados

Hola a todos, en posts anteriores hemos aprendido a crear apps multiplataforma con Ionic.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Ionic nos ofrece un montón de componentes ya creados para utilizar en nuestras apps y realmente nos permiten con poco esfuerzo crear una interfaz funcional para nuestras aplicaciones.

Sin embargo hay momentos que puede interesarnos crear nuestros propios componentes personalizados.

Un componente es simplemente algo que podemos mostrar las veces que queramos en la pantalla, como si fuese una etiqueta html, solo que a su vez un componente puede estar formado por varias etiquetas html y otros componentes.

Para ver mejor cómo podemos crear nuestro propios componentes personalizados en Ionic vamos a crear un proyecto de prueba a que vamos a llamar miComponente:

ionic start ejemploTabs tabs

 

Seleccionamos Angular como framework y una vez creado el proyecto si  entramos en home.page.ts veremos esto:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor() {}

}

En Ionic todo son componentes, de hecho las páginas de nuestra aplicación son componentes, si nos fijamos tiene un decorador @Component por lo que podemos ver que la propia página es un componente  que tiene el selector ‘app-home’ y como plantilla utiliza el archivo home.page.html.

Si inspeccionamos el código que genera ionic en el navegador veremos que tenemos un elemento llamado ion-router-outlet que es la etiqueta principal donde se renderizan las páginas, y dentro de esta tenemos una etiqueta app-home.

Tal y como hemos comentado las páginas también son componentes y para mostrar componentes en la plantilla se utiliza la etiqueta con el nombre del selector del componente que en este caso es app-home, por defecto los componentes llevan el prefijo app- por delante del nombre del componente.

Vamos a crear un sencillo componente al que vamos a llamar saluda, para ello vamos a echar mano de ionic generator, lo primero que vamos a crear es un módulo para declarar nuestros componentes y poder luego invocarlos desde cualquier página donde los necesitemos.

Nos situamos dentro la carpeta de  nuestro proyecto en la consola de comandos y tecleamos lo siguiente:

ionic g module components

Esto nos habrá creado una carpeta llamada components y dentro un archivo llamado components.module.ts con el siguiente contenido:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class ComponentsModule { }

Ahora vamos a crear nuestro nuevo componente saluda:

 ionic g component components/saluda

 

Esto nos creará una carpeta llamada saluda dentro de components con nuestro componente.

En la carpeta de nuestro componente tendremos un archivo .html para la plantilla, un archivo .scss para los estilos y un archivo .ts con el controlador.

Si observamos lo que contiene el archivo saluda.component.html vemos que simplemente muestra un párrafo con el texto “saluda works!”:

<p>
 saluda works!
</p>

Veamos ahora que tenemos en el archivo  saluda.component.ts:

import { Component, OnInit } from '@angular/core';
 
@Component({
 selector: 'app-saluda',
 templateUrl: './saluda.component.html',
 styleUrls: ['./saluda.component.scss'],
})
export class SaludaComponent implements OnInit {
 
 constructor() { }
 
 ngOnInit() {}
 
}

Como vemos el controlador de un componente es prácticamente igual que el de una página.

Tenemos el decorador @Component donde se indica que su selector es ‘app-saluda‘, que la ruta de la plantilla que utiliza es ./saluda.component.html  y la ruta de los estilos que utilizará es ./saluda.component.scss.

Ahora vamos a importar SaludaComponent en el módulo components.module.ts y lo vamos a declarar en la sección declarations y en la sección exports:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SaludaComponent } from './saluda/saluda.component';
 
@NgModule({
 declarations: [SaludaComponent],
 imports: [
   CommonModule
 ],
 exports: [SaludaComponent]
})
export class ComponentsModule { }

Ahora para poder utilizar nuestro componente en cualquier página solo tenemos que importar ComponentModule en el módulo de nuestra página y declararlo en los imports, por lo tanto vamos a editar home.module.ts e importar el módulo ComponentsModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ComponentsModule } from '../components/components.module';

import { HomePage } from './home.page';

@NgModule({
 imports: [
   CommonModule,
   FormsModule,
   IonicModule,
   ComponentsModule,
   RouterModule.forChild([
     {
       path: '',
       component: HomePage
     }
   ])
 ],
 declarations: [HomePage]
})
export class HomePageModule {}


Para mostrar nuestro componente en la página home editamos el archivo home.page.html, eliminamos todo lo que hay dentro de ion-content y añadimos la etiqueta con el componente que acabamos de crear:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic Blank
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <div class="ion-padding">
   <app-saluda></app-saluda>
 </div>
</ion-content>

Así de fácil. Si ejecutamos nuestra app de ejemplo veremos algo similar a esto:

A nuestro componente le podemos añadir también atributos personalizados.
Por ejemplo podemos pasarle un atributo nombre de esta manera:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic Blank
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <div class="ion-padding">
   <app-saluda nombre="Eduardo"></app-saluda>
 </div>
</ion-content>

Luego en el controlador de nuestro componente (saluda.component.ts) definimos el parámetro de entrada con el decorador Input de la siguiente manera:

import { Component, OnInit, Input } from '@angular/core';
 
@Component({
 selector: 'app-saluda',
 templateUrl: './saluda.component.html',
 styleUrls: ['./saluda.component.scss'],
})
export class SaludaComponent implements OnInit {
 
 @Input() nombre: string;
 constructor() { }
 
 ngOnInit() {}
 
}

Para poder utilizar el decorador Input debemos importarlo primero.

Ahora podemos hacer que en lugar de mostrar en pantalla “saluda works!” salude a la persona que recibamos en el parámetro nombre, para ello vamos a crear una variable que llamaremos text y a la que en el constructor le daremos el valor ‘¡Hola’ concatenando el nombre que recibe como input:

import { Component, OnInit, Input } from '@angular/core';
 
@Component({
 selector: 'app-saluda',
 templateUrl: './saluda.component.html',
 styleUrls: ['./saluda.component.scss'],
})
export class SaludaComponent implements OnInit {
 
 @Input() nombre: string;
 text: string;
 
 constructor() {
   this.text = '¡Hola '+this.nombre+'!';
 }
 
 ngOnInit() {}
 
}

Ahora en la plantilla saluda.component.html vamos a hacer que se muestre el contenido de la variable text:

<p>
{{ text }}
</p>

Bien, si como en el ejemplo hemos pasado “Eduardo” al parámetro nombre cabría esperar ver en pantalla “¡Hola Eduardo!”, sin embargo comprobamos que muestra “¡Hola undefined!”, es evidente que hay algo que no está funcionando.

Esto ocurre porque estamos accediendo a la variable this.nombre desde el constructor, y en el momento que se ejecuta el constructor aún no están accesibles los parámetros que recibimos en nuestro componente, para ello utilizamos ngOnInit que se ejecuta cuando nuestro componente se ha inicializado y tenemos acceso a los parámetros:

import { Component, OnInit,  Input  } from '@angular/core';

@Component({
  selector: 'app-saluda',
  templateUrl: './saluda.component.html',
  styleUrls: ['./saluda.component.scss'],
})
export class SaludaComponent implements OnInit {

  @Input() nombre: string;
  text: string;

  constructor() {
  }

  ngOnInit() {
    this.text = '¡Hola ' + this.nombre + '!';
  }

}

Ahora podemos comprobar que muestra el nombre que le hayamos pasado.

También podemos utilizar la la variable nombre directamente en la plantilla de nuestro componente de esta manera:

<p>
¡Hola {{ nombre }}!
</p>

Por último si en lugar de pasarle directamente el nombre al componente queremos utilizar una variable debemos poner el parámetro entre corchetes, por ejemplo imaginemos que tenemos un array de usuarios  y queremos saludarles a todos, en home.page.ts definimos un array de usuarios:

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage {
 
 usuarios: any = [
   {
     nombre: 'Eduardo',
     edad: 41
   },
   {
     nombre: 'Pedro',
     edad: 28
   },
   {
     nombre: 'Francisco',
     edad: 34
   },
   {
     nombre: 'Maria',
     edad: 43
   }
 ];
 
 constructor() {}
 
}

Ahora en home.page.html podemos recorrer el array con *ngFor y mostrar nuestro componente saludo pasándole la variable usuario.nombre:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic Blank
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <div class="ion-padding">
   <app-saluda  *ngFor="let usuario of usuarios" [nombre]="usuario.nombre"></app-saluda>
 </div>
</ion-content>

Como podemos ver en este caso el parámetro nombre va entre corchetes []  ya que lo que le pasamos no es un texto literal sino una variable.

Si probamos este ejemplo veremos algo como esto:

Este ejemplo es muy sencillo y es solo para explicar cómo funcionan los componentes en Ionic, evidentemente no merece la pena crear un componente que solo contenga un div y un texto, pero podemos ampliar nuestro componente añadiendo una imagen o una ficha completa con los datos del usuario, o cualquier otro elemento que se nos ocurra.

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link: 

Este ejemplo es muy sencillo y es solo para explicar cómo funcionan los componentes en Ionic, evidentemente no merece la pena crear un componente que solo contenga un div y un texto, pero podemos ampliar nuestro componente añadiendo una imagen o una ficha completa con los datos del usuario, o cualquier otro elemento que se nos ocurra.

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link: 

https://github.com/edurevilla/libro-ionic-5-componentes-personalizados

 

Tutorial de IONIC: Navegación por Tabs

Hoy vamos a aprender cómo se genera una aplicación con varias páginas en forma de tabs o pestañas y veremos cómo podemos navegar entre ellas, para ello vamos a crear un nuevo proyecto de ejemplo.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Vamos a utilizar la plantilla tabs para crear nuestra aplicación lo que nos generará un proyecto con una estructura ya creada para utilizar tabs.

Desde la consola de comandos o terminal escribimos:

 ionic start ejemploTabs tabs

Como siempre elegimos Angular como framework y a la pregunta “Integrate your new app with Capacitor to target native iOS and Android?” respondemos que No.

Al crear nuestra aplicación con la plantilla tabs nos genera por defecto tres tabs.

Nos situamos como siempre dentro de la carpeta del proyecto que acabamos de crear desde la consola, si ejecutamos el comando ionic serve -l podemos ver algo como esto:

Recuerda que al ejecutar ionic serve con el parámetro -l te preguntará si quieres instalar @ionic/lab.

También puedes comprobar como quedaría en un dispositivo móvil sin necesidad de instalar @ionic/lab, utilizando el inspector de Chrome (boton derecho en cualquier parte de la página y seleccionando inspeccionar),  y seleccionando la vista móvil en el panel:

Veamos ahora el código que se ha generado al iniciar el proyecto:

Lo primero que podemos observar es que que se han generado 5 carpetas dentro de src/app, una carpeta llamada explorer-container que contiene un componente que se va a utilizar en las páginas de los tabs, veremos que son los componentes y cómo se crean más adelante, después una por cada tab (tab1,tab2,y tab3) y por último otra llamada tabs

tab1, tab2 y tab3 son páginas normales como las que ya conocemos que simplemente contienen lo que queramos que se muestre en cada pestaña.

La página tabs es la página maestra donde vamos a mostrar los tabs con los iconos y controlar la ruta para que se muestre el contenido de la página correspondiente al tab activo.

Si vemos el contenido de la carpeta tabs podemos observar que contiene los archivos típicos de cualquier página en ionic, pero además contiene otro archivo llamado tabs.router.module.ts que es módulo donde se define las ruta de cada tab:

Vamos antes de nada a ver como es el html para crear los tabs con sus correspondientes iconos, si abrimos en el editor el archivo tabs.page.html vemos que contiene el siguiente código:

 
<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
 
</ion-tabs>

Es bastante intuitivo, tenemos la etiqueta ion-tabs que es el contenedor general para los tabs.

Después tenemos el componente ion-tab-bar donde definimos la barra donde se va a mostrar los iconos de los tabs, vemos que además tiene el atributo slot=”bottom”, con este atributo le estamos indicando que la barra se tiene que mostrar en la parte inferior de la pantalla.

Si queremos que los tabs se muestren en la parte superior deberemos cambiar slot=”bottom” por slot=”top”.

Por último definimos el botón de cada tab con el componente  ion-tab-button que como vemos lleva el atributo tab=”tab1″ donde le indicamos el nombre del tab que se debe activar al pulsar sobre él, este nombre es importante para posteriormente indicar en las rutas.

Dentro cada tab contiene un ion-icon donde indicamos que icono se debe mostrar con el atributo name, y un ion-label con el texto que queremos que se muestre en cada pestaña.

Si solo queremos que se muestre el icono sin ningún texto solo tenemos que eliminar la etiqueta ion-label.

El listado de iconos disponibles lo podéis consultar el la documentación oficial de ionic desde el siguiente enlace: https://ionicframework.com/docs/ionicons/

Los iconos a su vez puede tener tres estilos diferentes:

  • Outline.
  • Filled.
  • Sharp

Bien, veamos ahora el contenido del archivo tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Lo interesante aquí es la declaración de las rutas de los tabs:

Vemos que se declara la constante routes y dentro indicamos que el path ‘tabs’ está asociado al componente TabsPage, y luego como “hijos” (children) están definidos cada uno de los tabs con su ruta indicada en path y a su vez en children se carga con loadChildren el módulo de la página a mostrar. 

Puede resultar un poco engorroso, pero no debes preocuparte demasiado, el trabajo de crear las rutas ya lo hace ionic por tí, solo debes hacer algunos cambios siguiendo esta estructura si quieres añadir un nuevo tab a tu proyecto, vamos a ver como se hace a continuación.

Como el contenido que se muestra en cada tab es una página, si queremos añadir un nuevo tab a nuestro proyecto crearemos una nueva página, por lo tanto vamos a crear una nueva página llamada tab4:

ionic g page tab4

Al crear una página nueva ionic automáticamente añade la ruta de la página a app-routing.module.ts, en este caso no nos interesa porque la página tab4 va a depender de la página maestra tabs y que tiene su propio módulo para definir las rutas (tabs.router.module.ts), tal y como hemos visto, por lo tanto vamos a editar el archivo app-routing.module.ts y eliminamos la siguiente línea que nos ha generado:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
 { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
 // { path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' } // debemos eliminar esta línea
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule {}

Ahora vamos a definir la ruta del nuevo tab en tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}
 

Simplemente hemos copiado la estructura de los otros tabs para el tab4:
... 
 {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
 },

Ya solo nos queda modificar el html del archivo tabs.page.html para añadir el botón de la nueva pestaña:

<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="cube"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab4">
      <ion-icon name="alarm"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>
 
  </ion-tab-bar>
 
</ion-tabs>

Ya tenemos en funcionamiento nuestra aplicación con los cuatro tabs:

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-5-tabs.git

 

Eso es todo por hoy.

Tutorial de IONIC: Menú lateral

Hola a todos, por diversos motivos he tenido abandonado el blog durante una temporada, por fin estoy de vuelta y me dispongo a seguir con el tutorial de Ionic que dejé a medias.

En el último post vimos cómo navegar entre páginas con Ionic, hoy vamos a seguir con el tutorial aprendiendo a utilizar los menús laterales.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Podemos crear un  proyecto de ionic utilizando la plantilla sidemenu y ya nos crearía la estructura de una aplicación con un menú lateral y dos páginas de ejemplo.

Sin embargo, para entender mejor cómo funciona vamos a crear un proyecto con la plantilla blank y vamos a añadir nosotros los componentes necesarios para generar un menú lateral.

Lo primero que vamos ha hacer es crear un nuevo proyecto:

ionic start menu blank

Seleccionamos Angular y le podemos decir que no queremos integrar Capacitor, para este ejemplo no lo necesitamos.

Bien, una vez se haya generado el proyecto nos situamos desde la consola dentro de la carpeta menú que se acaba de crear.

Como por defecto ya nos crea la página home, vamos a crear otra página que se llame listado:

ionic g page listado

La idea es tener dos opciones en el menú, una que nos lleve a la página de inicio (home) y otra que nos lleve a una segunda página, en este caso la página listado que acabamos de crear.

La plantilla principal de nuestra aplicación, la que se va a cargar siempre al inicio se encuentra en el archivo app.component.html.

Si echamos un vistazo al contenido de app.component.html vemos que contiene lo siguiente:

<ion-app>
 <ion-router-outlet></ion-router-outlet>
</ion-app>

Dentro de ion-router-outlet se carga el contenido de la página que esté activa en ese momento, es decir la que indique la ruta actual.

Aquí vamos a añadir el menú, que dependiendo de la opción seleccionada cambiará la ruta para mostrar dentro de ion-router-oulet la página que hayamos seleccionado.

Editamos app.component.html y añadimos el siguiente código:

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerDirection]="'root'" [routerLink]="'/listado'">
              <ion-icon slot="start" [name]="'list'"></ion-icon>
              <ion-label>
                Listado
              </ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" [routerLink]="'/home'">
              <ion-icon slot="start" [name]="'home'"></ion-icon>
              <ion-label>
                Inicio
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu> 
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Lo primero que hacemos es envolver todo en una etiqueta ion-split-pane, esto permite adaptarse a pantallas más grandes (como tabletas) y muestra el menú justo al lado de su contenido. Le asignamos la propiedad contentId=”main-content” que serà el id que le vamos a asignar a la etiqueta ion-router-outlet donde irá el contenido de la aplicación.

Después tenemos ion-menu que es el componente que contiene el menú y al que asignaremos tambien el parámetro contentId=”main-content”, dentro del mismo añadimos su contenido igual que si sería una página, hemos añadido un ion-header con un toolbar y dentro el título del menú.

Después tenemos un ion-content y dentro hemos creado un listado con dos items con las opciones del menú.

Como vimos en el anterior capítulo routerDirection sirve para indicar la dirección de la animación.

En el parámetro routerLink de cada item definimos la ruta que tenemos que cargar al pulsar en el.

Observa que la ruta está entre comillas simples dentro de las comillas dobles, esto es para que lo tome como un literal en lugar de una variable.

También podríamos definir una variable con un array de opciones con sus rutas y hacer un bucle para mostrar las opciones, pero para simplificar hemos creado las dos opciones a mano directamente.

Si ejecutamos la aplicación en un navegador de escritorio con ionic serve se mostrará el menú siempre visible a la izquierda del contenido, sin embargo si ejecutamos ahora la aplicación con ionic serve -l a tamaño móvil no veremos nada especial, solo la página home, para poder ver el menú tenemos que crear un botón para hacer que se muestre el menú. Para ello vamos a modificar el archivo home.page.html,  y añadimos un botón especial llamado ion-menu-button que se encarga de abrir y cerrar el menú, de paso vamos a eliminar todo lo que hay dentro de ion-content y a añadir un texto en el contenido para indicar que es la página de inicio:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>     
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
      <p>Yo soy la página de inicio</p>
  </div>
</ion-content>

Para finalizar vamos a modificar también la plantilla de la página listado para añadir a la cabecera el botón del menú y de paso añadimos un pequeño listado en el contenido para que haga honor a su nombre, editamos el archivo listado.page.html y añadimos lo siguiente:

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
    <ion-title>listado</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
    <ion-list>
        <ion-item>
          <ion-label>
            Item 1 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 2 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 2 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 3 del listado
          </ion-label>
        </ion-item>
      </ion-list>
</ion-content>

Ahora si ejecutamos ionic serve -l veremos nuestro menú en acción:

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-5-menu.git

 

Eso es todo por hoy, el el siguiente post seguiremos aprendiendo más sobre Ionic.