Une Phrase. Une App. Ton iPhone.
Construis les écrans de ton idée et essaie‑les tout de suite dans le navigateur, autant de fois que tu veux.
Démonstration scriptée du studio, pas une création en direct : la demande dans le chat, la réponse de Vega, puis l’aperçu de l’app dans un téléphone.
Une app pour mon club de course, avec les sorties de la semaine et le classement des kilomètres du mois.
Vega
Je crée trois écrans : les sorties, le détail d’une sortie et le classement. Navigation par onglets, avec 12 coureurs d’exemple.
- Plan des écrans
- Navigation par onglets
- Écran Classement
- Vérification dans le navigateur
Ton app est prêteEssaie‑la dans l’aperçu et demande un changement quand tu veux.
Ton app tourne en direct dans ton navigateur
L’aperçu est ton app qui marche vraiment : tu passes d’un écran à l’autre et tu demandes un changement quand tu veux. Tu peux aussi partir d’un modèle : réseau social, suivi, boutique ou page vide.
Ajoute des réactions sous chaque photo.
Vega
J’ajoute des réactions sous chaque publication du fil.
Aperçu mis à jour
Une app, deux téléphones
Ton app est construite avec React Native et Expo : le même projet donne une vraie app iPhone et une vraie app Android.
- 1Un seul projetTu décris ton app une fois. Vega écrit un seul code, propre et lisible.
- 2Deux téléphonesLe même projet donne une vraie app iPhone et une vraie app Android.
- 3Des écrans natifsListes, onglets, formulaires et navigation : les composants du téléphone.
Pourquoi React Native ?
C’est la technologie avec laquelle sont construites des apps que tu utilises tous les jours. Ton projet repose sur un standard largement utilisé.
Chaque version est vérifiée
Avant chaque aperçu, Vega lance ton app dans un navigateur et vérifie qu’elle s’affiche sans erreur. S’il trouve un problème, il le corrige et vérifie encore. Tu vois seulement le résultat, et ces corrections ne sont jamais débitées.
- 12:04:31Écran Classement construit
- 12:04:33Erreur : un coureur sans rang fait planter la liste
- 12:04:35Correction : chaque coureur reçoit un rang
- 12:04:37Affichage vérifié dans le navigateur
- 12:04:37Aperçu mis à jour, sans crédit débité
Et si la correction échoue ?
La dernière version validée est conservée. La demande passe en revue, sans débit. Tu peux retrouver ton projet pendant que l’équipe la relit.
Le code est à toi
Les fichiers sont accessibles dans le studio, avec React Native et Expo. L’extrait ci‑dessous illustre ce code : c’est celui que Vega écrit pour toi.
- app/
- (tabs)/
- index.tsx
- classement.tsx
- sortie/[id].tsx
- components/
- CarteSortie.tsx
- LigneClassement.tsx
- data/coureurs.ts
- app.json
- package.json
app/(tabs)/classement.tsx
export default function Classement() { const mois = trierParKm(coureurs, 'octobre'); return ( <View style={styles.page}> <Text style={styles.titre}>Classement du mois</Text> <FlatList data={mois} keyExtractor={(c) => c.id} contentContainerStyle={styles.liste} renderItem={({ item, index }) => ( <RankRow rank={index + 1} coureur={item} /> )} /> </View> );}
Ce qu’une phrase peut donner, écran par écran
Pour chaque demande, trois des écrans qu’elle peut donner. Ce sont des illustrations, avec des données d’exemple.
Réseau social
La demande« Un petit réseau pour partager les photos de la semaine entre amis, avec des réactions. »
Fil
Profil
Nouvelle publication
1 sur 0
Suivi d’habitudes
La demande« Un carnet d’habitudes en mode sombre, avec trois rituels par jour et une série à ne pas casser. »
Aujourd’hui
Mois
Nouveau rituel
1 sur 0
Boutique
La demande« Une app pour vendre mes céramiques : un catalogue, un panier et le retrait à l’atelier le samedi. »
Catalogue
Fiche produit
Panier
1 sur 0
Liste de courses
La demande« Ma liste de courses rangée par rayon, avec les repas de la semaine. »
Liste par rayon
Ajout rapide
Repas de la semaine
1 sur 0