bareapp
1.0.0
Una aplicación de demostración para Ionic 5 y Capacitor 3 que muestra cómo construir una aplicación multiplataforma del mundo real con autenticación, GraphQL y React. Todos hacen posible con solo complementos comunitarios gratuitos.
Probablemente esté aquí porque no puede encontrar un ejemplo iónico/condensador que use CSS de viento de cola o cualquier cosa con autenticación. Y sí, es la misma razón por la que construyo esta aplicación de demostración aquí. ¡Diviértete!
npm install ! npm installnpm run ioso
npm run androidsrc . Hay algunas cosas que puede cambiar para personalizar su aplicación. Primero, querrá cambiar los valores APP_ID y AUTH0_CLIENT_ID en el archivo src/environments/environment.ts .
Además, consulte capacitor.config.ts y lo personalice para satisfacer sus necesidades. Para detalles, consulte https://capacitorjs.com/docs/config
Ejecutar un emulador móvil en su máquina local puede ser dolorosamente lento Orz ...? Bien. Hay una manera de acelerarlo: ¡ejecutarlo en la nube, e incluso mejor, en un dispositivo real !
Hay un par de emuladores de nubes disponibles. En mi caso, uso Browserstack porque ofrece pruebas en tiempo real en un dispositivo real. Alternativamente, Lambdatest también es una buena opción con un precio más barato, aunque solo proporcionan emuladores, no dispositivos reales. Pero Google lo ayudará a encontrar el mejor para usted.
Estoy compartiendo mi configuración aquí, para que pueda replicar la experiencia en su proveedor.
Configurar un túnel local en el proveedor. Por ejemplo, usando el túnel local de Browserstack o Lambdatest.
Sirva la aplicación web desde su máquina local o incluso en la nube.
Por ejemplo, ejecute npm run start:web para servir la aplicación desde su máquina local. (Nota: HOST y PORT son configurables en ionic:serve el script del ciclo de vida).
Establezca la URL de servicio que la aplicación puede comunicarse a través de la variable de Túnel en el entorno LIVE_RELOAD_URL y abra el proyecto para compilar el paquete de la aplicación: por ejemplo LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios si sigue la configuración predeterminada para la prueba de Lambda.
Bajo el capó, LIVE_RELOAD_URL cargado en capacitor.config.ts para generar la configuración de recarga en vivo relevante a continuación:
{
"server" : {
"url" : " <LIVE_RELOAD_URL> " ,
"cleartext" : true
}
} Cargue la compilación (A .ipa para iOS o apk para Android) a su proveedor.
¡Ejecute la aplicación en un dispositivo en la nube y diviértete!
Nota Actualmente, la aplicación solo se prueba en iOS y Android.
Hay algunos tutoriales que sugieren que coloque manualmente su dirección IP externa a capacitor.config.ts para usar la recarga en vivo.
Si bien es cierto que se necesita una configuración para conectarse a un servidor web externo para cargar la aplicación web, si usa mi configuración, esta configuración se carga automáticamente cuando suministra LIVE_RELOAD_URL .
No necesita agregarlo manualmente para el desarrollo o eliminarlo para una construcción de producción.
Para obtener más detalles, consulte la guía en Auth0
La URL de devolución de llamada para su aplicación debe ser blanca en el campo URL de devolución de llamada permitido en la configuración de su aplicación. Si este campo no está configurado, los usuarios no podrán iniciar sesión en la aplicación y recibirán un error. Your_package_id: // your_domain/cordova/your_package_id/llamado
file://*
Si está probando la aplicación en un navegador a través de npm run start:web o el ionic serve equivalente, tenga en cuenta que la configuración para los Allowed Origins y Callback URLs pueden ser diferentes. Por defecto, debe ser de http://localhost:8100 .
Para poder abrir la aplicación desde un esquema personalizado, primero debe registrar el esquema. Suponiendo que su esquema personalizado sea custom.scheme para que la aplicación abra cualquier enlace custom.scheme://<url> .
Echa un vistazo a https://capacitorjs.com/docs/apis/app para obtener más detalles.
Para iOS,
ios/App/App/Info.plist agregue algo similar a lo siguiente: < key >CFBundleURLTypes</ key >
< array >
< dict >
< key >CFBundleURLName</ key >
< string >custom.scheme</ string >
< key >CFBundleURLSchemes</ key >
< array >
< string >custom.scheme</ string >
</ array >
</ dict >
</ array > Cambio importante custom.scheme a su esquema personalizado.
Para Android,
android/app/src/main/AndroidManifest.xml , dentro de la sección de actividad, agregue lo siguiente: < intent-filter >
< action android : name = " android.intent.action.VIEW " />
< category android : name = " android.intent.category.DEFAULT " />
< category android : name = " android.intent.category.BROWSABLE " />
< data android : scheme = " @string/custom_url_scheme " />
</ intent-filter > Luego, en android/app/src/main/res/values/strings.xml , cambie el valor de custom_url_scheme a su esquema personalizado.
Finalmente, en android/app/src/main/res/xml/config.xml , agregue lo siguiente a la raíz para que solo se inicie una instancia de su aplicación y, por lo tanto, después de la autenticación, la devolución de llamada siempre se entregará a la aplicación correcta.
< preference name = " AndroidLaunchMode " value = " singleTask " />Los enlaces profundos le permiten enviar a alguien un enlace que se abrirá en la aplicación que han instalado en su teléfono. Para configurarlo, siga la guía oficial aquí https://capacitorjs.com/docs/guides/deep-links
¿Cómo ejecutar la aplicación en un dispositivo?
Abra Xcode o Android Studio con el comando a continuación y seleccione el destino del dispositivo antes de comenzar a ejecutar.
npm run open ioso
npm run open androidCopyright © 2021, Alvis Tang. Liberado bajo la licencia MIT.
