Como crear una aplicación con Camara en Ionic

Hola a todos.
En éste artículo voy a explicaros como con unos pocos comandos, podemos insertar la funcionalidad de una cámara en nuestra aplicación.
Para ello vamos a utilizar Ionic.
Antes de nada, deberás tener instalado el Nodejs y tu entorno Sdk configurado. Te dejo mi artículo si no lo tienes instalado, céntrate simplemente en el Sdk.
Para comenzar vamos a seguir las instrucciones de su página http://ionicframework.com/getting-started/

Primero creamos una aplicación Ionic.

Sitúate en el directorio donde lo quieres instalar con un terminal en modo administrador.

cd C:\git\cookyourweb

A continuación ejecuta la instrucción que nos proporciona la página para instalar Ionic si aun no lo tienes instalado.

npm install -g cordova ionic

Una vez hecho esto procedemos a instalar la aplicación que en mi caso voy a llarma myCamaraIonicApp

ionic start --v2 myCamaraIonicApp blank

Segundo Configuramos el plugin de la camara.

Una vez instalado cordova, instala el plugin despues de añadir la plataforma android

ionic platform add android
ionic plugin add cordova-plugin-camera

Tercero. Editamos la aplicación con un editor html

Ya lo tenemos configurado, ahora abre el directorio con un editor de texto. En mi caso utilizaré Brackets

Abrimos la carpeta con un editor, por ejemplo Brackets

Edita home.ts dentro de Src>pages>home

imageURL
 
  
  constructor() {}
  takePhoto(){
    Camera.getPicture().then((imageData) => {
       this.imageURL = imageData
    }, (err) => {
       console.log(err);
    });
  }

A continuación vamos a insertar el código para el botón de sacar foto en la página home.html (que es llamada desde home.ts)

 

button ion-button color="primary" (click)="takePhoto()">Take Photo
 

Inserta el botón que llama a la camara desde la página home.html

Y el botón que nos dá acceso a a la galería


button ion-button color="primary" (click)="accessGallery()">Open Gallery
 

Inserta el botón que nos da acceso a la garlería de nuestra cámara


Y añadimos su código correspondiente en la página home.ts dentro de la clase homepage


 base64Image
accessGallery(){
   Camera.getPicture({
     sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
     destinationType: Camera.DestinationType.DATA_URL
    }).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,'+imageData;
     }, (err) => {
      console.log(err);
    });

Una vez hecho esto ya solo nos queda probar la cámara. Recuerda tener instalado y configurado tu sdk correctamente.

Cuarto. Ejecutamos la aplicación para ver que funciona perfectamente

Puedes probarlo de dos maneras. Desde un simulador de Android configurando tu sdk, o directamente desde tu móvil.
Damos acceso a nuestro móvil para instalar y ejecutar al Aplicación

Tenemos que configurar nuestro móvil para que acepte la instalación de la Aplicación. Para ello, en tu móvil busca el icono de ajustes:

En Ajustes> Accesibilidad> Opciones para el desarrollador

Accesibilidad>Opciones desarrollador

Activa Depuración Usb

Dile que si a permitir depuración Usb

Vuelve a tu terminal y sal de la simulación con la tecla q, e inserta la instrucción siguiente:

Ejecuta la siguiente instrucción:

ionic run android

Si todo va bien, tu móvil te pedirá permiso de instalación. Aceptalo y prueba la aplicación, ya tendras acceso a la camara y a la galería.

Resultado en el móvil tras hacer foto y buscar en galería.

Eso es todo, ya tenéis la camera instalada en vuestra aplicación Ionic, en el próximo artículo guardaremos las imágenes en una base de datos.

Verónica Serna| Cookyourweb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *