El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Utilitzant Plugins Ionic Native i Cordova

Següent ►
►

Introducció

Ionic Native i Cordova són eines poderoses que permeten accedir a les funcionalitats natives del dispositiu des d'una aplicació híbrida. Aquest mòdul t'ensenyarà com integrar i utilitzar plugins per aprofitar aquestes funcionalitats.

Què són Ionic Native i Cordova?

  • Ionic Native: És una col·lecció de plugins Cordova amb una interfície Angular. Proporciona una manera més fàcil i segura d'utilitzar plugins Cordova en aplicacions Ionic.
  • Cordova: És una plataforma de desenvolupament d'aplicacions mòbils que permet utilitzar tecnologies web estàndard (HTML, CSS i JavaScript) per crear aplicacions que s'executen en dispositius mòbils.

Instal·lació de Plugins

Instal·lació de Cordova

Abans de començar a utilitzar plugins, assegura't que tens Cordova instal·lat:

npm install -g cordova

Instal·lació de Plugins Ionic Native

Per instal·lar un plugin Ionic Native, primer has d'instal·lar el plugin Cordova corresponent i després el paquet Ionic Native.

Exemple: Instal·lació del Plugin de la Càmera

  1. Instal·la el plugin Cordova:
cordova plugin add cordova-plugin-camera
  1. Instal·la el paquet Ionic Native:
npm install @ionic-native/camera
  1. Afegeix el plugin al teu mòdul Angular:
import { Camera } from '@ionic-native/camera/ngx';

@NgModule({
  ...
  providers: [
    Camera,
    ...
  ]
})
export class AppModule { }

Utilització de Plugins

Exemple: Utilitzant el Plugin de la Càmera

  1. Importa i injecta el servei Camera en el teu component:
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 {

  constructor(private camera: Camera) { }

  takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      // Fes alguna cosa amb la imatge
    }, (err) => {
      // Gestiona l'error
    });
  }
}

Exemple: Utilitzant el Plugin de Geolocalització

  1. Instal·la el plugin Cordova:
cordova plugin add cordova-plugin-geolocation
  1. Instal·la el paquet Ionic Native:
npm install @ionic-native/geolocation
  1. Afegeix el plugin al teu mòdul Angular:
import { Geolocation } from '@ionic-native/geolocation/ngx';

@NgModule({
  ...
  providers: [
    Geolocation,
    ...
  ]
})
export class AppModule { }
  1. Utilitza el servei Geolocation en el teu component:
import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

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

  constructor(private geolocation: Geolocation) { }

  getCurrentLocation() {
    this.geolocation.getCurrentPosition().then((resp) => {
      let lat = resp.coords.latitude;
      let lon = resp.coords.longitude;
      // Fes alguna cosa amb la latitud i longitud
    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }
}

Exercicis Pràctics

Exercici 1: Utilitzant el Plugin de la Càmera

  1. Objectiu: Crear una aplicació que permeti als usuaris fer una foto i mostrar-la en la pantalla.
  2. Passos:
    • Instal·la el plugin de la càmera.
    • Afegeix el servei Camera al teu component.
    • Implementa una funció que faci una foto i la mostri en una etiqueta <img>.

Exercici 2: Utilitzant el Plugin de Geolocalització

  1. Objectiu: Crear una aplicació que mostri la ubicació actual de l'usuari en la pantalla.
  2. Passos:
    • Instal·la el plugin de geolocalització.
    • Afegeix el servei Geolocation al teu component.
    • Implementa una funció que obtingui la ubicació actual i la mostri en la pantalla.

Solucions

Solució Exercici 1

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 {
  public base64Image: string;

  constructor(private camera: Camera) { }

  takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera.getPicture(options).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      console.log('Error taking picture', err);
    });
  }
}

Solució Exercici 2

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

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

  constructor(private geolocation: Geolocation) { }

  getCurrentLocation() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.latitude = resp.coords.latitude;
      this.longitude = resp.coords.longitude;
    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }
}

Errors Comuns i Consells

  • Error: "Plugin not installed" (Plugin no instal·lat).

    • Solució: Assegura't que has instal·lat el plugin Cordova i el paquet Ionic Native correctament.

  • Error: "Permission denied" (Permís denegat).

    • Solució: Assegura't que la teva aplicació té els permisos necessaris configurats en el fitxer config.xml i que l'usuari ha concedit els permisos.

Conclusió

En aquest tema, has après com instal·lar i utilitzar plugins Ionic Native i Cordova per accedir a les funcionalitats natives del dispositiu. Has vist exemples pràctics amb els plugins de la càmera i la geolocalització, i has tingut l'oportunitat de practicar amb exercicis. Ara estàs preparat per explorar altres plugins i ampliar les capacitats de la teva aplicació Ionic.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats