Um guia para iniciantes do desenvolvimento da Web Python 3 usando frasco

1. Introdução: Neste curso, vamos criar uma página de perfil legal que se parece com isso. Agora, a coisa super legal sobre esta página de perfil é que ela é conduzida por folhas do Google. Então eu tenho uma folha do Google aqui que se eu editar esta folha, vamos mudar esta página web. Agora, esta página da Web é implantada no Google Cloud R1, e o curso cobre isso também. Então vamos provar que isso funciona. Então vamos dizer que de repente eu decidir que eu tenho cinco anos de experiência no MongoDB. Eu posso mudar isso. Volte aqui. E diz que dois anos de experiência aqui. Mas se eu clicar em Atualizar, de repente eu tenho cinco anos de experiência. E vamos ficar um pouco mais sérios aqui e dizer isso. Sim, Def Lay foi para um humano, a cidade. Assim como. Volte aqui, clique em Atualizar. E eu, eu definitivamente fui para uma universidade. Agora a outra coisa legal sobre isso é que nós temos uma página de contato aqui. E em nossa planilha do Google, novamente, temos essa planilha de contatos. E no momento só temos um contato aqui. Mas se alguém quiser entrar em contato conosco, digamos que Fred bloqueia. E ele é Fred no Gmail e ele quer um site criando. Nós definitivamente podemos ajudá-lo lá fora. E então ele vai enviar uma mensagem, volta para a nossa página inicial. E então, se voltarmos para nossa planilha, você pode ver que Fred entrou em contato conosco através da nossa Planilha Google, o que é super legal. Vamos usar tecnologias de carvão como Python, três garrafas, bomber, Docker, Google Container Registry, Google Cloud run. Obviamente no Google Sheets. Você vai aprender muito neste curso. E este curso tem apenas uma hora de duração. Você vai tocar em muitas novas tecnologias e obter um gostinho do que é possível com o desenvolvimento moderno de aplicativos web. Espero que decida fazer o curso. E obrigado por assistir. 2. Pré-requisitos de software: Para este curso, você precisará instalar o seguinte software. Se você acessar Docker.com, a barra é iniciada. Você pode instalar a área de trabalho do Docker para seu sistema operacional específico. Eles fazem versões para Windows, Mac e Linux. Depois de ter instalado o Docker, em seguida, se você ir para o código dot Visual Studio.com e instalar o código Visual Studio novamente para o seu IRS. Eles fazem versões para Windows, Mac e Linux. Depois de instalar essas duas peças de software, você está pronto para iniciar o curso. 3. Olá mundo rebaixada: Ok, então se você abrir o código do Visual Studio e ir para Arquivo e abrir pasta, e agora nós vamos criar uma nova pasta e eu vou chamá-lo de perfil do frasco. Clique em Selecionar pasta. E vamos criar nosso arquivo de aplicativo python principal. Então clique com o botão direito e escolha Novo arquivo. E vamos chamar isso de ponto AP. E antes de avançarmos, queremos ter certeza de que temos uma extensão chamada Docker. Então, se procurarmos a doutrina aqui, e ela deve estar no topo aqui. Então, se você clicar sobre isso e se certificar de que você instalou isso, eu já tenho instalado. Depois de fazer isso, feche isso e volte para os arquivos. E então, agora, se você pressionar F1, você vai obter esta linha de comando para cima onde você pode procurar por certos comandos. Então, se eu procurar o Docker, recebo uma lista completa de opções. E o que queremos é adicionar arquivos do Docker ao espaço de trabalho. Então, se você clicar nisso, e então isso vai andaime alguns arquivos do Docker para nós. E assim queremos o frasco Python. Então, se clicarmos nisso, e nosso ponto de entrada é este aplicativo ponto p y. então vamos clicar sobre isso. 5 mil é bom para o porto. E sim, nós também podemos incluir nossos arquivos de composição do estivador também. E agora isso está andaime todos os arquivos do Docker que precisaremos na verdade. Então isso é meio útil. Então temos nossos requisitos. Então isso é frasco e unicórnio. Temos nosso arquivo docker, que é usado para construir nossa imagem, e um par de arquivos docker-compose. E mais importante sob o código VS, nós realmente temos alguns arquivos aqui que ajudam na depuração. Então agora podemos realmente depurar nosso código dentro do contêiner Docker usando VS Code, o que é muito legal. Agora queremos fazer algumas pequenas alterações para este arquivo JSON ponto tarefa para nos permitir fazer hot reloading um quando fazemos uma edição neste arquivo app.js. Então isso é muito simples de fazer. Então precisamos vir aqui abaixo sob ENV, precisamos adicionar frasco, sublinhar ANOVA. E queremos especificar que estamos no modo de desenvolvimento. Isso significa que o frasco irá reiniciar seu servidor web cada vez que fizermos uma alteração em nosso arquivo. E, em seguida, abaixo disso no grupo V, precisamos criar uma seção de volumes. E assim dentro aqui, precisamos especificar um caminho de contêiner, que está em uma pasta de aplicativo em nosso contêiner. E o caminho local, que é na verdade a pasta do espaço de trabalho em que estamos. E então a outra pequena mudança que precisamos fazer é remover essas duas linhas aqui. Porque queremos usar o depurador e queremos fazer recargas quentes. E se controlarmos S para salvar. E só para que você saiba, por que eu sei que este é o aplicativo barra é porque se olharmos em nosso arquivo de encaixe, podemos ver que definimos nosso diretório de trabalho dois slash app lá. Então é por isso que isso precisa ser barra app. Agora, se voltarmos ao nosso app.js, vamos começar a criar implementação do frasco. Então, este é um código bastante boilerplate para criar um aplicativo Flask. Ok, então vamos ver se isso funciona. Então, se apertarmos F5 agora, ou escolher Executar e começar a depurar, e eu vou apenas apertar F5. E isso desaparecerá e criará nosso contêiner Docker. E como podem ver, temos o nosso “Helloworld “a trabalhar aqui. Agora vamos verificar se o recarregamento a quente está funcionando. Então, se eu fizer uma alteração aqui e colocar alguns pontos de exclamação no final e seguro. Devemos dizer que agora estamos recarregando o servidor Web. E se fizermos uma atualização, teremos esses pontos de exclamação no final. Então, temos um ambiente de desenvolvimento bastante agradável aqui que foi andaime bastante rapidamente. 4. Modelo de índice - Início: Então a próxima coisa que queremos fazer é realmente configurar uma pasta de modelos e um modelo. Então vamos fazer isso agora. Então, se clicar com o botão direito do mouse e fazer uma nova pasta, e criamos uma pasta chamada templates. E, em seguida, dentro desta pasta Modelos eu vou criar um novo arquivo. E vamos chamar este ponto de índice HTML. Então, para rapidamente começar a funcionar com o modelo index.html, vamos usar framework CSS chamado Bohmer. Então, se você for bombardeá-lo, eu documentação, visão geral começar. E se percorrer todo o caminho para baixo, temos um tipo de modelo inicial para Obama. Então, se selecionarmos e copiarmos ou apenas clicar em copiar aqui, volte para o nosso index.html e basta colá-lo aqui. Boehm foi muito bom na medida em que realmente só precisa deste arquivo CSS para funcionar, mas isso salvou como um pouco de digitação. Então, se salvarmos esse controle é para salvar. E, em seguida, para mostrar esse modelo, se voltarmos para o arquivo app.js e agora de Flask precisa renderizar modelo. E então, em vez de apenas retornar uma string, agora, queremos renderizar modelo. E qual modelo para nós queremos renderizar. Bem, é alto index.html. Então, se guardarmos isso, devemos recarregar. E se clicarmos em atualizar, veremos nosso “helloworld “, meu primeiro site com Bulmer. Agora, se voltarmos para o nosso índice de ponto HTML e descermos para a nossa área corporal. E vamos apagar tudo dentro desta primeira seção. E vamos começar a escrever o nosso próprio código aqui. Então a primeira seção vai ter a nossa imagem de perfil e , em seguida, apenas o nosso nome e Twitter lidar. Então, podemos colocar em uma imagem usando esta tag figura. E vamos dizer que isto é uma imagem. Assim, também um recipiente que nos ajuda a centralizar. E então queremos que seja um 128 por 128. E então vamos colocar uma imagem aqui. E vamos pô-lo de castigo. Então Bohmer lhe dá muitas aulas realmente úteis. Coisas como é arredondado, o que realmente poupa você indo embora em ter que escrever CSS, seu NCSS para isso, você vai para a classe já são, vai dar-lhe imagens arredondadas. E então para a nossa fonte, bem, queremos uma imagem de perfil. Mas se você não tem um em mãos, digamos se podemos usar, digamos, imagem de gato ou algo assim. Então eu só faço um link para a sua imagem de perfil aqui. Vamos usar algo como gato como um serviço para obter uma imagem de volta que é preferencialmente quadrada. E então, se olharmos para isso, podemos ver que temos um cabelo de gato. Agora, por baixo disto, queremos mostrar no nome, especificá-lo no meu nome presunto. E depois, por baixo disto, vamos ter um subtítulo, que é o teu identificador do Twitter. Nós guardamos isso. Volte e atualize. Você pode dizer, ver que temos um título e um subtítulo. Mas a primeira coisa que queremos fazer é enviar para estes debaixo da imagem. Então isso é bom e fácil de fazer em Bohmer. Podemos apenas dizer que tem texto centrado, salvar, voltar e agora temos enviado um texto. E também se não estamos felizes com esse tamanho, quero dizer, isso parece muito grande. Então, se eu quiser consertar isso e as crianças tiverem que consertar isso, isso precisa ser igual a um. Então, sim, eu não gosto disso. Isto é tão grande. E isso também é muito grande. Certo, então podemos dizer algo como Dash está cheio, salvo. E isso torna isso um pouco menor. E então podemos brincar com o tamanho disso também. Então eu posso dizer, é traço seis, dizer salvar. E isso parece um pouco menor ainda Atlas melhor. E não há muito espaço entre a nossa imagem e o nosso título. Então podemos facilmente corrigir isso também porque o bálsamo é incrível. Então podemos apenas fazer um cabelo margem inferior, digamos, cheio. Guarde isso, atualize, e temos um pouco mais de uma lacuna. Agora este subsídio. 5. Modelo de índice - Botões: Então, agora queremos adicionar alguns links. Aqui em baixo. Um link de contato e outro link pode ser vinculado a qualquer coisa vêm apenas ligando para o YouTube. Então, mas vamos fazer com que esses links pareçam botões. E temos algumas cores padrão medos em Bohmer. Então eu vou usar é info, que vai dar-lhe uma cor padrão. E eu vou usar um botão delineado e um botão arredondado. Então o momento é H árbitro não vai a lugar nenhum. Mas vamos consertar isso. E queremos que isso seja contato. E eu só vou copiar essa linha porque eu quero que o YouTube seja semelhante, mas apenas uma cor diferente. O perigo que eu conheço é uma cor vermelha que combina com o YouTube. Tudo o resto é igual. E eu vou chamar isso de YouTube. Então, se eu salvar isso, dê uma olhada nisso. Então agora temos dois botões lado a lado assim. Então esse é o fim da nossa primeira seção. 6. Modelo de índice - Seção principal: Então vamos começar a nossa segunda seção agora. Agora esta seção vai ter duas colunas. Então eu vou dar a isso uma classe de colunas para contar, para dizer ao bomber que estamos usando colunas. E nós realmente queremos começar com uma coluna central que ocupa três quintos da página e está no centro. Então podemos fazer isso muito facilmente. Em primeiro lugar, temos de dizer que esta é uma coluna. Em seguida, podemos especificar a largura que queremos. Então queremos que seja três quintos da página. E depois fomos para o centro. Então vai ter que ser compensado por um quinto. E eu quero dar-lhe um fundo e apenas um fundo bastante claro. E eu acabei de colocar algumas coisas aqui por enquanto, guarde isso. Então, se dermos uma olhada nisso, não parece que esteja funcionando aqui. Porque isso é, mas isso é realmente porque colunas não chutam até que a largura seja superior a 1024. Então, se eu esticá-lo e você pode ver que nossa coluna está realmente funcionando, e nós temos esta coluna central embaixo da nossa primeira seção. E então aqui dentro queremos colocar em um par de colunas que podemos preencher com algumas informações de perfil. Então vamos fazer isso agora. Então queremos outra div, e desta vez queremos duas colunas. Então dizemos a essa div que ela vai conter colunas. E nós vamos ter duas colunas. E queremos que cada coluna ocupe metade do espaço. Então dizemos que a coluna é metade. E eu copio isso e colo isso. E novamente, então temos nossas duas colunas. E se guardarmos isso e voltarmos atrás, podemos dizer, dizer que temos duas colunas ocupadas metade e metade. Então, na nossa primeira coluna, você quer criar um cartão. E eu vou realmente começar a usar Emmett para tornar isso um pouco mais rápido. Onde você pode fazer é você pode fazer div. Guia Ponto. Agora vamos realmente criar uma div com uma classe de cartão. É um atalho muito bonito. E então eu quero div se conteúdo atual. E então eu fui para uma classe de título. E isso vai ser sobre e então eu só quero pagar etiqueta. E eu só vou dizer por um momento sobre mim, ponto-ponto. Então esse é o nosso primeiro cartão dentro da nossa primeira coluna. Então vamos criar outro cartão que será idêntico abaixo deste. Então eu posso simplesmente copiar isso. E eu vou chamar isso de interesses para que eu quero dar a este carrinho um pouco de um fundo para que eu possa definir, digamos, tem fundo. Vou dar uma das cores que Balmer me dá. Então vamos dar uma olhada nisso. Então, isso é bom. Mas como você pode ver, estes são muito próximos. Então vamos consertar isso agora. Então podemos basicamente colocar uma margem em torno dessas contagens. eu atualizar um Seeu atualizar umpouco de margem agora, ok, vamos mudar meu zoom um pouco. Eu estava ampliado apenas para tornar as coisas um pouco mais claras, mas nós realmente não estamos vendo a página muito bem. Então vamos fazer, vamos, você zoom para baixo para um 100%. E assim você pode ver a página inteira agora um pouco mais clara. Ok, então vamos preencher a segunda coluna agora. Então o que podemos fazer é dizer é que somos preguiçosos, é que podemos copiar nesta coluna aqui e apenas colar sobre o topo desta coluna aqui. E em vez de falar de mim, quero que isto seja Experiência e Educação. E vamos fazer alguns antecedentes para este como pano de fundo. E então eu vou fazer luz primária. Vou mudar isto para luz de aviso de fundo. E vamos ver como isso parece. Então isso parece muito bom, exceto que temos esse tipo de grande lacuna aqui. E a razão para isso é que temos uma espécie de intervalo padrão entre as duas primeiras colunas. Então vamos resolver isso. Então aqui, podemos dizer que é lacuna mais I e II, não queremos uma lacuna entre essas duas colunas. E depois, se refrescarmos menos ômega, um pouco melhor. Ok, então nós meio que andaime a página de perfil agora. E então agora queremos extrair dados de uma planilha do Google que vamos usar para preencher esses cartões. Então isso faz com que seja super fácil se decidirmos que temos outro interesse. Se você é como eu, você ganha um novo interesse a cada dois dias. Em vez de voltar atrás e ter que implantar a visão ou qualquer coisa, você pode simplesmente entrar em sua Planilha Google e adicionar o interesse aqui e ele simplesmente aparecerá. Então vamos fazer isso a seguir. 7. Configuração de folhas: Certo, agora queremos habilitar a leitura e a escrita em uma planilha do Google. E vamos usar o “G spread” para isso. Então, se você vai para g spread dot ler o docs dot realmente passa por como fazer isso. Então, vamos para o console do Google Developers. E se você clicar nesta caixa suspensa aqui e criar um novo projeto. E depois vou chamar este perfil de frasco. E clique em Criar. E, em seguida, certifique-se de que o projeto está selecionado entrando e selecionando-o. E, em seguida, se habilitarmos APIs e serviços, e queremos habilitar a API do Google Drive. Então, se você digitar Drive e deve encontrar esse. E clique em Ativar. E então, se pesquisarmos o Planilhas, clique na API do Google Sheets e habilite essa. E, em seguida, se descermos para credenciais e clique lá, e, em seguida, clique em Criar credenciais e escolha conta de serviço. Vou chamar este perfil de frasco. E, em seguida, clique em Criar nome, clique em continuar e, em seguida, clique em Concluído. E, em seguida, se clicarmos em gerenciar contas de serviço. E, em seguida, se clicarmos nestes três pontos aqui e escolher Criar chave. E, em seguida, queremos escolher o tipo de chave de JSON e clique em Criar. E depois guarde isso. Em seguida, você deseja copiar o arquivo JSON que você acabou de baixar para a pasta do espaço de trabalho. E depois vou mudar o nome do meu perfil de traço do frasco, assim. E se você der uma olhada nisso, você deve ver que você tem todo esse tipo de informação lá dentro. Agora o que você realmente quer fazer é você deseja copiar este endereço de e-mail aqui. E então você deseja criar uma Planilha do Google. E eu chamei “Perfis do frasco Mente”. E o passo importante aqui é que precisamos clicar em Compartilhar em colar nesse endereço de e-mail e, em seguida, clicar nele para escolhê-lo. Podemos levar agora para phi e queremos clicar em Compartilhar. Então, agora, se voltarmos para o aplicativo Python e em requisitos, precisamos dizer ao Pip para instalar g spread. Então nós digitamos ci espalhados em requisitos. E então isso irá certificar-se de que esta linha aqui instala o módulo de propagação G usando PIP, que é um gerenciador de pacotes para Python. E assim, isso nos permitirá voltar ao nosso aplicativo e importar o spread G. E então abaixo aqui, podemos configurar J spread com a conta de serviço que acabamos de criar usando o criar usando arquivo JSON do ponto do perfil do frasco. E isso nos permitirá abrir essa planilha. Agora vamos usar duas planilhas nessa planilha. O primeiro, vamos manter as informações do perfil. E o segundo vai lidar com a página de contatos. Quando tivermos por perto para escrevê-lo. E para um teste rápido para ver se isso funciona, vamos apenas tentar adicionar um contato falso a essa segunda folha. Então, se guardarmos isso, e vamos voltar à nossa forma e adicionar uma nova folha na parte inferior aqui. E vamos renomear esses perfis. Então essa é a folha no índice 0 e contatos assim. E então se voltarmos para nossa página e atualizá-la, e isso está correto. Na verdade, nós não temos este módulo porque nós realmente temos reconstruir nossa imagem para que Pip possa instalar este módulo extra. Então vamos voltar e fazer isso. Então, se pararmos que gosta e apertarmos F5, isso irá reconstruir a imagem do Docker. E se voltarmos à nossa folha, deveremos ver, dependendo de quantas vezes você clicou em Atualizar, você deverá ver que escrevemos com sucesso na nossa Planilha Google. 8. Perfil de folhas: Agora, se voltarmos à nossa página de perfil, vamos querer ter uma linha onde especificamos o conteúdo. Um para os interesses, para a experiência e outro para a educação. E se fizermos isso um pouco maior para que possamos digitar algo aqui. Então vou dizer o meu nome. Walden, ponto ponto, interessante, ponto-ponto, ponto de interrogação. Experiente e a equipe. E tão educado que posso soletrar educação. Também. Tenho educação. Ok. Então vamos colocar isso em nossa página para que possamos vê-los aqui. Então isso é muito simples de fazer. Nós viemos aqui e vamos criar um objeto de dicionário de perfil. E vamos dizer sobre e vamos usar o perfil SH. E queremos olhar para célula específica nessa worksheet, que é b1. E queremos valorizar se essa célula. E vamos copiar isso. E aos interesses, Experiência e Educação. E isso ia ser B2, B3, B4. Guarde isso. Agora precisamos passar isso para o nosso modelo. Então a maneira como fazemos isso é fazendo perfil igual a perfil. Então eu vou modelo terá acesso a este objeto de perfil. Então, se entrarmos em nosso modelo agora e podemos simplesmente encontrar são cartões relevantes. E em vez de colocar sobre mim assim, nos colchetes duplos da rede, podemos fazer o ponto de perfil sobre. Vamos copiar isso. Interesses de pontos periféricos por ponto de arquivo experimentam profile.edu. Então, agora, se voltarmos aqui e fazer uma atualização, como você pode ver, agora temos as informações da planilha do Google diretamente em nossa página de perfil. Então, digamos que se eu quiser expandir isso, eu posso simplesmente entrar aqui. Então volte aqui para se refrescar. E isso aparece imediatamente aqui. Agora há outras coisas legais que você pode fazer. Como talvez você queira enviar através algum estilo HTML para que alguns perfeitamente possível. Não vou fazer isso com cerca de, mas vamos fazer isso pelos outros. Então, se eu fizer, se eu remover as coisas para que eu não tenha qualquer estilo existente e ter que fornecê-lo sozinho. E o que eu preciso fazer. No final disso, posso dizer seguro. E isso significa que renderizaremos o HTML porque o designamos como HTML seguro. E então um momento ficou ótimo porque nós não temos, nós já temos o parágrafo aqui, mas nada aqui. Mas vamos, eu vou colar algumas coisas na planilha. Então, se eu colar em algum HTML que eu preparei anteriormente, então eu colei isso agora. Então, se eu voltar aqui e fazer uma atualização, como você pode ver, nós temos algumas listas não ordenadas. E você pode realmente colocar qualquer tipo de HTML que quiser aqui. E isso será refletido em sua página web. 9. Contatos: Ok, então vamos começar a trabalhar no nosso formulário de contato agora. Então, se clicarmos com o botão direito do mouse em nossa pasta templates, escolha Novo arquivo. E vamos chamar este ponto de contato HTML. E vamos apenas trapacear um pouco e copiar alguns dos HTML deste index.html. Na verdade, antes de fazermos isso, vamos consertar este título aqui. Então vamos chamar isso de minha página de perfil. E vamos copiar tudo isso em contato. Vamos nos livrar dessas duas seções. E chamaremos esta página de contato. Ok, então isso vai ter apenas uma seção e ele vai conter um formulário. E essa forma vai consistir apenas de uma coluna. Então configure colunas aqui. E nós estamos realmente indo para fazer uma solicitação de postagem para a nossa página principal index.html quando clicamos no botão Enviar. Então vou te mostrar como isso funciona daqui a pouco. Então vamos configurar uma única coluna. E queremos ter certeza de que o texto está à esquerda. E isso vai ser, novamente três quintos. Temos um deslocamento de 1 quinto. Então vamos criar nossa primeira falha. E um campo é apenas um recipiente para um rótulo e um controle. E é o devido rótulo primeiro. Isto vai estar no campo de nome. E tão cinza para controlar, que é apenas um tipo de entrada de texto. E vamos nomear esse nome de entrada, que é importante quando queremos acessar isso como parte da solicitação de postagem. Ok, vamos criar outro campo, vai ser o campo de e-mail. Agora nós queremos rotular e eu vou começar a usá-lo apenas para acelerar as coisas. Então queremos controlar a entrada. E queremos dar o mesmo nome. E o nosso último campo, que vai ser a mensagem falhou. Tantas gravadoras Nader. Quem é a mensagem dele. E controle vai ser uma área de texto porque o nome da mensagem pode excluir isso. E finalmente, vamos ter um botão que diz “enviar mensagem”. E isso vai enviar um pedido de postagem como em breve. Então, se escrevermos contato aqui, não podemos encontrá-lo porque eu vou torcer por ele ainda. Então vamos resolver isso agora. Então, se voltarmos para o aplicativo dot PY arquivo, e vamos criar uma rota para contato. Então nós criamos uma função chamada contato, e isso vai retornar o modelo HTML ponto contato. Então, agora, se nos atualizarmos, devemos ver nosso formulário aqui. E não está funcionando corretamente porque isso deve estar no centro. Então vamos ver o que está acontecendo lá. Ok, então cometi um pequeno erro aqui. Então, em vez de ISAF offset 1 quinto traço necessário entre o um e o quinto. Então, se guardarmos isso e voltarmos e fizermos uma atualização. Como você pode ver agora, um formulário de contato está centralizado corretamente. Então, ser muito bom se eles enviam botão de mensagem atravessou eles formam e foi cor ligeiramente mais agradável. Então vamos resolver isso agora. Vamos torná-lo uma cor azul e vamos ajustá-lo para largura total. E então eu acho que só precisa ser um pouco mais ousado. Então vamos resolver isso. Ok, então eu estou feliz com este formulário de contato agora. Então vamos fazê-lo para que possamos chegar ao formulário de contato a partir do botão. Então precisamos alterar este H. ref. Então, a maneira como fazemos isso no Flask é que usamos isso para a função e nós realmente passá-lo o nome da função de contato, assim. E então vamos colocar o árbitro H aqui para o seu canal no YouTube. Então eu vou colar meu canal no Youtube aqui. Então, se eu clicar em contato agora, devo nos levar para saber que não temos como voltar. Então vamos consertar isso agora. Mas vamos verificar se o YouTube também funciona. Sim, isso é bom. Então vamos fechar aqui para podermos voltar se não quisermos enviar uma mensagem. Então, se voltarmos para o nosso Contact dot HTML, e vamos apenas colocar outro campo no topo aqui. E este será um link de exclusão de classe. E novamente usaremos todos os quatro. Mas desta vez é a função doméstica. E queremos que o nosso botão de exclusão irá fechar botão para ser grande. E queremos encostar à direita. Se guardarmos isso. E agora temos um botão de fechar aqui, qual podemos clicar, e ele nos levará de volta à nossa página inicial. Ok, se formos a um formulário de contato e clicarmos em enviar mensagem, vamos ter este método não permitido porque estamos tentando fazer uma solicitação de post para a nossa função doméstica. E se dermos uma olhada nessa função doméstica, ele só tem um aplicativo padrão que só lida com solicitações get. Então, a maneira de corrigir isso é especificar os métodos que podemos usar. E você quer dizer que podemos fazer um método post e o método get. Então, agora, se nós salvarmos isso e clicar aqui, agora é feliz e vai voltar para aqui e fez um pedido post aqui, mas onde nós não lidamos com isso. Então vamos lidar com esse pedido agora. Então, a partir de Flask, queremos importar solicitações para que possamos lidar com diferentes tipos de solicitações. E o que queremos fazer é que você quer dizer se o método de solicitação É igual a postar. E nós realmente queremos fazer muito bem esta linha aqui. Então vamos pegar isso, cortá-lo porque nós vamos querer fazer, nós queremos fazer isso aqui em baixo. Mas em vez de anexar Bob, todas as vezes, queremos mudar o que está vindo aqui da nossa forma. E assim nós temos dois formulário fazendo um formulário ponto pedido. E então especificamos o nome do controle. Então, se eu copiar isso, colar isso aqui e sabemos que estamos enviando o nome, o e-mail e a mensagem. Então vamos dizer isso. Primeiro de tudo, vamos voltar à nossa planilha e entrar em contatos. E temos um monte de Bob dentro. Vamos deletar Bob. Vamos voltar para a página. Arranja um contacto. E se você clicar em enviar jetpack, Jamnagar. Acrescentamos a informação que vem do formulário. 10. Implementação: Vamos implantar nosso site agora. E uma vez que estamos usando o Planilhas Google, por que não implantar nosso site usando o Google Cloud para se você ir para a nuvem dot google.com forward slash SD clay docs instalar. Então você deseja instalar o Cloud SDK para o seu sistema. Então eu estou no Windows, então eu iria baixar e executar este instalador do Cloud SDK. Portanto, siga essas instruções aqui e instale o Cloud SDK. Então vamos voltar para o console do Google Cloud Platform. E novamente dentro de um projeto de perfil de frasco, vamos querer procurar o Registro de Contêiner. Então, se você clicar sobre isso e queremos habilitar a API Container Registry. Então, se clicarmos aqui, isso está habilitado o registro de contêiner, mas não temos nenhum repositório lá no momento. Então isto está em branco. Se apertarmos a atualização, fomos dizer qualquer coisa aqui. Isso é bom. Então, se voltarmos ao código VS agora, agora dentro de nosso arquivo de encaixe, na verdade, precisamos alterar essa linha para torná-la um pouco mais feliz para o Google Cloud. Então, se comentarmos esta linha para fora e então eu vou apenas colar na linha que é necessária. Então é bastante semelhante, exceto que ele precisa desta porta aqui e também especificando as obras e threads através que queremos usar. Vou deixar isso na tela por um segundo. Você sempre pode pausar o vídeo e digitar isso. Então, vamos salvar esse troll s. Então, primeiro de tudo, precisamos ter certeza de que estamos no Projeto G Cloud correto. Então, se fizermos projeto de configuração G-Cloud e nosso projeto é chamado perfil de traço Flask. Então vamos construir a imagem do Docker. Então podemos fazer imagem de encaixe construída. E precisamos marcá-lo com um nome muito específico, que é g x0 ponto barra perfil. E este deve ser o nome do seu projeto. E então eu vou chamar meu perfil de traço de frasco de imagem também. E eu vou usar a etiqueta um. Pode ser qualquer coisa. E eu esqueci de colocar os pontos no final. Então você tem que fazer espaço. E dizer que estamos construindo o diretório de trabalho. Ok, então isso construiu a imagem. Então agora queremos fazer um estivador. Empurrar perfil do balão barra perfil do balão, etiqueta de carillon um. Então isso empurrou nossa imagem para o trem de posição deles. Podemos verificar isso, subindo aqui e clicando em Atualizar. E temos nossa imagem de perfil de fio dental lá. E agora podemos fazer G-Cloud. Corra. Implantar. Traço, imagem do traço, barra de ponto g, frasco por arquivo, perfil do traço do frasco de barra, ondulação em Guam. E queremos escolher a opção uma nuvem em torno do nome de serviço totalmente gerenciado está correta, então eu vou apenas pressionar enter. Portanto, o Google Cloud R1 ainda não está ativado neste projeto. Portanto, queremos ativá-lo e tentar novamente. Então vamos dizer sim a isso. Então isso habilitou isso com sucesso. E queremos escolher onde queremos implantá-lo. Só vou dizer o Leste dos EUA. Vou dizer sim a isso porque é uma página pública. E então agora devemos ser capazes de ir para este a e C estão executando aplicativo. E então você vai, temos implantado página da web para o Google Cloud ram. E a coisa boa sobre a execução do Google Cloud é que ele oferece uma página HTTPS totalmente funcional. Então você não tem que fazer mais configuração para fazer isso funcionar. Então, isso é muito bom. E então, é claro, você sempre pode configurar um domínio personalizado aqui também.