Preparando o Ambiente

Vamos criar o nosso ambiente virtual de desenvolvimento para

que assim a gente consiga instalar o flask nesse ambiente virtual.

Primeiramente você deve ter um diretório que você escolha

trabalhar com o seu projeto.

- Vamos criar uma pasta : Flask.

- vamos criar uma subpasta com o nome do nosso projeto
(ecommerce).

Agora vamos abrir o Visual Studio Code e passar o diretório da

nossa pasta que criamos.
Vamos criar um ambiente virtual de desenvolvimento chamado venv
Então, dessa forma a gente acaba isolando aqui o nosso, a estrutura do
projeto e aí depois, quando quisermos, por exemplo, fazer o deploy do
projeto, vai ficar bem mais fácil.
Precisamos agora ativar nosso Ambiente
FLASK é a biblioteca que estaremos utilizando aqui, o micro framework para
construir o nosso projeto .
Vamos verificar se foi instalado
Testando o FLASK
Flask Snippets : Essa extensão ela vai te ajudar para que você
tenha ali alguns recursos de auto complete quando estiver utilizando o
flask.
Vamos criar agora um arquivo com o nome : app.py
A primeira coisa pessoal que a gente precisa fazer para trabalhar no flask é
configurar um decorator. Esse decorei é o arroba, exatamente o nome que eu
estou utilizando aqui, o arroba app e nesse decorei a gente configura, por
exemplo, a rota.
Vamos executar o App.py
Modo de Debug
Eu vou chamar o meu arquivo app run e eu passo aqui no final menos menos
debug.
Vamos testar novamente alterando para H1
Testando uma Nova Rota
Então imagina o seguinte eu tenho que barra sobre e eu estivesse me referindo aqui com um
usuário. Então eu vou adicionar aqui um parâmetro chamado de o usuário .
Criando Página HTML
Vamos criar uma pasta agora para armazenar todos os arquivos
HTML : templates
Dentro da pasta templates vamos criar um arquivo com o nome : home.html
Vamos colocar a estrutura com o comando ! + TAB
Vamos agora nomear o title para Home e o body Home Page
Já tenho então a minha página HTML. Agora vamos integrar a
pagina Home ponto HTML aqui no arquivo a, pp, p y.
Nesse caso eu vou precisar importar aqui um outro módulo que
é o render de line template de uma outra função, e render
render lá em template.
 Agora vamos começar estilizar a nossa página
Vamos alinhar o centro. style="text-align: center;">Home Page

Vamos colocar uma linha com o <hr>

 Integrando com o Bootstrap

O Bootstrap é um framework popular e poderoso que

simplifica o desenvolvimento web, oferecendo uma
estrutura sólida e flexível para criar interfaces
responsivas e modernas. Ele é amplamente utilizado
na indústria e recomendado para desenvolvedores que
desejam agilizar o processo de design e
desenvolvimento de seus projetos web.
Para o nosso exemplo vamos utilizar o
Bootstrap CDN, que é mais prático.
Vamos importar o CSS, o JavaScript e o JavaScript Bundle.
Vamos importar primeiro o HTML
Esse comando aqui que é para importar o CSS do bootstrap.
 Vamos agora clicar em HTML, que é o nosso caso e vamos agora
importar aqui o JavaScript
Vamos adicionar aqui antes de fechar a tag bar e ele importa
então.
E por último, nós vamos precisar também do JavaScript Bundle.
Vamos colar loogo abaixo do Bootstrap min.JS.
Atualizando Veja que mudou até a forma a disposição aqui
das letras.
E sim, nós fazemos sem fazermos nada, sem utilizar nenhum
tipo de class. Só o fato de importarmos o CSS do bootstrap
ele já conseguiu reconhecer que uma estilização diferente.
Se você vir aqui agora, o código fonte da página. Já
estamos utilizando aqui pessoal, o bootstrap em nossa
aplicação, em nosso projeto.
 Navbar.

O Navbar é um elemento muito legal que reúne, digamos, itens de

menu para que assim a gente consiga encontrar mais facilmente
as funcionalidades que terão no nosso projeto.
Vamos escolher o primeiro link vavbar. Bootstrap v5.0
Vamos colar antes do home page o cod.navbar .
Vamos formatar o nosso navbar
Vamos agora fazer algumas alterações no nosso código

Deletar Deletar
Outro ponto também o navbar aqui eu não vou deixar light, eu
vou deixar dark, vamos deixar na cor escura .
Vamos deixar aqui o home e o produtos aqui desse lado esquerdo e o login e o cadastro
vamos colocar para a direita.

Basicamente eles estão todos dentro de uma div.

Nesse caso vamos ter que quebrar em duas div está então o home produtos.
Vamos recortar aqui CTRL+ X, eles vão ficar dentro de uma outra div,
Vamos colar em outra div
Não podemos deixar de colocar a class = “navbar-nav” na nossa DIV
No Bootstrap você pode definir seus ID se quer os itens do lado
esquerdo ou do lado direito.
esquerdo : me-auto
direito : ms-alto
Melhorando o Estilo
Vamos agora ao final do </body>, colocar um <Style> e aí o estilo vai ser exatamente
em tudo o que tiver em </body> .
Estaremos adotando aqui uma cor de background, uma cor de
fundo mais escura e uma cor do texto mais clara.
Criando uma nova Página
 Vamos começar aqui pela rota.
A idéia é apresentar os produtos de forma tabulares e possamos então obter
mais informações daquele produto.
 Vamos agora criar a página produtos em html
Vai até a pasta Templates clica em new File e dê o nome para
seu arquivo de “ produtos.html “
Agora vamos copiar todas as linhas de programação da pasta
home.html e colaremos na pasta produtos.html
Fazendo o texto , vamos chamar /produtos
Adicionando dados
Então vamos ir no arquivo app Python e antes dele retornar aqui o template vamos então
criar aqui uma lista chamada de itens.
Agora venho aqui no arquivo produtos e recupero os itens que eu
estou retornando aqui na minha função.
Vamos atualizar a nossa Página produtos
Recuperando os Dados na Página
Vamos criar uma tabela agora para deixar os dados de uma forma tabular.
Vamos Aticionar um <Table> nessa table vou ter um <thead> onde vou colocar as colulas
E vou colocar um <tbody
Aqui as colunas que temos
Aqui vamos ter as Informações
Vamos só melhorar aqui um pouco. Então eu posso utilizar aqui
a class table. Vamos utilizar a classe table do bootstrap.
Agora já esta ficando bem melhor nossa tabela .
Aqui no Dentro do Tbody eu tenho que fazer uma iteração.
Vamos interar a nossa lista.