¬Ņ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

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Servicio para validar credenciales

17/39
Recursos

Aportes 10

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Al importar el NavController a mi me funciono así:

import { NavController } from '@ionic/angular';

TL:DR Tal vez es mejor usar la navigación de Angular Router

import { Router } from '@angular/router';
...
this.router.navigate(['/home']);

Noto que en la documentación para Ionic 5, recomiendan que la navegación se maneje con el router de Angular.

‚ÄúFor apps that are built with Angular and @ionic/angular, we recommend using the Angular Router which comes out of the box for every new Ionic 4 Angular app.‚ÄĚ Fuente

Adicionalmente en un foro de Ionic, un miembro del equipo recomienda que para navegación en apps hechas con Angular y Ionic, es mejor usar el Angular Router.
‚ÄúThe nav-controller isn‚Äôt slated to go away just yet, but it‚Äôs not going to be integrated into a ‚Äúrouter‚ÄĚ. It will essentially be used only for in-memory routing. For anything that is tied to the URL, use the angular router and its functionality.‚ÄĚ Fuente

Alg√ļn ejemplo con una API Key ?? donde se coloca en tu caso ?

IONIC 6

En Ionic 6 el servicio creado por el profesor funciona igual, toca realizar la integración con el backend pero eso le toca a cada uno.
Respecto al NavController en la documentación de Ionic recomiendan usar el Router, esto lo implementarían así en el archivo login.page.ts

Importar el Router

import { Router } from '@angular/router';

Inyectarlo en el constructor

constructor(private formBuilder: FormBuilder, private authenticateService: AuthenticateService, private router: Router) {

Implementar el método de autenticación

  loginUser(credentials) {
    this.authenticateService.loginUser(credentials).then((res) => {
      this.errorMessage = '';
      this.router.navigate(['/home']);
    });
  }

Estoy muy contento, tuve muchos errores pero pude solucionarlos, y es emocionante avanzar!!!.
Este profe es genial

Algun ejemplo funcional del uso de fetch a la hora de validar credenciales?

Inyectando el NavController desde el constructor me funcionó

Me genero una inquietud, normalmente trabajando con http se trabaja con The RxJS library - Angular, aunq se q tambn se puede trabajar con fetch q seria JavaScript Nativo, cual seria la mejor metodología???

Servicio para validar credenciales
En loginUser agregamos authService,
este tiene una función que recibe las credenciales
en caso de ser exitosa va recibir una respuesta-
indicamos que el error está vacío
y redireccionamos al usuario al home.

loginUser(credentials){
    this.authService.loginUser(credentials).then(res => {
      this.errorMessage = '';
      this.navCtrl.navigateForward('/home');
    });

Inyectamos en el constructor el formulario de autenticación, lo importamos tambien.

    private authService: AuthenticateService

Definimos las variables errorString

  errorMessage: string = '';

y navigationControl.
En vez de routing usamos NavControler, tenemos que inyectarlo e importarlo

private navCtrl: NavController

Providers
Los providers operan como servicios
ionic generate service services/authenticate
Esto nos va generar el servicio authenticate.

En el authenticate
Cuando hacemos una petición http esta nos retorna un observable o promesa
Hacemos una promesa manual con dos métodos, accept y reject.
Validamos las credenciales.
Si es true aceptamos la petición y sino la rechazamos.

loginUser(credential) {
    return new Promise((accept, reject) => {
      if (
        credential.email === '[email protected]' &&
        credential.password === '12345'
      ){
        accept('Login Correcto');
      } else {
        reject('Login Incorrecto');
      }
    });
  }

En caso que tengamos una URL usamos fetch.

Ayuda bastante para tener buenas animaciones entre transiciones entre pantallas.