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

Cómo Crear una Aplicación de Cámara Con Ionic 2

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image
What You'll Be Creating

Como un desarrollador prudente, podrías ser cauteloso de crear aplicaciones híbridas que dependan de API's nativas de Android. Hace unos cuantos años, yo también lo era, lo que con Android tiene tantas peculiaridades específicas de la versión y específicas del dispositivo. Hoy en día, sin embargo, podemos confiar en frameworks de desarrollo de aplicaciones híbridas para manejar la mayoría de estos caprichos de manera transparente. Ionic 2, que construye sobre Apache Cordova, es uno de dichos frameworks.

Ionic 2 tiene envoltorios para varios complementos Cordova populares que te permiten fácilmente hacer uso de los recursos nativos de Android

Prerequisitos

Para seguir a la par, necesitarás:

  • la última versión del SDK de Android
  • Node.js v6.7.0 o superior
  • un dispositivo o emulador ejecutando Android 4.4 o superior
  • un entendimiento básico de TypeScript y Angular 2

1. Instala Cordova y Ionic

Tanto Cordova como Ionic están disponibles como módulos NPM, así que la manera más sencilla de instalarlos es usar el comando npm. Aquí está como instalar ambos de manera global:

Una vez que la instalación está completa, teclea lo siguiente para asegurar que la interfaz de linea de comando Ionic, o CLI para corto, está configurada correctamente.

La salida del comando de arriba debería lucir así:

2. Crea un Nuevo Proyecto

La CLI de Ionic hace muy fácil para ti crear nuevos proyectos Ionic 2 con todos los archivos requeridos de configuración y código calificativo. También ofrece varias plantillas de inicio de las cuales elegir. Por ahora, creemos simplemente un proyecto usando la plantilla de inicio blank.

En este punto, tendrás un nuevo directorio llamado MyCameraApp. Para el resto de este tutorial, estaremos trabajando dentro de este directorio.

3. Configura el Proyecto

Por defecto, un proyecto Ionic 2 no está configurado para apuntar a cualquier plataforma móvil. Aquí es donde agregas soporte para Android:

También puedes apuntar manualmente a Ionic 2 a la ubicación en donde instalaste el SDK de Android. Si estás usando Mac o Linux, usa el comando export para hacerlo.

4. Instala Complementos Ionic

Nuestra app de cámara necesita acceso a la cámara del dispositivo y sistema de archivos, ambos de los cuales son recursos nativos. Si estás familiarizado con Cordova, podrías estar enterado de que las aplicaciones híbridas usualmente interactúan con tales recursos a través de complementos. Aunque puedes usar un complemento Cordova directamente en un proyecto Ionic 2, es mucho más fácil usar su envoltorio Nativo Ionic en su lugar.

Para acceder a la cámara, usaremos el complemento cordova-plugin-camera-preview. Este nos permite no solo tomar fotografías, sino también aplicar varios filtros de imagen a estos. Aquí está como puedes agregarlo a tu proyecto.

Tendremos, por supuesto, que guardar las imágenes que tomamos en almacenamiento externo de medios, tales como tarjetas SD. Para hacerlo, usaremos el complemento cordova-plugin-file.

Por último, para soportar dispositivos Android ejecutando la API nivel 23 o superior, necesitaremos el complemento cordova.plugins.diagnostic.

5. Define el Diseño

La interfaz de usuario de nuestra app será compuesta por los siguientes componentes:

  • una ventana de previsualización de cámara
  • un botón de acción flotante para tomar fotografías
  • un botón de acción flotante para aplicar filtros de imágenes

Estaremos creando la ventana de previsualización de cámara de manera programática en un paso posterior. Por ahora, creemos un diseño HTML conteniendo solo dos botones de acción flotantes.

Debido a que nuestra aplicación en blanco ya tiene una página, la estaremos usando en lugar de crear una nueva. Para modificar su diseño, abre src/pages/home/home.html. Vacía sus contenidos y agrega una nueva etiqueta <ion-content> a esta.

Para crear un botón de acción flotante, puedes crear un botón HTML ordinario y agregar el atributo ion-fab a este. Adicionalmente, envolviendo la etiqueta <button> dentro de una etiqueta <ion-fab>, puedes posicionarlo.

Un botón de acción flotante usualmente tiene un icono. Usando la etiqueta <ion-icon>, puedes agregar cualquier Ionicon a este.

En consecuencia, agrega lo siguiente a tu archivo de diseño:

Como puedes ver en el código de arriba, hemos agregado un manejadores de evento click a ambos botones. Los definiremos después.

6. Adquiere Permisos

En dispositivos ejecutando Android API nivel 23 o superior, debes pedir explícitamente al usuario los permisos para acceder a la cámara y el sistema de archivos durante el tiempo de ejecución. Para hacerlo en tu aplicación híbrida, puedes usar métodos disponibles en el envoltorio Ionic Native Diagnostic.

Comienza abriendo src/pages/home/home.ts e importando Disgnostic.

Dentro del constructor de la clase HomePage, agrega una llamada al método checkPermissions(). Adicionalmente, agrega un objeto ToastController a la clase usando inyección de dependencia. Estaremos usándolo para mostrar toasts Ionic 2, que son casi idénticos a los snackbars de Android.

Después de hacer los cambios de arriba, tu código debería lucir así:

Dentro del método checkPermissions(), usa el método isCameraAuthorized() de la clase Diagnostic para revisar si la app ya tiene permisos para acceder a la cámara y el sistema de archivos. Debido a que este método devuelve un objeto Promise, debes usar un callback para manejar su resultado.

Si la app no tiene los permisos requeridos, puedes usar el método requestCameraAuthorization() para pedirlos.

Si el usuario no otorga los permisos, o si nuestra app ya los tiene, podemos continuar e iniciar la vista previa de la cámara dentro de initializePreview(), un método que estaremos creando en el siguiente paso. De otro modo, simplemente mostraremos un toast conteniendo un mensaje de error usando los métodos create() y present() de la clase ToastController.

De manera acorde, agrega el siguiente código dentro del método checkPermissions():

Aquí está como luce el diálogo de autorización de cámara sobre un dispositivo ejecutando Android Marshmallow:

Camera authorization dialog

7. Crea Vista Previa de Cámara

El envoltorio Ionic Native CameraPreview te permite mostrar una vista previa en vivo de la cámara dentro de tu app híbrida. Sin embargo, debido a que la vista previa usa un fragmento Android en vez de un elemento HTML, agregarlo a tu página es ligeramente complicado.

Antes de que comiences, asegúrate de que importas tanto CameraPreview como CameraPreviewRect.

Usando un objeto CameraPreviewRect, puedes especificar la posición y tamaño de la vista previa de cámara. Por ahora, hagamos que llene completamente la pantalla del dispositivo.

En este punto, tenemos todo lo que necesitamos para comenzar la vista previa de la cámara. Así pues, llama al método startCamera() de la clase CameraPreview y pásale el objeto CameraPreviewRect. También debes, por supuesto, especificar la cámara que quieres usar. En este tutorial, usaremos solo la cámara trasera.

La vista previa de la cámara será colocada debajo de nuestra página HTML, y no será visible a menos que hagamos transparente el fondo de nuestra app. La manera más fácil de hacerlo es agregar una regla CSS dentro del archivo src/app/app.scss.

8. Toma Fotografías

Mientras definimos el diseño de nuestra página, ya agregamos un manejador click al botón que el usuario presionará para tomar fotografías. Definamos ahora el manejador.

Tomar una fotografías con el envoltorio Ionic Native CameraPreview es tan sencillo como llamar al método takePicture() y especificar la resolución deseada de la imagen. Por ahora, usemos 320 x 320 como las dimensiones máximas de nuestra imagen.

Vale la pena notar que especificar resoluciones grandes puede llevar a errores de memoria.

9. Aplica Efectos de Imagen

El envoltorio CameraPreview te permite aplicar fácilmente varios efectos comunes de imagen, también llamados filtros de imagen, a tus fotografías en tiempo real. Ya agregamos un manejador click al botón que el usuario presionará para aplicar los efectos de imagen. Así pues, todo lo que necesitamos hacer ahora es definirlo.

Para mantener simple nuestro código, cada vez que el usuario presione el botón, elegiremos un efecto al azar de un arreglo de efectos, y lo aplicaremos. Puedes usar la función JavaScript Math.random() para elegir un efecto aleatorio, y el método setColorEffect() de la clase CameraPreview para aplicarlo.

Puedes ejecutar la aplicación ahora y presionar el FAB múltiples veces para ver varios efectos de imagen siendo aplicados a la ventana de vista previa de la cámara.

Camera preview with the mono effect

10. Mueve Imágenes a Almacenamiento Externo

Nuestra app coloca todas las imágenes que toma dentro de su directorio de almacenamiento de aplicación, el cuál es un directorio privado de datos. Si prefieres almacenar esas imágenes es un medio de almacenamiento externo, haciéndolas así disponibles para aplicaciones de galerías fotográficas de terceros, debes moverlas manualmente. Para hacerlo, puedes usar el envoltorio Ionic Native File.

Como siempre, importa el envoltorio antes de usarlo. Adicionalmente, declara cordova como una variable global inicializada externamente. Esta ofrece constantes que te permiten referir fácilmente a todas los directorios frecuentemente usados del sistema de archivos Android.

Deberíamos estar moviendo las imágenes al directorio de almacenamiento externo tan pronto como son capturadas. Por tanto, suscribe al método setOnPictureTakenHandler() de la clase CameraPreview. El método devuelve un arreglo conteniendo las rutas absolutas de la imagen como su viñeta. Por ahora, estaremos moviendo la imagen solamente.

En consecuencia, agrega el siguiente código hacia el final del método initializePreview():

Dentro del método moveFileToExternalStorage(), podemos usar el método moveFile() de la clase File para realmente mover la imagen. El método moveFile() espera directorios de fuente y destino y nombres de archivos como sus argumentos.

Para determinar la ruta del directorio de almacenamiento externo de tu aplicación, usa la constante cordova.file.externalApplicationStorageDirectory. De manera similar, para determinar el camino del directorio de almacenamiento privado de tu aplicación, usa la constante cordova.file.applicationStorageDirectory.

De manera adicional, para extraer el nombre de archivo de la imagen de su ruta absoluta, puedes simplemente usar los métodos JavaScript split() y pop(). Sugiero que también muestres en toast después de que la operación mover es completada.

Nuestra app de cámara está ahora completa. Puedes ver sus imágenes usando cualquier app de galería de fotos que tengas en tu dispositivo.

Conclusión

En este tutorial, aprendiste cómo usar Ionic 2 y complementos de envoltorio disponibles en Ionic Native para crear una aplicación híbrida que puede tomar fotografías, aplicar efectos de imagen a estas y almacenarlas en medios externos de almacenamiento. Aunque nos enfocamos solo en la plataforma Android hoy, puedes estar seguro de que nuestra app funcionará, con cambios mínimos, en dispositivos iOS también.

Para aprender más sobre Ionic 2, puedes referirte a su extensiva documentación. O revisa nuestro curso Ionic 2 aquí en Envato Tuts+!.

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.