mobile jhipster

Desarrollo móvil con Ionic, React Native y Jhipster

Este conjunto de aplicaciones se desarrolló utilizando este script de demostración. Puede seguir los pasos para crear sus propias versiones, o simplemente ejecutar las aplicaciones aquí.

Vea el desarrollo móvil con Ionic, React Native y Jhipster para ver un video de estas aplicaciones que se crean en 2020.

Prerrequisitos: Java 11+ y Node.js.

• Empezando
• Campo de golf
• Ayuda
• Licencia

Empezando

Clone esta aplicación a su disco duro local usando GIT.

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

Para ejecutar la aplicación Jhipster, inicie KeyCloak, luego use Gradle para comenzar.

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

Reaccionar nativo

Para ejecutar la aplicación React Native, instale sus dependencias:

 cd react-native
npm i
npm start

Para ejecutarse con emuladores, necesitará una cuenta de Expo. Luego, agregue https://auth.expo.io/@<your-username>/Flickr2 como URI de redirección de inicio de sesión en KeyCloak.

Para ejecutarse en Android, deberá ejecutar algunos comandos para que su dispositivo (o emulador) pueda comunicarse con su API y KeyCloak.

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

Iónico

Para ejecutar la aplicación Ionic, instale sus dependencias:

 cd ionic
npm i

Puede ejecutarlo como una aplicación web usando ionic serve .

Correr en iOS

Para correr en iOS:

 ionic build
ionic capacitor add ios

Agregue su esquema personalizado a 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 >

Ejecute su aplicación en iOS simulador:

npx cap run ios

Ejecutar en Android

Para ejecutar su aplicación Ionic en Android, ejecute los siguientes comandos:

ionic build
ionic capacitor add android

Cambie el esquema personalizado en android/app/src/main/res/values/strings.xml para usar dev.localhost.ionic :

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

El complemento Cordova de SafarIviewController se instala como parte de este proyecto. El condensador utiliza dependencias de Androidx, pero el complemento SafarIviewController utiliza una dependencia más antigua que no es de Androidx. Use el jetificador para parchear los usos de las bibliotecas de soporte antiguas con los siguientes comandos:

 npm install jetifier
npx jetify
npx cap sync android

Luego, ejecute su aplicación en un emulador de Android.

 npx cap run android

Deberá ejecutar un par de comandos para permitir que el emulador se comunique con su API y KeyCloak.

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

Si ve java.io.IOException: Cleartext HTTP traffic to localhost not permitted en su consola Android Studio, habilite el tráfico de texto Clear en android/app/src/main/AndroidManifest.xml :

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

Consulte estas preguntas y respuestas de desbordamiento de pila para obtener más información.

Si eso no funciona, solo use okta (y su función https por default).

Use okta para la identidad

Instale el OKTA CLI y ejecute los siguientes comandos:

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

cd ../react-native
okta apps create

Seleccione Native , luego use lo siguiente para redirigir URI:

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

Copie la ID del cliente para react-native/app/config/app-config.js .

Cree otra aplicación nativa para Ionic con los siguientes URI de redirección:

• Iniciar sesión: http://localhost:8100/callback,dev.localhost.ionic:/callback
• Sidout: http://localhost:8100/logout,dev.localhost.ionic:/logout

Actualice ionic/src/app/auth/auth-config.service.ts para usar la ID de cliente generada.

¡Reinicie sus aplicaciones móviles e inicie sesión con Okta!

Campo de golf

Este ejemplo utiliza las siguientes bibliotecas de código abierto:

• Jhipster
• Jhipster react nativo
• Iónico para jhipster

Ayuda

Publique cualquier pregunta en Stack Overflow con una etiqueta "Jhipster".

Licencia

Apache 2.0, ver licencia.