Shinyproxy: Vue mobile

Créé le 9 juil. 2021  ·  6Commentaires  ·  Source: openanalytics/shinyproxy

Bonjour, lorsque vous utilisez ShinyProxy au lieu de déployer les applications directement via Docker, la réactivité des applications sur les appareils mobiles est perdue.

J'ai vu qu'il y a un PR qui essaie de résoudre ce problème. Une ETA sur le moment où cela pourrait être mis en œuvre ?

Commentaire le plus utile

Super supposition ! 😉 Cela a parfaitement fonctionné, merci.

Au cas où cela serait utile à d'autres personnes, voici ce que j'ai fait :

  1. Ajoutez ./application/templates:/opt/shinyproxy/templates à volumes dans shinyproxy.yml
    image

  2. Ajoutez tous les modèles au dossier 1col.
    image

  3. Modifiez la balise head de tous les modèles :
    3.1. Ajoutez <meta name="viewport" content="width=device-width, initial-scale=1"> pour que thymeleaf fonctionne bien sur les appareils mobiles.
    3.2. Ajouter des appels d'amorçage manuellement
    3.3. Ajouter un titre manuellement
    3.4. Modifiez la référence aux fichiers CSS en fonction de la nouvelle structure de dossiers .
    3.5 Ajouter une référence de favicon ( voir également ceci pour les favicons lors du lancement d'une application).
    image

  4. Modifiez les modèles html à votre guise, par exemple voici une astuce pour servir certaines applications en mode direct et d'autres en mode iframe, si c'est quelque chose que vous aimeriez faire.

  5. Ajouter des fichiers css (à 1col/assets/css), 1 , 2 , 3
  6. Ajouter des images pour les applications et le favicon (à 1col/assets/img)
  7. Ajouter template-path: ./templates/1col à application.yml (juste sous proxy: )
  8. Redéploiement de la pile Shiny Proxy : cd shinyproxy-docker-swarm-demo/ , export APP_DOMAIN=app.example.com et docker stack deploy -c shinyproxy.yml shinyproxy
  9. Prendre plaisir! 🚀

Tous les 6 commentaires

Salut @algo-se,

le PR lié ne modifie que le thème par défaut. Vous pouvez obtenir le même résultat avec un thème personnalisé. Plus d'infos et exemples ici

il existe également une solution de contournement où vous pouvez utiliser des points de terminaison /app_direct/<app_name> qui serviront le contenu de l'application directement sans l'iframe qui peut causer des problèmes sur mobile.

Oh je vois, merci pour la précision @dseynaev ! Devez-vous donc utiliser un thème personnalisé pour activer les points de terminaison app_direct sur la page de destination ? Existe-t-il un autre moyen, pouvez-vous le faire à partir de l'application.yml ?

pour que la page de destination utilise des liens app_direct , vous auriez besoin d'un thème personnalisé. Il n'y a aucun moyen de le faire à partir du application.yaml (sauf si vous n'avez qu'une seule application, auquel cas vous pouvez utiliser le paramètre landing-page pour ignorer la page de destination)

J'ai suivi ces étapes mais je ne vois aucun changement.

Pour configurer Shiny Proxy, j'ai utilisé ce tutoriel , donc j'utilise Docker Swarm.

Ma structure de dossier est:
//home/monutilisateur/shinyproxy-docker-swarm-demo/
├── demande
│ ├── application.yml
│ └── modèles
├── shinyproxy.yml
└── usagestats.yml

Le dossier templates est celui du fichier shinyproxy-config-examples.

Dans le application.yml j'ai ajouté : template-path: ./templates/1col

Afin de rendre les modifications effectives, j'ai redémarré Shiny Proxy : docker service update shinyproxy_shinyproxy --force mais tout est resté le même. Des idées?

En regardant le tutoriel que vous avez lié, je suppose que vous devez monter le dossier templates dans le conteneur shinyproxy (sous volumes dans la configuration docker-compose shinyproxy.yml )

Super supposition ! 😉 Cela a parfaitement fonctionné, merci.

Au cas où cela serait utile à d'autres personnes, voici ce que j'ai fait :

  1. Ajoutez ./application/templates:/opt/shinyproxy/templates à volumes dans shinyproxy.yml
    image

  2. Ajoutez tous les modèles au dossier 1col.
    image

  3. Modifiez la balise head de tous les modèles :
    3.1. Ajoutez <meta name="viewport" content="width=device-width, initial-scale=1"> pour que thymeleaf fonctionne bien sur les appareils mobiles.
    3.2. Ajouter des appels d'amorçage manuellement
    3.3. Ajouter un titre manuellement
    3.4. Modifiez la référence aux fichiers CSS en fonction de la nouvelle structure de dossiers .
    3.5 Ajouter une référence de favicon ( voir également ceci pour les favicons lors du lancement d'une application).
    image

  4. Modifiez les modèles html à votre guise, par exemple voici une astuce pour servir certaines applications en mode direct et d'autres en mode iframe, si c'est quelque chose que vous aimeriez faire.

  5. Ajouter des fichiers css (à 1col/assets/css), 1 , 2 , 3
  6. Ajouter des images pour les applications et le favicon (à 1col/assets/img)
  7. Ajouter template-path: ./templates/1col à application.yml (juste sous proxy: )
  8. Redéploiement de la pile Shiny Proxy : cd shinyproxy-docker-swarm-demo/ , export APP_DOMAIN=app.example.com et docker stack deploy -c shinyproxy.yml shinyproxy
  9. Prendre plaisir! 🚀
Cette page vous a été utile?
0 / 5 - 0 notes