mobile jhipster

Développement mobile avec Ionic, React Native et Jhipster

Cet ensemble d'applications a été développé à l'aide de ce script de démonstration. Vous pouvez suivre les étapes pour créer vos propres versions, ou simplement exécuter les applications ici.

Voir le développement mobile avec Ionic, React Native et Jhipster pour voir une vidéo de ces applications créée en 2020.

Prérequis: Java 11+ et Node.js.

• Commencer
• Links
• Aide
• Licence

Commencer

Clone cette application à votre disque dur local à l'aide de GIT.

 git clone https://github.com/mraible/mobile-jhipster.git

Pour exécuter l'application Jhipster, démarrez Keycloak, puis utilisez Gradle pour le démarrer.

 cd mobile-jhipster/backend
docker-compose -f src/main/docker/keycloak.yml up -d
./mvnw

React natif

Pour exécuter l'application React Native, installez ses dépendances:

 cd react-native
npm i
npm start

Pour fonctionner sur des émulateurs, vous aurez besoin d'un compte Expo. Ensuite, ajoutez https://auth.expo.io/@<your-username>/Flickr2 comme URI de connexion à Keycloak.

Pour fonctionner sur Android, vous devrez exécuter certaines commandes afin que votre appareil (ou émulateur) puisse communiquer avec votre API et KeyCloak.

adb reverse tcp:8080 tcp:8080
adb reverse tcp:9080 tcp:9080

Ionique

Pour exécuter l'application ionique, installez ses dépendances:

 cd ionic
npm i

Vous pouvez l'exécuter en tant qu'application Web en utilisant ionic serve .

Courir sur iOS

Pour courir sur iOS:

 ionic build
ionic capacitor add ios

Ajoutez votre schéma personnalisé à ios/App/App/Info.plist :

< key >CFBundleURLTypes</ key >
< array >
  < dict >
    < key >CFBundleURLName</ key >
    < string >com.getcapacitor.capacitor</ string >
    < key >CFBundleURLSchemes</ key >
    < array >
      < string >capacitor</ string >
      < string >dev.localhost.ionic</ string >
    </ array >
  </ dict >
</ array >

Exécutez votre application dans le simulateur iOS:

npx cap run ios

Exécuter sur Android

Pour exécuter votre application ionique sur Android, exécutez les commandes suivantes:

ionic build
ionic capacitor add android

Modifiez le schéma personnalisé dans android/app/src/main/res/values/strings.xml pour utiliser dev.localhost.ionic :

< string name = " custom_url_scheme " >dev.localhost.ionic</ string >

Le plugin SafariViewController Cordova est installé dans le cadre de ce projet. Le condensateur utilise les dépendances Androidx, mais le plugin SafariViewController utilise une ancienne dépendance non Androidx. Utilisez Jettifier pour corriger les usages des anciennes bibliothèques de support avec les commandes suivantes:

 npm install jetifier
npx jetify
npx cap sync android

Ensuite, exécutez votre application dans un émulateur Android.

 npx cap run android

Vous devrez exécuter quelques commandes pour permettre à l'émulateur de communiquer avec votre API et Keycloak.

 adb reverse tcp:8080 tcp:8080
adb reverse tcp:9080 tcp:9080

Si vous voyez java.io.IOException: Cleartext HTTP traffic to localhost not permitted dans votre console Android Studio, activez le trafic texte clair dans android/app/src/main/AndroidManifest.xml :

< application
    ...
    android : usesCleartextTraffic = " true " >

Voir cette séance de questions et réponses à débordement pour plus d'informations.

Si cela ne fonctionne pas, utilisez simplement Okta (et sa fonction HTTPS-by-Default).

Utilisez Okta pour l'identité

Installez l'Okta CLI et exécutez les commandes suivantes:

 cd backend
okta apps register jhipster
# source .okta.env && ./mvnw to start

cd ../react-native
okta apps create

Sélectionnez natif , puis utilisez ce qui suit pour les uris de redirection:

 http://localhost:19006/,https://auth.expo.io/@<your-username>/Flickr2

Copiez l'ID client dans react-native/app/config/app-config.js .

Créez une autre application native pour ionic avec les URI redirigeants suivants:

• Connexion: http://localhost:8100/callback,dev.localhost.ionic:/callback
• Connexion: http://localhost:8100/logout,dev.localhost.ionic:/logout

Mettre à jour ionic/src/app/auth/auth-config.service.ts pour utiliser l'ID client généré.

Redémarrez vos applications mobiles et connectez-vous avec Okta!

Links

Cet exemple utilise les bibliothèques open source suivantes:

• Jhipster
• Jhipster React natif
• Ionic pour Jhipster

Aide

Veuillez poster toutes les questions sur Stack Overflow avec une balise "Jhipster".

Licence

Apache 2.0, voir Licence.