Créer un tableau de déploiement dans votre console
Ce cours gratuit compte 10 chapitres. Vous construirez Acme Deploys, d’une page vide à une application déployée avec des routes, des données et des tests. Chaque chapitre s’exécute en direct dans DevTools pendant votre lecture.
Progression0/10
- 01Premiers pasCréez une application, affichez votre première page et réagissez à une touche.5 min
- 02Layout avec BoxConstruisez la structure du tableau de bord avec Flexbox en cellules : une barre supérieure, une barre latérale et des cartes.7 min
- 03Texte et stylesStylisez une carte de déploiement avec des couleurs, des attributs de texte et des tokens de thème.6 min
- 04Saisie et keymapsNaviguez dans les déploiements au clavier et ajoutez un panneau d’aide ?.8 min
- 05RoutageDivisez l’application en routes avec un layout partagé, des liens avec raccourcis et un historique.8 min
- 06Données et gestionnaires de routeServez les déploiements depuis app/api, récupérez-les dans une page et ajoutez-en par POST.8 min
- 07Table, List et graphiquesRemplacez les lignes faites à la main par une Table triable et un graphique qui ne décale jamais le layout.7 min
- 08TestsEffectuez le rendu hors écran, appuyez sur des touches et vérifiez la frame sous forme de texte.6 min
- 09Exécution dans un terminalExécutez le même tableau de bord en plein écran dans un terminal avec text run.5 min
- 10Mise en productionCompilez, définissez les métadonnées et déployez Acme Deploys.4 min
- ▼CertificatObtenez un certificat à votre nom, affiché dans la console.
Le cours s’exécute dans votre console
Ouvrez la console avec ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (activez les fonctionnalités pour développeurs au préalable), cliquez ci-dessous et choisissez un chapitre avec les touches fléchées.
▼ learn
Ouvrir la console
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur ↓.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.