Instalación de Capacitor y uso en Android Studio

Para los que estamos viendo el curso actualmente, nos permite elegir si Angular o React, debemos elegir Angular ya que si elegimos React por el momento no soporta el capacitor y no nos va a crear la carpeta WWW

(5/11/19) Comandos utilizados para integrar capacitor en adelante:

ionic integrations enable capacitor

npx cap init [appName] [appId]

ionic build

npx cap add android

 npx cap open android

por qué no grabaron la instalación de Android? 😦 Se pudo dar mucho info útil sobre Android mientras se enseña a hacer la instalación.

IONIC 6

En Ionic 6 el Capacitor se instala por defecto y automáticamente crea el archivo capacitor.config.ts en donde podrás cambiar los datos de configuración del capacitor, lo mismo que el profesor realizó con el comando:

npx cap init

El resto de pasos son los mismos, es decir se debe compilar la aplicación con el comando:

ionic build

Luego se adiciona el soporte para Android con el comando:

npx cap add android

Comandos utilizado en la clase:

-- npm install --save @capacitor/core @capacitor/cli --save-exact
-- npx cap init => lo agrega al proyecto
-- ionic build => genera carpeta www
-- npx cap add android => agrega android al proyecto
-- npx cap open android => abre android studio

Estaba esperando con ansias este curso! tengo altas expectativas 😃, por ahora todo perfecto

Documentacion capacitor:
https://capacitor.ionicframework.com/docs/getting-started/

Instalación npm install --save @capacitor/core @capacitor/cli
Agregar al proyecto npx cap init

Si al igual que a mi, Android Studio para Windows les indica un error en la sincronización y no aparece activo el botón de play, verifiquen el mensaje del error que sugiere la instalación de los SDK faltantes. Presionen el link para iniciar el instalador y al finalizar presionen el botón ‘Sync project with gradle files’ para volver a sincronizar. Con eso deberán poder correr la app.

me surge una duda ahora que empiezo a utilizar ionic con capacitor y es que en versiones anteriores del framework tal como se dice en este vídeo se utilizaba cordova como capa base nativa, pero al utilizar ahora capacitor como componente principal no entiendo si se pueden seguir utilizando componentes de cordova dentro del proyecto y en que me afectaria su uso a la hora de generar los compilados nativos de las diferentes plataformas.

Primeros Comandos a usar:

ionic serve <- Lanzamos el servidor

npm install --save @capacitor/core @capacitor/cli --save-exact <- Dependencias

npx cap --version <- Version dependencias

npx cap init <- Instalación de capacitor
Nombre App
Nombre del paquete (platzi.music.com)

Ionic build <- Generar la carpeta www

npx cap add android / npx cap add ios

<!-- instalar capacitor en una version estatica  -->
npm i --save @capacitor/core @capacitor/cli --save-exact

<!-- verificar version instalada -->
npx cap --version
<!-- iniciar configuracion de capacitor -->
npx cap init

<!-- generar la carpeta build de aplicativo -->
ionic build

<!-- generar la app android a partir del build generado -->
npx cap add android

<!-- abrir android studio con la app android -->
npx cap open android

Para la version 6 de ionic, Capacitor ya viene instalado por default.
Si el proyecto con el se va a trabajar estará basado en angular se recomienda actualizar el framework ejecutando el comando:

npm install @ionic/[email protected] --save

Una vez echo esto, podemos ejecutar el comando:

npx cap init 

Seguidamente, ejecutar el comando:

ionic build

para crear la carpeta www

Y por último agregar las plataformas Android e iOS mediante los comandos:

npx cap add android
npx cap add ios

ionic build(crea carpeta www)
npx cap add android
npx cap open android

Buenos días cuando ejecuto el comando para la descarga e instalación de capacitor me despliega el siguiente error
npx cap --version
ERROR: El sistema no ha podido encontrar la clave o el valor del Registro
especificados.
1.3.0
Alguien me puede orientar a que se debe y como corregirlo.
Gracias

¿Son excluyentes Cordova y Capacitor? Tengo algunos desarrollos en ionic4 que usan plugins de Cordova y no quisiera perderlos al usar Capacitor.

El botón de Play me aparece bloqueado cuando abro el proyecto, creo el dispositivo y aún así sigue en el mismo estado. Añado la configuración, pero me dice que falta elegir el módulo. Ahí quedé algo perdido.

Alguien me puede ayudar con esto?

Una pregunta ionic serve --lab ya no esta disponible en ionic 4?

jamas borren este curso por favior, o solo actualicenlo. Yo trabajo con IONIC.

Ayuda please. Tengo un problema:
Me crea la carpeta www pero no me crea el archivo index.html y me aparece un erro que pedo aqui abajo.

<An unhandled exception occurred: [BABEL] /Users/robertolopezalaez/Doger4/www/0-es2015.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/robertolopezalaez/Doger4/node_modules/@babel/preset-env/lib/index.js")
See "/private/var/folders/fg/h989nh115r9dpcps5gtd8c5r0000gn/T/ng-jyu1ZL/angular-errors.log" for further details.
[ERROR] An error occurred while running subproces
>

Hola estimados,
Me pueden ayudar guiándome con el siguiente error
cuando ejecuto el comando ionic build se presenta errores

la version de ionic que estoy utilizando es

ionic -v 5.4.13
npm -v 6.10.2
node -v v12.8.0

Si tienen algún link que para solucionar el error, le agradezco de antemano por el apoyo.

c:\Personal\ionic\platzi-music>ionic build
> ng.cmd run app:build
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "C:\Users\HITSS\AppData\Local\Temp\ng-TmhgBX\angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.```

Alguien pudo solucionarlo?
Me ocurre al correr ionic build

Generating ES5 bundles for differential loading…
An unhandled exception occurred: [BABEL] E:\ionic4\platzi-music\www\32-es2015.js: Could not find plugin “proposal-numeric-separator”. Ensure there is an entry in ./available-plugins.js for it. (While processing: “E:\ionic4\platzi-music\node_modules\@babel\preset-env\lib\index.js”)
See “C:\Users\ADL\AppData\Local\Temp\1\ng-xIZ1d9\angular-errors.log” for further details.
[ERROR] An error occurred while running subprocess

En la nueva versión de ionic en la instalación actual ya pregunta si quieres instalar capacitor…

Ejecutando el comando npx cap add android daba un error que no encuentra la plataforma android, se sugiere ejecutar primero npm install @capacitor/android luego podemos recièn ejecutar el comando npx cap add android y asì se agrega la carpeta android que muestra el profe 😃

Cuando se inicia un nuevo proyecto en Ionic, actualmente capacitor viene instalado por defecto por lo que, solo se debe construir el proyecto con el comando

ionic build --prod

En mi caso ionic me pidió que instalara capacitor para android con el código

npm install @capacitor/android

posteriormente a esto se corre el comando

npx cad add android 

y finalmente se abre el proyecto en android studio con

npx cap open android

y listo el proyecto se abre en Android que se debe instalar con todos los sdk necesarios.

Ayuda por favor me sale este error cuando lo abro en Android

https://imgur.com/zFbblEo

Al ejecutar npx cap open android

[info] Opening Android project at /mnt/c/users/marino pablo/desktop/ionic/platzi-music/android
[error] Unable to launch Android Studio. You must configure "linuxAndroidStudioPath" in your capacitor.config.json to point to the location of studio.sh, using JavaScript-escaped paths:
Example:
{
  "linuxAndroidStudioPath": "/usr/local/android-studio/bin/studio.sh"
}

-Estoy en el sistema Windows10
-Como terminal estoy usando el subsistema de ubuntu

HELP ME PLEASE!

se puede tener capacitor y cordova al mismo tiempo?

El comando ionic build no está creando la carpeta www en mi proyecto. ¿Alguna solución?

Me podrían ayudar por favor. Tengo un problema al tratar de configurar la app … me dice Error: Module not specified y nose cómo configurar el Run/debug Configurations para que funcione.

¿Hola, alguien sabe el nombre de la consola del profe que muestra con colores es el estado GIT? Gracias de ante mano!

C:\Users\HITSS\AppData\Local\Temp\ng-TmhgBX\angular-errors.log

Contenido del archivo

[error] Error: Call retries were exceeded
    at ChildProcessWorker.initialize (c:\Personal\ionic\platzi-music\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
    at ChildProcessWorker.onExit (c:\Personal\ionic\platzi-music\node_modules\jest-worker\build\workers\ChildProcessWorker.js:263:12)
    at ChildProcess.emit (events.js:203:13)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)```

Estoy usando:
Ionic 6.9.3
Capacitor 2.1.2

Bastante interesante esta clase, pase varios de mis proyectos de Ionic a mi celular, lo hice tanto en Windows como en Mac y totalmente sin problema!

Excelente clase + 10 de respeto al maestro

Comandos para instalar capacitor

Hola, como estas?
Como se generan los splash e iconos en capacitor, con cordova es ionic cordova resources.

Quedo atento.

Me imagino que es negro por el dark mode de mi computadora, como se trabaja con el dark and light theme de ionic?

Abrir el proyecto con los diferentes IDEs nativos androide/iOS

Después de darle “cap open andriod”, android studio me envía este mensaje Module ‘capacitor-cordova-android-plugins’: platform ‘android-29’ not found. Cómo se resuelve?

En Linux (Xubuntu), asegúrense de tener habilitada la virtualización de máquinas desde la BIOS, al menos en mi caso fue necesario para que Android Studio lanzara la app adecuadamente y se mostrara el emulador de android. Aparte de esto, crear un nuevo dispositivo en el Android Studio y lanzar la app a ese dispositivo son dos tareas separadas, por si acaso a alguno le carga bien el emulador pero no le lanza en este la app.

Hola Tribu
De Casualidad ha alguien le genero este error

17:16	Gradle sync failed: No cached version of com.android.tools.build:gradle:3.6.1 available for offline mode.

Yo queria saber mas sobre los plugins de android studio

SI tengo instalado AndroidStudio
Tengo que agregar esa línea en el capacitor.config.json
ya la agregué y sigue saliendo el mismo error
Alguien me ayuda? :c

"linuxAndroidStudioPath": "/snap/bin/android-studio/current/android-studio/bin/studio.sh"

Esta clase me ha tomado desarrollarla alrededor de 3 horas, les recomiendo fuertemente que corran este proyecto en un sistema linux nativo (y no como yo en un wsl, me tocó rendirme y pasarme a ubuntu después de un buen tiempo). Además, obtuve muchos mensajes de error relacionado con permisos en linux, por lo que si no conocen al respecto les recomiendo el curso de línea de comandos.

al día las opciones de crear un nuevo proyecto en base a un template aumentaron:
por ejemplo para crear un proyecto del tipo ANGULAR es esta:
ionic start <name-proyect> <tipoTemplate> --type=Angular