Converta seu design do Figma em um aplicativo nativo de iOS e Android sem programar — Design de UI/UX

1. Introdução: você já quis converter seus pés mais protótipos em um aplicativo nativo Rus e Android ? Se sim, você está no lugar certo. Oi, Meu nome é uma erupção cutânea e eu sou um designer UX nas pontuações, você e eu estamos indo para projetar e criar três prêmios re diferentes APS juntos, um aplicativo de contato e RSC PM, e um seguro justo sem corte. Você me ouviu agora, com a ajuda da plataforma Bravo, é possível realmente converter seus pés. Meu projeto em APS nativo rapidamente. E a boa notícia é que você pode publicar seu aplicativo na loja de aplicativos ou local. Ou até o final do curso, você vai aprender como fazer aplicativos riel mundo que estão conectados a um banco de dados usando a Bravo Story uma plataforma. Então, se você está pronto para subir de nível, suas habilidades estão vendo aula 2. O que é Bravo?: Oi, todo mundo. E bem-vindos de volta a outro vídeo deste curso neste vídeo, vamos falar sobre Bravo. O que é Bravo? Bravo é uma plataforma online que é você. Transforme seus protótipos de figuras em aplicativo nativo Rus e Android. Incidente. Não é necessário citar. É incrível, não é? Mas como funciona? Bravo usa tags especiais para dividir o design do seu aplicativo em diferentes partes. Por exemplo, se você tem uma barra de navegação e ela precisa ficar na parte superior da tela, podemos usar sua tag específica para fazer isso. Onde você deve escrever esses tanques deve no tanque que você quer usar após o nome fora de sua camada na camada leste Nos vídeos caindo, você aprende a usar esses tanques em seu projeto, então veja que 3. Crie um aplicativo de RSVP: Oi, todo mundo. E bem-vindos de volta a outro vídeo das partituras. Neste vídeo, vamos criar um simples aplicativo R S V P, que vai estar coletando alguns dados. Para fazer isso, precisamos criar uma conta no estudo Bravo, um site que é chamado bravo studio dot app. Então o que eu quero que você faça é ir em frente e abrir este site e aqui você pode facilmente se inscrever. Perfeito. E com certeza, você precisa ter uma façanha. Minha conta e ser mencionado que usar Bravo é totalmente gratuito. Então você não precisa pagar nada por esses serviços, o que é incrível. Tudo bem. E então você pode se inscrever com seus pés, minha conta ou com sua conta do Google. No entanto, sugiro que assinem a minha contagem, porque mais tarde, é muito mais fácil conectar nosso figo, meu design ao estúdio Bravo. Então vamos em frente e clique e inscreva-se no Vignal. Muito bom. E aqui está pedindo sua permissão e eu vou clicar em permitir acesso muito bom. E lá vamos nós. Quando você assinar primeiro, você tem três projetos para criar. No entanto, se você quiser obter mais, você pode facilmente se referir aos seus amigos. E se eles se inscreverem, podem obter mais projetos. E agora é hora de nos levantarmos. Minha conta. Lá vamos nós. Na verdade, o objetivo deste curso é dar a você a capacidade de converter seus protótipos de produto em um IRS nativo e Android. Então não vamos falar sobre design especificamente nas partituras. Então, antes de tudo, como você adivinha, precisamos ter um quadro de arte. Então eu vou pressionar um na minha palavra chave e no seu lado direito, nós podemos escolher entre diferentes dispositivos. Certifique-se de usar uma placa de arte de dispositivo móvel porque o estúdio Brahma é feito para criar aplicativos móveis, não sites. Ok, então eu vou em frente e escolher o iPhone 11 pro ou ex, fantástico. E deixe-me clicar duas vezes em seu nome, a fim de me renomear para R S V. P. Uh, muito bom este projeto vai ter apenas uma tela. OK, agora, vamos em frente e mudar a cor de fundo para algo como azul escuro. É muito bom. E depois disso eu vou selecionar texto pressionando chá no meu teclado e rangendo aqui. Fantástico. Vamos à direita. Bem-vindo de volta. Vou mudar sua cor para branco e vamos torná-la maior. Então eu vou definir o tamanho do fundo para 60 pontos muito bom. E deixe-me diminuir o com fora desta camada de texto. Eu acho que se eu diminuir a fazenda, tamanho seria melhor para é muito bom. O título de topo vai ser 90 e é deixado. Patting vai ser 40 estão certos. E agora vou em frente e criar um retângulo como este. Vamos arrastar e soltar muito bem. E também posso aumentar o raio do canto para 20. Fantástico. A cor deste retângulo não importa, porque mais tarde, vamos colocar sempre. Você estava em cima deste retângulo? Ok, estão certos. Fantástico. Há uma coisa que você precisa ter em mente. E é assim que a Bravo pode reconhecer diferentes partes do seu aplicativo. Ok. Como já mencionei no vídeo anterior, Bravo usa alguns tanques para dividir a tela do aplicativo em diferentes partes. Ok, um desses tanques é chamado de contêiner. Então, por exemplo, aqui precisamos ter um contêiner, que é a tela inteira, porque não vamos repetir essa tela novamente e novamente. Então o que eu vou fazer é selecionar o quadro para a direita no topo. E isso é Dragon Drum para cima, nerd. Dois pés, a tela inteira Fantastic está certa. O nome não importa aqui. Como eu disse antes, vamos carregar uma página aqui. Mas que tipo de página web? Eu não tenho certeza se você está familiarizado com o site formulário tipo ou não, Mas deixe-me dar-lhe uma breve explicação sobre esta grande plataforma. Na verdade, tipo formulário é uma plataforma online que permite criar formulários dinâmicos, a fim de coletar dados de seus clientes ou de seus clientes que podemos criar. Pesquisas podem criar formulários diferentes. Você pode até aceitar pagamentos. No entanto, nestes tutorial, você vai usar um formulário de tipo simples, a fim de coletar alguns dados e tipo formulário irá salvar esses dados para nós gratuitamente. Isso é muito legal. Então, primeiro lugar, certifique-se de se inscrever no tipo de formulário que calma e com caneta livre. Você pode criar até três formulários e você pode obter até 100 respostas por mês, que é bastante aceitável para o propósito deste curso. Então, primeiro de tudo, o que eu quero que você faça é clicar no novo tipo quatro, e aqui você tem acesso a diferentes modelos. Você pode abrir, por exemplo, formulários e inscrições. Lá vamos nós, e há duas opções aqui. Vamos clicar no modelo de formulário de inscrição on-line, o certo Muito bom. Aqui, você pode visualizar seu modelo, como você concede, nós Olá para nós e vamos clicar e entrar em contato. Vamos começar pelo seu primeiro nome. Vamos escrever uma erupção cutânea, um direito chapéus uma droga e seu endereço de e-mail perguntado no test dot com, e aqui você pode escolher um país. Não importa qual país você escolher e registrar minhas informações. Perfeito. Então é basicamente assim que o tipo de formulário funciona. E agora vamos em frente e clicar em. Use este modelo muito bom aqui. Você pode criar perguntas diferentes com base em suas necessidades. Podemos mentir constantes alguns fora. Os professores são pagos, mas não precisamos trabalhar com esses recursos pagos por enquanto. Então o que eu vou fazer agora é clicar neste ícone de design Fantástico, e vamos personalizar. E aqui você pode personalizar seu formulário como quiser, o que é muito legal, não é? Primeiro de tudo, eu vou mudar a cor de fundo porque se eu voltar para o nosso design MMA figo, nós usamos uma cor azul escuro. E quando você está carregando essa idade de reputação aqui, não é tão legal ter um fundo branco aqui. Então o que eu vou fazer é selecionar a tela inteira. Eu vou copiar o código de cor da seção de combustível, e ele voltou para o nosso formulário de registro no tipo de formulário tão calmo. E aqui vou eu abrir essa cor Bagram. E vamos acelerar este código aqui. Fantástico. A próxima coisa que precisamos mudar é a cor das perguntas. Acho que se mudasse para esposa, seria ótimo. Agora vamos clicar em publicar, você sabe, você sabe, para publicar suas alterações e, em seguida, e vamos clicar em Salvar como Nova Coisa que ele salvou. Mais uma vez, isso é publicá-lo fantástico. E se eu me conectar, você pode ver que você pode conectar sua conta de formulário de tipo dois serviços diferentes, como Google sheets, Google analytics, etc. Podemos até conectar-se à sua conta de mesa aérea, o que é bastante útil. E usaremos este site em nossos próximos projetos. Acredite em mim, vai ser tão interessante. Tudo bem, agora, vamos compartilhar. E aqui está a nossa ligação. Agora é hora de ir para os tanques Brambles. Página. Ok, então se você abrir site do Brother Studio Dot e você rolar para baixo até o final da página na seção de rodapé , podemos ver o link de aprendizagem sob a seção de recurso é. Então eu vou clicar nisso. Você também pode obter acesso a esta página usando este guia de ajuda. Fantástico. E na seção conceito, você pode abrir tanques Bravo. Então vamos clicar nisso. Lá vamos nós. E aqui está pelo menos fora dos tanques Bravo que você pode usar em seus projetos. Neste projeto, vamos usar uma arma. Você está bem? Lá vamos nós. Aqui está o nosso elemento. E aqui está o nosso tanque. Então eu vou clicar duas vezes sobre isso copiado e sua cabeça sobre o nosso projeto figura. E aqui está um retângulo. Vou clicar duas vezes nisso. Vamos renomear-me para você. O nome não importa, então você pode escolher o que quiser, e eu vou colar nosso componente. E por último, mas não menos importante, precisamos copiar este link do formulário de tempo que vem e vamos colá-lo aqui, bem ali. Natureza para colar o link no lugar certo logo depois disso, Colin. E isso é O. Mas como você pode checar seu aplicativo? É tão simples. Primeiro de tudo, vamos em frente e mudar seu nome para R S V P. New. E então eu vou clicar e compartilhar e ka peeling, em seguida, ir para Brava Studio e clicar em Importar de Fig. MMA e vamos colar o link aqui. Importar. Vai levar um momento, e lá vamos nós. Agora você é o Projeto FEMA. Está conectado com sucesso ao seu estúdio Bravo. E, a fim de visualizar seu aplicativo em seu telefone, você deve baixar o aplicativo Bravo visão em seu telefone. Se você puder, você pode visualizar o ícone no seu lado direito. Existe um código Q R. Ok, este é o código de cura do seu aplicativo, e se você quiser uma pré-visualização em um iPhone, você pode clicar em discernir. Não está na loja APP ainda, no entanto, pode baixar o entanto, aplicativo de vôo de teste e, em seguida, você pode em Seul o aplicativo Bravo visão facilmente . E se você quiser usar um dispositivo Android, você pode obter o aplicativo na loja de jogos. Quando você tem o aplicativo, você pode abri-lo e, em seguida, você vai ver dois fundos diferentes. O primeiro é chamado de Visualizar um APP, e o segundo 1 é chamado de C Scan APS. Vamos clicar em Visualizar um aplicativo Fantástico. E como eu posso ver, agora você pode escanear seu código de cura para que a senhorita possa fazê-lo. E lá vamos nós agora. Como você pode ver, seu formulário de tempo é baixo que em seu aplicativo, o que é muito legal. E se você clicar pode entrar no botão de toque, você pode ver que ele funciona perfeitamente. Então eu vou escrever meu nome, meu sobrenome e um endereço de e-mail. É você, o país, submete-se aleatoriamente. E isso é tudo. Foi muito legal, não foi? Mas onde nossos dados são salvos. Se você voltar para sua conta de formulário de texto, há outro toque chamado resultados. Então eu vou clicar sobre isso e lá vamos nós aqui temos uma resposta, e se você for para respostas aqui, podemos ver sua resposta. Você também pode baixar todas as respostas aqui. E a grande parte é que sempre que você decidir mudar algo em seus quatro, por exemplo, se você for criar e quiser mudar algo aqui, isso mudará imediatamente em seu aplicativo. É incrível, não é? Muito bem, pessoal, isso é próprio para estes vídeos. Espero que ele tenha gostado e eu vou vê-lo no próximo vídeo. 4. Crie um aplicativo de contato: Oi, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos em frente e criar um contato menos juntos. No entanto, desta vez você vai usar um A P I, a fim de extrair alguns dados de um servidor. Está bem, mas não te preocupes, vou tornar isto tão simples para ti ser enviado. Então, primeiro de tudo, vamos em frente e abrir Sigma. E aqui eu acabei de criar um novo projeto chamado Contact That. Ok, vai ter uma única tela. Então, vamos pressionar um no nosso teclado e eu vou inserir um novo quadro de arte. Vamos escolher o iPhone 11 pro ou ovos muito bons. E é chamado de contato. Fantástico. E no nosso contato, pelo menos, vamos ter alguns cartões. O que retém a informação dos nossos contactos. Então vamos supor que vamos colocar o nome e sobrenome e também o endereço de e-mail fora de nossos usuários. Ok, então, primeiro de tudo, precisamos criar um cartão. Vou em frente e escolher o retângulo da barra de ferramentas, e vamos arrastar e soltar assim. Fantástico. Vou alinhá-lo ao centro ou é totalmente. E como você pode ver, o bloco direito e esquerdo. Ings são dito a 24 pixels, o que é bom. Vou mudar o máximo para 80. Fantástico. E então vamos aumentar o raio para 10 como este, e eu vou definir a cor para branco muito bem. Como podem ver, é invisível porque não temos sombras. Então eu vou adicionar efeitos e essa cidade para cair sombra. E eu vou definir a quantidade de Blair para 20 e de eu montante para 10 muito bom em. Vamos diminuir a capacidade para 10% ou até menos. Vamos definir para 5%. É muito bom. Você também pode adicionar golpeado a ele. Então eu vou adicionar traço e vamos diminuir sua espessura para 0,5 muito bom. Você pode mudar sua cor para o que quiser, mas por enquanto é incrível. Agora precisamos pegar os caçadores, o primeiro 1 para o nosso nome e sobrenome e o segundo 1 para o nosso endereço de e-mail. Então eu vou colocar chá no meu teclado. É o Quicken aqui. Isso é certo. Nome e sobrenome que diminuíram o tamanho da fonte para 18 pontos. Fantástico. Vou movê-lo para o lado esquerdo. É esquerda e top títulos vão ser 16 células de porco como este e deixe-me mudar o caminho para médio. Eu vou duplicá-lo, movê-lo para baixo, e o preenchimento entre eles vai ser seis grandes células. Acho que está tudo bem. E agora vamos mudar o caminho para o normal. E aqui, vamos escrever e-mail. No entanto, em mente que não temos informações sobre o tamanho do nosso nome e sobrenome e também o endereço de e-mail. Então vamos aumentar o com fora do nosso texto. Camadas como esta fantástica e esta também. Muito bons estão certos. Está tudo bem. Agora. Vamos selecionar todas essas camadas e clique com o botão direito e uma dessas camadas e escolher a seleção de quadros . Como já mencionei antes, você precisa estruturar seu aplicativo de uma forma que Bravo possa entender facilmente. Ok, então este cartão é um contêiner. Vou mudar o nome dele para o mínimo e entre parênteses. Vamos escrever recipiente e estamos basicamente feito. No entanto, uma coisa mais importante, como podemos ver o quadro que acabamos de criar, é não tocar qualquer fora das bordas do nosso quadro de arte, e isso é um problema porque Bravo pode reconhecer um recipiente sempre que pelo menos um dos bordas fora de cada quadro toca a placa de arte. Ok, então aqui podemos facilmente corrigir este problema aumentando o com fora deste quadro. Então vou aumentar assim. Fantástico. E depois vou mostrar-te um bom truque. Vamos selecionar todos os nossos elementos mantendo a tecla Shift pressionada no teclado. Agrupe-os pressionando o comando G. Se você estiver usando Mac ou controle. Puxa, se você está usando janelas e aqui temos um grupo. Agora vamos alinhar ao centro horizontalmente e mais um ponto importante que você precisa ter em mente . Bravo não deixa você entrar em almofadas para seus elementos no Brava Studio. Então você precisa prever seu preenchimento com antecedência. Por exemplo, aqui supostamente que começamos a duplicar estes cartão ok, porque não temos qualquer preenchimento. Vai ficar assim. Certo, o que não é o que queremos. Então precisamos adicionar algumas almofadas a ele, a fim de deixar claro. Então vamos aumentar a altura do nosso contêiner também. Como este. Eu acho que é ótimo, estão certos. Isso é tudo por enquanto. Vamos em frente e pegar o link. Vou copiá-lo. Vou para Bravo. O estúdio importa de pés. Mamãe, vou colar aqui. Importe. E lá vamos nós. Agora nosso design está conectado ao Bravo Studio, mas não faz nada. Como podemos adicionar algumas funcionalidades para comer? Como mencionei anteriormente neste projeto, vamos usar alguns olhos AP. O que está em um P I Ap I significa interface de programação de aplicativos. Alguns de vocês podem não ter ideia do que é. Então deixe-me explicar isso para você em palavras simples. Suponha que você está em um restaurante e você quer pedir algo para comer. Quando você pede, seu pedido deve ser transferido para a cozinha. Certo? Então, a pessoa que transfere seu pedido para a cozinha é chamada de A P i ou um garçom em um restaurante. Então um p. Eu é basicamente um mensageiro que vai enviar um pedido para o servidor e, em seguida, leva a resposta para você também. Tudo bem, isso é suficiente para uma teoria. Então, agora vamos entrar nisso. O que eu quero que você faça é abrir o Google e olhar para Jason Placeholder e clique no primeiro inning. Lá vamos nós. Este site fornece-nos com o amigo público olhos AP. Na verdade, temos diferentes tipos de olhos AP, por exemplo, que têm olhos públicos ou privados. Mas para você como designer, não é importante mergulhar nos pontos técnicos. No entanto, você deve saber que, com a ajuda de um A p I, você pode receber alguns dados de um servidor remotamente Ok, logo ali sob o recurso é seção. Você pode ver que temos recurso diferente é, tais como postagens, comentários, álbuns, fotos para fazer usuários e estes são os números são respostas. Ok para esses projetos, você vai usar o último, que é chamado de usuários. Então, vamos abri-la. Lá vamos nós. Como podemos ver aqui, temos alguns técnicos que estão estruturados estranhamente para aqueles de vocês que não sabem como se chama a estrutura. Gostaria de dizer que se chama Jason. Ok, Jason significa notação de objeto JavaScript, e isso nos ajuda a acertar os dados dela de uma maneira clara. E também nos ajuda a recuperar e ler dados facilmente. Ok, então como você pode ver aqui, nós temos nome, nome usuário, endereço de e-mail e em endereço. Temos o código C T Z, etc. Então o que eu vou fazer é selecionar o link que foi copiado e voltar para o estúdio Brava. E desta vez, em vez de ir para a seção de projetos, vou para a biblioteca de dados. Então vamos escolher isso. Como você pode ver, eu já adicionei algumas coleções de dados para testar coisas. Então clique na nova coleção e seu nome. Entre em contato com a descrição não importa. Contate-se também. Isso salvou. E lá vamos nós aqui, você pode criar um pedido. Como já expliquei antes, enviaremos um pedido para obter algumas respostas. Então, vamos clicar neste ícone azul. Lá vamos nós. E você pode alterar o nome do seu pedido aqui. Então eu vou renomear também Contato Menos Fantástico. Eu vou remover estes u r l e vamos acelerar o u r l que acabamos de copiar do site Jason Placeholder. E porque este é um AP público, eu não temos que fornecer ao estúdio Brahma nenhuma senha ou digamos chave, Ok, então podemos simplesmente ir em frente e bacon enviar a nossa direita. E agora, como podem ver, temos algumas respostas aqui. Parece complexo. Eu sei, mas acredite em mim, é tão simples. Então, como você pode ver, nós temos dados que eu d que um nome, nome usuário, endereço de e-mail e todas essas coisas que acabamos de ver. Por exemplo, como você pode ver, eles têm um nome. E aqui você pode ver o nome da idéia Juan como este por causa do fato de que estamos recuperando todos os 10 registros. Como podem ver aqui, temos 10 IDs diferentes. Precisamos selecionar todos a partir desta queda muitos. Então eu vou selecionar tudo e vamos verificar este Jake Marks. Então precisamos selecionar o nome e também o endereço de e-mail, e isso é tudo. Então, o que mais devemos fazer? A última coisa que precisamos fazer é vincular nossos dados de recuperação para nosso projeto. Então vamos para projetos. E aqui temos o empreiteiro. Vou clicar nesta tela de contato e aqui temos que soltar menus, coleções e solicitações. Então, a partir de coleções que calça o contato abd e acabamos de criar e a partir de pedidos temos apenas um. Vamos usar o contato menos muito bom e eu vou clicar no botão adicionar conteúdo. Fantástico. A primeira coisa que precisamos acrescentar é o mínimo. Como você pode ver, é indicado que este é um quadro, e se você se lembra, nós criamos um quadro aqui. Então eu vou clicar no vazamento de agradecimento em qualquer lugar fora desta janela. Fantástico. E a partir deste menu, vou ligar estes pelo menos dois dados. E se você esperar um segundo, você pode ver que um ícone de adição aparece imediatamente. Então eu vou clicar nisso. E agora precisamos adicionar nome e sobrenome e endereço de e-mail. E como você pode ver, o e-mail é automaticamente conectado ao e-mail e precisamos alterar o nome e sobrenome para nome. E isso é Oh, então agora se a pré-visualização do nosso laboratório, você pode ver que nós não temos tanto espaço em branco no topo, então como podemos fazer proezas que vamos aos pés devem projetar, e aqui no topo, eu sou vai criar outro contêiner, que é invisível. Então vamos criar um retângulo como este. Vou mover estes contentores para baixo e isso é aumentar o seu alto para algo como isto. E lembre-se, quando você está trabalhando com Bravo, seus quadros não devem se sobrepor um ao outro. OK, então certifique-se de que eles estão alinhados perfeitamente assim. E eu acho que é uma boa idéia adicionar um pouco de topo para o nosso contêiner. Então eu vou escolher este filme de grupo para baixo. E lembre-se, Grupo Língua. Está tudo bem assim. E isso mudou a cor deste recipiente. Vou pôr o dedo do pé branco já que queríamos ser invisíveis. E agora vamos clicar com o botão direito sobre isso e escolher a seleção de quadros para criar outro quadro. E eu vou renomear-me para Top Frame e entre parênteses. Vamos contêiner direito. Fantástico. Agora vamos para Brava Studio e interno para atualizar seu aplicativo. Você deve sempre clicar em atualizações muito bom agora. Se você visualizar seu aplicativo, você pode ver que temos um espaço negativo na parte superior, que é exatamente o que queremos. Está certo, pessoal. Muito obrigado por assistir este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. Então vejo você então 5. Crie um aplicativo de móveis - parte 1: Oi, todo mundo. Neste vídeo, vamos projetar um aplicativo de móveis na Fig. MMA, a fim de conectá-lo ao estúdio Brava e extrair dados da Air Table. Então, primeiro de tudo, vamos criar um projeto de invenção e eu vou nomear necessidades design Los New Perfect. Você pode nomeá-lo, o que quiser. E então eu vou pressionar um no meu teclado e isso é sapatos e iPhone 11 pro ou Eggs Art Board. Fantástico. Na verdade, vou manter isso tão simples. Então não vai ter tantos quadros de arte. Vou ter uma tela de lançamento, o menu de slides, uma tela de produtos. E então vamos adicionar uma tela de promoção de tela de detalhes e, eventualmente, você tela OK, então vamos começar a criar nossa tela de lançamento. Então, primeiro, vou mudar o nome para tela de lançamento. Precisamos voltar a esses nomes e adicionar alguns tanques no final. Mas por enquanto, vamos deixar como está. Então vamos criar um logotipo simples aqui, então eu vou criar um retângulo. Vamos manter a mudança no teclado e na gota de dragão. Vou fazer 105 5 105. É uma linha para o centro e vou aumentar o raio da curva para 30. Fantástico. Então vamos mudar o campo para 20 para 22 22 22. Fantástico. Vou movê-lo para cima. Então vamos adicionar uma letra D aqui. Então eu vou pressionar o e vamos mudar sua cor para Branco. Vou mudar o tamanho do telefone para 65 pontos. Incrível. Então vamos adicionar outra camada de texto e adicionar um sinal de mais. Vou mudar o caminho para Regular, e isso mudou uma cor para duplo F D 600. Fantástico. Então está certo. Clique nisso e eu vou fazer um esboço. Ok, então não é mais um texto que seu, eu vou torná-lo menor, muito bom. E então precisamos ter uma camada de texto logo abaixo do nosso logotipo. E vamos chamá-lo de design. Além disso, vou torná-lo menor. Então vamos definir para 24 pontos e alinhar para o centro Muito bom. Eu vou selecionar todas essas camadas, agrupá-los pressionando o comando G ou controlado G. Se você estiver usando janelas e esse é o nome do logotipo e, em seguida, selecione ambos os seus anos mais uma vez , agrupá-los e deixá-lo como ele facilidade estão certos. Muito bom. Um acho que você precisa ter em mente é que esta tela de almoço não vai afiar no aplicativo Bravo visão. Ok, nós só criar é para o real realmente aplicativo sempre que você quiser publicar o seu aplicativo, a loja de aplicativos ou loja de jogos. Ok, então vamos em frente e projetar nossa tela de menu. Ok, então eu vou duplicar esta tela do almoço e isso é remover esses elementos. Vou renomear-me para menu por enquanto. E vamos mudar a cor para algo de cabelo escuro um pouco bom. E o que eu vou fazer é criar o menu de snipe. Então eu preciso de um retângulo que é arrastar e soltar assim muito bom. Vou mudar sua cor para um branco sólido. E vamos mudar o com 2281 e então eu vou aumentar o brilho do canto para 20. No entanto, certifique-se de definir o raio do canto desses dois cantos. Superior esquerdo e inferior esquerdo para zero. Ok, então eu vou clicar no ícone do Andy e vamos definir esta quantidade de zero e esta quantidade era o Irã onde está certo. E agora precisamos adicionar uma imagem de perfil bem ali no topo. Então eu vou ir em frente e criar um retângulo aqui que defina sua com e alta para 50. Fantástico. E então vamos aumentar o raio do canto para 18 assim. E agora precisamos de um e-mail. Então agora eu vou usar um plugging chamado conteúdo riel. E se você não tem essa conexão, certifique-se de ir para o menu plug INS e gerenciar plugins pode facilmente encontrar a árvore de conteúdo de plugging e em coisas. Tudo bem, então agora vamos executar o plugging fantástico e vamos clicar na cidade dos Avatares. Eu vou clicar em fêmea assim, e então vamos adicionar um nome e um nome de usuário. Ok, então eu vou escrever para Emma, na verdade. E como podem ver, estou usando um fundo para o robô. Vamos mudar seu caminho para médio, e eu vou definir o tamanho do fundo para 16 pontos. Realmente bom. O estofamento da esquerda vai ser uma escolha. Parece que vou duplicá-lo pelo comando D ou controle. O Se você estiver usando o Windows, vamos movê-lo para baixo e eu vou escrever um uso cedo. Estão certos. Vamos direto para Emma sublinhar Ashley. Mas desta vez vamos mudar o caminho para Regular e o tamanho do fundo para 14 pontos. Então eu vou torná-lo um pouco mais leve. Então vamos mudar para algo assim. Sete. C sete c e sete c. Muito bom. Então esse é o grupo. Estes dois levam camadas, e eu vou selecionar o nosso lugar de imagem, Hohler, e isso está alinhado verticalmente. Fantástico. Também podemos adicionar indicador de status também. Então vamos adicionar um círculo como este, e eu vou mudar sua cor para 20 C 96 8 Então vamos adicionar um traço como este. Vou definir a cor para branco sólido e vamos mudar sua espessura para 0,5. Você seria bom, e eu vou adicionar uma sombra para comer. Então vamos mudar. É por que para um, é muito bom. Então vamos selecionar todos esses elementos e agrupá-los, e eu vou chamá-lo de bem, detalhes finos. Fantástico. Ele parar de adicionar, vai ser 68 pixels e seu preenchimento esquerdo vai ser 30. Pixels como este estão agora. É hora de criar nossos sub-menus. Nós vamos criar quatro diferentes sub minions produtos promoções site e suporte. Então eu vou começar adicionando uma camada de texto. Então vamos acertar produtos e, em seguida, isso é aumentado o tamanho da fonte para 18 pontos. Fantástico. Quando um zoológico significa e eu vou abrir os ativos, descobrir que você pode baixar a partir do recurso é seção desses núcleos. Vou importar alguns ícones. Então, para o primeiro submenu, vou importar produtos. Então vamos arrastar e soltar aqui. Muito bom disse, como ambos fora deles e alinhá-los verticalmente. Fantástico. Então vamos verificar as almofadas. O preenchimento esquerdo deve ser um pico. Soa assim. E precisamos de uma pequena seta para a direita aqui. Então, do mesmo arquivo de ativos, vou adicionar essa seta para a direita. Então vamos arrastar e soltar aqui muito bem. Isso é uma linha. Todos estes três elementos fantásticos. E o estofamento Roy da seta para a direita vai ser 32 pixels. Muito bom. Selecione todos esses elementos, agrupe-os e vamos renomear também produtos. Tudo bem, agora vamos duplicar o filme para baixo. O preenchimento entre eles vai ser 50 pixels como este. E agora eu vou escrever promoções e vamos mudar este ícone, então eu vou removê-lo e vamos trazer seu próprio ícone Fantástico. Vamos alinhá-los verticalmente e eu vou colocar essas promoções. Eu posso escrever sob o grupo de produtos aqui e vamos renomear-me para promoções muito bom. E então precisamos verificar as almofadas. Vai ser oito pixels como este. Mais uma vez duplicado filme para baixo. O preenchimento deve ser de 50 pixels, e desta vez eu vou escrever site que removeu o ícone e trazer o ícone do site . Lá vamos nós. Vamos movê-lo direto para seu próprio grupo, que é este que eu vou renomear o site do dedo do pé e seu preenchimento direito vai ser oito pixels também. E por último, mas não menos importante, vou duplicá-lo. E vamos mudá-lo para apoiar muito bem. Vamos remover esses ícones e trazer o ícone de suporte aqui. Lá vamos nós. Eu vou movê-lo para o seu próprio grupo e isso é me renomear para apoiar e então verificar as almofadas . Um pixel possui fantástico são agora tudo parece ótimo. A única coisa que vou mudar são os sinais deste indicador. Então deixe-me ampliá-lo um pouco. Vou ajustá-lo para 10 por 10 e vamos aumentar sua espessura para um. Acho que agora está muito, muito melhor. Perfeito. A próxima exibição será nossa tela de produtos. OK, então vamos pressionar um no nosso teclado. Vou adicionar uma nova obra de arte aqui. Vamos mudar seu nome para produtos. Fantástico. Então, nesta página, vamos ter um menu de hambúrguer bem no canto superior esquerdo. E depois disso, teremos um título grande, que será o título do produto. E então precisamos ter um cartão ok para o nosso produto que está trazendo o ícone do manual do hambúrguer de nossa pasta de ativos. Lá vamos nós menu arrastar e soltar seu Eu vou movê-lo para cá. cabeçalho superior vai ser 60 e é acolchoado esquerdo vai ser 16 como este. E então isso está em uma camada de texto aqui. Vou escrever produtos. No entanto, vamos torná-lo ousado, e eu vou aumentar o tamanho do fundo para 32 pontos. Fantástico. Sua adição superior será de 30 pixels e o preenchimento esquerdo deve ser 16 células de picos também . Tudo bem, então, como eu mencionei antes aqui, precisamos criar um contêiner. Então vamos selecionar um quadro para e eu vou arrastá-lo e soltá-lo. Para criar um contêiner perfeito, vou definir seu alto para 144. E agora vamos pegá-lo título Produtos. Por enquanto, não adicionamos tanques porque no próximo vídeo, vamos adicionar esses impostos específicos, então a próxima coisa que precisamos fazer é criar nosso cartão. Então, para o nosso cartão, precisamos ter uma imagem e nome garantidos descrição e uma etiqueta de preço. Então, primeiro de tudo, eu vou criar um retângulo aqui. Lá vamos nós. Vamos torná-lo quadrado. Então eu vou ajustá-lo para 156 por 156 Muito bom. E vamos aumentar o raio do canto para 16. E desta vez eu vou usar outro plugging para adicionar uma imagem para comer. Então vamos para os plugins. Eu vou escolher o plugue de abertura da Young, e se você não tiver esse plug in, você pode ir em frente e instalá-lo novamente. Então vamos executá-lo. Claro, você pode adicionar qualquer imagem que quiser, não importa, e agora eu vou escolher o interior. Você está certo. Eu acho que é ótimo. Então vamos adicionar uma camada de texto. Vou escrever o nome e isso é diminuir. É sinais divertidos para 16 pontos e uma maneira de regular. Muito bom. Vou alinhá-lo. É parada de direção vai ser oito pixels e estes dois devem ser alinhados perfeitamente fantástico. Então isso é duplicado. Mudando para cá, vou escrever uma breve descrição e então vamos mudar sua cor para algo mais leve. Lá vamos nós e seu esconderijo superior será quatro pixels. Mais uma vez duplicado filme aqui em baixo. Precisamos de camadas de texto. O 1º 1 vai ser um cifrão como este, está bem? E eu vou mudar sua cor também. 20 c nove e 68. Fantástico. Isso é filme duplicado para o lado direito. E aqui vamos, Price. Então, por que dividimos essas duas camadas de texto? Porque mais tarde, você vai puxar alguns dados e você vai mudar. Ele leva camadas de acordo com o nosso banco de dados. Então, porque estamos armazenando dados sem o sinal de dólar do em nosso banco de dados, nós só precisamos alterar a quantidade fora da camada de texto. Então esses cifrões devem estar intactos estão certos. O tapinha à esquerda vai ser dois pixels. Fantástico. E agora é hora de criar nosso amigo porque este cartão é outro contêiner. Então o que eu vou fazer é selecionar todos esses elementos mantendo a tecla shift no meu teclado assim, certifique-se de selecionar todos eles e corretamente pode uma das camadas e pressionar a seleção de quadros . E agora temos um novo quadro. No entanto, como já mencionei antes, quando criamos um quadro, pelo menos uma de suas bordas deve tocar o lado esquerdo ou direito da tela, ok? Ou no topo da nossa tela. Então, neste caso, vou ampliar a nossa moldura. Então vamos ampliá-lo assim. Vou definir o com 2 183 e alto para 249 assim. E então esse grupo todos os elementos dentro deste quadro como este, e eu vou alinhá-los ao centro tanto vertical quanto horizontalmente. Fantástico. Agora podemos agrupá-los, selecionar o quadro, e eu vou alinhá-lo com a borda da nossa tela para que ele deve tocar a borda esquerda. Uma coisa importante que você precisa saber sobre Bravo é que agora que estamos criando esse carro, ele vai repeti-lo em nosso quadro de arte. Ok. No entanto, como você pode decidir se ele vai ser repetido horizontalmente ou verticalmente nestes jogos sempre que o com fora do seu amigo é menos de 50% da sua tela? Como neste caso, Bravo primeiro vai repeti-lo ou é inteiramente e depois verticalmente. Então a próxima carta vai aparecer ao lado dela e depois a próxima fila. E isso é exatamente o que queremos são agora precisamos ter certeza de que nossos quadros ou alinhar perfeitamente e que eu renomeá-lo para cartão de produto. Fantástico. Perfeito. Agora estamos feito com a nossa tela de produtos também estão certos, pessoal, Muito obrigado por assistir a este vídeo. Espero que tenha gostado no próximo vídeo. Vamos terminar de projetar este projeto juntos. Espero que você goste deste vídeo e até mesmo para vê-lo que 6. Crie um aplicativo de móveis - Parte 2: Oi, todo mundo. Bem-vindo de volta a outro vídeo das partituras neste vídeo. Vamos terminar de projetar este projeto juntos. Então agora eu vou ir em frente e inserir outro, não estou entediado pressionando um no meu teclado e vamos escolher este quadro de arte. E esse é Renay me detalhar porque esta vai ser a nossa página de detalhes. Então, sempre que um usuário clica neste cartão, ele vai levar o usuário para essas páginas de detalhes e o usuário pode ver os detalhes específicos sobre esse produto. Então, nesta página, vamos ter uma imagem grande. Ok, então vamos em frente e criar um retângulo como este. Fantástico. Vou aumentar o raio do canto para 30. No entanto, vamos definir o raio do canto dos dois cantos para zero. Então eu vou definir para zero e este também, assim. E então, mais uma vez, vamos executar o splash plugging da ONU, a fim de recuperar uma grande imagem interior estão certos muito bons, e vamos adicionar um pouco de sombra para comer. Então eu vou mudar a quantidade de Blair para 20 e a quantidade Y para 10 e vamos diminuir a capacidade para 10% fantástico Então, o que mais precisamos? Bem no topo? Vamos adicionar seta esquerda para a navegação entre as nossas telas. Então vamos abrir a nossa bunda. Está tudo bem. E aqui temos um ícone de seta para a esquerda. Vou arrastar e largar. Ano que sobrou. Estofamento vai ter 24 picos de idade, e sua posição superior vai ser 46 como este. E eu vou adicionar outro ícone bem ali, que é um ícone de compartilhamento. E daqui, eu vou arrastar e soltar esses ícones de compartilhamento assim. Vou movê-lo para cima, e está certo. Estofamento vai ser 24 células de pico. Isso faz de você malvado. E o título de topo vai ser 43. Pizza um é perfeito. Tudo bem, aqui, precisamos colocar um ícone de jogo. No entanto, vou mostrar-lhe como criar um de forma fácil e rápida. Então precisamos de um círculo. Então deixe-me desenhar um círculo aqui e eu fui uma cidade para 64 por 64. Vamos torná-lo branco. Fantástico. E então precisamos de um triângulo. Então eu vou criar um polígono como este e vamos aumentar o raio do canto para cinco como este, e eu vou torná-lo preto. Fantástico. Que eu rodou 90 graus e eu vou me alinhar no centro tanto vertical quanto horizontalmente. Então vamos agrupá-los e eu vou colegas jogar botão. Fantástico. Certo, agora é hora de adicionar nossas camadas de texto. Então aqui precisamos ter um nome, um preço e uma descrição mentirosa. Então vamos adicionar um texto que você está aqui. Vou escrever um nome e vamos torná-lo médio. E vou aumentar a ciência dos fundos para 24 pontos. Realmente bom. Parar rumo vai ser 16 células de pico e a luta esquerda deve ser de 24 pixels. No entanto, lembre-se de aumentar o com um pouco porque não sabemos sobre o comprimento do nosso nome que vamos extrair do nosso banco de dados. Está bem? Tudo bem. Vamos adicionar outra camada de texto novamente. Precisamos de um cifrão. Vamos fazer com que seja normal. E o tamanho da fonte será 16 pontos e a cor deve ser 20 c 968. Fantástico. Parar de se esconder vai ser quatro pixels. Deixe-me duplicar o filme para o lado direito. E aqui vamos o preço certo. Vou ampliá-lo um pouco, está certo. E por último, mas não menos importante, vamos adicionar nossa descrição mentirosa aqui. Então eu estou indo para copiar e colar Alluring Epsom descrição do site Epsom dot com. Você pode escrever o que quiser, então vamos adicionar um texto que você colá-lo aqui e lembre-se de diminuir o com fora de sua camada de texto . Bastante bom. Vamos definir o com 2 327 Muito bom. E eu vou mudar a altura da linha para 24 vamos torná-la um pouco mais leve. Fantástico. Deixe-me entrar no centro. Ele parar de ir vai ser 24 células pic e estamos feitos. Tudo bem, pessoal, isso é tudo por este vídeo. No próximo vídeo, vamos conectar nosso projeto ao estúdio Bravo e vamos usar o site da mesa de ar, a fim recuperar alguns dados do nosso banco de dados. Está bem. Além disso, vamos adicionar mais duas telas design pneu também. Então vejo-te depois 7. Conectando seu aplicativo com um banco de dados: Oi, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos adicionar os tanques de estúdio de caldo ao nosso projeto. E depois disso, vamos conectá-lo ao Brother Studio, a fim de recuperar alguns dados da Air Table. Mas antes de explicar sobre mesa de ar, vamos adicionar esses tanques aos nossos componentes aqui, a fim de torná-los reconhecíveis por Robert Studio para a nossa tela de lançamento. Como já mencionei antes, não vai fazer compras na visão Bravo. No entanto, devemos especificá-lo por sua tag específica. Então, se você abrir a página web de ataques Bravo de seu site, você pode ver que nós temos tela inicial bem ali. Ok, então eu vou selecionar estes comando tag, ver ou controlar. Veja, deixe-me remover seu nome e colá-lo aqui e está feito. Então precisamos fazer nossa tela de menu reconhecer um sino do estúdio Bravo. Precisamos de outro menu noturno da Forest. Podemos usar essa etiqueta. Ok. Menu Colin Snide. Então vamos selecioná-lo. Comando C. E aqui vou me renomear para o nome da etiqueta. Lá vamos nós. E depois disso, podemos conectar nossas telas. Ok. Então, por exemplo, aqui temos os produtos. Então, vamos clicar na guia do protótipo assim. E como podem ver, Circle aparece imediatamente. Vou clicar no porão e soltá-lo aqui. Lá vamos nós. E agora esses subterrâneos estão conectados aos produtos. E também temos promoções no site. No entanto, ainda não projetamos essas duas telas. Então, por enquanto, vamos deixá-los como estão. Mas para o apoio, vou adicionar uma etiqueta específica para ligar para um número. Então eu vou rolar para baixo e lá vamos nós. Temos diálogo telefônico aberto, então vamos selecionar isso. Como você pode ver, é uma ação, estão certos. E depois do nome, vou colá-lo. Você pode mudar este número de telefone para o que quiser. Muito bom. E então precisamos conectar esses ícone de menu de hambúrguer no nosso menu. Ok, então vamos selecionar este ícone e arrastar e soltar assim e quer o filho dela. Então eu vou selecionar esta tela de menu. Lembre-se, precisamos conectar toda a tela lá bego arrastar e soltá-lo muito bom. E uma coisa importante que precisamos mudar é o ponto de partida das nossas telas. Então, como você pode ver agora, o ponto de partida é a tela do menu, que não é o que queremos. Então vamos arrastar e soltar o ícone quadrado bem ali. Então agora estes produtos página é a nossa primeira tela. E depois disso, precisamos conectar nosso cartão de produto à nossa página de detalhes. Então vamos conectá-lo assim muito bem. Precisamos também conectar essa seta para a esquerda à tela de nossos produtos. Tudo bem. E agora precisamos adicionar algumas tags para este botão play e este compartilhamento. Não posso deixar selecionar este botão de reprodução. Vou clicar no design e da página de impostos, vou procurar um vídeo aberto. Certo, lembre-se que você tem diferentes tipos de vídeos. Você tem vídeo, o que é divertido? É um áudio menos vídeo. Aquele outro lugar quando um usuário está na tela do aplicativo, OK, mas sempre que você quiser reproduzir um vídeo com áudio, você pode usar esse hack. Então eu vou selecioná-lo e ele é colá-lo após o nome deste fundo. E aqui você pode adicionar qualquer coisa, então eu vou colar um link aqui de você para você. Lá vamos nós. E isso é tudo para o ícone de compartilhamento. Vamos para a página dos tanques Bravo. E aqui você tem um diálogo de compartilhamento aberto. Então vamos eleger isso, copiá-lo e colá-lo após o nome deste ícone. E aqui você pode adicionar qualquer U R l que você quiser Pode ser o seu site, sites do seu cliente, o que você quiser. Tudo bem, então o que mais? Página de produtos da Índia, temos um componente de cartão aqui. Ok, No entanto, precisamos adicionar alguns impostos. Por exemplo, aqui temos dois recipientes diferentes para o 1º 1 Vamos selecionar o título dos produtos. Vamos adicionar colchetes. E entre esses colchetes, vou adicionar recipiente. Verifique este pálido. É tão importante e deixe-me copiá-lo. E eu vou pagar lugar por estes cartões de produto também, porque este é o nosso segundo contentor aqui. Vou adicionar um asterisco para o nosso cartão de produto, porque mais tarde, quando nos conectarmos, são projetados para o estúdio Bravo. É muito mais fácil reconhecer esses elementos com estes asteriscos. E então eu vou adicionar um asterisco para o nosso preço para a descrição curta e finalmente para nosso nome, camada de texto, tudo bem, e na página de detalhes, precisamos ter um quadro grande. Certo, o que inclui todos os nossos elementos. Então vamos selecionar nosso amigo também. E eu vou arrastar e soltar assim. Vou chamá-lo de moldura e colchetes internos. Isso mesmo, Container. E então eu vou adicionar uma série de bundas antes que o nosso nome leva Layers aqui e pelo preço também . E aqui, vamos chamá-lo de descrição. Fantástico. Agora vou adicionar outro ataque a esta descrição, que se chama Flexo. Então, qual é o floco? Tão tack. Se fores aos tanques Bravo, posso mostrar-te a explicação exacta. Lá vamos nós. Então, sempre que você usar a etiqueta flexor, ele vai fazer com que seus picos de tanque se expandam para baixo para alimentar o conteúdo conectado Y a p I OK, mas você deve ter em mente que as marcas de imposto devem ser o elemento mais baixo fora do recipiente. Como o nosso design. Não há nada depois disso. Ok, então isso é adicionar atacou como So. Então agora vai crescer verticalmente, não importa quanto tempo nossos impostos estejam certos. E a próxima coisa que precisamos mudar é o nome da nossa imagem. Então deixe-me imagem direita, e isso é tudo. Tudo bem, agora vamos clicar neste ícone de compartilhamento. Copiar link. Vamos para o estúdio Bravo. Vou importar de Fatemeh Colá-lo aqui. Tudo bem. Como você pode ver, temos um aviso aqui para corrigir, mas não é um problema. Então vamos conferir nosso aplicativo. E se houver algo errado, voltaremos e consertaremos. Tudo bem? Então agora nosso design está conectado ao estúdio Bravo, e é hora de criar nossa biblioteca abaixo. Certo, mas desta vez, em vez de pegar alguns dados públicos, vamos criar nosso próprio banco de dados. Ok? Vai ser tão simples, acredite em mim. Agora o que eu quero que você faça é abrir o site da mesa aérea, então cada mesa é basicamente uma planilha. Ok. No entanto, é mais flexível e vai permitir que você crie seu próprio banco de dados com base em seus dados para que você possa usá-lo gratuitamente . Certifique-se de se inscrever aqui, mas por enquanto, porque eu já me inscrevi, então eu vou assinar está certo. Lá vamos nós. Agora estamos no painel da mesa de ar, ok? E há tantos recursos que você pode usar. No entanto, para estes tutorial, vamos nos concentrar na criação de um banco de dados simples. Ok, então vamos clicar neste ícone de mais, que é chamado em uma base. Comece com o modelo. E aqui temos alguns panfletos. Certo, vamos escolher o produto. Modelo usado católico. Lá vamos nós. Aqui é fácil. Vou abrir. Tudo bem, Aqui temos pelo menos off produtos com uma imagem com um preço com uma descrição, como você pode ver aqui, e muitos outros dados. Então o que vamos fazer é puxar esses dados para o nosso estúdio Bravo e vinculá-los ao nosso design. Ok? Gostando de nossos projetos anteriores, vamos enviar um P. Eu peço isso. No entanto, esse é o tempo, nós não vamos enviar um ap público eu solicito que vamos enviar um pedido AP privado. Certo, então vamos ajudar. A documentação p I está certa. E agora vamos para a seção de autenticação. Lá vamos nós. Vamos eleger estes seu l, que é o seu ap único. Sinto-me aqui mesmo antes do ponto de interrogação. Eu vou copiar e vamos para Bravo estúdio e eu vou criar um novo que uma biblioteca clique em nova coleção, e eu vou escrever tabela área para novamente tabela Air para salvá-lo. E aqui eu vou criar qualquer pedido. Vamos mudar seu nome para produto. Pelo menos porque o nosso primeiro pedido vai extrair alguns dados para os nossos produtos. Página. Ok. Para nossa página de detalhes, criaremos uma nova solicitação mais tarde. Então vamos acelerar que vocês estão todos aqui muito bem, mas desta vez, como este é um AP privado, eu preciso adicionar um valor chave aqui, que é como nome de usuário e senha. Ok, para estes i p I. Então o que você precisa fazer é ir para a configuração da sua conta. E aqui sob a seção A P I, você pode gerar uma chave A p I. Ok. Tudo bem. Então esta é a sua chave. No entanto, vamos para esta página. Então vamos copiar esta palavra de autorização. Vá ao Brava Studio e cole-o para a chave. E eu vou copiar e colar essa parte também. Pelo valor. Fantástico. No entanto, você precisa mudar esse ponto com sua chave exclusiva a partir daqui. Vou copiá-lo e colá-lo aqui, e isso é tudo. Agora vamos enviar o nosso pedido. Lá vamos nós. Temos algumas respostas. Então, do que precisamos? Precisamos do nosso pai ou dos registos. Então, digamos assim. Precisamos de todos eles. Então, vamos escolher tudo no menu suspenso. Precisamos também dos registros de dados que eu d. porque vamos conectar nossa página de produtos com nossa página de detalhes. Ok, então cada produto tem sua identidadeúnica. identidade Precisamos disso também. Também precisamos do u R l de cada imagem. Então vamos marcar essa caixa de seleção. Então precisamos do custo unitário, que é o preço, o nome e a descrição, e isso é tudo. Como você pode ver, é automaticamente seguro para que você não precise fazer mais nada. Agora vamos para projetos. Abra nosso design e novo projeto, e vamos usar nossa tela de produtos aqui a partir deste menu suspenso. Eu vou escolher Air Table para e do pedido. Nós temos apenas um produto menos, vamos adicionar conteúdo. Primeiro de tudo, precisamos adicionar nosso cartão de produto porque ele vai ser repetido. Então vamos assim. E agora vamos usar registros e, em seguida, clique no ícone de doces mais. E vamos adicionar nosso nome, descrição curta, preço e nossa imagem. Ok, então aqui vamos selecionar os dados corretos para a nossa imagem. Vai ser a imagem dos campos do seu l O preço vai ser o custo unitário. A descrição curta vai ser esta aqui, e o nome vai ser esta. Fantástico. Agora podemos realmente ir em frente e pré-visualizar nosso aplicativo. Então eu vou abrir o aplicativo Bravo visão no meu telefone. E sempre que você quiser testar um novo aplicativo ou quiser sair do aplicativo anterior no Bravo Vision, você pode agitar seu telefone, direito, pré-visualizar um aplicativo, e lá vamos nós. Como você pode ver, temos nossos produtos com todos os detalhes. No entanto, as descrições não são as mesmas porque em nosso banco de dados, se você vê aqui, você pode ver que todas as descrições são iguais, então podemos ir em frente e alterá-las se você quiser. E lembre-se, se você fizer uma alteração aqui, seu APP mudará automaticamente em tempo real. É bem incrível, não é? Então vamos verificar. Por exemplo, vou mudar esse nome. Marjorie Mudança. Vamos mudá-lo para moderado. Ok, agora que agitar meu telefone e pressionar atualização manual, que pode rolar para baixo lá vamos nós, temos Modry muito bom. Vamos ver o nosso cardápio ligeiro também. E como você pode ver, funciona perfeitamente. É incrível, não é? Mas o que acontecerá se eu tocar em um desses produtos? Então vamos usar este. E, como você pode ver, porque nós não fizemos uma solicitação para nossa página de detalhes e nós não vinculamos nenhum dado com nossos elementos, isso não nos mostra o correto, pai, no entanto, todas as outras coisas funcionaram perfeitamente. Então vamos verificar nosso ícone de compartilhamento. Lá vamos nós. Funciona perfeitamente. Tudo bem, agora vamos em frente e criar um pedido para a nossa página de detalhes. Então, na biblioteca de dados, eu vou abrir a mesa aérea dois e vamos criar outro pedido. E isso mudou seu nome para página de detalhes. E desta vez precisamos copiar o mesmo seu l aqui. Mas desta vez precisamos adicionar algo depois dessa palavra de mobiliário. Ok, vamos adicionar uma barra para frente um cifrão para cuidar dos colchetes Lee e dentro disso é certo, eu d. Então o que isso significa? Isso significa que estamos enviando uma solicitação para obter produtos com Eles são ID exclusivos. Se você se lembra Nós selecionamos bem as ideias de registro aqui para conectá-las à nossa página de detalhes. Certo, então aqui precisamos ter idéias específicas. Bem, para o cabeçalho, precisamos da mesma coisa. Vou copiar e colá-los aqui estão certos. E mais uma coisa para ir. Vamos para a lista de produtos. E aqui vou selecionar as saídas selecionadas. E como podem ver, temos um registro de dados, certo? E isso já é, então vamos selecionar isso. Vou copiá-lo. Vamos para a página de detalhes e para o perímetro. Isso é certo. Eu estava aqui. Lembre-se de que não deve ser capitalizado. E pelo valor, vou acelerar as tomadas que copiamos muito bem. E agora vamos enviar o nosso pedido. Lá vamos nós. Temos as respostas dela, e desta vez precisamos do pai. Precisamos das imagens. Você é eu precisamos da unidade. Custe a descrição do nome, e isso é tudo. OK, agora vamos voltar para nossos projetos, e eu vou selecionar a tela de detalhes aqui a partir das coleções. Vou selecionar a tabela de área dois, e aqui agora temos dois pedidos que selecionam a página de detalhes e adicionam conteúdo aqui. Vamos adicionar nossa imagem, nosso preço, nossa descrição e nosso nome muito bom. E agora vamos encontrá-los sem dados. Assim, o nome deve ser conectado ao campo dizendo que a descrição está conectada à descrição sente já, e o preço deve ser conectado aos campos, custo unitário e a imagem às imagens. Você é L. R. Certo. E agora vamos selecionar as saídas selecionadas em nossa solicitação de página de detalhes. E aqui, como você pode ver, temos o ideal capaz. No entanto, está em maiúsculas. Então vamos mudar você, dedo do pé. Eu d. Tudo bem, então agora vamos para o nosso pedido de menos produto e selecionar uma saída selecionada. E aqui temos registros de dados. Certo, precisamos mudar seu rótulo para I d. mas lembre-se que ele não deve ser maiúsculo. Ok? É tão importante. Agora vamos voltar ao nosso projeto, e eu vou abrir o aplicativo Bravo visão, vamos agitar o telefone e pressionar a atualização manual, e eu vou tocar em um desses cartões. Lá vamos nós. Agora funciona perfeitamente. Vou selecionar o moderado como você pode ver tudo. Está tudo bem. É incrível. Não é? Deixe-me abrir o menu. E se eu pressionar o apoio, você pode ver que uma coleção bombeia imediatamente. Muito bom. Tudo bem. Agora, como você pode ver, sempre que atualizamos nossos bancos de dados de área, ok, aqui. Precisamos atualizar o APP manualmente. OK? Não há como atualizá-lo direito no ato. Então vamos resolver esse problema em um segundo. Vamos ao nosso Fatemeh. E aqui vamos adicionar uma nova aderência. Vou ao Bravo Tanks, Page, e vou te mostrar um novo tanque incrível, que é piscina para se refrescar. É um duplo clique no tapete, e eu vou colá-lo aqui em vez do nome do produto como este. Agora, acabamos de adicionar o pool para atualizar a funcionalidade em nosso aplicativo. Então, um de cada adicionar um novo produto aqui ou removemos isso e o usuário atualiza a página aqui, o usuário pode ver as alterações que fizemos imediatamente. É bem intenso. Também podemos adicioná-lo a esta página. Muito bom. Vamos manter esses nomes antes desses tanques para manter tudo organizado. Então eu vou adicionar produtos aqui e detalhes bem aqui. Ok, então vamos checar nosso aplicativo mais uma vez. No entanto, antes disso, precisamos pressionar a atualização Aqui estão agora. Se eu puxar para baixo, você pode ver o indicador de carregamento, que indica que esta página está atualizando anteriormente, hum, também em nossa página de detalhes, a mesma coisa acontece. Tudo bem, pessoal, isso é tudo por este vídeo. Muito obrigado por assistir isso. Espero que tenha gostado. E vejo-te no próximo vídeo, por isso vemo-nos lá. 8. Adição de mais recursos ao seu aplicativo: Oi, todo mundo. E bem-vindos de volta a outro vídeo fora da pontuação neste vídeo, vamos adicionar mais duas telas ao nosso projeto porque eu quero mostrar as outras funcionalidades dos tanques Bravo. Então, vamos pressionar um na nossa palavra-chave. Vou adicionar “Qualquer um é pobre “à nossa tela, e vou renomear-me para promoções. Fantástico. Vamos em frente e selecionar esses contêiner copiado e colado lá com a ajuda do comando. Veja ou controle C e controle ser. E eu vou remover esses cardápios ligeiros em Vamos renomear-me para promoções Muito bom. Vou renomear esses títulos também título Promoções. Fantástico. Aqui, vou adicionar um retângulo. Certifique-se de que ele tem um quadro. Então, vamos clicar com o botão direito sobre isso. Deixe-me aumentar seu líder de altura. É muito bom. Certo? Clique sobre isso e clique na seleção de quadros. Fantástico. Vou chamá-lo de Animação. Ok. Eu vou ser tão má. Certifique-se de que esses contêineres estão alinhados. Ou lembre-se de adicionar a tag de contêiner também. Bastante bom. Deixe-me movê-lo para cima. Fantástico. Agora vou mostrar como você pode adicionar muita animação à sua tela. Então vamos procurar animações de Lottie e lá vamos nós. Vou abri-la. Este é um ótimo site para encontrar animações legais, e a partir daqui você pode baixar algumas animações gratuitas. Vamos escolher este, e precisamos da etiqueta da Lottie aqui. Então, primeiro, vamos copiar. Vou colar aqui. Fantástico. Mais uma vez, vamos copiar o seu l e colá-lo bem ali. Bastante bom. Então, com certeza, nossa animação será reproduzida. Mas antes de verificar que isso está em outra tela. Vamos pressionar um no nosso teclado e adicionar outro nosso porto aqui. Vou renomear-me para Website, e é um retângulo como este. E desta vez eu vou usar este tanque Web EU que é copiado e colado. Aqui. Você pode colocar o que você realmente quiser. Por exemplo, podemos escrever para você ponto com. Lá vamos nós, e isso é tudo. Antes de testar o nosso aplicativo, precisamos lembrar de conectar essas duas telas dedo do pé são muitos Ok, então vamos selecionar esta tela de slide menu pode se tornar protótipo, e eu vou escolher promoções que está conectado a promoções e o site que está conectado ao site. Agora vamos atualizá-lo para mais uma vez abrir o aplicativo Bravo visão em seu telefone operado manualmente ou você pode pré-visualizar novamente. Lá vamos nós. Vamos abrir o menu ligeiro e escolher promoções. Você pode ver como chás incríveis e fáceis para adicionar uma animação ao seu AMP. É muito legal, não é? Agora vamos ao Website e aqui é fácil. Este é o você para você e você pode ver que todas as suas funcionalidades funcionam perfeitamente são caras certos que zona para estes vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 9. Publicação seu aplicativo para iOS e Android: Oi, todo mundo. Espero que esteja indo bem neste vídeo. Vou mostrar-lhe como você pode obter seus pacotes APP, a fim de publicar seu aplicativo na loja APP ou no colocado, ou é tão legal, não é? Primeiro, vamos abrir seu estúdio Bravo. E como você pode ver, eu estou na seção do painel e escolher o aplicativo que você quer publicar. Ok, eu vou escolher design mais novo. E aqui na parte superior, você tem uma opção chamada Baixar os pacotes do pacote de APP. Certo, vou clicar nisso. E há uma breve explicação sobre o processo de publicação do seu aplicativo. Ok, então você pode solicitar seus pacotes para nós e Android separadamente aqui, e isso pode levar até 24 horas. Ainda assim, a equipe Bravo prepara o pacote para você e enviá-lo para você. Ok? Vai ser enviado para o seu e-mail. Agora, vamos abrir o site do Bravo Studio. E como você pode ver, eles atualizaram sua página de destino. Então, bem no topo, você pode ver o botão aprender. Vou clicar nisso. E daqui sob o recurso é a seção Eu vou abrir renunciando guia de publicação APS . Ok. E já que a tese não vai se concentrar no processo de desenvolvimento, não vou passar por cada detalhe aqui. No entanto, vou falar com você como você pode publicar seu aplicativo. Então, quando você receber seus pacotes de pacote da equipe Bravo, você pode então publicar seu aplicativo na loja APP ou play store. Ok, se você quer publicar a versão nos EUA, você precisa ter um computador com cavala. Ok? É uma obrigação. E também você precisa fazer parte do programa de desenvolvedor da Apple. É um programa baseado em assinatura que você pode verificar cães a partir deste link. Lá vamos nós. Podemos ir em frente e verificar. E você também pode usar diferentes serviços, como o site fast lane, que vai publicar seu aplicativo para você. Certifique-se de seguir estes guias passo a passo. E também, se você quiser publicar seu aplicativo na Play Store, você precisa baixar o estúdio Android, que está disponível para Windows e minha classe. E você pode seguir os passos aqui. Tudo bem, pessoal, isso é tudo pelo Senatorial D. Espero que tenha gostado. Certifique-se de escrever sua opinião sobre isso na seção de revisão, a fim de me informar o que você acha. Se você quiser saber mais sobre Fatemeh e quiser se tornar um designer de interface de usuário, certifique-se de verificar o meu outro curso, que é chamado Learn Feet. My User Interface Design Essentials. Você é UX design. Está disponível em camisa de habilidade, e tenho certeza que você vai gostar mais uma vez. Muito obrigado por assistir a estes tutorial, e espero vê-lo em outros cursos.