Bonjour à tous et bienvenue dans cette vidéo sur la création et le prototypage de pages, qui sera divisée en 3 parties. Aujourd'hui, nous allons nous concentrer sur la première étape.
Cette partie consiste à prototyper. C'est-à-dire identifier et créer les éléments dont nous allons avoir besoin pour concevoir la structure principale ou le squelette de la page web.
Ici à l'écran, nous voyons l'objectif final que nous voulons atteindre.
Lorsque nous passerons à Aptugo, nous verrons la base de données dont nous avons besoin déjà définie. Et nous trouverons également une page unique qui a été automatiquement créée par Aptugo par défaut, pour gérer les données, dans ce cas, les voitures. Ici, nous avons déjà une voiture chargée et c'est la même que celle que nous avons dans le design Figma, ce qui signifie que nous avons le backend prêt à créer une page exactement identique à celle que vous voyez à l'écran.
Commençons par aller dans Pages et créer une nouvelle page que nous appellerons "Détails de la voiture". Le pad sera "details" et le nom sera également "details.tsx".
Après cela, nous le glissons-déposons à l'intérieur du "Tableau de bord" afin qu'il soit placé à la même hauteur que "Voitures". Et nous procédons à Enregistrer et Construire.
Comme vous pouvez le voir, si nous revenons à cette partie et la rafraîchissons, nous verrons que "Détails de la voiture" apparaît, qui est une page vierge car nous n'avons encore rien défini dans Aptugo.
Une fois que nous avons vu cela, notre prochaine étape sera la suivante : si nous entrons dans Aptugo sur la page "détails de la voiture", qui est vide, nous pouvons voir que toutes les pages par défaut sont divisées en 5 étapes. Avant le rendu de la page, qui consiste en ce qui sera vu avant que la page ne soit chargée, l'en-tête de la page, le corps, le pied de page et après le rendu de la page.
Fondamentalement, les deux premières étapes, ainsi que la dernière, sont généralement utilisées pour générer un codage logique et des fonctionnalités qui ne seront pas visibles visuellement sur la page web.
Tous les éléments que nous allons utiliser pour écrire, rendre ou montrer des choses seront dans le corps ou dans le pied de page. Donc, d'abord, nous revenons à Figma et divisons cela en 2, le Corps et le Pied de page.
Puisque cette division est déjà faite, je vais vous le montrer directement. Nous avons un carré qui contient tout le corps et un rectangle contenant le pied de page. Ces étapes sont déjà divisées dans Aptugo, nous avons déjà un Corps et un pied de page construits.
Ce que nous pouvons faire maintenant, c'est créer un conteneur pour chacun afin d'éviter qu'ils ne soient plus grands que nécessaire. Nous choisissons l'option lg afin que sa largeur soit une taille d'écran par défaut.
Une fois cela fait, nous revenons au design ou à Figma et subdivisons les cases rouges en d'autres plus petites, pour voir combien de sections nous aurions à l'intérieur de chaque case rouge. Nous avons le corps divisé en deux et le pied de page en trois sections.
Maintenant, nous revenons à Aptugo et répétons le processus, seulement cette fois, en utilisant des divs, nous en ajoutons deux pour les cases orange dans le Corps, et trois dans le pied de page. Nous revenons encore une fois au design, nous avons terminé de diviser les cases rouges et créé les orange.
Notre prochaine étape sera de diviser ces cases orange en encore plus petites cases ou divs. Nous aborderons cela dans la deuxième partie de ce tutoriel. J'espère que cela vous a plu, et comme toujours, merci de regarder !
. . .
Pour plus de détails, veuillez visiter : www.aptugo.com