Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Ionic 2
Code

Crea tu Primera Aplicación con Ionic 2: App para Compartir Fotos

by
Difficulty:BeginnerLength:LongLanguages:

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

En esta serie de tutoriales de dos partes, estarás aprendiendo a crear tu primera aplicación con Ionic 2. Ahora que has creado el entorno de desarrollo y has aprendido sobre el flujo de trabajo de desarrollo en Ionic 2, es hora de ensuciarse las manos con la codificación de la aplicación.

Si no lo has hecho todavía, sigue el primer artículo para configurar el entorno de desarrollo y arrancar tu proyecto.

Esta segunda parte cubrirá las cosas que necesitas saber cuando se trata de la codificación de aplicaciones en Ionic 2. Aprenderás cómo crear las páginas de la aplicación, cómo obtener las entradas del usuario y cómo utilizar plugins para acceder a las funcionalidades nativas. Una vez que termines, ejecutarás la app en un dispositivo o emulador. Pero antes de llegar a eso, tomemos un momento para hablar de lo que vas a crear.

Lo que Crearás

En este tutorial, podrás crear un app para compartir fotos. El flujo básico será el siguiente:

  1. El usuario abre la aplicación y se registra. Será redirigido a la página para escoger una imagen para compartir.
  2. El usuario hace clic en el botón seleccionar imagen (Pick Image). Aparece el selector de imagen, y el usuario escoge una imagen. Luego se previsualizará la imagen.
  3. El usuario introduce un título y hace clic en el botón compartir imagen (Share Image) para pasar la imagen a la aplicación de Instagram.

Este tutorial sólo te mostrará cómo ejecutar la aplicación en un dispositivo Android, pero Cordova (el framework sobre el que Ionic corre) es multiplataforma. Ionic 2 tiene incorporados temas para Android, iOS y Windows, así que es fácil crear una versión de tu aplicación para esos dispositivos también.

Así es como se verá la app:

Completed photo sharing app

Configuración del Proyecto

Si seguiste el tutorial anterior, entonces ya debes tener configurado tu entorno de desarrollo con Ionic 2 y tu proyecto estructurado. Usamos los siguientes comandos CLI de Ionic 2 para crear la carpeta del arbol del proyecto y preparamos su puesta en marcha en Android.

También instalamos un par de plugins útiles:

Creando la Página de Inicio

Por el resto del tutorial, estarás trabajando sobre todo dentro de la carpeta src, así que asume que la carpeta src es la raíz cada vez que veas una ruta de archivo. (Si deseas una actualización sobre las rutas creadas por la plantilla de arranque de Ionic, mira el tutorial anterior.)

Dentro del directorio src hay cuatro carpetas:

  • app: es donde se define el código de la aplicación. Si necesitas ejecutar código específico cuando la aplicación se inicia, o si deseas actualizar el CSS global, entonces este es el lugar al que debes ir.
  • assets: es donde van los archivos como las imágenes utilizadas como contenido en la aplicación.
  • pages: aquí es donde va el código para las páginas individuales. Cada página tiene su propia carpeta y dentro de cada carpeta hay tres archivos que definen la plantilla (HTML), el estilo (CSS) y los scripts (TypeScript) de la página.
  • themes: aquí es a donde vas si quieres modificar el tema por defecto de Ionic 2.

Plantilla de Página de Inicio

De forma predeterminada, la plantilla de arranque en blanco de Ionic ya viene con una página de inicio. Lo único que tienes que hacer es editarla para mostrar el contenido que desees. Abre el archivo pages/home/home.html y borra su contenido actual. Agrega lo siguiente en la parte superior de la página:

El código anterior es el modelo de la cabecera de la aplicación. El componente <ion-navbar> sirve como una barra de herramientas de navegación. Muestra automáticamente un botón de retroceso cuando se navega a la página por defecto. <ion-title> establece el título de la nav bar.

El siguiente es el contenido actual de la página. Puedes definirlo dentro del componente de <ion-content>. Un relleno por defecto puede aplicarse especificando la opción padding. Dentro de ese contenedor, crea una nueva lista que contenga los campos de entrada para ingresar el usuario y contraseña. Crear una lista para contener los campos de edición es una práctica estándar en Ionic, te permite apilar cada campo cuidadosamente encima del otro. Debajo de la lista está el botón para iniciar sesión.

Tomemos un momento para mirar el código para introducir texto y hacer clic en un botón. En Ionic, puedes definir un campo de entrada de texto usando el componente <ion-input>. Para enlazar el campo de texto a una propiedad de clase definida en el script de la página, utiliza [(ngModel)]. El valor que asignado es el nombre de la propiedad de clase.

Para configurar el enlace de datos bidireccional, puedes establecer [value] en el mismo nombre de la propiedad utilizada para [(ngModel)]. Esto te permite actualizar el valor del campo de texto, cambiando el valor del modelo del script de la página. Más adelante verás cómo definir una propiedad de clase dentro de script de la página.

Para definir botones, utiliza el elemento button estándar en HTML. Si te estás preguntando por qué no es <ion-button>, es por razones de accesibilidad. Los botones son un componente crucial de la interfaz, por lo que el equipo de Ionic decidió seguir con los botones HTML estándar para hacerlos accesibles. La directiva ion-button en su lugar se agrega para proporcionar funcionalidades adicionales.

Ionic 2 buttons

Para agregar un controlador de clic, se utiliza la directiva (click), con un valor que especifique la función (definida en la página de script) que ejecute la acción cuando ocurre el evento click.

Script de la Página de Inicio

Abre el archivo pages/home/home.ts, limpia todos sus componentes y agrega lo siguiente:

Rompiendo el código anterior, primero importamos la clase del componente Angular que ya tiene todas las directivas de Ionic listas.

Luego, importamos los controladores para la navegación y las alertas del paquete ionic-angular. Aquí es donde se incluyen todos los controladores de Ionic.

Después de eso, importamos el PickerPage. Podrás crearlo más adelante, así que déjalo comentado por ahora. Recuerda remover el comentario una vez que esté listo para ser cargado.

Después de las importaciones, utiliza el decorador @Component para especificar la plantilla HTML que será usada por el script:

Ahora podemos definir la clase para nuestro script de la página de inicio. Queremos exportar esta clase para que puede ser importada desde otros archivos en la aplicación.

Haz el NavController y el AlertController disponibles a lo largo de la clase al definirlos como parámetros en el constructor. Esto te permite usar this.navCtrl, por ejemplo, cuando desees utilizar el NavController para navegar a otra página.

Ahora estamos listos para definir las propiedades de nuestro controlador que pueden ser referenciadas desde la plantilla. Estas propiedades contiene el valor actual del campo de texto para nombre de usuario y contraseña:

Para mantener las cosas simples, vamos a usar valores modificables para el usuario y la contraseña. Pero para las aplicaciones del mundo real, normalmente se haría una solicitud a un servidor para autenticar el usuario.

Dentro de la función login(), crea una alerta para cuando el usuario ingrese un nombre de usuario o contraseña incorrecta:

Si las credenciales son incorrectas, muestra la alerta:

Ionic 2 alerts

Si el nombre de usuario y la contraseña ingresadas por el usuario coinciden con los valores codificados, usa el NavController para empujar el selector de la página en la pila de navegación. Cualquiera que sea la página que presiones en la pila de la navegación se volverá la página actual, mientras que al cerrar la página efectivamente navegará a la página anterior. Así es como funciona la navegación en Ionic 2.

Página de Selección

A continuación, necesitas crear la página de selección. Como ya sabes, la norma es crear una carpeta independiente para cada página, y cada carpeta tendrá tres archivos en ella. Afortunadamente, el CLI de Ionic también viene con un comando que nos permite crear nuevas páginas:

Usa el comando generate, que creará la carpeta de la página con los tres archivos dentro. Lo mejor de todo, cada archivo ya viene con algo de código estandarizado con el que puedes empezar.

Plantilla de la Página de Selección

Una vez hecho esto, abre el archivo pages/picker/picker.html y reemplaza el código estándar con lo siguiente:

Nada de este código es realmente desconocido excepto la directiva hidden y el uso de un componente <ion-card>.

La directiva hidden te permite ocultar un elemento basado en un valor específico definido en el script de la página. Así que si has_picked_image es true, sólo entonces este div será visible.

El componente <ion-card> se utiliza para la creación de tarjetas. Las tarjetas son una gran manera de mostrar las imágenes dentro de las apps.

Ionic 2 card images

Estilos de la  Página de Selección

Abre el archivo pages/picker/picker.scss y añade lo siguiente:

Script de la Página de Selección

Abre el archivo pages/picker/picker.ts y añade lo siguiente:

Voy a descomponer esto un poco. Primero importamos los plugins que instalaste anteriormente. Ten en cuenta que los plugins se instalan en el mismo paquete (ionic-native). Esto es bueno porque en lugar de tener que importar cada plugin, se puede hacer todo en una sola línea.

A continuación declaramos las propiedades de la clase:

Cuando se hace clic en el botón elegir imagen (Pick Image), se definen las opciones para el selector de la imagen. Estas opciones son bastante autoexplicativas, pero he añadido algunos comentarios para aclarar lo que cada una hace.

Especificar la anchura width y la altura height no significa necesariamente que la imagen resultante utilizará esos ancho y alto exactos. Lo que significa es que Ionic utilizará esas dimensiones como la máxima anchura o altura de tal manera que la proporción se mantenga.

Estamos utilizando data URI como el tipo de salida porque el plugin de Instagram sólo acepta data URIs. Esto significa que también tienes que ajustar la anchura, la altura y la calidad al mínimo porque los datos URI pueden ser muy largos si la calidad es alta - ¡toda la imagen está codificada en una cadena URI! Esto podría provocar fallas en la aplicación, por lo que siempre es una buena práctica pegar imágenes más pequeñas y de baja calidad cuando se trabaja con datos identificadores URI.

A continuación, usa el plugin Image Picker para activar la pantalla de selección de imagen. Ya que solo estamos esperando una sola imagen, simplemente podemos acceder al primer elemento de la matriz de resultados. También tenemos que anteponer el prefijo para los data URIs.

Finalmente, cuando se hace clic en el botón de compartir imagen (Share Image), el método share proporcionado por el plugin de Instagram activará la pantalla compartir en la aplicación de Instagram para lanzarla. Esto tendrá la imagen precargada.

El título no será copiado. La aplicación de Instagram desactiva los títulos prerellenados y así el campo de título estará vacío cuando se abre la app de Instagram. Para evitar este problema, el plugin de Instagram en cambio copia el título en el portapapeles. Esto significa que el usuario puede simplemente pegar el subtítulo en el campo de texto de la app de Instagram.

Juntando Todo

El paso final es abrir el archivo app/app.module.ts. Este es el módulo de la raíz de la aplicación donde se definen todas las páginas y proveedores (como el manejador de errores predeterminado de Ionic) que vas a utilizar a lo largo de la aplicación.

Asegúrate de que todas las páginas que has creado estén definidas, de lo contrario obtendrás un error cuando navegues a una página que no ha sido definida. De forma predeterminada, la página HomePage ya está definida aquí, así que sólo tienes que añadir la página para seleccionar la imagen PickerPage. Sólo impórtala en la parte superior del archivo y luego añadela en la matriz declarations y entryComponents. Nota que MyApp no es una página; es un componente que sirve como una cáscara vacía para las páginas que se carguen allí.

Si abres el archivo app/app.components.ts, verás lo siguiente:

Aquí es donde puedes definir la página raíz, la página que verá el usuario una vez que abra la aplicación. En este caso, la página raíz es HomePage. Esto también es perfecto para la ejecución de código de inicialización, ya que el código aquí sólo es ejecutado una vez cuando el usuario inicia la aplicación. Al inicializar algo (por ejemplo, al pedir permiso para que se habilite el Bluetooth), siempre querrás esperar hasta que se desencadene el evento platform.ready(). Una vez que se ha disparado ese evento, puedes estar seguro de que las funciones nativas están listas para ser llamadas.

Ejecutando la App

Ahora que estás listo para ejecutar la aplicación en un dispositivo móvil o un emulador. Puedes hacerlo ejecutando el siguiente comando:

Asegúrate de que tienes un dispositivo conectado al ordenador o que tienes una instancia en ejecución de un emulador al ejecutar el comando anterior. Si aún no funciona, comprueba que has activado la depuración de USB en el dispositivo y ejecuta adb devices. Esto activará que el ordenador se conecte al dispositivo. Simplemente acepta en el indicador del dispositivo una vez que veas el mensaje de autenticación.

Si deseas tener una copia del archivo APK para que puedas compartirlo con un amigo, puedes generar uno ejecutando en cambio lo siguiente:

Esto creará un archivo android-debug.apk en la carpeta plataforms/android/build/outputs/apk.

Conclusión

¡Eso es todo! En este tutorial, creaste tu primera aplicación con Ionic 2. Es una aplicación simple, y podrías incluso haberla encontrado fácil de hacer. Pero aprendiste cómo configurar un entorno para el desarrollo de aplicaciones con Ionic 2, y has aprendido algunos conceptos básicos que se pueden aplicar en el desarrollo de aplicaciones en el futuro. Estos incluyen obtener el valor actual de un campo de texto, responder a eventos de clics, enlazar imágenes y el uso de plugins para acceder a las funcionalidades nativas. ¡Así que puedes darte una palmada en la espalda! Hiciste un buen trabajo logrando esto por ahora.

Mientras tanto, revisa algunos de nuestros otros tutoriales sobre Ionic 2.

Si quieres una profundización y una introducción práctica al framework Ionic 2, revisa nuestro curso Comenzando con Ionic 2.

En este curso, Reggie Dawson te enseñará todo sobre el framework Ionic y te mostrará cómo crear una aplicación móvil desde cero. En el camino, aprenderás sobre la librería de componentes de Ionic, sobre programación estática de JavaScript con TypeScript y sobre la integración de una aplicación de Ionic 2 una API de medios enriquecidos.

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.