Las aplicaciones híbridas están siendo cada vez mas populares por su rapidez en ser construidas y su versatilidad entre plataformas, en CLiCKO ya hemos hecho varias utilizando el framework Ionic.

Muchas veces intentar acceder a funciones del hardware como el GPS, el Almacenamiento o la Cámara pueden llegar a ser tareas frustantes, en este blog aprenderemos a instalar y utilizar el plugin nativo de Ionic para utilizar la Cámara de nuestro dispositivo.

Paso 1: Crear una nueva aplicación Ionic

En primer lugar, necesitamos crear un nuevo proyecto Ionic, para eso primero tenemos que asegurarnos que tenemos la ultima versión del framework instalado, para eso ejecutaremos el siguiente comando en un terminal:

$ npm install -g ionic@latest

Despues de asegurarnos que tenemos la ultima versión ya podemos crear nuestra aplicación nueva en Ionic con la template blank, para eso utilizaremos el comando:

$ ionic start IonicCamera blank

Paso 2: Instalar Cordova y el plugin nativo

Si seguimos la documentación oficial, la cual la podemos encontrar aquí:

https://ionicframework.com/docs/native/camera

Lo siguiente seria instalar el plugin desde cordova y utilizando el npm para eso utilizaremos estos comandos:

$ ionic cordova plugin add cordova-plugin-camera

$ npm install @ionic-native/camera

Para que nuestra aplicación pueda abrir el plugin necesitamos darle los permisos necesarios, para eso editaremos el fichero config.xml que esta en la raiz de nuestro proyecto y le añadiremos las siguientes lineas:

<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>Se necesita acceso a la cámara para tomar fotos</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
    <string>Se necesita acceso a la biblioteca de fotos para obtener imágenes desde allí</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>Se necesita acceso a la ubicación para encontrar cosas cercanas</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
    <string>Se necesita acceso a la biblioteca de fotos para guardar fotos allí</string>
</edit-config>

 

Paso 3: Importar el Plugin en el App Module

Como todos los demas plugins para poder utilizarlo en nuestro proyecto primero tenemos que importarlo en la array de providers, para eso editaremos el fichero app.module.ts y lo dejaremos asi:

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 { Camera } from '@ionic-native/camera/ngx';

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

 

Paso 4: Utilizar la Camara en el Home Component

Ahora ya podemos utilizar el plugin en nuestra aplicación, para eso editaremos el home component que viene por defecto.

En el fichero home.page.html añadiremos un botón para abrir la cámara, para eso dejaremos el fichero así:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
      <ion-button expand="full" (click)="camara()">
        Take Snap
      </ion-button>
     
      <img [src]="tempImg" />
  </div>
</ion-content>

Ahora iremos al fichero home.page.ts donde pondremos la lógica para hacer la foto:

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

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  tempImg: string;

  constructor(private camera: Camera) {}

  camara() {
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: this.camera.PictureSourceType.CAMERA
    };

    this.camera.getPicture(options).then( ( imageData ) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.tempImg = base64Image;
     }, (err) => {
      // Handle error
     });

  }
}

En el fichero podemos ver que hemos añadido el objeto cámara en el constructor, luego tenemos la función cámara que es la que llama el método getPicture donde hace la compresión de la imagen en base64 y la asigna a la variable tempImg la cual la mostramos en nuestro html.

Con esto ya tendríamos una app capaz de tomar fotos, como podemos ver utilizar Ionic nos facilita bastante el trabajo ya que es bastante sencillo implementar funciones que de otro modo nos tomaría mucho tiempo realizarlas.

Desde CLiCKO os animamos a utilizar este framework, para cualquier duda estaremos encantados de intentar ayudaros.

Twitter
Visit Us
Follow Me
LinkedIn
Share