mobile jhipster

Desenvolvimento móvel com Ionic, React Native e Jhipster

Esse conjunto de aplicativos foi desenvolvido usando esse script de demonstração. Você pode seguir as etapas para criar suas próprias versões ou apenas executar os aplicativos aqui.

Consulte Desenvolvimento Móvel com Ionic, React Native e Jhipster para ver um vídeo desses aplicativos sendo criado em 2020.

Pré -requisitos: Java 11+ e Node.JS.

• Começando
• Links
• Ajuda
• Licença

Começando

Clone este aplicativo para o seu disco rígido local usando o Git.

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

Para executar o aplicativo jhipster, inicie o keycloak e use o gradle para iniciá -lo.

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

Reagir nativo

Para executar o aplicativo nativo do React, instale suas dependências:

 cd react-native
npm i
npm start

Para executar em emuladores, você precisará de uma conta Expo. Em seguida, adicione https://auth.expo.io/@<your-username>/Flickr2 como um URI redirecionado de login no keycloak.

Para executar no Android, você precisará executar alguns comandos para que seu dispositivo (ou emulador) possa se comunicar com sua API e keycloak.

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

Iônico

Para executar o aplicativo iônico, instale suas dependências:

 cd ionic
npm i

Você pode executá -lo como um aplicativo da Web usando ionic serve .

Corra no iOS

Para correr no iOS:

 ionic build
ionic capacitor add ios

Adicione seu esquema personalizado ao 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 >

Execute seu aplicativo no simulador iOS:

npx cap run ios

Corra no Android

Para executar seu aplicativo iônico no Android, execute os seguintes comandos:

ionic build
ionic capacitor add android

Altere o esquema personalizado no android/app/src/main/res/values/strings.xml para usar dev.localhost.ionic :

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

O plug -in Cordova do SafariviewController está instalado como parte deste projeto. O Capacitor usa dependências do Androidx, mas o plug-in SafariviewController usa uma dependência não-ANDROIDX mais antiga. Use o Jetifier para corrigir o uso de bibliotecas de suporte antigas com os seguintes comandos:

 npm install jetifier
npx jetify
npx cap sync android

Em seguida, execute seu aplicativo em um emulador Android.

 npx cap run android

Você precisará executar alguns comandos para permitir que o emulador se comunique com sua API e keycloak.

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

Se você vir java.io.IOException: Cleartext HTTP traffic to localhost not permitted no seu console do Android Studio, permita o tráfego de texto claro no android/app/src/main/AndroidManifest.xml :

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

Consulte esta sessão de perguntas e respostas sobre o Stack Overflow para obter mais informações.

Se isso não funcionar, basta usar o OKTA (e seu recurso HTTPS-por default).

Use okta para identidade

Instale a Okta CLI e execute os seguintes comandos:

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

cd ../react-native
okta apps create

Selecione nativo e use o seguinte para redirecionar URIs:

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

Copie o ID do cliente para react-native/app/config/app-config.js .

Crie outro aplicativo nativo para o Ionic com os seguintes URIs de redirecionamento:

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

Atualize ionic/src/app/auth/auth-config.service.ts para usar o ID do cliente gerado.

Reinicie seus aplicativos móveis e faça login com o OKTA!

Links

Este exemplo usa as seguintes bibliotecas de código aberto:

• Jhipster
• Jhipster reage nativo
• Ionic para Jhipster

Ajuda

Por favor, poste qualquer dúvida sobre o Stack Overflow com uma tag "jhipster".

Licença

Apache 2.0, consulte a licença.