¿Qué es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¿Qué hay de nuevo en Ionic 4?

3

¿Qué ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes básicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides dinámicos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una página de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una página de registro

20

Navegación entre login y registro

21

Agregar un menú con el componente Menu

22

Dar funcionalidad y estilos al menú

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

Página completa con artistas, canciones y álbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de álbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra página de Settings con CSS

35

Página Sports y Angular Maps

36

Crear la página Sport

37

RETO: Buscador dinámico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Usar la cámara a través de Capacitor

32/39
Recursos

Aportes 10

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Siendo el 27/06/2021, el _CameraSource _se debe usar instalando
npm install @capacitor/camera

import { CameraResultType, CameraSource } from '@capacitor/camera'; 

Hola, podrían por favor ayudarme con una duda,
la cámara efectivamente toma la fotografía y se puede visualizar en el ion-avatar, pero al cambiar de ventana y volver, la foto que se había tomado ya no aparece, como podría solucionarlo para que quede ahí hasta que la quiera cambiar de nuevo? gracias

buenas tardes profesor tengo un problema al iniciar la camara con el capacitor se abre y automaticamente se cierra al segundo saliendo el siguiente error

ERROR Error: Uncaught (in promise): Requested device not found
at resolvePromise (zone.js:852)
at zone.js:762
at rejected (tslib.es6.js:71)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:26769)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:910
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26760)

link del repo al commit de la clase, a dia de hoy no cambia mucho eceptuando que se debe instalar el uso de la camara de capacitor y lo del pwa y nada más.

Para lograr un uso correcto de la camara con capacitor primero crearemos la página de settings

ionic generate page settings

posteriormente vamos a instalar varias librerias que seran necesarias para el uso de la camara

esta librería nos permitira el uso de los plugins de la cámara

npm install @capacitor/camera

esta librería cambiara el modo de vista del window adaptandose a una pwa (progressive web apps), necesario para el uso de plugins como camera o toast

npm install @ionic/pwa-elements -save

posteriormente hacemos un cambio en nuestro main.ts

main.ts

import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

haremos el cambio en nuestro para enviar desde app-routing.module.ts a nuestro menu-routing.module.ts la page de settings, como un hijo más de menu

menu-routing.module.ts

const routes: Routes = [

  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'settings',
        loadChildren: () => import('../settings/settings.module').then( m => m.SettingsPageModule)
      }
    ]
  }
];

posteriormente hacemos el cambio en nuestro menupage para redireccionar con interfaz a settingspage

menu.page.ts

goToSettings() {
    this.navCtrl.navigateRoot('menu/settings');
  }

menu.page.html

<ion-list>
        <ion-item>Home</ion-item>
        <ion-item>Sports</ion-item>
        <ion-item (click)="goToSettings()">Settings</ion-item>
        <ion-item (click)="logout()">
          <ion-icon name="log-out" color="primary" slot="start"></ion-icon>
          Salir 
        </ion-item>
</ion-list>

ahora configuraremos nuestro settingspage para tomar una foto y posicionarla como imagen de usuario o cargar una imagen predefinida desde assets

settings.page.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import{ Camera, CameraResultType, CameraSource  } from '@capacitor/camera';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})

export class SettingsPage implements OnInit {
  userImage = 'assets/img/foto1.jpg';
  photo: SafeResourceUrl;
  
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

  async takePhoto() {
    const image = await Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });
    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(
      image && image.dataUrl
    );
  }
}

settings.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>settings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-avatar (click)="takePhoto()">
    <img [src]="userImage" alt="" *ngIf="!photo">
    <img [src]="photo" alt="" *ngIf="photo">
  </ion-avatar>
</ion-content>

Me ha parecido sencillo el usar la cámara, lastima que no se explica como almacenar la foto en el dispositivo.

Uy muy teso esto

Que bonito es lo bonito!!!

Muy buena clase, bastante complicada de entender, pero una vez lo entiendes muy bonito! Faltaria nada mas guardar los cambios en un servicio de almacenamiento!

Hola. Tengo un problema, instalé pwa-elements siguiendo el video pero me salieron 6 vulnerabilidades. Después, utilice npm audit fix (lo que sugería la misma linea de comandos para arreglarlo) pero no se solucionó.
Seguí con el video hasta el minuto 12:10 pero me salió otro error y no sé cómo solucionarlo, podrían ayudarme? gracias.