Convertissez votre conception Figma en application iOS et Android native sans codage - UI/UX Design

1. Introduction: avez-vous déjà voulu convertir vos pieds plus de prototypes en une application native Rus et Android  ? Si c'est le cas, vous êtes au bon endroit. Salut, Mon nom est une éruption cutanée et je suis un concepteur UX dans les scores, vous et moi allons concevoir et créer trois prix différent re APS ensemble, une application de contact et RSC PM, et une assurance équitable sans couper. Tu m'as entendu en ce moment, avec l'aide de la plateforme Bravo, il est possible de convertir tes pieds. Ma conception dans APS natif rapidement. Et la bonne nouvelle est que vous pouvez publier votre application sur l'app store ou le lieu. Ou à la fin du cours, vous apprendrez à faire des applications riel world connectées à une base de données à l'aide de Bravo Story une plateforme. Donc, si vous êtes prêt à monter le niveau, vos compétences voient la classe 2. Qu'est-: Salut, tout le monde. Et bienvenue à une autre vidéo du cours dans cette vidéo, on va parler de Bravo. C' est quoi, Bravo ? Bravo est une plateforme en ligne que c'est vous. Transformez vos prototypes de figures en application native Rus et Android. Incident. Aucun devis requis. C' est incroyable, n'est-ce pas ? Mais comment ça marche ? Bravo utilise des balises spéciales afin de diviser la conception de votre application en différentes parties. Par exemple, si vous avez une barre de navigation et qu'elle doit coller en haut de votre écran, nous pouvons utiliser sa balise spécifique pour le faire. Où devriez-vous écrire ces chars au réservoir que vous voulez utiliser après le nom de votre couche dans la couche est Dans les vidéos qui tombent, vous apprenez à utiliser ces chars dans votre projet, alors voyez que 3. Créer une application RSVP: Salut, tout le monde. Et bienvenue à une autre vidéo des partitions. Dans cette vidéo, nous allons créer une simple application R S V P, qui va collecter des données. Pour ce faire, nous devons créer un compte sur l'étude Bravo, un site Web qui s'appelle bravo studio dot app. Donc ce que je veux que vous fassiez, c'est d'aller de l'avant et d'ouvrir ce site et ici vous pouvez facilement inscrire. Parfait. Et pour sûr, vous devez avoir un exploit. Mon compte et il faut mentionner que l'utilisation de Bravo est totalement gratuite. Donc vous n'avez pas besoin de payer quoi que ce soit pour ces services, ce qui est génial. D' accord. Ensuite, vous pouvez vous inscrire avec vos pieds, mon compte ou avec votre compte Google. Cependant, je vous suggère de signer à vos pieds mon compte, parce que plus tard, il est beaucoup plus facile de connecter notre figue, mon design à Bravo studio. Alors allons de l'avant et cliquez et inscrivez-vous avec Vignal. Plutôt bien. Et ici, il vous demande votre permission et je vais cliquer sur autoriser l'accès assez bon. Et on y va. Lorsque vous vous déconnectez en premier, vous avez trois projets à créer. Cependant, si vous voulez en obtenir plus, vous pouvez facilement vous référer à vos amis. Et s'ils s'inscrivent, peuvent obtenir plus de projets. Et maintenant, il est temps d'aller à nos pieds. Mon compte. On y va. En fait, l'objectif de ces cours est de vous donner la possibilité de convertir vos prototypes de figment en un IRS natif et Android. Donc, nous ne parlerons pas de design spécifiquement dans les partitions. Donc d'abord, comme vous le devinez, nous avons besoin d'un tableau d'art. Donc je vais appuyer sur un mot clé et de votre côté droit, on peut choisir entre différents appareils. Assurez-vous d'utiliser un tableau d'art pour appareil mobile car Brahma studio est conçu pour créer des applications mobiles, pas des sites Web. Ok, donc je vais aller de l'avant et choisir l'iPhone 11 pro ou ex, fantastique. Et laissez-moi double-cliquer sur son nom pour me renommer R S V. P. Euh, assez bien le projet n'aura qu'un seul écran. OK, maintenant, allons de l'avant et changeons la couleur de fond pour quelque chose comme le bleu foncé. C' est plutôt bon. Et après ça, je vais sélectionner du texte en appuyant sur le thé sur mon clavier et en grinçant ici. Fantastique. Allons droit. Bienvenue de retour. Je vais changer sa couleur en blanc et la rendre plus grande. Donc je vais régler la taille du fonds à 60 points plutôt bien. Et permettez-moi de diminuer le avec ce calque de texte. Je pense que si je diminue la ferme, la taille serait meilleure pour est assez bonne. C' est le cap supérieur qui sera 90 et il est à gauche. Patting va avoir 40 ans, c'est juste. Et maintenant je vais aller de l'avant et créer un rectangle comme celui-ci. Faisons glisser et déposer assez bien. Et je peux aussi augmenter le rayon de coin à 20. Fantastique. La couleur de ce rectangle n'a pas d'importance, parce que plus tard, nous allons mettre jamais. Tu étais au-dessus de ce rectangle ? Ok, c' est vrai. Fantastique. Il y a une chose que vous devez garder à l'esprit. Et c'est ainsi que Bravo peut reconnaître différentes parties de votre application. D' accord. Comme je l'ai mentionné dans la vidéo précédente, Bravo utilise quelques tanks afin de diviser l'écran de votre application en différentes parties. Ok, un de ces réservoirs s'appelle conteneur. Donc, par exemple, ici, nous devons avoir un conteneur, qui est l'écran entier, parce que nous ne allons pas répéter l'écran encore et encore. Donc, ce que je vais faire est de sélectionner le cadre à droite en haut. Et c'est Dragon Dragon Dragon, nerd. Deux pieds, tout l'écran Fantastique ont raison. Le nom n'a pas d'importance ici. Comme je vous l'ai déjà dit, nous allons charger une page Web ici. Mais quel genre de page web ? Je ne suis pas sûr si vous êtes familier avec le site de formulaire de type ou non, Mais laissez-moi vous donner une brève explication sur cette grande plate-forme. En fait, type form est une plate-forme en ligne qui vous permet de créer des formulaires dynamiques afin de collecter des données de vos clients ou de vos clients que nous pouvons créer. Les enquêtes peuvent créer des formulaires différents. Vous pouvez même accepter les paiements. Cependant, dans ces tutoriels, vous allez utiliser un formulaire de type simple afin de collecter des données et le formulaire de type enregistrera ces données pour nous gratuitement. C' est plutôt cool. Donc, tout d' abord, assurez-vous de vous inscrire sur le formulaire de type que calme et avec stylo gratuit. Vous pouvez créer jusqu'à trois formulaires et vous pouvez obtenir jusqu'à 100 réponses par mois, ce qui est tout à fait acceptable dans le cadre de ce cours. Donc, tout d' abord, ce que je veux que vous fassiez est de cliquer sur le nouveau type quatre, et ici vous avez accès à différents modèles. Vous pouvez ouvrir, par exemple, formulaires et des inscriptions. On y va, et il y a deux options ici. Cliquez sur le modèle de formulaire d'inscription en ligne, le bon assez bon. Ici, vous pouvez prévisualiser votre modèle, comme vous le concédez, nous bonjour à nous et nous allons cliquer et entrer en contact. Commençons par votre prénom. Écrivons une éruption cutanée, un chapeau droit un satané et votre adresse e-mail demandé au test dot com, et ici vous pouvez choisir un pays. Peu importe le pays que vous choisissez et inscrivez mes informations. Parfait. Donc, c'est fondamentalement comment fonctionne le formulaire de type. Et maintenant, allons de l'avant et cliquez sur. Utilisez ce modèle assez bon ici. Vous pouvez créer différentes questions en fonction de vos besoins. Nous pouvons constamment les mensonges certains hors. Les enseignants sont payés, mais nous n'avons pas besoin de travailler avec ces fonctionnalités payantes pour l'instant. Donc, ce que je vais faire maintenant est de cliquer sur cette icône de conception fantastique, et allons à personnaliser. Et ici, vous pouvez personnaliser votre formulaire comme vous le souhaitez, ce qui est plutôt cool, n'est-ce pas ? Tout d'abord, je vais changer la couleur de fond parce que si je retourne à notre design de figue MMA, nous avons utilisé une couleur bleu foncé. Et quand vous chargez cet âge de représentant ici, ce n'est pas si cool d'avoir un fond blanc ici. Donc ce que je vais faire, c'est sélectionner l'écran entier. Je vais copier le code couleur de la section carburant, et il revient à notre formulaire d'inscription sur le formulaire de type si calme. Et ici, je vais ouvrir la couleur Bagram. Et nous allons accélérer ce code ici. Fantastique. La prochaine chose que nous devons changer, c'est la couleur de nos questions. Je pense que si tu le changeais en femme, ce serait génial. Maintenant, nous allons cliquer sur publier, vous savez, pour publier vos modifications, puis et nous allons cliquer sur Enregistrer comme nouvelle chose qu'il a enregistré. Encore une fois, c'est publier fantastique. Et si je vais me connecter, vous pouvez voir que vous pouvez connecter votre compte de formulaire de type deux services différents tels que Google Sheets, Google Analytics, etc. Nous pouvons même vous connecter à votre compte de table aérienne, ce qui est très utile. Et nous utiliserons ce site dans nos prochains projets. Crois-moi, ça va être si intéressant. Bon, maintenant, allons partager. Et voici notre lien. Maintenant, il est temps de se diriger vers les chars de Brambles. Page. Ok, donc si vous ouvrez, site Web de point de studio frère et que vous faites défiler vers le bas jusqu'à la fin de la page dans la section pied , nous pouvons voir le lien apprendre sous la section ressource est. Donc je vais cliquer dessus. Vous pouvez également accéder à cette page à l'aide de ce guide d'aide. Fantastique. Et dans la section concept, vous pouvez ouvrir des chars Bravo. Alors, nous allons cliquer dessus. On y va. Et voici au moins hors chars Bravo que vous pouvez utiliser dans vos projets. Dans ces projets, nous allons utiliser une arme. Ça va ? On y va. Voici notre élément. Et voici notre char. Donc, je vais double-cliquer sur ce copié et sa tête sur notre projet de figure. Et voici un rectangle. Je vais double-cliquer dessus. Renomme-moi pour toi. Le nom n'a pas d'importance, donc tu peux choisir ce que tu veux, et je vais coller notre composant. Et enfin, nous devons copier ce lien de forme temporelle qui viennent et nous allons le coller ici, juste là. Nature pour coller le lien au bon endroit juste après cela, Colin. Et c'est O. Mais comment pouvez-vous vérifier votre application ? C' est si simple. Tout d'abord, allons de l'avant et changez votre nom pour R S V P. Nouveau. Et puis je vais cliquer et partager et ka peeling, puis dirigez-vous vers Brava Studio et cliquez sur Importer de Fig MMA et collons le lien ici. Importer. Ça va prendre un moment, et on y va. Maintenant, vous êtes FEMA Project. Il est connecté avec succès à votre studio Bravo. Et pour prévisualiser votre application sur votre téléphone, vous devez télécharger l'application Bravo vision sur votre téléphone. Si vous le pouvez, vous pouvez prévisualiser l'icône sur votre côté droit. Il y a un code QR. Ok, c'est le code de guérison de votre application, et si vous voulez un aperçu sur un iPhone, vous pouvez cliquer sur discerner. Il n'est pas sur le magasin APP encore, cependant, peut télécharger l'application de vol d'essai et puis vous pouvez à Séoul l'application Bravo vision facilement . Et si vous voulez utiliser un appareil Android, vous pouvez obtenir l'application à partir du Play Store. Lorsque vous avez obtenu l'application, vous pouvez l'ouvrir et ensuite vous verrez deux fonds différents. Le premier s'appelle Preview an APP, et le second 1 est appelé C Scan APS. Cliquez sur Aperçu d'une application Fantastique. Et comme je peux le voir, vous pouvez maintenant scanner votre code de guérison pour que manquer peut il. Et on y va maintenant. Comme vous pouvez le voir, votre formulaire de temps est faible que dans votre application, ce qui est assez cool. Et si vous cliquez sur peut obtenir dans le bouton tactile, vous pouvez voir qu'il fonctionne parfaitement. Je vais donc écrire mon nom, mon nom de famille et une adresse e-mail. C' est vous, le pays, soumettre au hasard. Et c'est tout. C' était plutôt cool, n'est-ce pas ? Mais là où nos données sont sauvegardées. Si vous revenez à votre compte de formulaire de type, il y a un autre robinet appelé résultats. Donc, je vais cliquer sur cela et là, nous allons ici, nous avons une réponse, et si vous allez aux réponses ici, nous pouvons voir votre réponse. Vous pouvez également télécharger toutes les réponses ici. Et la grande partie est que chaque fois que vous décidez de changer quelque chose sur vos quatre, par exemple, si vous allez créer et que vous voulez changer quelque chose ici, cela va changer immédiatement dans votre application. C' est assez incroyable, n'est-ce pas ? Très bien, les gars, c'est propre pour ces vidéos. J' espère qu'il l'a apprécié et je vous verrai dans la prochaine vidéo. 4. Créer une application de contact: Salut, tout le monde. J' espère que vous allez bien dans ces vidéos. Nous allons aller de l'avant et créer un contact le moins ensemble. Cependant, cette fois, vous allez utiliser un A P I afin d'extraire des données d'un serveur. Ok, mais ne vous inquiétez pas, je vais vous rendre si simple de l'envoyer. Alors tout d'abord, allons-y et ouvrons Sigma. Et ici, je viens de créer un nouveau projet appelé Contact That. Ok, ça va avoir un seul écran. Alors appuyez sur un sur notre clavier et je vais insérer un nouveau tableau d'art. Choisissons iPhone 11 pro ou oeufs assez bon. Et ça appelle ça contact. Fantastique. Et dans notre contact, au moins, nous allons avoir des cartes. Ok, ce qui empêche l'information de nos contacts. Supposons donc que nous allons mettre le nom et le prénom ainsi que l'adresse e-mail nos utilisateurs. Ok, donc, tout d' abord, on doit créer une carte. Je vais aller de l'avant et choisir le rectangle dans la barre d'outils, et glisser-déposer comme ça. Fantastique. Je vais l'aligner au centre ou est entièrement. Et comme vous pouvez le voir, le pavé droit et gauche. Ings sont dits à 24 pixels, ce qui est très bien. Je vais changer le haut à 80. Fantastique. Et puis augmentons le rayon à 10 comme ça, et je vais mettre la couleur sur blanc assez bien. Comme vous pouvez le voir, c'est invisible parce que nous n'avons pas d'ombre. Donc je vais ajouter des effets et cette ville à l'ombre portée. Et je vais mettre le montant de Blair à 20 et de moi à 10 assez bon sur. Réduisons la capacité à 10 % ou même moins. Mettons-le à 5%. C' est plutôt bon. Vous pouvez également y ajouter frappé. Donc, je vais ajouter un coup et diminuons son épaisseur à 0,5 assez bon. Vous pouvez changer sa couleur à ce que vous voulez, mais pour l'instant c'est incroyable. Maintenant, nous devons prendre les tueurs, le 1er 1 pour notre prénom et de famille et le 2ème 1 pour notre adresse e-mail. Alors je vais appuyer sur le thé sur mon clavier. C' est Quicken ici. C' est vrai. Prénom et nom qui a réduit la taille de la police à 18 points. Fantastique. Je vais le déplacer sur le côté gauche. C' est à gauche et les titres supérieurs vont être 16 cellules de porc comme ça et laissez-moi changer le chemin à moyen. Je vais le dupliquer, déplacer vers le bas, et le rembourrage entre eux sera de six grandes cellules. Je pense que c'est bon. Et maintenant, changeons le chemin à la normale. Et ici, nous allons écrire un email. Cependant, gardez à l'esprit que nous n'avons aucune information sur la longueur de notre prénom et de notre nom, ainsi l'adresse e-mail. Alors augmentons le avec notre texte. Des couches comme celui-ci fantastique et celui-ci aussi. Assez bien, c'est vrai. Tout va bien. Maintenant. Sélectionnez tous ces calques et cliquez avec le bouton droit de la souris et l'un de ces calques et choisissez la sélection d'image . Comme je l'ai mentionné précédemment, vous devez structurer votre application d'une manière que Bravo peut facilement comprendre. Ok, donc ces cartes sont un conteneur. Je vais changer son nom en moindres et entre parenthèses. Écrivons le conteneur et nous avons fini. Cependant, une chose plus importante, car nous pouvons voir le cadre que nous venons de créer, est de ne pas toucher les bords de notre tableau d'art, et c'est un problème parce que Bravo peut reconnaître un conteneur chaque fois qu'au moins l'un des bords de chaque cadre touche le tableau d'art. Ok, donc ici nous pouvons facilement résoudre ce problème en augmentant le avec hors de ce cadre. Donc je vais l'augmenter comme ça. Fantastique. Et puis je vais te montrer un bon tour. Sélectionnez tous nos éléments en maintenant la touche Maj sur notre clavier. Regroupez-les en appuyant sur la commande G. Si vous utilisez Mac ou le contrôle. Si vous utilisez les fenêtres et que nous avons un groupe. Maintenant, nous allons aligner sur le centre horizontalement et un point de plus important que vous devez garder à l'esprit. Bravo ne vous laisse pas à vos éléments dans Brava Studio. Vous devez donc prédire votre rembourrage à l'avance. Par exemple, ici supposé que nous commençons à dupliquer ces cartes bien, parce que nous n'avons pas de rembourrage. Ça va ressembler à ça. Ok, ce n'est pas ce qu'on veut. Nous devons donc y ajouter des tampons afin de le rendre clair. Donc, augmentons la hauteur de notre conteneur aussi. Comme ça. Je pense que c'est génial, est vrai. C' est tout pour l'instant. Allons de l'avant et prenons le lien. Je vais le copier. Je vais aller à Bravo. Importations studio à partir de pieds. Maman, je vais le coller ici. Importez-le. Et on y va. Maintenant, notre design est connecté à Bravo Studio, mais il ne fait rien. Comment pouvons-nous ajouter des fonctionnalités à manger ? Comme je l'ai déjà mentionné dans ce projet, nous allons utiliser quelques yeux AP. Ce qui est sur un P I Ap I signifie interface de programmation d'application. Certains d'entre vous n'ont peut-être aucune idée de ce que c'est. Laissez-moi vous l'expliquer en mots simples. Supposons que vous êtes dans un restaurant et que vous voulez commander quelque chose à manger. Lorsque vous commandez, votre commande doit être transférée à la cuisine. C' est vrai ? Donc, la personne qui transfère votre commande à la cuisine s'appelle un A P i ou un serveur dans un restaurant. Donc une p. Je suis fondamentalement un messager qui va envoyer une requête au serveur et ensuite prend la réponse à vous aussi. Très bien, ça suffit pour une théorie. Alors maintenant, allons y entrer. Ce que je veux que vous fassiez est d'ouvrir Google et de chercher Jason Placeholder et de cliquer sur la première manche. On y va. Ce site nous fournit les yeux publics amis AP. En fait, nous avons différents types d'yeux AP, par exemple, qui ont des yeux AP publics ou privés. Mais pour vous en tant que designer, il n'est pas important de plonger dans les points techniques. Cependant, vous devez savoir qu'avec l'aide d'un A p I, vous pouvez recevoir des données d'un serveur à distance Ok, juste là sous la section ressource est. Vous pouvez voir que nous avons des ressources différentes est telles que les messages, commentaires, albums, photos à faire des utilisateurs et ce sont les numéros sont des réponses. OK pour ces projets, vous allez utiliser le dernier, qui s'appelle utilisateurs. Alors ouvrons, c'est juste là que nous allons. Comme nous pouvons le voir ici, nous avons quelques techniciens qui sont structurés bizarrement pour ceux d'entre vous qui ne savent pas ce qu'on appelle la structure. J' aimerais dire qu'il s'appelle Jason. Ok, Jason signifie notation d'objet JavaScript, et ça nous aide à frapper ses données d'une manière claire. Et cela nous aide également à récupérer et à lire les données facilement. Ok, Donc, comme vous pouvez le voir ici, nous avons je d nom, nom d'utilisateur, adresse e-mail et sous adresse. Nous avons rue suite C T Z code, etcetera. Donc ce que je vais faire, c'est sélectionner le lien qui est copié et retourner au studio Brava. Et cette fois, au lieu d'aller à la section projet, je vais aller à la bibliothèque de données. Alors choisissons ça. Comme vous pouvez le voir, j'ai déjà ajouté quelques collections de données pour tester des choses. Cliquez donc sur la nouvelle collection et son nom. Contacter la description n'a pas d'importance. Contacter aussi. Ça a sauvé. Et là, nous allons ici, vous pouvez créer une demande. Comme je vous l'ai déjà expliqué, nous vous enverrons une demande afin d'obtenir des réponses. Alors, cliquez sur cette icône bleue. On y va. Et vous pouvez changer le nom de votre demande ici. Donc je vais me renommer aussi Contact Moins Fantastique. Je vais supprimer ces u r l et nous allons accélérer le u r l que nous venons de copier à partir du site Jason Placeholder. Et parce que c'est un AP public, je n'ai pas besoin de fournir un mot de passe à Brahma studio ou disons la clé, Ok, donc nous pouvons simplement aller de l'avant et bacon envoyer notre droit. Et maintenant, comme vous pouvez le voir, nous avons quelques réponses ici. Ça semble complexe. Je sais, mais croyez-moi, c'est si simple. Donc, comme vous pouvez le voir, nous avons des données que nous avons que i d un nom, nom d'utilisateur, adresse e-mail et toutes ces choses que nous venons de voir. Par exemple, comme vous pouvez le voir, ils ont un nom. Et ici vous pouvez voir le nom de l'idée Juan comme celui-ci en raison du fait que nous récupérons les 10 enregistrements. Comme vous pouvez le voir ici, nous avons 10 I ds différents. Nous devons sélectionner tous à partir de cette goutte beaucoup. Je vais tout sélectionner et vérifier Jake Marks. Ensuite, nous devons sélectionner le nom et aussi l'adresse e-mail, et c'est tout. Alors que devrions-nous faire d'autre ? La dernière chose que nous devons faire est de lier nos données de récupération pour notre conception. Allons donc aux projets. Et ici, nous avons l'entrepreneur. Je vais cliquer sur cet écran de contact et ici nous devons déposer des menus, des collections et des demandes. Donc, à partir de collections qui chaussures le contact abd et nous venons de créer et de demandes nous n' avons qu'un seul. Utilisons le contact le moins assez bon et je vais cliquer sur le bouton ajouter du contenu. Fantastique. La première chose que nous devons ajouter est le moins. Comme vous pouvez le voir, il est indiqué qu'il s'agit d'un cadre, et si vous vous en souvenez, nous avons créé un cadre ici. Donc je vais cliquer sur cette fuite de remerciement n'importe où en dehors de cette fenêtre. Fantastique. Et à partir du menu déroulant, je vais lier ces deux données. Et si vous attendez une seconde, vous pouvez voir qu'une icône plus apparaît immédiatement. Donc je vais cliquer dessus. Et maintenant, nous devons ajouter le prénom et le nom et l'adresse e-mail. Et comme vous pouvez le voir, l'e-mail est automatiquement connecté à l'e-mail et nous devons changer le prénom et le nom de famille en nom. Et c'est Oh, donc maintenant si l'aperçu de notre labo, vous pouvez voir que nous n'avons pas autant d'espace blanc en haut, alors comment pouvons-nous faire des exploits qui vont aux pieds doivent projeter, et ici en haut, je suis va créer un autre conteneur, qui est invisible. Donc, créons un rectangle comme celui-ci. Je vais déplacer ces conteneurs vers le bas et ça augmente son haut à quelque chose comme ça. Et rappelez-vous, lorsque vous travaillez avec Bravo, vos images ne doivent pas se chevaucher. OK, alors assurez-vous qu'ils sont parfaitement alignés comme ça. Et je pense que c'est une bonne idée d'ajouter un peu de tête à notre conteneur. Donc je vais choisir ce film de groupe vers le bas. Et rappelez-vous, Tongue Group. C' est bon comme ça. Et ça a changé la couleur de ce conteneur. Je vais le mettre en blanc depuis qu'on voulait être invisibles. Et maintenant, faisons un clic droit sur cela et choisissez la sélection de cadre pour créer un autre cadre. Et je vais me renommer en Top Frame et entre parenthèses. Allons le bon conteneur. Fantastique. Maintenant, allons à Brava Studio et interne pour mettre à jour votre application. Vous devriez toujours cliquer sur les mises à jour assez bien maintenant. Si vous prévisualisez votre application, vous pouvez voir que nous avons un espace négatif en haut, qui est exactement ce que nous voulons. C' est vrai, les gars. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. Alors, voyez-vous alors 5. Conception d'une application de mobilier - Partie 1: Salut, tout le monde. Dans cette vidéo, nous allons concevoir une application de meubles dans Fig MMA afin de la connecter au studio Brava et de tirer des données de Air Table. Donc, tout d'abord, créons un projet de figment et je vais nommer les besoins design Los New Perfect. Vous pouvez le nommer, ce que vous voulez. Et puis je vais appuyer sur un sur mon clavier et c'est des chaussures et iPhone 11 pro ou Eggs art board. Fantastique. En fait, je vais rester si simple. Donc il n'y aura pas autant de tableaux d'art. Je vais avoir un écran de lancement, le menu de diapositives, un écran de produit. Et puis nous allons ajouter un écran de promotion de l'écran de détail et éventuellement vous écran OK, alors commençons à créer notre écran de lancement. Donc tout d'abord, je vais changer le nom pour l'écran de lancement. Nous devons revenir à ces noms et ajouter des chars à la fin. Mais pour l'instant, laissons-le tel qu'il est. Ensuite, créons un logo simple ici, donc je vais créer un rectangle. Maintenons le décalage sur notre clavier et le dragon drop. Je vais faire 105 5 105 C'est une ligne dans le centre et je vais augmenter le rayon d'angle à 30. Fantastique. Ensuite, changeons le champ à 20 à 22 22. Fantastique. Je vais le déplacer. Alors ajoutons une lettre D ici. Donc je vais appuyer sur le et changer sa couleur en blanc. Je vais changer la taille du téléphone à 65 points. Génial. Ensuite, ajoutons un autre calque de texte et ajoutons un signe plus. Je vais changer le chemin vers Regular, et ça a changé une couleur pour doubler F D 600. Fantastique. Alors c'est vrai. Cliquez dessus et je vais en faire un contour. Ok, donc ce n'est plus un texto que vous, je vais le rendre plus petit, plutôt bon. Et puis nous avons besoin d'une couche de texte juste sous notre logo. Et appelons ça le design. En plus, je vais le rendre plus petit. Alors mettons-le à 24 points et en alignant au centre Vraiment bon. Je vais sélectionner toutes ces couches, les regrouper en appuyant sur la commande G ou contrôlée G. Si vous utilisez des fenêtres et que c'est le nom du logo, puis sélectionnez les deux années une fois de plus , regroupez-les , et laissez-le comme il est facile ont raison. Plutôt bien. On pense que vous devez garder à l'esprit est que cet écran de déjeuner ne va pas forte dans Bravo vision app. Ok, nous créons seulement est pour l'application réelle vraiment chaque fois que vous voulez publier votre application, l'App Store ou le Play Store. Ok, alors allons de l'avant et concevons notre écran de menu. OK, donc je vais dupliquer cet écran de déjeuner et c'est supprimer ces éléments. Je vais me renommer en menu pour l'instant. Et changeons la couleur pour quelque chose de cheveux foncés un peu assez bon. Et ce que je vais faire, c'est créer un menu de snipe. Donc j'ai besoin d'un rectangle qui est glisser-déposer comme ça assez bon. Je vais changer sa couleur en blanc massif. Et changeons le avec 2 281 et ensuite je vais augmenter l'éclat du coin à 20. Cependant, assurez-vous de définir le rayon d'angle de ces deux coins. En haut à gauche et en bas à gauche à zéro. Ok, donc je vais cliquer sur l'icône d'Andy et régler ce montant de zéro et ce montant était là où se trouve l'Iran . Et maintenant, nous devons ajouter une image de profil juste là en haut. Donc je vais aller de l'avant et créer un rectangle ici qui met son avec et haut à 50. Fantastique. Et puis augmentons le rayon d'angle à 18 comme ça. Et maintenant, nous avons besoin d'un e-mail. Maintenant, je vais utiliser un branchement appelé Content Riel. Et si vous n'avez pas ce branchement, assurez-vous d'aller dans le menu Plug INS et de gérer les plug-ins peut facilement trouver l' arborescence de contenu de branchement et d'autres choses. Bon, alors maintenant nous allons lancer le branchement fantastique et nous allons cliquer sur la ville Avatars. Je vais cliquer sur femelle comme ça, puis ajoutons un nom et un nom d'utilisateur. Ok, donc je vais écrire Emma, en fait. Et comme vous pouvez le voir, j'utilise le robot un fonds. Changons son chemin à moyen, et je vais régler la taille du fonds à 16 points. Vraiment bien. Le rembourrage gauche va être un choix. Sons que je vais le dupliquer par commande D ou contrôle. Le Si vous utilisez Windows, nous allons le déplacer vers le bas et je vais écrire une utilisation tôt. Ont raison. Allons à Emma souligner Ashley. Mais cette fois-ci, nous allons changer le chemin vers Regular et la taille du fonds à 14 points. Alors je vais le rendre un peu plus léger. Alors passons à quelque chose comme ça. Sept. C sept c et sept c. assez bien. Alors c'est le groupe. Ces deux prennent des calques, et je vais sélectionner notre lieu d'image, Hohler, et ça les a alignés verticalement. Fantastique. Nous pouvons également ajouter un indicateur d'état. Alors ajoutons un cercle comme celui-ci, et je vais changer sa couleur à 20 C 96 8 Ensuite, ajoutons un trait comme celui-ci. Je vais mettre la couleur sur blanc massif et changer son épaisseur à 0,5. Tu serais bien, et je vais ajouter une ombre portée à manger. Alors, changeons. C' est pourquoi à un, c'est plutôt bon. Ensuite, sélectionnons tous ces éléments et regroupez-les, et je vais l'appeler bien, beau détail. Fantastique. Il arrête d'ajouter, va être 68 pixels et son rembourrage gauche va être 30. Des pixels comme ça sont en ce moment. Il est temps de créer nos sous-menus. Nous allons créer quatre sous-marins différents produits promotions site Web et support. Donc, je vais commencer par ajouter un calque de texte. Donc, nous allons bons produits et puis cela a augmenté la taille de la police à 18 points. Fantastique. Quand un zoo signifie et je vais ouvrir les actifs, trouver que vous pouvez télécharger à partir de la ressource est section de ces cœurs. Je vais importer des icônes. Donc pour le premier sous-menu, je vais importer des produits. Alors faisons glisser et dépose-le ici. Assez bien dit, comme les deux hors d'eux et les aligner verticalement. Fantastique. Alors vérifions les tampons. Le rembourrage gauche devrait être un pic. Ça sonne comme ça. Et nous avons besoin d'une petite flèche droite ici. Donc, à partir du même fichier d'actifs, je vais ajouter ces flèches droite. Alors glissons et dépose-le ici assez bien. C' est une ligne. Tous ces trois éléments fantastiques. Et le rembourrage Roy de la flèche droite va être de 32 pixels. Plutôt bien. Sélectionnez tous ces éléments, regroupez-les et nous allons me renommer aussi les produits. Bon, maintenant dupliquons le film vers le bas. Le rembourrage entre eux va être de 50 pixels comme ceci. Et maintenant, je vais écrire des promotions et changer cette icône, donc je vais l'enlever et nous allons apporter sa propre icône Fantastique. Allons les aligner verticalement et je vais mettre ces promotions. Je peux écrire sous le groupe de produits ici et nous allons me renommer en promotions assez bien. Et puis nous devons vérifier les tampons. Ça va faire huit pixels comme ça. Une fois de plus dupliqué film vers le bas. Le rembourrage devrait être de 50 pixels, et cette fois je vais écrire le site Web qui est supprimé l'icône et apporter l'icône du site Web . On y va. Déplaçons le droit dans son propre groupe, qui est celui-ci que je vais renommer le site de l'orteil et il est bon rembourrage va être huit pixels aussi bien. Et enfin, je vais le dupliquer. Et nous allons vous changer pour soutenir assez bien. Supprimons ces icônes et amenons l'icône de support ici. On y va. Je vais le déplacer dans son propre groupe et ça me renomme pour soutenir et ensuite vérifier les pad ings. Un pixel possède fantastique sont en ce moment tout a l'air génial. La seule chose que je vais changer, c'est les signes de cet indicateur. Alors laissez-moi l'agrandir un peu. Je vais le mettre à 10 par 10 et augmentons son épaisseur à un. Je pense que maintenant c'est beaucoup, beaucoup mieux. Parfait. La prochaine projection sera l'écran de nos produits. OK, alors appuyez sur un sur notre clavier. Je vais ajouter une nouvelle illustration ici. Changeons son nom en produits. Fantastique. Donc, dans cette page, nous allons avoir un menu hamburger juste en haut à gauche. Et après ça, on aura un grand titre, qui sera le titre du produit. Et puis nous avons besoin d'une carte pour notre produit qui apporte l' icône du manuel de hamburger de notre dossier d'actifs. Là, on va faire glisser et déposer le menu, je vais le déplacer ici. C' est la tête supérieure qui sera 60 et le rembourrage gauche sera 16 comme ça. Et puis c'est à un calque de texte ici. Je vais écrire des produits. Cependant, soyons audacieux, et je vais augmenter la taille du fonds à 32 points. Fantastique. Son ajout supérieur va être de 30 pixels et le remplissage gauche devrait être de 16 cellules de pics ainsi . Bon, donc, donc, comme je l'ai déjà dit, nous devons créer un conteneur. Alors sélectionnons un cadre pour et je vais le glisser et le déposer. Pour créer un conteneur parfait, je vais mettre son haut à 144. Et maintenant, nous allons attraper le titre des produits. Pour l'instant, nous n'ajoutons pas de chars parce que dans la prochaine vidéo, nous allons ajouter ces taxes spécifiques, donc la prochaine chose que nous devons faire est de créer notre carte. Donc, pour notre carte, nous avons besoin d'une image et d'un nom assuré description et d'une étiquette de prix. Donc, tout d'abord, je vais créer un rectangle ici. On y va. Rendons-le carré. Donc je vais le mettre à 156 par 156 plutôt bon. Et augmentons le rayon de coin à 16. Et cette fois, je vais utiliser un autre branchement pour ajouter une image à manger. Allons donc aux branchements. Je vais choisir la prise d'éclaboussures de Young, et si vous n'avez pas cette prise, vous pouvez encore l'installer. Alors faisons-le. Bien sûr, vous pouvez ajouter l'image que vous voulez, peu importe, et maintenant je vais choisir l'intérieur. Vous avez raison. Je pense que c'est génial. Ensuite, ajoutons un calque de texte. Je vais écrire le nom et c'est diminuer. C' est des signes amusants à 16 points et un moyen de régulier. Plutôt bien. Je vais l'aligner. Il est stop cap va être huit pixels et ces deux devraient être alignés parfaitement fantastiques. Alors c'est dupliqué. En descendant ici, je vais écrire une brève description et puis changeons sa couleur pour quelque chose de plus léger. On y va et sa cachette en haut sera de quatre pixels. Encore une fois dupliqué le film ici. Nous devons avoir des calques de texte. Le 1er 1 va être un signe de dollar comme ça, OK ? Et je vais changer de couleur aussi. 20 c neuf et 68. Fantastique. C' est un film dupliqué sur le côté droit. Et voilà, Price. Alors pourquoi avons-nous divisé ces deux calques de texte ? Parce que plus tard, tu vas récupérer des données et tu vas changer. Cela prend des couches en fonction de notre base de données. Donc, parce que nous stockons des données sans le signe du dollar dans notre base de données, nous avons juste besoin de changer le montant de la couche de texte. Donc, ces signes de dollar devraient être intacts sont justes. Le tapotement à gauche va être de deux pixels. Fantastique. Et maintenant, il est temps de créer notre ami parce que la carte est un autre conteneur. Donc, ce que je vais faire est de sélectionner tous ces éléments en maintenant Shift sur mon clavier comme ceci, assurez-vous de les sélectionner tous et à juste titre peut l'un des calques et appuyez sur la sélection de cadre . Et maintenant, nous avons un nouveau cadre. Cependant, comme je l'ai déjà mentionné, lorsque nous créons un cadre, au moins un de ses bords devrait toucher le côté gauche ou droit de notre écran, ok ? Ou en haut de notre écran. Donc dans ce cas, je vais agrandir notre cadre. Alors agrandissons comme ça. Je vais mettre le avec 2 183 et haut à 249 comme ça. Et puis c'est le groupe Tous les éléments à l'intérieur de ces cadres comme ça, et je vais les aligner au centre à la fois verticalement et horizontalement. Fantastique. Maintenant, nous pouvons les regrouper, sélectionner le cadre, et je vais l'aligner sur le bord de notre écran pour qu'il touche le bord gauche. Une chose importante que vous devez savoir sur Bravo est maintenant que nous créons cette voiture, elle va la répéter sur notre tableau d'art. D' accord. Cependant, comment pouvez-vous décider s'il va se répéter horizontalement ou verticalement dans ces jeux quand le avec off votre ami est moins de 50% de votre écran ? Comme dans ce cas, Bravo va d'abord le répéter ou est entièrement et ensuite verticalement. Donc la prochaine carte va apparaître juste à côté et la rangée suivante. Et c'est exactement ce que nous voulons sont en ce moment, nous devons nous assurer que nos cadres ou aligner parfaitement et que je le renomme en carte de produit. Fantastique. Parfait. Maintenant, nous avons fini avec notre écran de produits aussi bien ont raison, les gars, Merci beaucoup pour avoir regardé cette vidéo. J' espère que vous l'avez apprécié dans la prochaine vidéo. On va finir de concevoir ce projet ensemble. J' espère que vous apprécierez cette vidéo et même de vous voir que 6. Conception d'une application de mobilier - Partie 2: Salut, tout le monde. Bienvenue à une autre vidéo des partitions de cette vidéo. On va finir de concevoir ce projet ensemble. Alors maintenant je vais aller de l'avant et insérer un autre, ne sont pas ennuyés en appuyant sur un sur mon clavier et choisissons ce tableau d'art. Et c'est Renay moi au détail parce que ça va être notre page détaillée. Ainsi, chaque fois qu'un utilisateur clique sur cette carte, il va l'amener à cette page détaillée et l'utilisateur peut voir les détails spécifiques sur ce produit. Donc, dans ces pages, nous allons avoir une grande image. Ok, alors allons de l'avant et créons un rectangle comme celui-ci. Fantastique. Je vais augmenter le rayon d'angle à 30. Cependant, définissons le rayon de coin des deux coins à zéro. Donc je vais le mettre à zéro et celui-ci aussi, comme ça. Et puis, une fois de plus, nous allons lancer l'ONU splash plug afin de récupérer une grande image intérieure sont assez bons , et ajoutons un peu d'ombre portée à manger. Donc, je vais changer le montant de Blair à 20 et un montant de Y à 10 et diminuons la capacité à 10% fantastique Alors quoi d'autre avons-nous besoin ? En haut ? On va ajouter la flèche gauche à des fins de navigation entre nos écrans. Alors ouvrons notre cul. C' est bon. Et ici, nous avons une icône flèche gauche. Je vais le glisser et le déposer. Année, il reste. Le rembourrage va être vieux de 24 pics, et son titre supérieur sera 46 comme ça. Et je vais ajouter une autre icône juste là, qui est une icône de partage. Et à partir d'ici, je vais glisser et déposer ces icônes de partage comme ça. Je vais le déplacer, et c'est juste. rembourrage va être 24 cellules de pointe. Ça te rend méchant. Et le titre supérieur sera 43. Pizza 1 est parfaite. Bon, ici, on doit mettre une icône de jeu. Cependant, je vais vous montrer comment en créer un facilement et rapidement. On a besoin d'un cercle. Alors laissez-moi dessiner un cercle ici et je suis allé une ville à 64 par 64. Faisons le blanc. Fantastique. Et puis nous avons besoin d'un triangle. Donc je vais créer un polygone comme ça et augmenter le rayon de coin à cinq comme ça , et je vais le rendre noir. Fantastique. Que j'ai tourné de 90 degrés et je vais aligner au centre à la fois verticalement et horizontalement. Alors allons les regrouper et je vais les collègues jouer le bouton. Fantastique. Bon, Maintenant, il est temps d'ajouter nos calques de texte. Donc ici, nous devons avoir un nom, une étiquette de prix et une description mensongère. Alors ajoutons un texte que vous êtes ici. Je vais écrire le nom et le rendre moyen. Et je vais augmenter la science du fonds à 24 points. Vraiment bien. Il stop cap va être 16 cellules de pointe et le combat de gauche devrait être de 24 pixels. Cependant, oubliez pas d'augmenter le avec un peu parce que nous ne connaissons pas la longueur de notre nom que nous allons extraire de notre base de données. D' accord ? D' accord. Ajoutons à nouveau un autre calque de texte. On a besoin d'un signe de dollar. Rendons ça régulier. Et la taille de la police va être de 16 points et la couleur devrait être de 20 c 968. Fantastique. Il arrête de se cacher va être quatre pixels. Laissez-moi dupliquer le film sur le côté droit. Et voici le bon prix. Je vais l'agrandir un peu sont juste. Et enfin, nous allons ajouter notre description du mensonge ici. Donc, je vais copier et coller la description séduisante Epsom du site Web epsom dot com. Vous pouvez écrire ce que vous voulez, alors ajoutons un texte que vous le collez ici et n'oubliez pas de diminuer le avec votre calque de texte . Plutôt bien. Réglons le avec 2 327 Assez bon. Et je vais changer la hauteur de la ligne à 24, rendons ça un peu plus léger. Fantastique. Laisse-moi une ligne dans le centre. Ça va être 24 cellules photographiques et on a fini. Très bien, les gars, c'est tout pour cette vidéo. Dans la vidéo suivante, nous connecterons notre conception au studio Bravo et nous utiliserons le site de la table aérienne afin récupérer quelques données de notre base de données. D' accord. De plus, nous allons ajouter deux autres écrans de conception de pneu ainsi. Alors, voyez-vous alors 7. Connecter votre application à une base: Salut, tout le monde. J' espère que vous allez bien dans ces vidéos. On va ajouter les réservoirs du studio de bouillon à notre conception. Et après ça, nous allons le connecter au studio frère pour récupérer des données de Air Table. Mais avant d'expliquer la table d'air, ajoutons ces réservoirs à nos composants ici afin de les rendre reconnaissables par Robert Studio pour notre écran de lancement. Comme je l'ai déjà dit, ça ne va pas empler dans la vision Bravo. Cependant, nous devrions le spécifier par sa balise spécifique. Donc, si vous ouvrez la page Web des attaques Bravo à partir de leur site Web, vous pouvez voir que nous avons un écran de démarrage juste là. Ok, donc je vais sélectionner ces balises commande, voir ou contrôler. Voyez, laissez-moi supprimer son nom et le coller ici et c'est fait. Ensuite, nous devons faire reconnaître notre écran de menu une cloche par Bravo studio. Nous avons donc besoin d'un autre menu de nuit de la forêt. On peut utiliser la balise. D' accord. Menu Colin Snide. Alors sélectionnons-le. Commandement C. Et ici, je vais me renommer en nom de balise. On y va. Et après cela, nous pouvons connecter nos écrans. D' accord. Donc, par exemple, nous avons ici les produits. Donc, cliquez sur l'onglet prototype comme ceci. Et comme vous pouvez le voir, Cercle apparaît immédiatement. Je vais cliquer sur cette attente et le déposer ici. On y va. Et maintenant, ces souterrains sont connectés aux produits. Et nous avons aussi des promotions sur le site Web. Cependant, nous n'avons pas encore conçu ces deux écrans. Donc pour l'instant, laissons-les tels qu'ils sont. Mais pour le soutien, je vais ajouter une étiquette spécifique pour appeler un numéro. Donc je vais faire défiler vers le bas et on y va. Nous avons un dialogue téléphonique ouvert, alors sélectionnons ceci. Comme vous pouvez le voir, c'est une action, sont justes. Et après son nom, je vais le coller. Vous pouvez changer ce numéro de téléphone à ce que vous voulez. Plutôt bien. Et puis nous devons connecter ces icônes de menu hamburger orteil notre menu. OK, alors sélectionnons cette icône et glisse-la comme ça et veut son fils. Donc, je vais sélectionner cet écran de menu. Rappelez-vous, nous avons besoin de connecter tout l'écran il bego glisser et déposer assez bon. Et une chose importante que nous devons changer est le point de départ de nos écrans. Donc, comme vous pouvez le voir maintenant, le point de départ est l'écran de menu, qui n'est pas ce que nous voulons. Alors faisons glisser et déposez l'icône carrée juste là. Donc maintenant ces produits page est notre premier écran. Et après cela, nous devons connecter notre fiche produit à notre page détaillée. Alors connectons-le comme ça plutôt bien. Nous devons également connecter cette flèche gauche à l'écran de nos produits. D' accord. Et maintenant, nous devons ajouter quelques balises pour ce bouton de lecture et ce partage. Je ne peux pas laisser sélectionner ce bouton de lecture. Je vais cliquer sur le design et à partir de la page fiscale, je vais chercher une vidéo ouverte. Ok, rappelez-vous que vous avez différents types de vidéos. Vous avez une vidéo, ce qui est amusant ? C' est une vidéo moins audio. Cet autre endroit quand un utilisateur est sur l'écran de l'application, OK, mais chaque fois que vous voulez lire une vidéo avec de l'audio, vous pouvez utiliser ce hack. Donc, je vais le sélectionner et il est coller après le nom de ce fond. Et ici vous pouvez ajouter n'importe quoi, donc je vais coller un lien ici de vous à vous. On y va. Et c'est tout pour l'icône de partage. Allons à la page des chars Bravo. Et ici, vous avez un dialogue de partage ouvert. Alors choisissons cela, copiez-le et collez-le après le nom de cette icône. Et ici, vous pouvez ajouter n'importe quel U R l que vous voulez Il pourrait être votre site Web, sites de votre client, tout ce que vous voulez. Bon, alors quoi d'autre ? Produits de l'Inde Page, nous avons un composant de carte ici. Ok, Cependant, nous devons ajouter des taxes. Par exemple, ici nous avons deux conteneurs différents pour le 1er 1 Sélectionnez le titre des produits. Ajoutons des crochets. Et entre ces crochets, je vais ajouter un conteneur. Vérifie ce paling. C' est si important et laissez-moi le copier. Et je vais payer la place pour ces cartes de produit aussi, parce que c'est notre deuxième conteneur ici. Je vais ajouter un astérisque pour notre fiche produit parce que plus tard, quand nous nous connectons sont conçus pour Bravo studio. Il est beaucoup plus facile de reconnaître les éléments avec ces astérisques. Et puis je vais ajouter un astérisque pour notre prix pour la courte description et enfin pour notre nom, calque de texte, accord, et dans la page détaillée, nous avons besoin d'un grand cadre. Ok, qui inclut tous nos éléments. Alors sélectionnons notre ami aussi. Et je vais glisser et déposer comme ça. Je vais le nommer cadre et parenthèses à l'intérieur. C' est vrai, Container. Et puis je vais ajouter une série de cul avant notre nom prend Layers ici et pour le prix aussi bien. Et ici, appelons-ça la description. Fantastique. Maintenant, je vais ajouter une autre attaque à cette description, qui s'appelle Flexo. Alors, c'est quoi le flocon ? Tack. Si vous allez aux chars Bravo, je peux vous montrer l'explication exacte. On y va. Donc, chaque fois que vous utilisez la balise flexor, cela va faire en sorte que vos pointes de réservoir s'étendent vers le bas pour alimenter le contenu connecté Y a p I OK, mais vous devez garder à l'esprit que les marques fiscales doivent être l'élément le plus bas du conteneur. Comme notre design. Il n'y a rien après. Ok, donc c'est ajouter attaqué comme So. Alors maintenant, il va croître verticalement, peu importe combien de temps nos impôts sont justes. Et la prochaine chose que nous devons changer, c'est le nom de notre image. Laisse-moi juste l'image, et c'est tout. Bon, maintenant, cliquez sur cette icône de partage. Copier le lien. Allons au studio Bravo. Je vais importer de Fatemeh Coller ici. D' accord. Comme vous pouvez le voir, nous avons un avertissement ici à corriger, mais ce n'est pas un problème. Donc, nous allons vérifier notre application. Et s'il y a quelque chose qui ne va pas, nous reviendrons le réparer. D' accord ? Maintenant, notre design est connecté au studio Bravo, et il est temps de créer notre bibliothèque. Mais cette fois, au lieu d'extraire des données publiques, nous allons créer notre propre base de données. Mais cette fois, au lieu d'extraire des données publiques, D' accord ? Ça va être si simple, croyez-moi. Maintenant ce que je veux que vous fassiez, c'est ouvrir le site Web de la table d'air, donc chaque table est fondamentalement une feuille de calcul. D' accord. Cependant, il est plus flexible, et cela vous permettra de créer votre propre base de données basée sur vos données afin que vous puissiez l'utiliser gratuitement . Assurez-vous de vous inscrire ici, mais pour l'instant, parce que je suis déjà inscrit, donc je vais signer sont correctes. On y va. Maintenant, on est dans notre tableau de bord, ok. Et il y a tellement de fonctionnalités que vous pouvez utiliser. Cependant, pour ces tutoriels, nous allons nous concentrer sur la création d'une base de données simple. OK, Donc, nous allons cliquer sur cette icône plus, qui est appelée à une base. Commencez par le modèle. Et ici, nous avons quelques brochures. Ok, choisissons le produit. Catholique utilisé modèle. On y va. Ici, il est facile. Je vais l'ouvrir. Très bien, Ici, nous avons au moins hors produits avec une image avec un prix avec une description, comme vous pouvez le voir ici, et beaucoup d'autres données. Ce que nous allons faire, c'est extraire ces données dans notre studio Bravo et les lier à notre design. D' accord ? Aimant nos projets précédents, nous allons envoyer une demande A P. I pour cela. Cependant le temps, nous n'allons pas envoyer un ap public je demande que nous allons envoyer une demande AP privée. OK, alors allons-y aider. Une documentation p I est juste. Et maintenant, passons à la section d'authentification. On y va. Élisons ces votre l, qui est votre ap unique. Je me sens ici juste avant le point d'interrogation. Je vais copier et allons au studio Bravo et je vais créer un nouveau qu'une bibliothèque clique sur une nouvelle collection, et je vais écrire la table de zone à nouveau la table Air pour l'enregistrer. Et ici, je vais créer n'importe quelle demande. Changeons son nom en produit. Au moins parce que notre première demande va récupérer des données pour nos produits. Page. D' accord. Pour notre page détaillée, nous créerons une nouvelle demande plus tard. Alors allons que vous êtes tous ici assez bien, mais cette fois, parce que c'est un AP privé, je dois ajouter une valeur clé ici, qui est un peu comme nom d'utilisateur et mot de passe. Ok, pour ces i p I. Donc ce que vous devez faire est d'aller au réglage de votre compte. Et ici, sous la section A P I, vous pouvez générer une clé A p I. D' accord. D' accord. Donc c'est ta clé. Cependant, passons à cette page. Copions donc ce mot d'autorisation. Allez dans Brava Studio et collez-le pour la clé. Et je vais copier et coller la partie aussi. Pour la valeur. Fantastique. Cependant, vous devez changer le point avec votre clé unique à partir d'ici. Je vais le copier et le coller ici, et c'est tout. Envoyez-nous notre demande. On y va. On a des réponses. Alors, de quoi avons-nous besoin ? On a besoin de notre père ou de nos dossiers. Donc disons comme ça. Nous avons besoin de tous. Alors choisissons tout dans le menu déroulant. Nous avons aussi besoin des enregistrements de données I d. Parce que nous allons connecter notre page de produits à notre page détaillée. Ok, donc chaque produit a son i. D.unique D. nous en avons besoin aussi. Nous avons également besoin de l'u R l de chaque image. Alors cochons cette case à cocher. Ensuite, nous avons besoin du coût unitaire, qui est le prix, le nom et la description, et c'est tout. Comme vous pouvez le voir, il est automatiquement sûr de sorte que vous n'avez pas besoin de faire autre chose. Maintenant, passons aux projets. Ouvrez notre design plus nouveau projet, et utilisons notre écran de produits ici à partir de ce menu déroulant. Je vais choisir Air Table vers et de la demande. Nous n'avons qu'un seul produit au moins, ajoutons du contenu. Tout d'abord, nous devons ajouter notre fiche produit parce que ça va se répéter. Alors, allons comme ça. Et maintenant, nous allons utiliser les enregistrements, puis cliquez sur l'icône Bonbons plus. Et ajoutons notre nom, courte description, le prix et notre image. Ok, alors ici, sélectionnons les bonnes données pour notre image. Ce sera l'image des champs de votre l Le prix sera le coût unitaire. La courte description va être celle-là, et le nom sera celui-ci. Fantastique. Maintenant, nous pouvons réellement aller de l'avant et prévisualiser notre application. Donc je vais ouvrir l'application Bravo vision sur mon téléphone. Et chaque fois que vous voulez tester une nouvelle application ou que vous voulez quitter votre application précédente sur Bravo vision, vous pouvez secouer votre téléphone, droite, prévisualiser une application, et nous y allons. Comme vous pouvez le voir, nous avons nos produits avec tous les détails. Cependant, les descriptions ne sont pas les mêmes parce que dans notre base de données, si vous voyez ici, vous pouvez voir que toutes les descriptions sont les mêmes, donc nous pouvons aller de l'avant et les modifier si vous le souhaitez. Et rappelez-vous, si vous faites un changement ici, votre application va changer automatiquement en temps réel. C' est génial, n'est-ce pas ? Alors vérifions ça. Par exemple, je vais changer ce nom. Marjorie Change. Changeons à modérer. Ok, maintenant que secouer mon téléphone et appuyer sur la mise à jour manuelle, qui peut faire défiler là, nous allons, nous avons Modry assez bien. Voyons aussi notre menu léger. Et comme vous pouvez le voir, cela fonctionne parfaitement. C' est incroyable, n'est-ce pas ? Mais que va-t-il se passer si je tape un de ces produits ? Alors utilisons-nous celui-ci. Et, comme vous pouvez le voir, parce que nous n'avons pas fait de demande pour notre page détaillée et que nous n'avons pas lié de données avec nos éléments, cela ne nous montre pas correct, papa, cependant, toutes les autres choses ont parfaitement fonctionné. Alors vérifions notre icône de partage. On y va. Ça fonctionne parfaitement. Bon, Alors maintenant, allons de l'avant et créons une demande pour notre page détaillée. Donc, dans la bibliothèque de données, je vais ouvrir la table d'air 2 et créons une autre requête. Et cela a changé son nom en page détaillée. Et cette fois, nous devons copier le même que votre I ici. Mais cette fois, nous devons ajouter quelque chose après ce mot de meubles. Ok, ajoutons une barre oblique vers l'avant un signe de dollar pour s'occuper des parenthèses Lee et à l'intérieur, c'est vrai, je dir. qu'est-ce que ça veut dire ? Cela signifie que nous envoyons une demande afin d'obtenir des produits avec des identifiants uniques. Si vous vous souvenez Nous avons bien sélectionné les idées d'enregistrement ici afin de les connecter à notre page détaillée. Ok, donc nous avons besoin d'idées spécifiques. Eh bien, pour l'en-tête, nous avons besoin de la même chose. Je vais les copier et les coller ici sont justes. Et il reste encore une chose à faire. Allons à la liste des produits. Et ici, je vais sélectionner les sorties sélectionnées. Et comme vous pouvez le voir, nous avons un enregistrement de données, accord ? Et c'est déjà alors sélectionnons cela. Je vais le copier. Allons à la page détaillée et dans le périmètre. C' est vrai. Je suis là. Rappelez-vous qu'il ne devrait pas être capitalisé. Et pour la valeur, je vais suivre les prises qu'on vient de copier assez bien. Et maintenant, envoyons notre demande. On y va. On a ses réponses, et cette fois on a besoin du père. a Onabesoin des images. Tu es moi, on a besoin de l'unité. Coût la description du nom, et c'est tout. OK, revenons maintenant à nos projets, et je vais sélectionner l'écran de détail ici parmi les collections. Je vais sélectionner la table de zone deux, et ici nous avons maintenant deux demandes qui sélectionnent la page détaillée et ajoutent du contenu ici. Ajoutons notre image, notre prix, notre description et notre nom assez bon. Et maintenant, nous allons les trouver sans données. Donc, le nom doit être connecté au champ disant que la description est connectée à sent description déjà, et le prix doit être connecté aux champs, coût unitaire et l'image aux images. Vous êtes L. R. Right . Et maintenant, sélectionnons les sorties sélectionnées dans notre demande de page détaillée. Et ici, comme vous pouvez le voir, nous avons la capacité idéale. Cependant, il est capitalisé. Alors, on va te changer, orteil. Je d. D'accord, alors maintenant allons à notre demande de moins de produit et sélectionnez une sortie sélectionnée. Et ici, nous avons des enregistrements de données. Ok, on doit changer son étiquette pour « I d. mais rappelez-vous qu'il ne devrait pas être capitalisé. D' accord ? C' est si important. Revenons à notre projet, et je vais ouvrir l'application Bravo Vision permet de secouer le téléphone et d'appuyer sur la mise à jour manuelle, et je vais taper sur une de ces cartes. On y va. Maintenant, cela fonctionne parfaitement. Je vais sélectionner le modéré comme vous pouvez tout voir. C' est bon. C' est incroyable. N' est-ce pas ? Laisse-moi ouvrir le menu. Et si j'appuie sur le support, vous pouvez voir qu'une collection pompe immédiatement. Plutôt bien. D' accord. Maintenant, comme vous pouvez le voir, chaque fois que nous mettons à jour nos bases de données de table, OK, ici. Nous devons mettre à jour l'APP manuellement. D' accord ? n'y a aucun moyen de le mettre à jour directement dans la loi. Donc on va résoudre ce problème dans une seconde. Allons à notre Fatemeh. Et là, on va ajouter une nouvelle touche. Je vais aller à Bravo Tanks, Page, et je vais te montrer un nouveau char incroyable, qui est une piscine à rafraîchir. C' est un double clic sur ce tapis, et je vais le coller ici à la place sur le nom du produit comme ça. Maintenant, nous venons d'ajouter le pool pour actualiser la fonctionnalité à notre application. Donc, un de chaque ajouter un nouveau produit ici ou nous supprimons cela et l'utilisateur actualise la page ici, l'utilisateur peut voir les changements que nous avons faits immédiatement. C' est plutôt intense. Nous pouvons également l'ajouter à cette page. Plutôt bien. Gardions ces noms juste avant ces chars pour garder tout organisé. Donc je vais ajouter des produits ici et des détails juste ici. Ok, alors regardons notre application une fois de plus. Cependant, avant cela, nous devons appuyer sur mise à jour Ici sont en ce moment. Si je tire vers le bas, vous pouvez voir l'indicateur de chargement, qui indique que cette page est rafraîchissante précédente, euh, également dans notre page détaillée, la même chose se passe. Très bien, les gars, c'est tout pour cette vidéo. Merci beaucoup d'avoir regardé ça. J' espère que ça vous a plu. Et je te verrai dans la prochaine vidéo, alors on se voit là-bas. 8. Ajouter d'autres fonctionnalités à votre application: Salut, tout le monde. Et bienvenue à une autre vidéo sur les partitions de cette vidéo, nous allons ajouter deux écrans de plus à notre projet parce que je veux vous montrer les autres fonctionnalités des chars Bravo. Alors appuyez sur un sur notre mot clé. Je vais ajouter N'importe qui est pauvre à notre toile, et je vais me renommer en promotions. Fantastique. Allons de l'avant et sélectionnez ces conteneurs copiés et collés là-bas à l'aide de la commande. Voir ou contrôler C et contrôler être. Et je vais supprimer ces léger menu sur Renommer moi en promotions assez bon. Je vais renommer ces titres ainsi que le titre Promotions. Fantastique. Tiens, je vais ajouter un rectangle. Assurez-vous qu'il a un cadre. Alors faisons un clic droit sur cela. Permettez-moi d'augmenter son chef de taille. C' est plutôt bon. Droit ? Cliquez dessus et cliquez sur la sélection de cadre. Fantastique. Je vais l'appeler Animation. D' accord. Je vais tellement méchante. Assurez-vous que ces conteneurs sont alignés. Ou n'oubliez pas d'ajouter également la balise conteneur. Plutôt bien. Laisse-moi le déplacer. Fantastique. Maintenant, je vais vous montrer comment vous pouvez ajouter beaucoup d'animation à votre écran. Alors, nous allons chercher des animations Lottie et voilà. Je vais l'ouvrir. C' est un excellent site pour trouver des animations cool, et à partir d'ici vous pouvez télécharger des animations gratuites. Choisissons celui-là, et nous avons besoin de la balise Lottie ici. Alors d'abord, copions. Je vais coller ici. Fantastique. Encore une fois, copions ceci votre l et collez-le juste là. Plutôt bien. Donc, à coup sûr, notre animation sera jouée. Mais avant de vérifier que c'est sur un autre écran. Appuyez sur un sur notre clavier et ajoutez un autre notre port ici. Je vais me renommer en site Web, et c'est un rectangle comme ça. Et cette fois, je vais utiliser ce char Web EU qui est copié et collé. Ici. Tu peux mettre ce que tu veux vraiment. Par exemple, nous pouvons vous écrire point com. On y va, et c'est tout. Avant de tester notre application, nous devons nous rappeler de connecter ces deux écrans orteil sont nombreux Ok, alors nous allons sélectionner ce menu diapositive écran pourrait devenir prototype, et je vais choisir des promotions qui est connecté aux promotions et le site qui est connecté au site Web. Maintenant, mettons-la à jour pour ouvrir une fois de plus l'application Bravo vision sur votre téléphone fonctionné manuellement ou vous pouvez à nouveau prévisualiser. On y va. Ouvrons le menu léger et choisissez des promotions. Pouvez-vous voir comment incroyables et faciles thés pour ajouter une animation à votre AMP. C' est plutôt cool, n'est-ce pas ? Maintenant, allons-y site Web et ici, il est facile. C' est le vous à vous et vous pouvez voir que toutes ses fonctionnalités fonctionnent parfaitement sont les bons gars que la zone pour ces vidéos. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 9. Publier votre application iOS et Android: Salut, tout le monde. J' espère que tu vas bien dans cette vidéo. Je vais vous montrer comment vous pouvez obtenir vos paquets APP afin de publier votre application sur l' APP Store ou sur le placé, ou c'est si cool, n'est-ce pas ? Tout d'abord, ouvrons votre studio Bravo. Et comme vous pouvez le voir, je suis dans la section Tableau de bord et je choisis l'application que vous voulez publier. Ok, je vais choisir le design plus le nouveau. Et ici, en haut, vous avez une option appelée Télécharger les paquets groupés APP. Ok, je vais cliquer dessus. Et il y a une brève explication sur le processus de publication de votre application. Ok, donc vous pouvez demander vos paquets groupés pour nous et Android séparément ici, et cela pourrait prendre jusqu'à 24 heures. Pourtant, l'équipe Bravo prépare le paquet pour vous et vous l'envoie. D' accord ? Ça va être envoyé à ton email. Maintenant, ouvrons le site Bravo Studio. Et comme vous pouvez le voir, ils ont mis à jour leur page de destination. Donc, en haut, vous pouvez voir le bouton d'apprentissage. Je vais cliquer dessus. Et à partir d'ici sous la ressource est la section Je vais ouvrir le guide de publication APS démissionner . D' accord. Et puisque la thèse ne va vraiment pas se concentrer sur le processus de développement, je ne vais pas passer par tous les détails ici. Cependant, je vais vous voir comment vous pouvez publier votre application. Ainsi, lorsque vous avez reçu vos paquets groupés de l'équipe Bravo, vous pouvez publier votre application sur l'APP Store ou le Play Store. Ok, si vous voulez publier la version américaine, vous devez avoir un ordinateur de maquereau. D' accord ? C' est un must have. Et aussi, vous devez faire partie du programme de développement Apple. C' est un programme basé sur un abonnement que vous pouvez vérifier les chiens à partir de ce lien. On y va. On peut aller de l'avant et vérifier. Et vous pouvez également utiliser différents services tels que le site web fast lane, qui va publier votre application pour vous. Assurez-vous de suivre ces guides étape par étape. Et aussi, si vous voulez publier votre application sur le Play Store, vous devez télécharger le studio Android, qui est disponible pour Windows et ma classe. Et vous pouvez suivre les étapes ici. Très bien, les gars, c'est tout pour la sénatoriale D. J' espère que ça vous a plu. Assurez-vous d'écrire votre opinion à ce sujet dans la section de révision afin de me faire savoir ce que vous pensez. Si vous voulez en savoir plus sur Fatemeh et que vous voulez devenir concepteur d'interface utilisateur, assurez-vous de consulter mon autre cours, qui s'appelle Apprendre les pieds. Essentiels de conception de mon interface utilisateur. Vous êtes UX design. Il est disponible sur le maillot d'adresse, et je suis sûr que vous l'aimerez encore une fois. Merci beaucoup d'avoir regardé ces tutoriels, et j'espère que je vous vois dans d'autres cours.