bareapp
1.0.0
Une application de démonstration pour ionic 5 et condensateur 3 qui montre comment créer une application multiplateforme réelle avec l'authentification, GraphQL et React. Tous rendent possible avec uniquement des plugins communautaires gratuits.
Vous êtes probablement ici parce que vous ne pouvez pas trouver un exemple ionique / condensateur qui utilise le vent arrière CSS ou quoi que ce soit avec l'authentification. Et oui, c'est la même raison pour laquelle je construis cette application de démonstration ici. Alors, amusez-vous!
npm install ! npm installnpm run iosou
npm run androidsrc . Il y a quelques choses que vous voudrez peut-être modifier pour personnaliser votre application. Tout d'abord, vous voudrez modifier les valeurs APP_ID et AUTH0_CLIENT_ID dans le fichier src/environments/environment.ts .
En outre, cochez capacitor.config.ts et personnalisez-le en fonction de vos besoins. Pour plus de détails, voir https://capacitorjs.com/docs/config
Exécuter un émulateur mobile sur votre machine locale peut être douloureusement lent orz ...? Bien. Il y a un moyen de l'accélérer: exécutez-le sur le nuage, et encore mieux, sur un vrai appareil !!!
Il y a quelques émulateurs de cloud disponibles. Dans mon cas, j'utilise Browserstack car il propose des tests en temps réel sur un réel appareil. Alternativement, Lambdatest est également une bonne option à un prix moins cher, bien qu'ils ne fournissent que des émulateurs, pas des appareils réels. Mais Google vous aidera à trouver le meilleur pour vous.
Je partage ma configuration ici, vous pouvez donc reproduire l'expérience sur votre fournisseur.
Configurez un tunnel local au fournisseur. Par exemple, à l'aide de Browserstack local ou de tunnel lambdatest.
Servez l'application Web à partir de votre machine locale ou même sur le cloud.
Par exemple, exécutez npm run start:web pour servir l'application à partir de votre machine locale. (Remarque: HOST et PORT sont configurables en ionic:serve du script du cycle de vie).
Définissez l'URL de service que l'application peut atteindre via le tunnel dans la variable d'environnement LIVE_RELOAD_URL et ouvrez le projet pour compiler le package de l'application: par exemple LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios Si vous suivez le réglage de défaut pour le test de lambda.
Sous le capot, LIVE_RELOAD_URL chargé dans capacitor.config.ts pour générer le paramètre de recharge en direct pertinent ci-dessous:
{
"server" : {
"url" : " <LIVE_RELOAD_URL> " ,
"cleartext" : true
}
} Téléchargez la construction (A .ipa pour iOS ou apk pour Android) sur votre fournisseur.
Exécutez l'application sur un appareil cloud et amusez-vous!
Remarque Actuellement, l'application n'est testée que sur iOS et Android.
Il existe des tutoriels qui suggèrent que vous mettez manuellement votre adresse IP externe à capacitor.config.ts afin d'utiliser un rechargement en direct.
S'il est vrai qu'une configuration est nécessaire pour se connecter à un serveur Web externe pour charger l'application Web, si vous utilisez ma configuration, cette configuration est automatiquement chargée lorsque vous fournissez LIVE_RELOAD_URL .
Vous n'avez pas besoin de l'ajouter manuellement pour le développement ou de le supprimer pour une construction de production.
Pour plus de détails, consultez le guide à Auth0
L'URL de rappel pour votre application doit être sur liste blanche dans le champ URL de rappel autorisé dans les paramètres de votre application. Si ce champ n'est pas défini, les utilisateurs ne seront pas en mesure de se connecter à l'application et obtiendront une erreur. Your_package_id: // your_domain / cordova / your_package_id / rappel
file://*
Si vous testez l'application sur un navigateur via npm run start:web ou le ionic serve équivalent, sachez que le paramètre pour les Allowed Origins et Callback URLs peut être différente. Par défaut, il devrait provenir de http://localhost:8100 .
Pour pouvoir ouvrir l'application à partir d'un schéma personnalisé, vous devez d'abord enregistrer le schéma. En supposant que votre schéma personnalisé est custom.scheme afin que l'application ouvre tout lien custom.scheme://<url> , suivez l'instruction ci-dessous pour les deux plates-formes.
Consultez https://capacitorjs.com/docs/apis/app pour plus de détails.
Pour iOS,
ios/App/App/Info.plist ajoutez quelque chose de similaire à ce qui suit: < key >CFBundleURLTypes</ key >
< array >
< dict >
< key >CFBundleURLName</ key >
< string >custom.scheme</ string >
< key >CFBundleURLSchemes</ key >
< array >
< string >custom.scheme</ string >
</ array >
</ dict >
</ array > Changement important custom.scheme dans votre schéma personnalisé.
Pour Android,
android/app/src/main/AndroidManifest.xml , à l'intérieur de la section Activité, ajoutez ce qui suit: < 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 > Ensuite, dans android/app/src/main/res/values/strings.xml , modifiez la valeur de custom_url_scheme dans votre schéma personnalisé.
Enfin, dans android/app/src/main/res/xml/config.xml , ajoutez ce qui suit à Root afin qu'une seule instance de votre application soit jamais lancée et, par conséquent, après l'authentification, le rappel sera toujours livré à la bonne application.
< preference name = " AndroidLaunchMode " value = " singleTask " />Les liens profonds vous permettent d'envoyer un lien à quelqu'un qui sera ouvert dans l'application qu'ils ont installée sur son téléphone. Pour le configurer, suivez le guide officiel ici https://capacitorjs.com/docs/guides/deep-links
Comment exécuter l'application sur un appareil?
Ouvrez Xcode ou Android Studio avec la commande ci-dessous et sélectionnez la cible du périphérique avant de commencer l'exécution.
npm run open iosou
npm run open androidCopyright © 2021, Alvis Tang. Libéré sous la licence du MIT.
