E fala pessoal sejam bem-vindos a mais uma aula e na aula de hoje nós vamos desenvolver juntos essa 10 tipos de parar análise Empresarial com python Django e chart DRS Então vem comigo que eu vou te mostrar passo a passo de como foi feito essa aplicação então primeira coisa que eu separei aqui para gente é esse material de apoio Então aqui tem todo o passo a passo que nós vamos desenvolver durante essa aula caiu hoje Que eu consegui esse material de apoio aqui na descrição do vídeo tá o link do material de apoio então assistir
essa aula do lado do material de apoio deixa um do lado do outro para que você consiga fazer as coisas sem ter problema nenhum durante todo o aprendizado Então vamos lá eu tenho aqui já o meu verso pode aberto e dentro do meu vs code aqui eu estou na pasta dashboard YouTube que foi a pasta exclusiva que eu separei para essa aula então vamos lá pessoal Antes a gente conversar aqui não se esquece de seguir a gente em todas as redes sociais que está aqui na descrição tem o nosso brinquedinho kit Rubi é Instagram segue
também aqui se inscreve aqui no canal do YouTube para você res os vídeos como esse Então vamos lá pessoal agora vamos colocar a mão na massa aqui começar a desenvolver Nossa aplicação a primeira coisa que eu preciso fazer é instalar aqui abrir a nossa virtual Enfim então vamos ativar Aqui nosso ambiente virtual então para ir para isso eu vou rodar o comando o pai então 3 - faixa 13 - e Me vende espaço vende eu estou no Linux por isso eu rodo comando Python 3 Se você estiver no Windows o comando que você vai rodar
não é o comando o pai três e sim o comando Python - e Me vende vem vi eu não sei que você tenha feito a instalação um pouco diferente aí pode ser que seu comando que você tem que usar seja parte 13 pai então quais são 3.9 pai 3.8 e assim por diante vai depender da instalação do seu pai Tom se apenas pai então não deu certo Tenta comprar então três não deu certo tenta o pai Tem alguma versão que você tem instalado no meu caso é parte 13 - M vem vivem vi isso vai
fazer com que eu tenho meu ambiente virtual é instalado aqui dentro então criei meio ambiente virtual essa pastinha chamada vende-se e agora ativar o meu ambiente virtual Então vou rodar Se vende barra de em barra activate para ativar o ambiente virtual no Linux é dessa forma que se faz se você está no Windows é um pouquinho diferente você vai ter que colocar vem de Barro inscritos barra que tiver de pontos se. Bete Se você estiver no cmd e. PS1 Se você estiver no powershell Como que você sabe qual o terminal está você está utilizando tá
vendo no canto aqui superior direito do meu terminal aqui Está escrito bege porque eu estou utilizando o terminal do Linux então se você está no Windows vai tá escrito ou cm de ou powershell Ok então vamos lá agora eu preciso adicionar a criar a nossa aplicação Django Calma que ainda não instalei o Django vamos instalar ele primeiro então PIP instal Django com isso eu vou ter o Freio porque Django instalado na minha máquina e feito isso a gente pode partir para o primeiro passo aqui o material de apoio crie seu Projeto Django então pra isso
vamos rodar o comando django-admin.py start Project o nome do Projeto Espaço em um ponto então vamos lá vamos limpar o terminal que vou até aumentar um pouquinho aqui minha fonte para vocês enxergar e melhor então vamos lá agora que eu tenho o Django instalado Eu Posso rodar o comando django-admin.py startproject agora eu dou o nome para o projeto vamos chamar de dashboard e eu vou colocar um ponto Logo após o nome do projeto feito isso a gente pode perceber que foi criada as duas passa a pasta do Django aqui ocorre E também o menos ponto
Pai eu não vou entrar em detalhes de cada coisa aqui do Janga porque ele nessa aula é o parto do pressuposto que você já tem conhecimentos básicos sobre o Framework Django Ok se você não sabe o básico do freio do freio que Diego existe um vídeo aqui no canal chamado Django Passos iniciais vou deixar o like E se eu nem Que por esse vídeo aqui na descrição também então vamos lá feito isso agora que que nós vamos fazer Vamos definir aqui as configurações iniciais então Vamos definir onde nós vamos buscar por templates vamos ver aqui
séries eu vou pegar esse comando aqui que tá aqui na primeira linha e vou colocar aqui dentro da minha templates onde tem meu Dirce don't control ver aqui vai me dar um erro porque eu não tenho o s não importei o Aécio Então Vamos me aqui e simplesmente falar em porte Oeste e pronto agora não vai dar mais ele se a gente voltar aqui o nosso colocar o código não tem mais erro agora Vamos definir também os nossos arquivos estáticos é hoje nós vamos armazenar seus arquivos de CSS JavaScript e etc Então vamos dar um
control V aqui e Beleza então estou falando que eu vou procurar por arquivos estáticos salvar meus arquivos estáticos dentro da pasta tem Plays/estética Ok os nossos estética erros essa daqui a quando vai para produção vai ser na pasta estética mas é que a gente não vai se preocupar que o parto do pressuposto que o básico sobre Django você já sabe como eu falei então agora nós temos que criar um AP Então vamos rodar aqui comando Vamos abrir nosso terminal o terminal Python 3 mênade. Pai start-up eu vou chamar esse ep de minha dashboard dashboard O
modo código e aqui se não deu uma mensagem nenhuma de erro porque tá tudo ok como você sabe se deu certo se uma pasta chamada minha dashboard foi criada aqui aí agora que que você precisa fazer sempre que você cria um novo é pra você sempre precisa instalar este ep lá no seu arquivo de configurações então aqui dentro do externo apps eu vou colocar aqui a minha época Acabei de instalar Então minha underline dashboard o efeito isso aqui dentro de 10 por dentro de Série em si dentro de instalar apps eu instalei o app que
eu acabei de criar então vamos para os próximos passos O que eu preciso fazer aqui agora é é Style apps E aí sério Então os pais já fizemos isso cria uma URL para o arquivos estáticos e para o seu ep Então vamos copiar aqui vamos vir aqui em dashboards e aqui em URL nós vamos Apagar tudo isso daqui e dá um Control V no que nós temos aqui então o que que nós estamos fazendo nós estamos Basicamente que dentro dessa variável que o URL patrões nós estamos criando as nossas URL então aqui eu estou criando
duas URL a primeira ou erreala pronta para a área administrativa do Django isso daqui como você pode perceber na sua máquina esse código já vem para o padrão só dá um controle aqui ó sem eu ter feito nada nós já temos aqui a nossa nossa URL para o admin só que isso daqui vem por padrão preciso adicionar minhas novas URL sentam para isso o que que eu Fiz eu importei o includ então a PF uma string vazia Ou seja eu quero uma url vazia porque aqui tá vendo que a gente acerta 127.0 10.12.18 mil a
gente não coloca a barra nada da gente coloca a barra de mim lá em barra nada do tipo por isso que eu coloquei aqui uma string vazia e eu falo que essa URL vai apontar para minha dashboard. O URL e depois aqui eu crio uma URL para a gente para servir os arquivos estáticos é onde a gente vai poder colocar Aqui/barra esthetic esthetic/minha foto ponto.png minha foto o ponto png se essa foto existe ele vai exibir a foto aqui para gente e que vai ser uma pessoa que eles estáticos arquivos Java scripts e arquivos CSS
Ok então com isso nós temos a nossa URL na sua ela está apontando para um arquivo chamado URL dentro de minha dashboard então por isso aqui no minha dashboard que é o ep Que Nós criamos dentro dessa pasta ele não existe nenhum arquivo Chamado URL. Pai por isso eu vou vir aqui pressionar com o botão direito do mouse em um Firewall chamar de urls. Ai agora dentro desse arquivo nós vamos dar continuidade aos próximos passos então é que eu falo cria um arquivo urls.py pai na sua ep Então vou dar um control c control V
então quê que eu estou falando primeiro importei from Django from de água. Rs import PF é que eu falo rlp tênis ou seja nossa viu a nossa URL ou aqui nós definimos a falta de uma Aplicação vai ser igual a uma string vazia novamente ou seja se você só uma string vazia é sempre eu vou chamar uma função do pai tão chamada home Eu dei um name pressa url de fome por exemplo e avisa onde vai ficar a nossa lógica do nosso projeto esse arquivo que viu os pontos pai então from to Import vírus então
da própria passa que eu estou importe o arquivo fios e aqui eu falo que eu vou quando você sai URL string vazia eu vou chamar A BIOS. Home Então dentro do arquivo Bios para o pai eu não tenho praticamente nada então que eu preciso fazer criar a minha a minha viu na qual vai receber uma webquest e retornar uma response então defe home ela vai receber uma requeste como parâmetro então uniquest: e aqui só para testar a gente pode dar um return http response http response é que eu vou colocar um teste Então eu só
confirmar se está gravando aqui pessoal tá tudo certinho Beleza então agora que que nós precisamos fazer testar isso daqui então vamos rodar o servidor para ver se está funcionando eu estava vendo essa dashboard aqui só que essa dessa pode Nossa aplicação que eu vou dar um F5 aqui vai falar não é possível acessar o site porque nosso servidor não está rodando então o que que eu vou fazer eu vou vir aqui e vou dar o comando o pai tem 13 - de ponto pai o ramo server feito isso pressione Enter ele vai mostrar Starter vela
development server e aqui se eu pressionar F5 ele vai mostrar o teste aqui ou seja significa que está tudo funcionando até agora então vamos lá e dar continuidade aos nossos passo a passo para o desenvolvimento da nossa dashboard aqui é queria vir o home Aqui nós já criamos a ver o home Só que tem uma diferença porque aqui nossa Viu como ele está renderizando um HTML Então vamos fazer isso em vez de eu dar um Retorno http-response eu quero que eu quero reler renderizar um HTML Então vou chamar a função Render tá bom essa função
Recebe requeste como é como primeiro parâmetro o meu conhece a gente recebeu que na nossa própria função e que eu vou passar o caminho de uma de uma determinado arquivo chamado um arquivo HTML então home e ponto HTML e aqui eu preciso criar uma pasta chamada tem Place então nenhum folder chamada tem play porque é dentro da pasta tem Place que o Django procura pelos arquivos HTML Então dentro dessa pasta templates eu vou criar um ensaio chamado home. HTML dentro pessoal aqui vou escrever testando só para gente saber se tá tudo certo testando se eu
vim aqui agora no meu navegador pressionar F5 ele falou template não existe por quê que isso não existe e vamos ver que está dando de erro se eu pressionar aqui encontro F5 homem. HTML aqui eu queria o home. HTML Template deixa eu parar o servidor e rodar novamente para garantir que tudo foi atualizado e agora sim não tinha atualizado o servidor então Aqui nós temos vai escrito testando ou seja aqui isso que está dentro do Home. HTML foi renderizado aqui pela nossa Viu então tá tudo funcionando perfeitamente vamos continuar agora que eu falo aqui agora
vamos criar uma HTML para servir de base ou seja esse HTML aqui vai ser o HTML Onde outros HTML na nossa aplicação vai poder estender imagina que a sua aplicação tem algumas coisas em comum em várias páginas como por exemplo aquelas barras de navegação você vai ter que escrever o código em HTML e CSS é para todas as páginas daquela mesma barra de navegação você não precisa repetir esses códigos então o que que você precisa fazer criar um arquivo chamado base. HTML e as suas outros arquivos HTML vão estender deixar Arquivo chamado base Então vem
aqui comigo que eu vou te mostrar como que faz a quarta com o botão direito New Folder e digita template isso na raiz do projeto fora de nenhuma pasta eu queria quê e três dentro de tempo em cima vamos criar um novo arquivo eu vou chamar de base. HTML deixa ativo base. HTML você pode colocar o que você quiser eu sei que ele vai servir de base então para isso eu gosto de pegar o Bootstrap não sou de sabo Travis multistep Eu não quero GTA e com aqui não vou deixar muito estepe tem um frame
aqui CSS para ajudar a gente a criar páginas mais utilizadas vou selecionar a versão 4.6. X eu vou vir aqui pegar o Starter template dá um copo e nele vou vir aqui e vou dar um control ver aqui eu vou separar apagar tudo isso daqui que eu tiver traz para gente que a gente não vai utilizar aqui agora para gente pode tirar esse daqui a gente pode tirar isso daqui também Podemos tirar isso daqui também e é esse Hello hoje nós podemos tirar eu quero que apareceram hello world aqui no Bootstrap nós podemos tirar de
podemos tirar também e aqui o Anonymous Rio crossorigin eu quero tirar também para eu amei E aí beleza e E aí perfeito Então feito isso eu tenho o nosso template Inicial Agora que que eu preciso fazer eu quero vir aqui minha dashboard vou vim aqui em templates home E aqui dentro de Roma e que que eu vou fazer fazer eu vou estender de base. HTML então vou fazer assim {porcentagens eu vou escrever aqui é que tênis base entre aspas base. HTML então agora quando eu pressionar F5 na página ele vai me mostrar que uma página
em branco porque o meu base porque eu tenho ele não tem nada só colocar aqui qualquer coisa base.net ml quando eu pressionar F5 Ele me mostrou que o base. HTML agora que Que eu preciso eu quero que em home é digitar alguma coisa e fazer com que essa coisa Apareça aqui no meu navegador que não tá acontecendo agora então nós vamos criar blocos de códigos dentro de base. HTML que será um substituído por ó a passar aqui dentro da Roma então vou fazer assim ó aqui no Taiti o que que eu vou fazer vou abrir
Chaves Abre de porcentagem se inscrever Block é que eu vou dar um nome para esse bloco pode ser o nome que eu quiser vou chamar de Título por exemplo eu vou vir aqui abri chave de novo fecha as chaves Abrir porcentagem fecha a porcentagem vou escrever em diblock e o que significa que isso daqui não será exibido na nossa página HTML ele será substituído por algo que a gente passar lá no nosso home eu vou fazer essa mesma coisa então vou colocar aqui dentro dentro do Red também confirmar de rede Então tem um bloco para
dentro do título um bloco para dentro do Red e um bloco Aqui que eu vou chamar de bode agora aqui na nossa home ponta HTML eu posso fazer assim eu posso vir aqui colocar Block eu vou falar que eu quero acessar o bloco título eu vou colocar aqui um and Block o and Block and Block aqui dentro do and Block eu vou colocar dashboard dashboard presta atenção se eu vim aqui que que tá acontecendo o título da minha página Hello, o Word e um ponto De exclamação quando eu pressionar F5 isso daqui mudou para dashboard
ou seja o que eu coloquei aqui dentro dessas tags foi substituído aqui dentro Eu posso fazer a mesma coisa com bode então se eu copiar isso daqui dá um control c control V trocar aqui para Bori e trocar aqui parar deve vão deixar de se falar de mesmo agora ele vai exibir dashboard no lugar que estava a minha tag Body meu bloco bode Ok PSOL Então feito isso nós temos aqui o nosso arquivo base. HTML Então agora vamos criar o HTML para servir de base perfeito já fizemos isso é feito isso vamos criar o home.
HTML e estender de base então a gente já fez bastante coisa sobre isso nós já temos aqui o ex tem de base conta que tem ml mas já e o bloco título mas já temos também o blockread nós não temos nós vamos criar esse Block Red por caso a gente precisa mais para frente a gente já tem aqui ó então Block in red e eu vou colocar aqui um and Block Depois aqui dentro do bode que se eu faço eu queria uma div e eu te dou o nome pressa dividir Class container essa devia-se container
aqui é uma classe do múltiplo é porque a gente importou então ela vai deixar as coisas um pouco mais bonita para a gente vai facilitar o nosso trabalho agora ele já fica um pouco mais entre aspas centralizada ele não aparece aqui no cantinho da tela fica um pouco melhor só por a gente ter essa nossa div container Então agora nós temos esse arquivo HTML aqui aqui ok pessoal então agora que que nós precisamos fazer agora eu falei assim ó agora vamos criar um arquivo. CSS vamos fazer isso porque eu vou vim aqui eu vou vir
aqui dentro da pasta template essa pasta tem empresa aqui que está fora de tudo fora de todas as passas na raiz do nosso projeto essa parte aqui eu vou vir aqui dentro dela vou criar um New Folder vou chamar de estética porque de estética porque é o Nome que eu dei lá dentro de séries então se eu vim aqui em séries é um momento que eu dei para a pasta onde eu vou procurar por arquivos estáticos então que eu falei E aí eu disse para a gente vai procurar dentro de template ou seja dentro da
pasta templates dentro da pasta estética por isso que eu queria pasta em inglês e a pasta esthetic dentro da pasta tem estética eu vou criar duas outras pastas uma para chamada CSS e uma pasta chamada JS O J Opa eu cliquei para renomear o meu pai está com duplo clique que tá acontecendo aqui O opa E aí ai caramba e me mostra com um duplo clique Oi amor já tentar mais uma vez tá eu vou ter que fazer assim então o que eu vou fazer é isso aqui vocês não precisam fazer tackle crie a pasta
de vocês Normalmente só apertar o botão direito do mouse aqui foi é agora vocês vão vir aqui é New Folder vocês vão colocar aqui JS se agora que você não tivesse ido eu ia dar um CD e a dar uma m cadir e criar a pasta através de comandos Linux Ok mas como eu Mouse que foi agora agora tá dando tudo certo aqui beleza então eu vou voltar a rodar no servidor então agora dentro da pasta estética e nós temos as outras duas pastas na pasta chamada CSS uma parte chamada JS Então Dentro da pasta
CSS eu vou armazenar meus arquivos de CSS de estilização e dentro da Costa JS o armazenar meus arquivos de javscript vocês vão nossos arquivos de linguagem de programação Java scripts Então dentro do arquivo da pasta CSS vou vir aqui e da uniu fahion dentro desse ensaio eu vou chamar Poderia chamar de qualquer coisa eu vou chamar de CSS eu vou colocar. e vocês pensam tem que ser ponto CSS o nome do arquivo pode ser o de sua preferência Dentro desse arquivo nós vamos fazer algumas estilizações então o que que eu vou fazer eu vou pegar
esse mole copiar e colar aqui ou seja essa parte aqui do código que eu deixei aqui preparado e está aqui que que eu estou falando aqui eu estou falando aqui a tag Body HTML eu quero que tem um background-color essa determinada cor aqui que é um azul bem escuro e eu quero que a cor dos textos que tenham lhe seja o ar que você já seja branco agora que que eu preciso Fazer para que isso se realize Por que eu sou o portal F5 aqui a nossa página está branca não tá da cor que eu
quero Ou seja eu quero que é essa tag aqui htmlbody ele fique tudo que esteja dentro ou seja o corpo do meu navegador eu quero que ele fique numa não tô mais escuro então aqui dentro de home dentro do blog Red o que que nós vamos fazer nós vamos ter que importar esse CSS então primeira coisa que precisa fazer é vir aqui em cima e colocar é { a Mensagem colocar load vou falar que eu estou carregando o que os arquivos estáticos então node-static Ou seja todos os arquivos que eu tenho dentro da de dentro
dessa pasta esthetic eu consigo trazer para cá agora aqui aí eu vou importar esse arquivo CSS Então abre aqui link réu = Style Street Style sheet eu vou passar uma garra F aqui dentro desse HF eu vou abrir Chaves} eu falar que eu estou utilizando aqui vou estático e vou Passar o caminho que está lembrando que o Django já vai procurar pelos arquivos estáticos dentro da pasta estética então você não precisa passar o caminho até a pasta estética e você pode passar o caminho a partir da Paz esthetic ou seja o arquivo que eu quero
está dentro da pasta CSS e o arquivo é o Barra CSS. CSS então eu procurei aqui dentro os arquivos estáticos em duas pastas Qual passo eu tá no arquivo dentro da pasta CSS não colou E aí agora eu vou para a Próxima barra entrei dentro da pasta agora eu quero um arquivo CSS pontos SS feito isso pareceu nem um F5 na minha página e ele não importou nosso arquivo vamos ver o porquê que está acontecendo aqui vamos ver aqui e inspecionar eu vou vir aqui no Red e é link réu stylesheet de Aparentemente está correto
e vamos ver agora se eu tentar acessar isso aqui pela URL ele vai funcionar É aquele funcionário me trouxe o arquivo então provavelmente é só o navegador que não carregou Então vou dar um contraste aqui vou dar o servidor novamente veja não F5 e ele não trouxe para a gente porque está acontecendo isso vamos ver se ele fala alguma coisa aqui aquele não é nada é link réu stylesheet HF e eu passei aqui todo o meu conteúdo então aparentemente Tá certo não estou enxergando O que que tem de errado Alguém tá enxergando pessoal o link
passei que o arquivo de estilização em Cascata que é o CSS e passei o HF aqui era para Tá tudo funcionando mas não está eu tentar abrir uma guia anônima será que vai funcionar não funcionou hum hum deixa eu ver aqui no base aqui o head vou pegar o head colocar embaixo do Bootstrap aqui vamos ver se vai funcionar aí funcionou que que tava Acontecendo é o meu eu tava fazendo a importação do Red e ele tava ficando aqui em cima eu quero que ele fica embaixo da importação do Bootstrap Ok então agora se eu
vim inspecionar a página o nosso link e ele vai estar aqui em baixo aqui ó ele tá aqui embaixo e agora sim funcionou Ou seja a cor do nosso tecido for Branco aí o fundo da nossa página ficou escuro Ok da forma na qual nós programamos para que seja então que eu falei lá agora vamos ter aqui no CSS faça a importação já fizemos agora basicamente a parte de interface aqui nós vamos dar uma parada que que nós vamos fazer nós vamos começar a modelar o banco de dados ou seja para que eu consegui fazer
uma análise Empresarial alguma coisa assim uma análise de dados para mostrar os gráficos que está acontecendo Eu preciso de algumas informações da empresa como por exemplo as ver é do outros vendedores para que eu consiga fazer essa análise gráfica Precisa ter um histórico das vendas para saber o faturamento Total então para isso nós vamos precisar de tabelas do banco de dados Então nós vamos ver aqui no arquivo models.py que nós vamos fazer vou vir aqui no nosso notion e eu vou copiar a todo esse processo aqui só confirmado tá gravando se não deu nenhum problema
Ok perfeito e aqui dentro de moda e os pontos pai lá de cima minha dashboard modo os pontos pai eu vou colar tudo que eu tinha naquele meu Arquivo aqui ó esse daqui control c control V Então o que eu estou falando aqui é o que ir lá from django.db Import models daqui já vem por padrão e eu e eu criei três tabelas do banco de dados a primeira tabela a tabela produto onde ela tem um campo chamado nome nesse campo é um campo de texto no charfield é quantidade máxima de caracteres que ele pode
armazenar São 50 caracteres depois eu tenho uma tabela uma colega chamada Vendedor onde ela também tem o pronome pronome com os campos aqui que quem vai seu tipo de dados que não vai ser um charfield com o max-len de 50 Ok e depois por fim nós temos nosso principal Campo que é o campo Nosso principal tabela que a tabela vendas essa tabela nós temos quatro colunas A primeira coluna o nome do produto onde ela é uma chave estrangeira com o produto ou seja essa classe aqui nossa depois eu tenho um campo chamado vendedor que é
uma Chave estrangeira como essa outra tabela do computador chamada vendedor ou seja aquela a gente vai armazenar um determinado produto e um determinado vendedor agora que eu não sei qual o produto foi vendido e quem fez a venda e depois eu tenho Total significa aqui é o seja qual foi o total daquela determinada compra e o tipo de dado foi um floatfield depois nós temos um data daqui é um o tipo de dado é um desde time Field e a gente definir o Valor padrão tão ajeitar um default é igual a Neide time ponto de
editar o canal que a gente importou a biblioteca desde time do Python aqui em cima OK feito isso eu vou parar meu servidor E Agora Nós temos que fazer as migrações não vou rodar pai então três menina de ponto pai meio que mais graysons isso daqui vai criar as migrações para gente agora nós precisamos enviar essas mediações para o banco de dados então pai tão três Mena De ponto o pai my great podem meu código ele vai criar todas as tabelas do banco de dados para gente agora que eu quero eu quero cadastrar essas tabelas
na minha área administrativa Então vou vir aqui nessa nesse arquivo chamado admin. Pai e nesse aqui vou fazer assim from. Models Import vendas Import vendedor e importe produto é produto amor apagar-se a linha aqui de comentário o Django atrás para gente eu não gosto deixar vou colocar admin. Site O outro register e eu vou registrar aqui é a tabela vendas eu vou registrar a tabela a vendedora EA tabela produto então botão 2 control v e trocar aqui para vendedor e trocar aqui para produto agora que que nós precisamos fazer Mas a temos aqui uma área
administrativa se eu vim aqui rodar um não server quando eu acessar tentar acessar aqui 127.0 tanan barra de mim ele vai me mostrar essa tela aqui para gente fazer um login primeira coisa que Eu te tá aqui ela tá em inglês a gente vai mulheres aqui para português daqui a pouco e é e também nosso ele tá pedindo um nem um pé só que eu não tenho nenhum seu nem um peço a gente para acessar essa área administrativa Então vamos fazer assim Pai são três menina de ponto pai Create super user tudo junto então Create
super de usar tudo junto a forma que eu escrevi aqui pressionei um em ter aquele vai me pedir digite 1 user name e Vou digitar Caio gente seu e-mail não quero e-mail nenhum então só pressiono enter minha senha vai ser um dois três quatro Digite a senha novamente um dois três quatro ali perguntar se você é muito fraca ela só tem número de etc eu vou pressionar um Y de esa Ou seja eu concordo com o meu senha seja fraca e aquele fala é super e usar clientes com sucesso então vou colar aqui meu código
novamente parte 13 - com os pais vão server pressionamos um F5 Então agora eu Vou vir aqui a antes disso vamos mexer no dashboard séries a gente olhar aqui nós temos um language code eu vou mudar esse negócio de Ponte para PT traço B Oi e eu vou mudar também o time Zone para América braço são underline Paulo America Agora sim podem ver o servidor pressione F5 E agora nossa administração do Django está em português Vou digitar aqui meu usuário e minha senha que nós acabamos De criar e pressionar em acessar Agora nós estamos dentro
da área administrativa do Django nós temos aqui produtos onde nós podemos visualizar os produtos existem vendas e vendedores então é que eu vou acessar vendas então aqui em vendas eu vou adicionar uma determinada à venda e essa venda Qual foi o nome do produto como eu não tenho um produto cadastrado nenhum ainda não consigo selecionar mas eu vou vir aqui no mais e digitar o nome de um produto Como por exemplo celular e pressione e selecione o celular preço nem salvar e ótimo preciso criar um vendedor também vendedora chamado de Kaio meu próprio nome sem
problemas preço além salvar e agora vou dar um total Qual foi o total dessa compra boi r$ 2000 Qual foi a data por padrão de já tem a data de hoje então vou deixar a data de hoje assim sem problemas vou pressionar em salvar e agora eu tenho aqui a minha vendo seja uma venda dentro do nosso sistema Perfeito vamos dar continuidade aqui o nosso sistema Nossa aplicação Então agora eu vou vir aqui no nosso notion e vamos ver quais são os próximos passos então aqui que eu tenho faça as migrações nós já fizemos nós
já fizemos também a criação na área administrativa que não tem o passo a passo neste tutorial mas agora a gente entra que uma outra parte aqui a gente termine a estrutura do seu HTML porque se a gente vir aqui só no 127.0 10.12.18 mil Pressionar um enter nós não temos praticamente nada não fml é simplesmente uma página com fundo preto escrito teste a gente já viu como que a nossa 10 o cara então preciso definir as estruturas o HTML onde vai ficar cada uma daquelas coisas então para isso eu vou vir aqui no notion e
vou copiar todo esse HTML eu vou explicar para vocês que que esse HTML faz passo a passo contra você vou vir aqui no meu home. HTML e o que tenho dentro de aqui dentro do contém não Presta atenção dentro da minha diva que tem atrás container eu dou um control V feito isso quando eu pressionar F5 nessa página ela fica dessa forma tá bem feia mas a gente já vai te fazer uma estilização então aqui que que eu tenho que que eu estou definindo primeiro aqui eu tenho é um ícone que seria o ícone do
mês atual do faturamento do mês atual com o valor que saiu faturamento no mês atual depois eu teria um ícone que representa as vezes as despesas e um Valor aqui pra onde eu vou colocar o total das despesas e aqui seria um núcleo da da empresa e um valor aqui onde eu poderia colocar o valor lucro da empresa do que a gente vai falar tudo fazer os cálculos certinho mas por me deixou aqui algumas coisas pré-prontas aqui o valor aqui por padrão só para a gente saber onde vai ficar o valor mas depois a gente
mude isso aqui deixa dinâmico daqui a pouco então que eu vou ter um lugar para o gráfico de Faturamento da empresa a gente vai fazer esse gráfico aqui as despesas os produtos mais vendidos funcionários do mês e depois que eu tenho um rodapé da minha aplicação agora esses ícones estão chegando estão tudo feio a nossa aplicação que nós vamos deixar ela um pouquinho mais estilosa então para isso nós vamos precisar de um CSS Então vou vir aqui copiar esse CSS e vou vir aqui dentro de CSS. CSS dentro de templates estética e CSS CSS pontos
ss e depois do Bode eu vou dar um control V fazendo isso nossa aplicação já vai ficar muito mais bonita agora que nós já temos um icones coloridos no fundo um pouquinho diferente um degradê isso tudo certinho esses valores aqui nós vamos mudar de nome que a mente daqui a pouco calma aí pessoal então quê que eu fiz nesse CSS primeira coisa que eu os Players essas pai com 20 sem entra online aí tem isso daqui tudo é para centralizar o texto e o nosso ícone dentro da nossa div depois Eu tenho um background Colors
tá vendo que o o a cor de fundo aqui desde desse elemento aqui é um pouquinho diferente dessa um pouquinho mais claro então por isso eu defini uma altura de 100 pixels poderia colocar uma altura maior mas não acho interessante porque senão F5 aqui mas já fica dessa forma mas eu acho que essa infecções estado ideal a 100 pixels é a forma ideal depois eu queria uma margem alto mas imagino Heart alto para ele também ficar Centralizado Depois eu tenho uma borda ela tem um pixel ela é sólida e ela é transparente para depois de
adicionar uma imagem a essa borda que é um linear-gradient É que eu queria um ingrediente do rosa para o azul em CSS OK depois eu dou um border border-image-slice para fazer com que a nossa borda em degradê apareça depois o margem Leste de um por cento só para gente dar essa separada aqui ok pessoal para não ficar todo grudados eu tiro esse daqui fica tudo grudado meio Estranho não fica legal questionar um controle sim ficaria dessa forma Então eu acho que esse margem Leste de um por cento deixa as coisas muito mais interessantes e depois
eu tenho aqui um ponto e Cone que eu defini uma cor rosa em aqui e um wi-fi de 40 pixels quer para esses dois e com isso aqui que tem um fundo rosa e o tamanho do determinado ícone agora vamos analisar o HTML se eu vi aqui em Roma em.hm eu estou fazendo eu primeira coisa que eu tenho é deixou Só diminuir um pouquinho aqui espero que vocês conseguir enxergar ela dá para ter uma visão Ampla então aqui primeiro que eu tenho é uma uma de ver como treinar que a gente já tinha criado dela
e dentro dela eu tenho aqui a minha div Class row row row aqui no Bootstrap representa uma linha então representa essa linha aqui com esses três elementos Então essa linha essa linha e essa linha Então dentro dessa roupa tenho três colunas essa coluna aqui essa coluna e Essa coluna que representa esse elemento esse elemento e este determinado elemento aqui por final e dentro desta div eu tenho aqui um cole traço MD Ou seja que a técnica Multiplex para definir as colunas e eu deixei aqui a classe informações básicas que a classe CSS que nós acabamos
de ver aqui ó essa classe se essa classe CSS que a gente definiu aqui e aqui dentro dessa diva eu tenho Primeira coisa um svg que é o ícone se eu tirar isso daqui ó o ícone Desaparece e depois eu tenho aqui simplesmente um spam com aí de faturamento e É nesse espaço que a gente vai colocar o faturamento da determinada empresa Caio onde que você conseguiu esse determinado o ícone o boto fé que já traz para a gente você está multicrepe multi Strap Aikon Aikon você pode vir aqui selecionar a o primeiro link que
aparece vim aqui em qualquer link por exemplo esse link aqui no banco e aqui vai ter lá Copo HTML e aqui você vai copiar Satanás o link e colar nessa da sua aplicação e você terá o ícone aqui ó agora eu tenho aqui o ícone do banco aí Aqui você pode utilizar se eu colocasse aqui classe ou padrão controle aqui você colocasse aqui Class A a Press o ícone e tirar esses dois valores aqui que seria altura e largura que já vem pré-definida preço nenhum F5 Agora eu tenho aqui o meu banco rosa e um
tamanho Um pouco maior Ok basicamente é isso um svg pressione F5 para voltar ao normal e voltou da forma na qual eu gostaria só confirmar tá gravando tá gravando perfeitamente Então essa primeira ou aqui é esses dois esses três elementos aqui agora eu tenho uma outra linha que a linha do faturamento ia das despesas onde a gente vai ter um gráfico Então eu tenho aqui uma outra whole Ok essa rua começa na minha 45 e termina na minha 60 aqui eu tenho uma div é que a clássico MD que representa a nossa coluna é que
uma outra coluna dentro dessa coluna Eu tenho um título escrito faturamento que é o que nós temos e depois eu tenho um Canvas com a e de faturamento mensal e com o índice de 250 em uma altura de 200 é dentro desse Campo se nós vamos desenhar o nosso gráfico então por isso que ele precisa estar aqui hoje já estamos definindo ele aqui dentro a coluna que a coluna das despesas eu tenho lá um H1 escrito despesas e um Canvas também para a gente vai escrever o gráfico das despesas e na próxima linha eu tenho
a mesma coisa para produtos mais vendidos e funcionários do mês com Campos aqui e o seu determinado o texto e por fim eu tenho footer que é o nosso rodapé aqui acho que aqui não tem segredo nenhum ok pessoal então vamos lá vamos continuar aqui no nosso notion vamos lá vamos agora tem que eu ver a viu responsável em calcular o faturamento total da empresa Porque até Então esse valor da esse aqui é simplesmente o valor que a gente colocou no HTML não representa o faturamento da empresa que a gente precisa fazer a gente precisa
ir lá no banco de dados ver tudo que a empresa vendeu e só mar todas as vendas Então a gente vai ter o faturamento da empresa então por isso que nós vamos vir aqui tinha aumentar a fonte agora um pouquinho eu vou vir aqui dentro Devils aqui dentro de viu eu vou criar essa Determinada função então eu vim aqui no no chão e copiar essa função não contra você e um control V aqui essa função que ela vai fazer lá simplesmente está ela está Somando todos os valores das vendas Então vou vir aqui fazer são
from. Models e importe vendas as vendas vou fazer um from Jungle. Http Import Jason se e depois um from Jungle ponto de bebê. Models importe a função some então beleza pessoal vamos prestar Atenção que essa função tá fazendo ela é muito simples a primeira coisa que essa função faz ela se chama retorna Total vendido nome bem explícito recebe uma requisição e quem é essa função vai fazer posso tá tirar esse fiz aqui para ficar uma função mais simples vamos procurar nele agora por enquanto não então aqui eu te querer uma variável chamada total e ela
vai ser igual a vendas. Org. UOL Ou seja eu trouxe tudo que eu tenho da dentro do meu banco de Dados para dentro de Total então quê que eu fiz ó senhor vir aqui vou dar um print vamos antes de fazer isso aí vou mostrar a gente precisa criar nossa URL e vai apontar para essa função aqui então aqui minha dashboard vou vir aqui URL vou até copiar aqui ó O Retorno Total vendido aqui dentro de URL eu vou criar uma rede para ela então e agora eu quero acessar retorna Total vendido Então quando você
está meu domínio. Com.br/retorna Total vendido eu quero chamar Qual a função fazendo a viu a função retorna Total vendido e vou dar um name para essa função o vai ser retorna Total vendido então agora se eu vim aqui de acessar que barra retorna Total vendido pressionei um enter ele vai me falar que deu um erro Jason nossos erenise boa porque a é deixa eu ver aqui acabando de erro e dá um contra você rodar o servidor de novo Acho que não tinha não tava Atualizada né o pai tá dando algum erro aqui E aí eu
vou dar um print aqui em total e agora funcionou só porque dei o print não tinha atualizado o servidor ainda então eu vou tirar o print para sinal F5 e tá funcionando normalmente é que ele já me retorna o total e o total foi dois mil e a exatamente que nós temos lá porque nós vendemos um único produto esse produto que estava r$ 2000 nosso Faturamento total é r$ 2000 mas basicamente como será que funciona se eu tirar essa ingrediente Banana Vou deixar para simplesmente um print Total ou seja agora esse vendas. Obra que se
pontual aqui ele vai trazer para gente aqui que tava dando erro né porque não dá para a gente fazer o que a gente depois eu vou simplesmente dar um return http response aqui de teste só pra gente só para não dar esse erro o Olá aí beleza então agora Ele trouxe Para a gente O Que Queres 7 e uma lista com todos os meus equipamentos vendidos Beleza então é simplesmente isso que o vendas. Obra que se pontual faz agora quando eu dou um aggregate Cadê. Aggregate Ou seja eu estou transformando em um dicionário Ok Isso
aqui é o transforma em um dicionário e depois eu falo assim ó eu quero somar todas as posições desse dicionário então some eu Esses são falou qual coluna eu quero somar eu quero somar coluna total E agora ele se daquele me retorna só dar um prendi aqui no total olha só que ele vai me retornar ele vai me retornar um dicionário na posição que onde eu tenho uma chave chamada Total some ele me tem o valor de 2 mil ou seja o que fala que eu quero dentro da posição total dander some-se agora eu dou
um jeito não responda ou seja um retorna uma resposta através de um dia eles vão dessa minha função onde eu falo que e é igual ao total tô surpresa mais cinco Aqui eu deixei um monte de espaço que não pode nos pressionar F5 para atualizar aí beleza e aqui agora eu tenho uma função que retorna o total já de faturamento da minha empresa agora que que nós precisamos fazer nós precisamos pegar esse valor e colocar ele aqui dentro como que nós vamos fazer isso muito simples agora que eu já falo para criar os relatórios de
tudo né vamos ver mas será que eu já faço isso primeiro vamos fazer Isso aqui primeiro Vamos fazer outra coisa primeiro em vez eu vou fazer esses outros relatórios que eu vou fazer eu vou descer aqui onde eu tenho que cria a função para exibir o faturamento Total Ok então vou vir aqui dar um control c control c agora que que nós vamos fazer a eu não queria ir o meu não espera aí vamos fazer vamos deixar esse aqui por último Então que eu não queria aquele jovens clipe ainda vamos seguir a ordem aqui do
tutorial Então agora eu tenho um Relatório de faturamento Então vem aqui e não contra os e nele agora nós já fizemos uma função que retorna o total vendido Agora eu preciso de uma função que analisa o faturamento total da empresa por mês você já nos últimos 12 meses ou seja com essa biya no mês de outubro nós vendemos tanto no mês de agosto nós vendemos tanto no mês tá não nos vendemos tanto então para isso que tem essa minha determinada função essa função aqui relatório de faturamento ela Vai mostrar o seu faturamento nos últimos 12
meses então aqui uma lógica programação realmente bem tranquila deixa só importar' cedente time aqui então faz assim ó from date time Import desde time e essa função que que ela está fazendo ela está pegando aqui o vendas. Obras. Ou seja Ela traz tudo que tem dentro de vendas eu crio uma variável chamada meses onde tem lá todos os meses janeiro fevereiro março abril junho julho agosto Setembro outubro novembro dezembro aí eu tenho uma variável matar átomo variação chamada lei ambas são uma lista e tem uma variável chamada Counter depois eu capturo o mês atual então
desde time.na ao ponto Monte Mais um depois eu tenho um ano que é igual desde saem.na ao ponto Year agora eu não quero o relatório de vendas nos últimos 12 meses então eu faço um for onde eu começo por exemplo estou no mês oito então primeiro eu faço um mês menos igual um ou seja Não eu não sou um aqui no mês então eu tô menos um eu vou virar o mês eu vou estar no mês 9 por exemplo então aqui eu faço mês menos igual a 1 e eu volto por mês oito é que
eu faço se o mês foi igual a zero eu volto que o mês seja igual 12 e o ano eu faço que ele seja menos igual a um porque quis aqui pensa comigo gente não quer um relatório do há 11 meses mas imagina assim você tá lá no mês de março Quais são os últimos 12 meses Março fevereiro Janeiro agora o Último restante é desenhar novinha outubro só que do ano anterior então por isso que a gente faz isso se o nosso mês aqui passa a zero não significa que nós estamos regredindo no tempo significa
que eu estava no ano anterior seja eu volto para o mês 12 só que do ano anterior agora eu crio uma variável chamada Y eu falo que ela vai ser igual a soma dessa determinada lista e essa lista que que eu falo que ela é igual aí. Total ou seja o total que a gente Tem da coluna total que nós temos aqui na Model for e-books então nós estamos iterando sobre a variável x que a variável x todas as nossas vendas que nós temos se hoe.to data. Bom fi foi igual ao mês ou seja o
mês que a gente definiu aqui a gente na subtraindo um a cada vez e oe ponto data. e foi igual ao ano que nós estamos agora então aqui através da variável mês e ano a cada laço do fórum eu vou subtraindo uma variável é um mês da variável mês eu Estou também se eu virei um ano eu subtrai o ano e aqui ele vai criar essa variável e vai me retornar no Y por exemplo no mês de outubro então que eu estou no mês oito por exemplo Então já fazer então quero todo sou eu quero
a soma então some de todas as vendas e pronto total para cada para cada vendo Então fora e em x que as vendas que tinha acontecido no i ponto data. Monf seja igual ao mês que eu estou verificando agora e um ano seja o mês do Ano que eu estou aqui no terminal da mente agora OK depois então aqui o leibols. Aprende meses então aqui nessa variável mesa aqui eu não sei qual que é o mês que eu estou por exemplo no mês oito então fala que meses não é porque agora eu não quero o
número do mês era mais 1 mês 2 meses 3 meses é verdade né mais uma em 2006 - 4 não quero não eu quero o terço do mês Jan fev mar abre a BR você já eu quero a legenda do de cada mesa de pro poder Exibir Então falou meses na posição meses é o que essa variável que eu tenho que em cima com uma lista com todos os valores na posição mês menos um porque menos um porque por exemplo se eu estou no mês um que que significa o mês um para essa lista é
fevereiro mas eu não quero representar o mês o mesmo não é fevereiro para mim porque a lista começa em 10 então sempre subtrair um por exemplo último mês que eu tenho seria um mês 12 só que o último valor dessa lista É o valor 11 ou seja 12 - 1 da dezembro o ok 12 - 1 da dezembro 11 - 1 da novembro e assim por diante então adiciona aqui dentro de leigos os meus os meus meses que eu estou verificando Tony seu presente só para em março a demonstrar Março fevereiro Janeiro depois eu tenho
lá dezembro novembro outubro Setembro agosto por exemplo aí depois eu tenho um data. Aprende e adiciona Y ou seja eu adiciono o valor daquela determinada daquele determinado Mês dentro da variável data eu dou um Counter mais igual a um aqui simplesmente por que que eu faço esse carro aqui o Scout aqui não serve para nada na verdade e esse causa que a gente pode tirar daqui a pouco a gente já tira ele aqui eu crio uma variável chamada data underline Jason e eu falo aqui o campo data vai ser igual a data: menos um por
quê que eu quero isso porque eu quero Inverter a posição porque eu quero por exemplo se eu estou aqui no mês de outubro eu quero que o mês de outubro seja o último no gráfico não fique à direita do meu gráfico Ok se eu estou por exemplo no mês de janeiro de dezembro eu quero que o gráfico começa em janeiro fevereiro dezembro Dona Nana ou seja o inverto a minha lista eu faço a mesma coisa com as lendas Eu queria um campo chamado lei você vai ser igual além dos dois pontos menos um e de
Simplesmente dar um retorne Jason response in data underline Jason agora que nós precisamos fazer vim aqui URL só copiar aqui esse nome URL vamos vem aqui colocar uma vírgula e vamos criar um mau URL para esse determinado local então, news.com trouvée, nem me vai ser igual é contra o ver de novo confirmar está gravando tá perfeito vamos lá agora eu tenho a minha URL se eu vim aqui meu navegador e Acessar só determinado URL a barra e advogados RL ele traz um relatório de faturamento para mim ou seja eu tenho lá os meus meios atuais
viu que eu inverti minha lista também Alice começou com novembro dezembro janeiro fevereiro março abril maio junho julho agosto setembro e outubro é o mês que eu estou agora então em novembro vendeu o quanto a gente olha aqui 01 dezembro vendeu quanto zero também janeiro0 nós temos uma único mês que vendeu foi um mês de Outubro é o mês Começou agora aqui ó r$ 2000 Caio Vamos mudar isso aqui então vou vir aqui barra de mim vamos fazer uma venda aqui no mês anterior houve adicionar venda nome do produto esse celular o Caio escrevendo eu
também e o preço vai ser r$ 3000 13 mil raios só que agora vou falar aqui essa venda aconteceu em setembro 21 de setembro clique em salvar agora quando eu pressionar F5 nós temos aqui no mês de setembro nós temos aqui o valor de 3 Mil reais e depois o valor de r$ 2000 Então essa nossa viu está funcionando perfeitamente como esperado OK agora nós precisamos de um relatório de produtos Ok então vou vir aqui contra você e agora eu preciso saber quais foram os produtos mais vendidos é um outro tipo de relatório que nós
vamos fazer então aqui que o que que eu estava fazendo eu tava somando todo esse Total então Total dessa venda o total dessa outra aqui e etc para Vamos só confirmar se tava tudo Funcionando agora nós Total tem que dar 5.000 né solo uma venda foi 2000 a outra foi três não me engano e damos Total r$ 5000 Então tá funcionando essa nossa função que a gente tinha criado anteriormente agora nós precisamos criar aqui o nosso relatório de produtos Ou seja eu quero saber os 3 produtos mais vendidos da empresa os 3 produtos mais todos
os presentes nasceu lá a placa de vídeo monitor teclado Quais são os todos os produtos da empresa quais são os três Mais vendidos historicamente para que você saiba qual o produto que você tem que continuar investindo seu esforço e etc então para isso eu vim aqui envios agora eu posso Minimizar um pouquinho essas duas vezes aqui para não ficar tão grande e calma só passar para mim debaixo primeiro e agora sim podemos Minimizar aqui e Beleza vou dar um control v e agora que a gente está fazendo primeira coisa que eu preciso fazer é importar
esse produto Então vou Vir aqui então eu já tenho aqui o fronto outro modo se importa e vendas agora é só importar o produto perfeito Então agora que eu estou fazendo eu simplesmente capturo todos os produtos que existem crie um campo chamado lei bom cão chamado data e agora eu estou fazendo uma verificação dos produtos mais vendidos então primeiro eu vou preciso somar apresentei uma produto celular eu preciso percorrer todas as vendas perguntas neste produto celular Se for soma o total dele esse professor se for soma Total dele eu tenho que fazer para todos os
produtos para depois verificar qual foi o produto que eu tenho mais venda então para cada produto dentro da lista produtos que que eu faço eu vou lá na minha ó na na minha tabela vendas então vendas. Obras. Frio ter só que agora eu não quero todas as vendas eu quero somente as vendas onde o nome do produto seja igual ao produto que eu estou Esperando aqui agora eu quero dar um ponto aggregate some de Total seja eu quero somar todos os quero somar todos os valores da coluna Total onde o nome produto é igual ao
produto beleza e aqui se eu não tenho nada ele vai me retornar não então faço if not vendas Total some Parece até um produto que nunca foi vendido ele me retornar não né então coloca o transforma o nome n0 reais por isso que eu faço se for None eu vendo essa posição Total some fica igual a Zero pois Amigo poderia até fazer aqui dá um print em vendas Olha só como que vai ficar se eu vamos ver agora nós vamos criar URL aqui primeiro né então relatório produtos vamos vir aqui criar nossa URL PF relatório
produtos vios. Relatório produto o relatório produtos e Vamos acessar aqui Barra na/relatório produtos então agora se olhar meu print tem lá Total some de 5.000 ou seja aqui eu só tenho um único produto então só de poderia te dar um print aqui ó primeiro lugar um print produto print produto Oi Dani tá falando que o produto celular teve uma somando todas as vendas ele vendeu r$ 5000 Mas vamos cadastrar aqui um produto que não seja celular me cadastrar uma nova venda eu vou vir aqui tirar venda criar um novo produto por exemplo a placa de
vídeo Salvar o vendedor vai ser Vamos criar um vendedor também vai ser o Marcos salvar e agora eu vou dar um total aqui ah não não quero fazer isso eu quero criar uma um produto só não quero criar uma venda para esse produto ou 20 adicionar produto então chamada de placa de vídeo placa de vídeo e salvei produto agora eu tenho um produto que a placa de vídeo só que esse produto eu tenho duas placas de vídeo não precisa de duas Nossa que eu queria uma sem querer eu tenho um Produto que ele não tem
venda então se eu pressionar aqui um F5 na nossa página olha só o que ele vai trazer para a gente o celular e a placa de vídeo ou seja celular teve 5 milhões de vender a placa de vídeo que fizeram reais só que se eu olhar aqui no nosso nosso print o total são aqui do placa de vídeo está como None eu não quero isso eu quero mostrar o zero então que eu faço se note vendas a posição Total some ou seja um drone sempre retorna falso então dou um Note para E se ele for
noone eu falo que vendas depois são Total some é igual a zero então Tyrone por 10 Então agora é só dar um print início daqui depois do IF o que era no nível 0 e aqui beleza o que era None of Roll zero agora que eu tenho agora é só precisa eu estou fazendo um forma Então estou inteirando sobre cada produto agora precisa adicionar a Label e a data de cada um desses produtos então vou ter aqui você dá um print em Label fora do Fórum em um print em data e não é cinco aqui
conseguir visualizar Então agora eu tenho lá que que é minha leible minha lei bom é uma lista onde eu tenho o nome de cada produto Então os produtos que eu tenho na loja São celular e placa de vídeo então tem uma lista manda lei eu vou que tem todos os nomes dos produtos e depois a próxima lista é o valor de venda de cada produto então o celular aqui ele vendeu r$ 5000 a placa de vídeo ele vendeu zero reais E agora que que eu faço eu faço uma ligação entre eles eu faço um zip
então Zip entre Label e data que que eu sempre faz ele simplesmente Vai juntar ele vai lá em casa esses dois valores então só pressionar o F5 a função Zip fez isso agora tenho apenas uma única lista apenas essa lista aqui só que dentro dessa missa eu tenho uma tupla onde a primeira posição é o nome do produto e a segunda posição é o valor daquele determinado produto Agora eu tenho uma Outra Personalista que o nome produto e o valor do produto e assim por diante bem tranquilo né e agora eu simplesmente passa um sorte
dá um x ponto sorte aí eu falo eu quero como por exemplo aqui agora não tem uma lista e dentro a lista não tem uma tupla eu poderia ordenar tanto pelo nome do produto quando pelo valor do produto eu quero ordenar Então falo aqui lambida de recebe x agora eu quero ordenar o pelo que pelo valor do produto não é o valor tá em qual posição Da turma na posição zero na posição na posição então x na posição um eu quero em ordem reversa Ou seja eu quero do Oi para o menor sentido produto que
vendeu mais para o produto que vendeu menos porque eu quero mostrar os três melhores produtos se eu tivesse mostrar os três piores produtos ou não colocar em um reverse agora se eu der um print em x e que ele vai fazer para mim ele vai me mostrar essa daqui ordenado então aqui eu tenho primeiro o celular fala Primeira posição minha placa de vídeo para na outra aqui a gente já tá já tinha tudo correto né porque já tava já tava ordenado mas aqui está olhando essa massa lista então por exemplo se eu tivesse aqui vamos
vir aqui agora adicionar vendas eu vou vir aqui na placa de vídeo colocar o vendedor vou adicionar 6 mil reais na placa de vídeo fiz uma pular uma venda de seis mil réis essa placa de vídeo agora que que acontece se eu der um print em x antes e Depois ó olha só que que vai acontecer oi vem aqui pressionei mais cinco agora nós temos lá antes do sorte que nós temos ótimos celular 5.000 placa de vídeo 6.000 que é o próximo plim plint o placa de vídeo ficou primeiro placa de vídeo 6.000 celular 5.000
depois agora eu preciso eu não fiz essa junção não tinha duas missas que era a lista lei boi a lista data eu não fiz essa junção Agora eu preciso de se fazer essa junção então List the Zip* para que representa o Argos o que seria não aqui mas para a descompactação né então x esses seres que apresentam descompactação do Python e deu depois eu dou um print em x agora se eu vim aqui pra gente não F5 olha aqui nós vamos ter eu tenho uma única lista ordenada já como placa de vídeo celular 6.005 mil-réis
agora eu separei de novo agora você eu tenho duas listas na verdade né que só que tá dentro de uma Única lista tem uma lista e dentro dessa lista tem uma tupla com todos os nomes depois eu tenho uma outra tubular com todos os valores e aqui tanto o quanto os produtos já é os valores já estão ordenados ou seja qual que era o que tinha vendido mais a placa de vídeo então placa de vídeo tá aqui e depois eu tenho 16 mil reais a primeira posição da outra turma Depois tem um celular e o
r$ 5000 agora é só dar um ela só dá um jeito nesse bons ou seja as leis aos é x Na posição 0px print-x na posição zero eu tenho é bem Persona aqui eu tenho placa de vídeo celular ou seja é a lei bow e depois eu tenho os dados que é um preço de cada grupo EA x na posição 1 o bebê agora tem lá 6.005 r$ 1000 então x na posição zero e x na posição a posição zero x na posição que que significa esses dois pontos três significa que eu quero ir da
posição zero da lista até a posição dois ou seja Eu quero apenas os três primeiros produtos três produtos mais vendidos Ok então aqui a gente já tem lá o nosso relatório a placa de vídeo 6.000 celular 5.000 está funcionando perfeitamente vamos tirar que o relatório produtos Oi e agora nós vamos para o próximo relatório O que é um relatório de funcionários agora eu quero saber não quis saber qual ou Quais foram os 3 produtos mais vendidos agora eu quero saber os três Funcionários mais vendidos Então vamos copiar isso daqui E outra você vamos vir aqui
e dá um control ver agora esse daqui é praticamente a mesma coisa não muda praticamente nada a única coisa que vai mudar de um para o outro aqui aqui em vez de usar produto eu vou chamar de vendedor e cadê vou chamar de vendedor aqui ao invés de chamar de nome produto eu vou chamar de vendedor Porque aqui no nosso modo aqui é vendedor aqui era não produto então vendedor vendedor aqui Odeio vendedor. Nome vendas na posição Total são seja simplesmente troca de vendedor para produto mas a lógica de programação ali é a mesma Eu
só preciso importar aqui do nosso Model agora o vendedor agora vamos criar uma URL para ele então que o relatório de funcionários vou vir aqui dentro da nossa URL e criar essa nova URL então pef o chefe nome da URL Views. O nome da URL é o nome da função nem me eu vou chamar de relatório funcionários também se eu vim aqui e acessar o relatório funcionário agora e vai mostrar os funcionários que mais Venderam caiu Quem mais vendeu foi o Caio fez 11 mil reais e venda e o Marcos só chegou funcionar que mais
vendeu que ele tem outros mas ele fez eram reais de vendas então perfeito está funcionando os nossos dois relatórios temos que partir Para os próximos passos então aqui no nosso o definir o que a gente tem que criar uma URL para cada função só que a gente não fez a gente já fez isso quer dizer então a gente pode pular você tava com aquele durante essa aula a gente já fez isso então agora eu falo cria um arquivo JS e importe em home. HTML então agora nós precisamos criar um arquivo javscript então vim aqui não
tem Place se eu só confirmar se não parou de gravar para tudo ok perfeito então aqui Dentro de template dentro de estética e nós temos uma apaixonada CSS onde a gente já criou o nosso arquivo CSS e dentro JavaScript eu vou criativo New files JS. JS e aqui dentro desse desse arquivo eu posso programar em Java Script aqui tem os jogos que tem o comando console pontolog que seria como por exemplo se fosse oco eu vou colocar o console. Log de teste só para gente testar se tá funcionando e depois disso agora nós Precisamos importar
Então vou ver aqui em Roma e ponta HTML nós já carregamos os arquivos estáticos então eu posso simplesmente fazer assim ó oi vem aqui eu faço scripts script fecho aqui ó tags clipes e dentro da da abertura da techspeed eu coloco src vai ser igual a tag estética do Django então estética é que eu passo onde que está o arquivo está dentro da pasta estética ele está dentro da pasta java script/JS. JS feito isso quando eu vim Aqui e pressionar F5 ou o parque tem que sendo lá no nosso relatório né o preço nenhum F5
aqui que tem que acontecer aqui no meu console tem que mostrar teste Então tá funcionando perfeitamente ó tá tudo ok como esperado então a gente conseguiu importar o nosso arquivo javscript agora nós vamos criar a função para exibir o total faturado Então vamos criar essa função então aqui nos jogos cript nós vamos simplesmente apagar isso daqui e nós Vamos copiar essa função aqui né então control c control V essa função ela chama renderiza Total vendido e ela recebe uma url como parâmetro e que ela faz esses Pet aqui eu JavaScript ou ele faz uma requisição
a determinado ap Então nós vamos fazer uma requisição para onde eu terminar de URL qual RL a URL que vai retornar para a gente a gente criou o total vendido lembra dessa função primeira função que a gente criou a retorna Total vendido ela não tem uma Url que essa daqui ó ao RN retorna Total vendido então gente tem que fazer uma requisição para essa URL a gente fala só URL informa aí para mim qual que é o total vendido eu te falar faz uma requisição para o URL qual que vai ser o método da requisição
vai ser mais Object e aqui o frete ele é uma forma de coisa requisição através de processos Ou seja eu faço uma requisição e definir o promessas o que vai acontecer após a Requisição então Primeira coisa eu recebo o que foi o que nossa aplicação devolveu seja o que a senhora Iraque retornou aqui essa função essa viu retorna Total vendido retornou para a gente devolveu para a gente que eu faço eu converso para desmontar um result ponto de riso e agora que que eu faço eu tenho uma outra promessa então aqui uma função que recebe
data ou seja o que retornou aqui em cima e agora eu falo que documento Portuguette Element by ID ir então do seu capturando o elemento HTML na qual tem uma e de faturamento Total caiu qual elemento HTML tem esse a gente foi em Roma e ponta HTML a gente olhar aqui ó nós temos aqui em cima Esse elemento é o spam onde o agir é igual a faturamento total e tem o valor dessas aqui então eu vou tirar e deixar sem nada então vou vir aqui e pressione F5 agora está vazio nosso determinado valor eu
quero preencher com o faturamento Total então Quê que eu falo aqui dentro de JS Bach JS eu falo aqui o Inner ponta HTML ou seja o que tem dentro deixa arquivo HTML é igual a data. Total ou seja data eu quero paramos a gente recebeu tem funcção porque pronto total porque aqui na nossa viu que a gente abre a nossa viu aqui a gente retorna aqui como total é a chave é total e o valor total agora fala cai então tá mostrando ainda não porque isso daqui é uma função se a gente olhar aqui essa
função renderiza Total vendido só que ela nunca foi chamada então aqui dentro de si só fechar um pouco de coisa aqui dentro de Roma e completo ml aqui no finalzinho eu vou criar uma nova tag script então script o script e aqui o papel pague mais coisas que deveria script e aqui dentro eu vou chamar uma função chamada Windows. Onload ou seja sempre que a nossa janela carregar eu vou chamar uma Função pantion ela vai receber um event eu seja sempre que me tô carregar a janela seja sempre que eu preciso um F5 na página
sempre vocês a minha página eu quero fazer alguma ação Qual ação que essa eu quero chamar essa função renderiza Total vendido Então vou vir aqui e falo renderiza Total vendido em de Lisa e o mais facil copiar né do que digitar contra você eu achava função renderiza Total vendido Só que essa função ela não recebe um parâmetro ao URL então preciso passar Qual que é a minha URL então poderia vir aqui no RS e minha URL é eu quero chamar o meu RL O Retorno Total vendido então é o olho qual que é o nem
me dá minha URL vou pegar o name da minha URL e dá um contra você agora aqui em Roma eu vou fazer assim {fecha Chaves Abre a porcentagem fecha porcentagens escreve URL ou seja estou utilizando a tag URL no Django e entre aspas duplas agora porque eu "simples Aqui se eu tivesse aberto" duplas eu "simples aqui dentro ou seja sempre diferente nas" eu coloco name da url que eu quero chamar então que eu passo o retorno Total vendido agora só pressão F5 a minha página ele me mostra que o faturamento total da empresa que foi
de 11 mil reais se eu cadastrar mais uma venda aqui por exemplo cadastrar uma vendo uma placa de vídeo nome de Marcos e r$ 2000 Vou salvar agora quando eu pressionar F5 aqui na página foi para 13.000 reais ok pessoal se a gente olhar aqui que eu vim aqui inspecionar vamos vir aqui em Bori ou Body scripts aqui ó dentro da função renderizar Total vendido ele passou/retorna Total vendido que a minha determinada URL então ele converteu isso daqui para minha URL aqui então um primeiro passo nós já fizemos estamos saindo avisando tô faturamento total da
empresa agora qual que é o próximo passo vamos criar uma função que gera cores Aleatórias porque os nossos gráficos e descrição de várias cores que eu defini algumas cores que vai ter os nossos gráficos eu não quero ficar escrevendo as coisas toda hora então vou querer essa função JavaScript aqui que ela simplesmente vai gerar algumas cores em aleatório para gente então vou vir aqui dá um control ver então que ela faz ela já era cor ela já era dois tipos de cores o background-color e o border color então qualquer diferença o Background-color ela tem lá
0.2 roupas a new border color tem roupa cidade de um E como que eu fiz para gerar uma cor aleatória simplesmente ou definir Quantas cores eu quero gerar de forma aleatória e aqui o as cores não são representados por RGB a o r a quantidade de vermelho hoje a quantidade de verde o b quantidade de azul e o ar seria a opacidade daquele daquela determinada cor Então fala que é que vai ser igual ao médico outro redutor gera um número Aleatório e multiplique por 255 porque cirurgia era o número de 0 a 1 hoje eu
faço a mesma coisa o b a mesma coisa aí eu falo BG underline cola ponto forte RGB a que a nossa função do CSS que determinam a cor RGB EA opacidade e depois do Border Collie a mesma coisa só que eu defini uma cidade comum e eu retorno essas duas cores o BG color e o border color fizemos na função vamos deixar aqui que a gente vai utilizar ela daqui a pouco agora o próximo passo é Cria a função para renderizar o gráfico de despesas mensais Então vou dar um controle aqui eu explico como funciona
essa função Então vou da vir aqui depois o Render o vírus podar um encontro ver roupa não copiou control c control V não copiou de novo porque eu vim aqui control c control ver agora sim essa função ela vai utilizar uma biblioteca chamada chat.de MS são destaque short.de esse nós vamos abrir essa e determinado o link Shark. GS confirmasse para Gravando aqui pessoal tá gravando Perfeito nós vamos cair nessa página short dns.org vocês aqui get started e aqui dentro aqui nós vamos ter os tutoriais do short de esse esse short GLS que a gente vem
aqui chart sabes era uma biblioteca que atrais vários tipos de gráfico para gente por exemplo nós temos gráficos de linhas gráfico de barras World chart nós temos esse doughnut aqui não sei pronunciar isso daqui que seria o gráfico entre aspas de Pizza pula área Bubble chart scatter chart vocês vão Temos vários tipos de gráfico que o short dele é isso traz para gente ir a documentação de como utilizar se você vir aqui em setup ele fala exatamente como que você tem que criar cada tipo de gráfico para que eles funcionem aqui então aqui é o
d-fine lá a qual que é o tipo de graça eu quero bar estão definidas as datas as opções e etc para o gráfico ficar dessa forma seu troca aqui de bar para Elaine por Exemplo não sei se aqui esse eu não sei se na documentação é tão poderosa assim só trocar sidebar para lá e não será que ele troca e não é a que você mudar o código aqui no modo não muda aqui em cima mas enfim Nossa aplicação para a gente quiser isso ele vai mudar então primeira coisa que a gente vai fazer quando
a gente utilizando uma nova biblioteca é importar essa biblioteca Então a gente vai ver quem get started getting started Nós vamos copiar esse importação do chart DS e agora aqui na nossa home antes do nosso estética de Responde essa aqui nós vamos dar um contra o ver você de nós importamos essa determinada biblioteca Ok e agora aqui na nossa função que a nossa função faz ela é uma função chamada renderiza despesas mensal e essa função que que ela tá fazendo ela tem uma constante chamada ctx ou seja a gente poder chamar de contexto por exemplo
ela vai ser igual a document. G' At ela mente parede e eu tô pegando o elemento HTML que tem uma ide chamado despesas mensal Olha o entre o primeiro é esse vamos ver gente subiu nosso código aqui o elemento de despesa mensal é esse Canvas por um elemento preciso Ah não você for outro não funciona não que eu tenho camas ou seja uma tela Onde eu posso desenhar eu vou desenhar nos gráficos e eu dei uma rede chamada de surpresas mensal então captura esse determinado cama eu Vou falar que a gente vai utilizar ele de
forma 2D bidimensional agora o clima variável chamada var cores despesa mensal eu falo que ela vai ser igual gera a cor e eu falo que ela vai vir aqui Quantas cores 12 cores porque as gráficos desse pêsames só vai mostrar as despesas que você teve nos últimos 12 meses então aqui beleza gerei essas cores então só dá um console. Moro aqui em cores desse pesos mensal só pra isso aqui ó para você Console e ponto um blog se eu vim aqui pressionar o F5 a inspecionar console e vai me trazer um Array onde ou seja
na posição zero Dawn rei eu tenho 12 cores que seriam os meus background-color então aqui RGB até a primeira cor e segunda cor seja tem lá 12 cores depois eu tenho na outra Poção da Renovação um eu tenho outras 12 por isso também seria meu border color simplesmente isso que a gente tá fazendo Agora eu estou realmente implementando chat DRS então crie uma variável com ela consiste March mais tarde para você poder chamado que você quisesse ela vai ser igual é que eu falo New Shark ou seja estão criando um novo gráfico da onde que
vem esse short aqui ele só existe porque aqui embaixo nós importamos a biblioteca do short DRS se não estou aqui não funcionaria aí eu passo em qual elemento eu vou criar o meu gráfico ou seja ctx se for o Elemento nós capturamos aqui e depois eu dou um, e abra as chaves aqui e aqui eu estou definindo dentro desse dessa desse objeto aqui eu estou definindo as propriedades do o gráfico a primeira coisa que eu defini é o tipo do meu gráfico é o tipo dele é um gráfico de line line line como você preferir
chamar um gráfico de linhas aqui depois eu tenho Passo os dados daquele determinado gráfico ou seja preciso passar as leis o eixo X do meu gráfico então ajustes o Meu grave qual quais serão as colunas do meu gráfico ali é janeiro fevereiro março abril maio junho julho agosto setembro outubro novembro e dezembro depois eu tenho passado os meus Beira séries Ou seja a lei bouquet que a Label é aquele negócio lá em cima aqui da descrição do gráfico por exemplo e depois eu tenho os meus dados ou seja quando que teve de despesa por exemplo
aqui a gente tá com dados fictícios por enquanto ok pessoal então aqui eu tenho Lá por exemplo é janeiro eu ele teve 12 e as despesas Fevereiro 19 Márcia 3 Abril 5 Maio dois Julho 3 e assim por diante o meio background-color vai ser esse daqui meu border color vai ser esse azul e a largura da minha borda do a linha será de 0.2 Ok é que a gente a gente nem usa essa cores despesa mensal não sei porque ela tem aqui a gente pode simplesmente tirar a gente simplesmente vim aqui na nossa página e
por isso não é cinco o gráfico de despesas não vai Aparecer aqui porque a gente não chamou então aqui em home vou vir aqui chamar o renderiza em Veneza Total vendido e abre parentes quando eu pressionar F5 eles não contra 85 aqui não foi ainda porque eu vim aqui no meu servidor parar meu servidor e rodar de novo para garantir que ele atualizou control F5 não tá funcionando vamos ver o que está acontecendo ao inspecionar Consoni ele falou que deu um erro na Minha promisse vamos ver onde que tá dando este erro já tá na
já sabe scripts vamos fechar aqui vamos ver seus parentes são tudo fechando certinho né renderiza de surpresas mensal eu te mando o endereço totalmente duas vezes que eu não passei um RL por isso não quero chamar o Redenção tá vendido eu quero chamar o renderiza despesa mensal Agora sim eu chamo essa determinada função como que eu Pressionar F5 a minha página eu criei o meu gráfico de despesa mensal Ou seja que tem lá as nossas membros Ou seja que seria o ajustes o gráfico e aqui eu tenho os deiras né os dados que seria o
eixo Y do meu gráfico então Janeiro teve 12 as despesas Fevereiro 19 Março deve três reais e assim por diante ou seja é que eu tenho o meu gráfico a gente está utilizando o gráfico despesas aqui com um dados dados fictícios ok a gente não criou nenhuma Função do Python que faça isso e para desenvolver essa função vai ficar direção de casa para vocês então aqui nesse gráfico de despesas a gente vai deixar com e os fictícios nessa aula para que vocês têm algo para desenvolver após a aula para colocar em prática aí fixar os
conteúdos Que Nós aprendemos aqui hoje ok pessoal então eu vou devolver com vocês com dados reais os gráficos de faturamento produto mais vendido e funcionário do mês então vamos Deixar isso aqui como dados fictícios por enquanto agora nós precisamos fazer o faturamento produto mais vendido em funcionário do mês para isso mas precisamos me aqui na no próximo a função e vamos copiar ela bom então eu vou dar um contra você e agora essa minha outra função que que ela serve e ela serve para renderizar o faturamento mensal ou seja para realizar esse gráfico aqui o
faturamento daquela Empresa a cada mesmo essa função aqui diferente da renderiza despesa mensal porque ela não tá recebendo ela não está apenas com dados fictícios ela não recebe nenhuma URL é assim presa ela recebeu uma url essa empresa essa função recebe mal RN ou seja para onde ela vai perguntar Quais são os dados e quais são as leis Então beleza ela faz uma requisição para o URL que eu passar através do método médico diabetes então ela vai fazer uma requisição para essa Minha URL aqui ó meu RL quando eu passar vou passar o RL relatório
faturamento e ela vai chamar a função relatório faturamento que vai retornar isso daqui para ela beleza então aqui no nosso jogo já descritas temos lá a gente vai transformar o que a nossa função retornou em mesmo os pontos de Jason e agora a próxima Promessa é exatamente basicamente essa função anterior que a gente já tinha visto ou seja o cria um contexto e eu tô pegando o elemento que É o faturamento faturamento mensal que é esse determinado elemento aqui ó pessoal faturamento mensal esse determinado elemento HTML que tem uma ide faturamento mensal também é um
campo sempre tem que ser um campo mas não funciona com nenhum outro elemento HTML queria agora minhas cores são várias cores faturamento mensal Já Era cor eu tô gerando 12 cores também e agora que que nós temos eu tenho aqui aqui eu vou te trocar essa lei boa que Não é para sair isso aqui não pensa que eu vou colocar aturar mente e aqui deixar um, aqui então aqui eu tenho primeira coisa o tipo do gráfico agora um gráfico de bar ou seja um gráfico de barra E agora tem que passar os dados esse opção
que eu também não vou deixar não só vai confundir vocês vamos de tirar isso aqui e deixar dessa forma Então agora eu tenho tipo de do meu gráfico 1 gráfico de barras e agora eu passo os dados Qual que é a lei do meu Gráficos e de qualquer descrição em cima do meu gráfico faturamento e agora vou passar os dele acesso seja os dados para aquele meu gráfico Qual quê qual que é o leigo Qual que é o eixo X do meu gráfico ou seja o que que vai aparecer aqui janeiro fevereiro março abril maio
junho julho agosto setembro então isso aqui não pode ser fixo mais porque se eu estou no mês de outubro outubro tem que ser o último mês e o primeiro mês não vai ser eu Janeiro ou seja que tem que Ser dinâmico ou seja isso daqui tá vindo lá da nossa viu que é retornado aqui ó lá navio relatório fato bom então data. Meio porque aqui na nossa fonte amor nada nossa promessa que fez a requisição para nossa URL a gente recebeu data então data. Lemos porque aqui ó a gente criou o campo leibols e o
campo batendo a gente pode acessar esses campos que a gente retornou na nossa viu Agora tem que passar os dados do meu gráfico que é o data conto data depois o d-fine Background-color que é o cores faturamento mensal na posição zero Depois tem ao border color cor da borda do gráfico que é o cores faturamento mensal da posição e eu defino a largura daquela menina chamada borda que vai ser um pixel feito isso que nós precisamos fazer renderizar essa função chamar essa função Então vou vir aqui lá em home vou descer aqui um pouquinho vou
dar um control v e agora eu tenho que passar a minha URL a minha URL vou vir aqui abri Chaves Abre porcentagens URL eu vou abrir as coisas que eu tenho que passar meu URL Então minha URL e vai cear Cadê URL vai ser a relatório faturamento mensal pega o name da URL e coloco aqui dentro das "perfeito se eu pressionar o F5 agora eu tenho um gráfico de faturamento mensal aquele só tô mostrando uma barrinha aqui tá que eu fiz o contrário na verdade aqui fiz ao contrário aqui é data. Lemos Oi aqui é
batata. Lemos Ó e aqui é faturamento o faturamento faturamento Agora sim então aqui tá lá minha lembrou que a gente eu defini aqui ó faturamento aí aparece aqui faturamento Agora eu tenho dois tem outubro e Setembro né então aqui eu tenho uma venda r$ 10000 de vendas do mês de outubro e no mês de setembro eu tenho três mil reagir vendas nos outros meses eu não tenho venda nenhuma vamos cadastrar uma venda aqui então vendas eu vou cadastrar aqui uma Gradação novo produto então produto vai ser celular placa de vídeo monitor monitor aqui beleza Quem
fez a venda foi o Pedro agora Pedro o Pedro salvar aqui o total foi de 3.500 reais e essa venda vou colocar que foi no mês de agosto Então vou vir aqui em salvar agora quando eu vim aqui F5 na minha página ele atualiza aqui para mim o agosto em 3.500 reais de venda Perfeito nós temos agora o gráfico do Faturamento esse gráfico está dinâmico ou seja Depende do que eu tenho no meu banco de dados se for feito mais uma vendo esse gráfico e alterado Aqui também tá sem por cento dinâmico Vamos agora para
o gráfico de produtos mais vendidos Então vamos vir aqui os produtos mais vendidos é basicamente a mesma coisa então vou vir aqui no meu vs code no meu javscript don't control V aqui agora que eu tenho faça uma rede Recebi Uma url passa a requisição para URL agora eu pego lá o conta que você eu mudo para produtos mais vendidos cria uma variável para cores também a única coisa que eu mudo aqui do meu gráfico é o tipo do gráfico e o tipo do gráfico agora vai ser esse Down e da UnG noite aqui Eu
não sei pronunciar isso daqui ok pessoal é você já que ele tipo de gráfico que tipo seria o gráfico de pizza né que são comumente chamado aqui no Brasil Beleza então vai ter sido Internado o gráfico Agora eu preciso Chamar esse gráfico renderiza produtos mais vendidos aqui na home então chama esse gráfico vou abrir as tags o Diana para definir uma url URL precisamos ver qual é o URL que chama a função que devolve os produtos mais vendidos Então eu tenho que chamar a função relatório produtos a URL que chama a função relatório é essa
daqui então vamos copiar um nem me dela e passar aqui dentro feito isso Precisamos F5 e tá aqui o nosso gráfico falta agora o gráfico de funcionários do mês muito simples também e agora é só vir aqui copiar essa função JavaScript que vem aqui em JS. JS vou dar um Controller e agora a única diferença dessa função ela também chama renderizar funcionário do mês você sabe a URL que faz a requisição através do método get e converte para de Enzo e aqui dentro desse último dela aqui tem as questões do short DS agora eu capturo
Lá o campo aqui é o funcionário do mês tem esse determinada de gênero agora vou tirar Quantas cores quatro cores só apenas aquecer as três cores apenas na verdade né três cores apenas porque eu tenho apenas os três primeiros funcionários do mês então aqui eu passo o tipo do gráfico que a gente mudou vai ser um pouco a área que aquele gráfico tipo meio que o gráfico de pizza só que ele muda a tamanho dele assim ele vai mudando só você seja seja vão ver esse Gráfico aqui ó aqui short sai Peace Polaris e gráfico
aqui ó é tipo um gráfico de pizza só que não leva em consideração apenas a distância assim de um para o outro né a angulação ele leva a distância aqui o diâmetro também para cada semicírculo Ok então vamos voltar aqui definimos o tipo definimos Nós lemos de fazer definir uns dados as cores EA largura da determinada borda vemos aqui a gente no já estava esquecendo de uma coisa não tem deixamos Essa função vamos vir aqui chamar essa função Agora nós vamos passar a URL dela abre porcentagem URL vamos vir aqui "simples Porque aqui nós abrimos
as suas duplas você ser interessante manter o padrão de água simples Então vamos manter que o padrão desde Abril as para sempre sempre Então vamos continuar abrindo e aqui a gente vai abrir as suas duplas a gente coloca um link da nossa URL a URL é relatório de funcionário estamos o controle ser um controle aqui Dentro e perfeito Teoricamente seu pressionar F5 aqui ele traz uns três funcionários que mais Venderam no histórico da empresa que foi o Caio que vendeu 11 mil reais o Pedro que vendeu 3500 reais o que vendeu r$ 2000 então aqui
eu tenho os meus três gráficos de faturamento de despesas produtos mais vendidos funcionários do mês e aqui eu tenho as três informações principais o faturamento total da empresa as despesas postais a empresa e o lucro da empresa Então o que que nós fizemos dinâmica nessa aula faturamento total da empresa gráfico de faturamento gráfico de produtos mais vendidos e gráfico de funcionários do mês o que que tá fixo aqui então seria as despesas ou o núcleo da empresa e o gráfico de despesas então fica de lição de casa para vocês pessoal aqui a gente terminou com
tanta gente olhando nojo aqui agora simplesmente fala e por fim é só importar tudo envolve ponto HTML isso que a gente já Fez ok pessoal então tá aqui a nossa aplicação aqui nossa é a nossa dashboard com gráfico funcionamento produtos mais vendidos funcionários mas é que mais Venderam despesas e etc Ok então agora fica de tarefa de casa aí para vocês criam tanto despesa Quanto é salvo aqui que mostra é as despesas da a dona da empresa os lucros da empresa Crisma que tudo dinâmico coloco aqui no look ramo deixei todos os links das redes
sociais aqui da parte tornando na descrição do Vídeo então pega esse projeto desenvolve na casa de vocês não esquece fazer isso cria de forma dinâmica como lição de casa para fixar esse conteúdo tanto a questão de despesa e lucro e ele coloca lá no subterrâneo para que outras empresas possam ver esse projeto a gente fez um projeto bem interessante o projeto que pode diferenciar bastante no seu currículo se você desenvolver que eu recomendo muito que você tem roupa não esquece de postar lá no seu brinquedinho E marcar gente nosso brinquedinho vai tá aqui na descrição
também ou se você preferir o arroba no nosso LinkedIn é@pai tornando Ok posta lá no seu brinquedinho faz um vídeo do projeto que você gravou faz uma uma Como é que chama esse nome Fire online é nós lumiline um vídeo muito acelerado esqueci o nome e como chama pessoal Esqueci a time-lapse faz uma time-lapse de você desenvolver no projeto ou faz um vídeo depois pro Já tá pronto eu tiro um print Porta no Linkedin por isso ajuda muito mas se diferenciar muito na hora de conseguir sua primeira vaga com programador ou de mudar para uma
vaga melhor uma vaca Você tá uma vaga de Júnior quer mudar para uma vaga de pleno um projeto desse eu tenho certeza que vai te ajudar ok pessoal então possa lá no Linkedin e marca a gente não se esquece se inscrever aqui no canal deixa olic se você gostou desse vídeo comenta também aqui no canal o ideia de projeto A gente possa desenvolver Então é isso pessoal agradeço a paciência presença de todos vocês e até a próxima e um abraço
![R$750,00 Com Esse Projeto Python Freelancer [Como Fazer]](https://img.youtube.com/vi/06vmYgk2Fys/maxresdefault.jpg)
