Transformer un site web en app iPhone et Android avec l’IA

Tu as déjà un site qui fonctionne. Pourquoi repartir de zéro pour en faire une app iPhone et Android ? Dans cette vidéo, je montre la méthode que j’ai utilisée pour Pelloche, Carafon et Dressing : développer le produit sur le web avec l’IA, puis ajouter une couche mobile pour les fonctions du téléphone.

Le principe est accessible : garder les comptes, les données et les parcours existants, et réserver le développement natif aux endroits où il apporte quelque chose. Une caméra adaptée à ton usage, un accès rapide, une présence dans la Dynamic Island… Le web fait une grande partie du travail ; l’application complète l’expérience.

Dans ce guide : la méthode web vers app · les trois démos et leurs liens · ce que signifie « en 1 h » · utiliser Web2App · ajouter une Dynamic Island · préparer les stores.

Commencer par un produit web qui fonctionne

Dans la démo, je ne commence pas par ouvrir un projet iOS. Je construis d’abord le service : ce que l’utilisateur peut faire, comment il se connecte, où ses données sont enregistrées, ce qui se passe quand il prend une photo. Avec Claude ou ChatGPT, le travail avance par demandes en langage naturel, essais et corrections.

Cette première étape compte beaucoup. Si la connexion ne tient pas, si un écran déborde sur mobile ou si un bouton ne fait pas ce qui est attendu, envelopper le site dans une app ne réglera pas le problème. Il faut d’abord obtenir un parcours web utilisable sur téléphone.

Une fois cette base validée, on peut créer une application hybride : une partie de l’interface reste affichée dans une WebView, c’est-à-dire un navigateur intégré à l’application, et certains écrans ou services utilisent les fonctions natives du téléphone. Le serveur et les données restent partagés avec le site.

Pour retrouver cette explication dans la vidéo : 00:24 — pourquoi je commence par le web.

Ce que ça change pour les mises à jour

Quand un écran est chargé depuis le site, une correction sur le web peut être visible sans reconstruire tout le binaire mobile. C’est pratique pour faire évoluer un formulaire ou corriger l’affichage d’une page. En revanche, modifier une permission, une dépendance native ou le fonctionnement de la caméra peut demander un nouveau build et une nouvelle distribution.

Le bon réflexe est donc de demander à l’agent où se trouve la modification avant de relancer une compilation. Et le contenu servi dans la WebView reste soumis aux règles des stores : ce mécanisme ne dispense pas de respecter leur processus de validation.

Trois applications, trois usages concrets

Pelloche : le téléphone devient un appareil photo de fête

Dans Pelloche, l’organisateur crée un événement et partage un QR code. Les invités prennent un nombre limité de photos ; leurs prises de vue rejoignent un coffre commun, puis la galerie se révèle au moment prévu. L’idée reprend le plaisir de l’appareil jetable : photographier la soirée et découvrir ensuite le regard des autres.

La vidéo montre une caméra avec ses propres formats, filtres et réglages, ainsi qu’un accès rapide et un compteur de photos associé à la Dynamic Island. Elle présente aussi le parcours App Clip sur iPhone. Ce sont précisément les endroits où une adaptation native peut améliorer le produit web.

La caméra a demandé plusieurs essais et plusieurs builds. Les changements d’optique, les permissions et le comportement sur un vrai iPhone méritent des tests dédiés : c’est le passage le plus concret de la démo pour comprendre le travail qui reste derrière une interface simple.

Essayer Pelloche : site web · App Store · Google Play.

00:53 — le concept · 05:07 — la caméra sur iPhone · 06:07 — l’accès rapide.

Carafon : une cave à vin qui tient compte de tes goûts

Carafon permet de photographier des bouteilles, d’organiser sa cave et de noter ses dégustations. Dans la vidéo, je montre comment les préférences de plusieurs personnes et l’occasion prévue peuvent alimenter une recommandation. Le téléphone sert notamment à capturer une étiquette ou une partie de rayon ; le service web conserve l’historique.

Essayer Carafon : site web · App Store · Google Play. Voir la démo à 06:48.

Dressing : photographier ses vêtements et composer une tenue

Dressing utilise l’IA pour aider à reconnaître et ranger des vêtements, puis composer des tenues. La démonstration passe par l’appareil photo, la détection de pièces déjà présentes et un aperçu généré de la tenue portée. Cet aperçu sert à se projeter ; ce n’est pas une mesure du tombé réel du vêtement.

Essayer Dressing : site web · App Store · Google Play. Voir la démo à 07:52.

Transformer un site en app en 1 h : quel périmètre ?

Le titre de la vidéo met en avant la rapidité du passage du web au mobile. La démo présente des produits déjà construits ; elle n’est pas un chronométrage de leur création complète. Réutiliser une base web et un workflow préparé peut accélérer fortement la première adaptation. Le temps nécessaire dépend toutefois de l’état du site et des fonctions natives à ajouter.

Il faut distinguer la création d’une première coquille mobile, sa mise au point sur appareil et son acceptation sur les stores. La caméra de Pelloche illustre bien cette différence : la base se réutilise, mais certains détails demandent plusieurs itérations. Les délais de vérification des comptes et de review ne sont pas pilotés par l’agent.

Le gain vient surtout du travail que tu conserves : les données, les comptes, les règles du produit et une partie de l’interface. C’est cette réutilisation qui rend la méthode intéressante pour un SaaS, un outil de gestion ou une communauté déjà utilisable sur mobile.

Utiliser le skill Web2App avec ton agent IA

Un skill rassemble des instructions et des ressources que l’agent peut suivre sur ton projet. Web2App l’aide à examiner l’existant, choisir la couche mobile, préparer la navigation et la session, identifier les fonctions natives nécessaires, puis organiser les tests et la distribution. Il doit avoir accès au code du projet et à ses outils de développement.

1. Télécharge le package. La page Web2App regroupe le ZIP gratuit et la notice. Décompresse l’archive en conservant le dossier web-to-app et ses sous-dossiers.
2. Installe-le dans ton projet. Pour Codex, place le dossier dans .agents/skills/. Pour Claude Code, utilise .claude/skills/. Sauvegarde une éventuelle version existante avant de la remplacer.
3. Ouvre ton dépôt dans l’agent. Dans Codex, invoque $web-to-app ; dans Claude Code, /web-to-app. Rouvre la session si le skill n’apparaît pas.
4. Donne un objectif concret. Précise le site, les parcours à conserver, les fonctions du téléphone utiles et le budget de build. Commence par une première version testable.

Utilise le skill web-to-app sur ce dépôt.
Mon site fonctionne déjà sur mobile et je veux une app iOS et Android.
Conserve les comptes, les données et les parcours web existants.
Examine le projet, puis prépare la couche mobile avec Expo.
Identifie les fonctions natives nécessaires à mon usage.
Teste la connexion, la navigation et les permissions sur appareil.
Indique les comptes, coûts et étapes à prévoir pour la distribution.

Ce prompt donne une direction ; l’agent doit ensuite l’adapter au dépôt. La vidéo présente Web2App à 06:24. Le package contient aussi un guide des fonctions natives et un guide des stores.

Le skill Dynamic Island pour les fonctions natives iOS

Dans la vidéo, je parle aussi du skill préparé pour les Live Activities et la Dynamic Island. Sa version publique est maintenant disponible, avec des exemples génériques. Elle peut compléter Web2App ou s’utiliser directement sur une application iOS existante.

La page Dynamic Island contient la notice pour Claude Code et Codex. Tu peux aussi télécharger le ZIP v1.0.0. Installe le dossier dynamic-island dans .agents/skills/ pour Codex ou .claude/skills/ pour Claude Code, puis invoque $dynamic-island ou /dynamic-island.

Le guide couvre l’extension iOS, le pont natif Expo, le démarrage, la mise à jour et la fin d’une activité. Il aide aussi à diagnostiquer une île vide, un module absent ou une police mal embarquée. Un chapitre explique la piste des sprites animés par police : elle reste expérimentale et doit être testée sur iPhone, avec un affichage statique de secours.

Utilise le skill dynamic-island sur ce dépôt.
Je veux suivre la progression d’une session dans une Live Activity
et ouvrir son écran au toucher.
Examine l’architecture et les versions installées.
Prépare l’extension iOS, le pont natif et les tests du cycle de vie.
Prévois le cas où l’appareil n’a pas de Dynamic Island.
Indique les essais sur iPhone nécessaires avant distribution.

Les deux archives sont autonomes et neutralisées : elles contiennent les méthodes et des exemples à adapter, sans accès à nos comptes ni code de nos applications. Elles ne remplacent pas les essais sur appareil ou la validation des stores. Pour revoir cette partie : 06:07 — Dynamic Island et accès rapide.

Expo, iPhone et Android : préparer la distribution

Construire une app iOS sans posséder de Mac

EAS Build, le service de build d’Expo, peut compiler les applications dans le cloud. Tu peux donc préparer le projet et lancer ces builds depuis Windows ou Linux. Pour distribuer sur les stores, il reste à configurer les comptes développeur et les éléments de signature ; pour évaluer la caméra ou les parcours mobiles, il faut des essais sur les appareils concernés.

Les comptes développeur et les fiches des apps

Une précision sur mon hésitation dans la vidéo : Apple permet de s’inscrire à titre individuel ou comme organisation. Avoir une société n’est donc pas une condition générale pour publier. Les justificatifs et le nom affiché dépendent du type de compte. Les conditions et tarifs à jour figurent sur la page officielle Apple Developer Program.

Côté Android, EAS Submit peut envoyer le build à Google Play. Avec les prérequis configurés, la première soumission peut créer une release sur la piste de test interne. La fiche et les tâches demandées dans la console restent à compléter avant une diffusion en production.

Garder une expérience utile et testée

Une application doit apporter une expérience adaptée au téléphone. Apple précise ses attentes de fonctionnalité minimale dans les App Review Guidelines, section 4.2. Une enveloppe autour d’un site ne garantit pas, à elle seule, une acceptation.

Avant de soumettre, essaie surtout les parcours qui comptent : créer un compte, retrouver sa session, revenir d’un écran externe, refuser une permission, perdre le réseau pendant un envoi, reprendre une photo. Pour un produit comme Pelloche, le test utile consiste aussi à vérifier qu’un invité ne voit que ce qu’il est autorisé à voir. Un build réussi ne suffit pas à établir la sécurité du service.

Retrouver un passage dans la vidéo

• 00:00 — du site web à une vraie app
• 00:24 — commencer par le web
• 00:53 — Pelloche
• 03:06 — passer aux apps avec Expo
• 03:53 — comptes développeur et publication
• 04:38 — les mises à jour web
• 05:07 — la caméra de Pelloche sur iPhone
• 06:07 — Dynamic Island et accès rapide
• 06:24 — le skill Web2App
• 06:48 — Carafon
• 07:52 — Dressing
• 08:47 — bilan de la méthode

Pour poursuivre : les skills IA disponibles sur NXUS et les formations pour construire et utiliser tes outils IA.