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

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Sincronizando nuestro proyecto con los emuladores

7/39
Recursos
Transcripción

Aportes 10

Preguntas 4

Ordenar por:

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

Comandos utilizados en clase:

-- **ionic build** => agregar todo el código a la carpeta www
-- **npx cap sync** => agrega todo lo de www al android studio o emuladores, luego play en los botones de Android studio y XCode
-- **npx cap update** => realiza lo mismo q sync
-- **npx cap copy** => si solo modificas html, css y js

Ojo siempre ejecutar ionic build antes de synconizar.

Una forma m√°s r√°dpida de poder correr nuestra aplicaci√≥n, es e un dipositivo real , a traves del comando ‚Äúionic cap run android -l --external‚ÄĚ, para esto se debe de instalar el capacitor de manera global

IONIC 6

Todos los comandos vistos en clase funcionan exactamente igual en Ionic 6.

  • ionic build: compilia y pone todo el c√≥digo a la carpeta www
  • npx cap sync: copia e instala todo lo de www al android studio o emuladores
  • npx cap update:_ realiza lo mismo q sync_
  • npx cap copy:_ si solo modificas html, css y js
    _
    Orden:
  1. ionic build
  2. npx cap sync | npx cap copy
  3. npx cap open ios | npx cap open android
  4. Play en tu editor
ionic build 
/* 
Crea la carpeta www que es utilizada por Android y iOS para el despliegue de la aplicación
*/

npx cap sync
/* 
Actualiza el contenido de la carpeta www y actualiza plugins, dependencias, código nativo para ambas plataformas
*/

npx cap copy
/* 
Únicamente actualiza el contenido de la carpeta www . Este comando se utiliza si no se realizan cambios a los paquetes o plugins de la aplicación
*/

npx cap update
/*
Ejecuta las mismas acciones que npx cap sync
*/


Si inicio el proyecto me sale el siguiente error

Failed to install the following Android SDK packages as some licences have not been accepted.
build-tools;29.0.2 Android SDK Build-Tools 29.0.2
platforms;android-29 Android SDK Platform 29
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
Alternatively, to transfer the license agreements from one workstation to another, see …

Si inicio desde el dispositivo me sale
unable to alocate adb
De todas formas se inicia el dispositivo peero no aparece el icono de la app platzi-music
Tengo qadroid Studio 4.0.1

Que debo hacer?

El comando npx cap copy, lo hace m√°s r√°pido por que solo compila los archivos de SRC.

si quiere simular los emuladores sin la necesidad de tener android studio y xcode simplemente corre los siguiente comando npm i @ionic/lab --save-dev ionic serve -l you're welcome ūü§ó

Buenas tardes! Estoy comezando a ver los cursos de IONIC. Queria agregar que el siguiente comando ionic cap copy igual funciona para copiar y sincronizar los archivos. Si hay alguien que ya lo ha utilizado de esa forma, puede confirmar.

una duda, puedo trabajar solamente con el navegador??