Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Comenzando con Ionic: introducción

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: JavaScript Components

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Ionic es un framework para aplicaciones móviles popular que te ayuda a construir aplicaciones móviles híbridas rápidamente, usando HTML, CSS y JavaScript. En esta serie, aprende a configurar y construir tus propias aplicaciones móviles con ionic mediante la creación de una aplicación móvil totalmente funcional. Comenzamos con una introducción a Ionic y aprende cómo empezar con las herramientas.

En este tutorial, cubriremos:

  • Qué es Ionic y sus diferentes componentes
  • por qué eligirías usar Ionic
  • Cómo configurar tu máquina para la construcción de aplicaciones híbridas en Ionic
  • el flujo de trabajo de desarrollo, desde el comienzo hasta la implementación de las aplicaciones

1. Stack de Ionic: Cordova, Angular, Ionic

Ionic es varias tecnologías que están cuidadosamente empaquetadas y administradas juntas. Me gusta pensar en Ionic como un stack de varios frameworks. La interacción entre estas tecnologías es lo que en última instancia crea la resultante aplicación y proporciona una buena experiencia para el desarrollador y el usuario.

Córdoba: Framework para Apps Híbridas

Como fundamentos, Ionic utiliza Cordova como el framework para una app híbrida. Esencialmente, permite a una aplicación web ser empaquetada en una aplicación nativa que puede ser instalada en un dispositivo. Incorpora una vista de web, que es una instancia aislada del navegador que ejecuta las aplicaciones web.

También proporciona una API que puede ser utilizada para comunicarse con el dispositivo, por ejemplo, para pedir coordenadas GPS o acceder a la cámara. Muchas de estas características de hardware adicional se activan a través del sistema de plugins de Cordova, así que sólo tienes que instalar y utilizar las características que necesitas. Te presentaré más sobre Cordova más más adelante en este tutorial.

Angular: Framework para aplicaciones Web

Angular es un bien conocido framework de JavaScript para crear aplicaciones web, y Ionic está construido encima de ella. Angular proporciona la lógica de la aplicación web utilizada para generar la aplicación real.

Si ya estás familiarizado con él, entonces serás capaz de tomar rápidamente las características de Ionic. Si eres nuevo en Angular, puedes continuar leyendo y comenzarás a tomar algo básico de Angular.

No cubriré Angular con mucho detalle, por lo que recomiendo tomar algún tiempo para aprender los conceptos básicos mediante la lectura de la documentación de Angular.

Ionic: Framework de Interfaz de Usuario

La primera característica vendedora de Ionic es un conjunto limpio de componentes de interfaz de usuario que están diseñados para móviles. Cuando creas una aplicación nativa, existen los SDKs nativos que te proporcionan los componentes de la interfaz, tales como tabs y cuadros de diálogo.

Ionic proporciona un conjunto similar de componentes de interfaz para su uso en aplicaciones híbridas. Iónico es con cariño llamado como el SDK perdido de las aplicaciones híbridas, y llena muy bien ese papel. Además, Ionic tiene un número de otras características importantes que lo convierten en una opción muy atractiva.

2. ¿Por qué Ionic?

Iónico es más que un conjunto de componentes de interfaz de usuario , también es un conjunto de herramientas para desarrolladores y un ecosistema para crear rápidamente aplicaciones móviles híbridas. Me gustaría cubrir por qué las aplicaciones híbridas son un gran ajuste para los desarrolladores web, detalles sobre la plataforma Ionic y herramientas y cuando Ionic podría no ser el ajuste correcto de la cubierta.

Por qué Híbridas Versus Nativas o Web Móvil

Hay viejos debates sobre la calidad de los diferentes enfoques en la construcción de aplicaciones. Hace unos meses escribí un artículo detallado sobre los tres tipos de experiencias móviles. Te recomiendo que lo revises si no estás seguro acerca de las fortalezas y debilidades de estos diferentes enfoques en los dispositivos modernos.

Las aplicaciones híbridas son el punto dulce en suministrarle a los desarrolladores web la capacidad de utilizar las habilidades que ya conocen para construir aplicaciones móviles que pueden verse y sentirse como aplicaciones nativas.

Gran Herramienta y Plataforma Ionic

Muy pocos de los frameworks móviles disponibles tienen herramientas que se acercan a la calidad de las herramientas de Ionic. Demos un vistazo cercano a la principal herramienta disponible en el resto del tutorial, pero me gustaría cubrir algunas de las características que probablemente encontrarás útil con el tiempo.

Ionic CLI

La herramienta CLI de Ionic es de primer nivel y ofrece un montón de características que te ayudan a iniciar un proyecto, previsualizarlo y finalmente construirlo.

Plataforma Ionic

Iónicos proporciona una serie de características, algunas gratis y otras pagadas, que son útiles para el desarrollo profesional, tales como análisis de la aplicación, notificaciones push y herramientas de implementación.

Ionic Mercado

Hay una serie de adiciones gratuitas y de pago para Ionic que pueden ser fácilmente integradas en tu aplicación. Hay temas, componentes únicos y otros plugins.

Limitaciones de Ionic

Ionic no es el ajuste perfecto para cada aplicación móvil. Considera el siguiente caso para decidir si Ionic es el ajuste correcto para tu proyecto.

  • Ionic no soporta todas las plataformas. iOS y Android son totalmente compatibles, pero Ionic puede trabajar con otros hasta cierto grado. También funciona mejor en versiones más modernas. El soporte para dispositivos o sistemas operativos más viejos, puede causar un funcionamiento degradado, generalmente debido a las implementaciones pobres del navegador.
  • Ionic no proporciona una verdadera aplicación nativa. Si tu aplicación requiere de una fuerte integración con la plataforma nativa, como gráficos intensivos, Ionic podría no ser capaz de proporcionar toda la potencia necesaria. Esto se debe a la necesidad de interconectar el hardware de la aplicación web a través de Cordova, lo que puede añadirle algún retraso.

En otras palabras, si no estás construyendo una aplicación para dispositivos viejos y no tienes la necesidad de programar mucho a nivel de hardware, Ionic es más que capaz de proporcionar una experiencia de aplicación de calidad para tus usuarios.

3. instalación de Ionic y Cordova

Ionic viene con un fantástico CLI (Command Line Interface) para ayudar a iniciar, construir y desplegar tus aplicaciones. Usarás el CLI fuertemente durante el desarrollo. Ionic también se basa en Cordova, así que lo estarás usando indirectamente.

Debes tener Node.js instalado para comenzar. Si no, toma un momento para instalarlo en tu sistema. Yo utilizo Node.js 5.6 para este tutorial y te recomiendo estar en la última versión estable.

Instalar Ionic y Cordova es tan simple como instalar dos módulos globales de node. Si has hecho esto antes, entonces esto te debe parecer bastante familiar. Abre tu terminal y ejecuta el siguiente comando:

Este proceso puede tardar un momento, pero te debe llegar un mensaje que dice que ambos están instalados. Puedes comprobarlo ejecutando lo siguiente para ver la versión.

Esto debe mostrar la versión del Ionic y Cordova. Para los efectos de este tutorial, estoy usando la versión 1.7.14 de Ionic y la versión 6.0.0 de Cordova.

Hay bastantes características en la CLI de Ionic y siempre puedes obtener una referencia rápida corriendo ionic help. También puedes consultar la documentación en línea para más apoyo si es necesario.

Otras instalaciones

Ionic no agrupa todas las herramientas necesarias para construir una aplicación, se basa en algunos SDK adicionales y software proporcionado por Apple o Google. Es bueno leer y seguir las guías de la plataforma proporcionadas por Cordova para cada plataforma con la que deseas trabajar.

Puedes hacer esto en un momento posterior, pero deberás configurar la herramienta de la plataforma antes de que puedas previsualizar o emular una aplicación en un simulador o dispositivo.

4. Flujo de Desarrollo con Ionic

Hay un sistema general de pasos que atravesarás cuando desarrolles una aplicación con Ionic. Estos pasos tienen correspondientes comandos en el CLI para ayudarte. Echemos un vistazo a los comandos principales que representan un flujo de desarrollo típico para la construcción de aplicaciones con Ionic.

Paso 1: Comenzando un Proyecto

Suponiendo que ya tienes una idea básica de lo que estás planeando construir, el primer paso es crear un nuevo proyecto. Los proyectos con Ionic se basan en Cordova y requieren algunos andamios para Cordova para entender más adelante tu proyecto. Ionic tiene varias plantillas prediseñadas que se pueden utilizar para generar un proyecto de arranque, pero también tu puedes proporcionar el tuyo propio.

Para comenzar un proyecto, corre el comando ionic start sample Esto genera una nueva carpeta en el directorio actual basado en el nombre que le asignes (ej. sample) Mientras el comando corre, descarga los archivos de GitHub necesarios para el proyecto, e inicializa el proyecto por ti.  Usa el proyecto por defecto, el cual tiene una app básica con una interfaz básica en pestañas.

Corre cd sample para navegar en el nuevo directorio. Cuando inspecciones el directorio, notarás algunos archivos y directorios. No te preocupes demasiado con cada archivo en el momento. Aquí están algunas cosas con las que necesitarás trabajar inicialmente.

  • Cordova.xml: Este archivo contiene la configuración para Cordova.
  • Ionic.Project: Este archivo contiene la configuración para Ionic.
  • /plugins: este directorio contiene cualquier plugin instalado  de Cordova. Inicialmente, este se carga con unos plugins por defecto que Ionic preinstala por ti.
  • /platforms: este directorio contiene los activos para cualquier plataforma que has configurado para la aplicación de destino, como Android y iOS. Ionic por defecto podría instalar una plataforma por ti.
  • /scss: este directorio contiene los archivos de origen de los estilos SASS para la aplicación. Se puede personalizar como se verá más adelante.
  • /www: este directorio contiene los archivos de la aplicación web que son cargados por Cordova. Todos los archivos JavaScript, HTML y CSS deben estar en este directorio.

Por el resto de este tutorial, trabajaremos con el proyecto que has generado y veremos cómo desarrollar y obtener una vista previa de la aplicación.

Paso 2: Desarrollar y Previsualizar la App

Has iniciado un proyecto, ahora quieres empezar a desarrollar. Durante el desarrollo inicial, es probable que previsualices tu trabajo en un navegador. Después de todo, una aplicación de Ionic es realmente sólo una aplicación web. Ionic viene con un servidor de desarrollo local que construye y sirve tu aplicación.

Para iniciar el servidor de desarrollo, ejecuta ionic serve. Tan pronto como esto funciona, se abre una vista previa de la aplicación en el navegador por defecto. En este punto, puedes utilizar las herramientas de desarrollador del navegador para inspeccionar la aplicación, buscar errores y cualquier otra tarea que harías normalmente al construir una aplicación web.

El servidor sigue funcionando en segundo plano y vigila los cambios en los archivos del proyecto. Cuando detecta que has editado y guardado un archivo, automáticamente recarga el navegador por ti.

Previsualizando la aplicación de Ionic funcionando en Chrome, usando la emulación de dispositivos en herramientas para desarrolladores

Yo recomiendo usar Chrome como navegador ya que cuenta con grandes herramientas para desarrolladores. Una característica particularmente útil es la capacidad para emular las dimensiones del dispositivo, que hace que sea fácil ver cómo se vería la app en un dispositivo en particular. No es un emulador real que ejecuta la aplicación como un dispositivo real, sólo imita las dimensiones de la aplicación.

Paso 3: Añade una Plataforma.

Cordova admite muchos tipos diferentes de dispositivos móviles, que son llamados plataformas. Tienes que registrar las plataformas que a las que deseas dirigirte con tu aplicación e instalar los archivos apropiados del proyecto. Afortunadamente, esto es más que todo administrado através de Ionic CLI Ionic es totalmente compatible con las plataformas Android y iOS.

Para agregar una plataforma, ejecuta ionic platform add android. Sustituye android con ios para en cambio añadir iOS . Una vez agregado, verás una nueva carpeta en el directorio de las plataformas de tu proyecto. Esta carpeta contiene los archivos específicos de la plataforma. En general, necesitas evitar hacerle demasiados cambios a los archivos en este directorio.

Si tienes algún problema, puedes quitar la plataforma y agregarla de nuevo. Para quitar una plataforma, ejecuta ionic platform remove.

Paso 4: Emular la Aplicación

En algún punto, querrás empezar a tener una vista previa de tu aplicación en un emulador real. Los emuladores son esencialmente versiones del software de un dispositivo real. Esto es realmente útil para testear el comportamiento indebido de la aplicación en un dispositivo real. Ten en cuenta que los emuladores no tienen todas las características de un dispositivo físico puesto que son sólo software de emulación de dispositivos.

Parte de tu código podría no funcionar como se espera, por ejemplo, si espera usar la lista de contactos del dispositivo. Por lo general, sólo las características que se integran con el hardware podrían no funcionar como se espera, pero para la mayoría de las cosas debería funcionar bien.

La configuración de los emuladores puede ser una tarea, dependiendo de qué tipo de computador usas y lo que necesitas probar. Sólo es posible emular un iPhone en un equipo que ejecute OS X, pero Android puede ser emulado en cualquier sistema operativo. Para configurar los emuladores, ve a las guías de la plataforma que enlacé antes.

Una vez que lo hayas hecho, puedes emular usando ionic emulate android -c -l. Como antes, sustituye android con ios, si le apuntas a iOS. Esto construye, instala y lanza la app en el simulador. Esto puede tomar unos pocos minutos, así que podrías querer utilizar algunas de las características útiles de recarga en directo en el navegador como lo hiciste antes.

Puedes utilizar la bandera opcional -l  paral la recarga en directo de la app en el simulador (sin la necesidad de reconstruir y volver a instalar). Esto es grandioso ya que no cambia cualquier cosa relacionada con cómo se construye la aplicación (como las configuraciones de Cordova). También puedes utilizar el indicador opcional - c para tener cualquier mensaje de la consola reenviado al registro del terminal. Yo los uso casi siempre.

Paso 5: Implementar la App en un Dispositivo

La mejor manera de previsualizar tu app es de hecho instalarla y correrla en un dispositivo. Esto requiere que configures una plataforma y tengas un dispositivo conectado a tu máquina. Hacer esto requiere alguna configuración que varía de acuerdo al tipo de dispositivo que tengas. Puedes ir a las guías de la plataforma anteriores para conectar tu dispositivo.

Una vez tengas conectado un dispositivo, es bastante simple correr la app en él desde la línea de comandos. Usa ionic run android -c -l y Ionic contruye, despliega y lanza tu app. De nuevo, puedes susituir ios por android Tal como en el comando emulado, puedes usar las banderas opcionales -l y -c para habilitar la recarga en vivo y el registro de la consola en la terminal.

Una vez que tu app está en tu dispositivo, puedes desconectarlo y la app permanecerá instalada en tu dispositivo. Esto es bastante útil si quieres usar la app por un período de tiempo para probar cómo se comporta o sólo para mostrársela a otros.

5. ¿Qué hay sobre Ionic 2?

Frecuentemente me preguntan sobre Ionic 2 y si la gente debería utilizarlo. En el momento de escribir este artículo, a principios del 2016, no hay una respuesta sencilla aún. He trabajado con él para construir algunos prototipos, y sé de poca gente que ha construido apps de producción con él, pero aún no está listo.

Las buena noticia es que aprender Ionic 1 hoy significa que aprender Ionic 2 será mucho más fácil. La mayoría de las cosas específicas sobre Ionic que aprenderás en esta serie permanecerán constantes entre sus versiones. Los grandes cambios ocurrirán debido a que Ionic 2 estará construido sobre Angular 2.

Así que mientras tanto puedes construir apps en Ionic 2, aunque no se haya lanzado oficialmente aún. No estás desperdiciando tiempo tiempo al aprender Ionic 1 ahora. Las mejoras deberían ser relativamente sencillas una vez Ionic 2 haya sido lanzado oficialmente.

Resumen

En este tutorial, cubrimos bastante sobre Ionic.

  • Aprendiste sobre las fortalezas y algunas debilidades de Ionic.
  • Configuraste tu computador para construir apps en Ionic.
  • Creaste tu primer proyecto y lo previsualizaste en el navegador.
  • Configuraste un emulador y/o conectaste un dispositivo para previsualizar tu app.

En la siguiente parte de esta serie, comenzarás a construir una app real y funcional usando las técnicas señaladas en este tutorial.

Crea una plantilla en Ionic y gánae $1000

Si estás lo suficientemente cómodo con el framework de Ionic, entonces podrías querer considerar entrar al Concurso más Esperado para Plantillas Ionic en Envato. ¿Cómo? Crea una plantilla única para Ionic y envíala a Envato Market hasta abril 27 de 2016.

Las cinco mejores plantillas recibirán $1000. ¿Te interesa? Lee más en el sitio web del concurso para los detalles sobre los requisitos y directrices del concurso.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.