Paula Flávia Pagotto Simionato - freeCodeCamp.org

O que é Tailwind CSS? Um guia para iniciantes

Paula Flávia Pagotto Simionato — Thu, 29 Sep 2022 21:00:00 +0000

Artigo original: What is Tailwind CSS? A Beginner's Guide

Escrever CSS pode ser muito difícil. Não se discute. Eu entendo – pode ser frustrante definir suas próprias ideias ou os designs que você recebe de sua equipe de design.

Tenho certeza de que muitos de vocês passaram pelo mesmo incômodo ao menos algumas vezes em suas carreiras de desenvolvimento.

Bem, agora não precisa mais sofrer. É hora de aprender uma ferramenta interessante que diminui muito esse fardo. Não, não é o Bootstrap – o nome dela é Tailwind CSS.

Embora o Tailwind já exista há algum tempo, talvez você ainda não o tenha encontrado. Talvez você simplesmente não tenha ouvido falar sobre ele, ou não sabe se aprender uma nova tecnologia relacionada ao CSS realmente facilitará sua vida.

De fato, existem muitas maneiras de escrever CSS – como CSS3 puro, LESS, SCSS, Bootstrap, styled-components, Windi CSS e mais. Uma lista e tanto, não é?

Espero que este pequeno guia o ajude a entender o Tailwind CSS e seus benefícios para que você possa dizer: "É isso. É esse".

Bem, chega de bate-papo. Vamos mergulhar direto no Tailwind.

O que é Atomic CSS?

Antes de entrar no Tailwind CSS, vamos entender o que é Atomic CSS. De acordo com o CSS Tricks (site em inglês):

"Atomic CSS é a abordagem da arquitetura CSS que favorece classes pequenas e de propósito único com nomes baseados na função visual."

É como criar classes que supostamente têm um único propósito. Por exemplo, vamos fazer uma classe bg-blue com o seguinte CSS:

.bg-blue {
  background-color: rgb(81, 191, 255);
}

Agora, se adicionarmos essa classe a uma tag

, ela terá um fundo azul com a cor rgb(81, 191, 255), como você pode ver no código acima.

Aqui está o HTML:



  
    
    
    
    Document
    
  
  
    Hello world!

Este HTML resultará em algo assim:

Agora, imagine escrever regras CSS de propósito único, tão úteis, e mantê-las em um arquivo CSS global. Eu sei que é um investimento de tempo, mas pense nisso – você poderá usar essas classes auxiliares de propósito único em qualquer lugar que desejar.

Você só precisa do seu arquivo HTML para consumir esse arquivo CSS global e pronto. Você também poderá usar combinações dessas classes auxiliares em uma única tag HTML.

Vamos ver outro exemplo?

Vamos criar um arquivo CSS com as seguintes regras:

.bg-blue {
  background-color: rgb(81, 191, 255);
}
.bg-green {
  background-color: rgb(81, 255, 90);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.font-weight-400 {
  font-weight: 400;
}

e, em seguida, consumi-lo em nosso arquivo HTML da seguinte forma:



  
    
    
    
    Document
    
  
  
    Hello world 1
    Hello world 2
    
      Hello world 3

Isso gerará o seguinte resultado:

🗒️ Pontos a observar aqui:

Combinação de várias classes auxiliares: veja como combinei várias classes auxiliares na linha 14 da tag
, nomeadas bg-green, font-weight-400 e text-underline. Todas foram aplicadas no meu texto Hello world 3.
Reutilização de classes auxiliares: no exemplo acima, veja como a classe auxiliar text-underline é usada várias vezes nas linhas 12 e 14.

Veja como conseguimos adicionar estilos diferentes sem sair da página HTML. Bem, você pode dizer: "Ei, nós tivemos que escrever essas classes auxiliares ou utilitárias no arquivo CSS global... e quanto a isso?" Bem, eu entendo. Esse definitivamente foi o investimento inicial de tempo que tivemos que fazer para começar.

Claro, quem sabe quantas dessas classes auxiliares ou utilitárias de propósito único teríamos que fazer se quiséssemos seguir essa arquitetura Atomic CSS.

É aí que entra o Tailwind CSS. O conceito de Atomic CSS não é novo, mas o Tailwind CSS o leva a outro nível.

Tailwind CSS – um framework CSS visando a utilidade

O Tailwind CSS, segundo o próprio site da web é um "framework CSS visando a utilidade", que fornece várias dessas classes utilitárias, opinativas e de propósito único, que você pode usar diretamente dentro de sua marcação de texto para projetar um elemento.

Algumas das classes utilitárias que uso frequentemente hoje em dia são:

flex: usado para aplicar o Flexbox a uma
items-center: para aplicar as propriedades do CSS align-items: center; a uma
rounded-full: para fazer uma imagem circular, e assim por diante.

Sério, não é possível listar todas elas porque existem muitas dessas classes de utilitários. A melhor parte, contudo, é que não precisamos escrever essas classes utilitárias e mantê-las em qualquer arquivo CSS global. Nós as pegamos diretamente do Tailwind.

Você pode obter uma lista de todas as classes utilitárias que o Tailwind tem a oferecer na página de documentação. Além disso, se você estiver trabalhando no VS Code, poderá instalar uma extensão chamada Tailwind CSS IntelliSense, que dará sugestões automáticas, enquanto você continua digitando as classes utilitárias, conforme mostrado na imagem abaixo.

Como configurar o Tailwind CSS

Existem várias maneiras de configurar o Tailwind CSS em seu projeto, todas mencionadas na documentação.

O Tailwind CSS funciona sem problemas com uma infinidade de estruturas como Next, React, Angular e muito mais – e até mesmo no HTML OG(Open Graph).

Para a demonstração prática abaixo, estou usando Tailwind CSS com uma aplicação do Next. Para configurar uma aplicação do Next com o Tailwind CSS diretamente, use o seguinte comando:

Com o npx:

npx create-next-app --example with-tailwindcss with-tailwindcss-app

ou com o yarn:

yarn create next-app --example with-tailwindcss with-tailwindcss-app

Uma vez que o projeto foi configurado, você pode começar a próxima etapa para criar um componente básico de cartão.

Mãos à obra

Vamos construir um componente de cartão em um projeto do Next.

// Arquivo Card.js
// a ser renderizado no index.js

import React from "react";

const Card = () => {
  return (
    
      {/* Imagem */}
      
        
          Image goes here
        
      

      {/* Descrição */}
      
        
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
        
      

      {/* Stack de tecnologias utilizada */}
      
        
          #React
        
        
          #Redux
        
        
          #Javascript
        
      

      {/* Links */}
      
        
        
      
    
  );
};

export default Card;

Isso resulta no cartão a seguir, que é renderizado na interface do usuário:

Veja com que facilidade consigo estilizar o componente de cartão sem sair do arquivo Card.js. Não há a necessidade de escrever nenhum arquivo CSS extra.

Usando flex com a

, aplique a ela a regra de CSS display: flex;. Quer adicionar position: relative; em uma

? Adicione apenas relative na className e pronto.

Também podemos adicionar diferentes modificadores como hover, active, focus e assim por diante para renderizar condicionalmente classes utilitárias. É possível aplicar regras de CSS complexas como esta:

.some-class-name {
          --tw-space-x-reverse: 0;
          margin-right: calc(0.5rem * var(--tw-space-x-reverse));
          margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

Basta mencionar space-x-2 na tag

. Legal, não é?

Temos que mencionar esses estilos explicitamente em algum tipo de arquivo CSS global? Absolutamente, não! O Tailwind faz isso automaticamente por nós. Essa é a beleza do Tailwind.

Ainda não terminamos... há muitas outras vantagens. Vamos vê-las agora.

Vantagens do Tailwind CSS

O modo Just-In-Time (JIT) fornece tempos de construção extremamente rápidos

Antes do Tailwind v3, ele limpava todos os estilos para remover quaisquer estilos não utilizados, para que a compilação de produção permanecesse a menor possível.

De acordo com o Tailwind, a construção de produção costumava ficar entre 5 e 10 kB. Essa, porém, é a história em produção. Em um ambiente de desenvolvimento, o CSS pode ficar muito grande, especialmente se usarmos muitas configurações personalizadas.

Com a v3 e depois dela, o Tailwind lançou um novo recurso chamado compilador Just-in-Time. O compilador JIT evita compilar todo o CSS antecipadamente e compila apenas o CSS como e quando precisamos dele.

Isso resulta em tempos de construção extremamente rápidos em todos os ambientes. E como os estilos são gerados conforme precisamos deles, não há necessidade de limpar os estilos não utilizados. Isso significa que o CSS em todos os ambientes será o mesmo. Isso nos ajuda a nos livrar do medo de que qualquer CSS importante seja eliminado na produção.

É opinativo e flexível ao mesmo tempo

O Tailwind CSS é opinativo. Ele especifica algumas restrições quando se trata de estilo e, se você me perguntar, se isso é bom, eu diria que sim, pois nos ajuda a manter a parte do design para aqueles que realmente a entendem.

Basta olhar para uma das classes utilitárias para adicionar um box-shadow na sua

(fonte):

Como você pode ver, existem apenas 8 variantes de sombra que o Tailwind fornece. Existem valores predefinidos para deslocamento vertical e horizontal, desfoque, propagação, cor e opacidade. É por isso que o Tailwind é opinativo.

Ele tenta dar uma opinião sobre quais valores de propriedade escolher em quase todas as propriedades de estilo existentes. Acredite: na maioria dos casos, essas 8 variantes (para box-shadow) serão mais do que suficiente para criar uma ótima interface de usuário.

Por exemplo, no exemplo prático acima, usei shadow-lg na

pai principal, para obter aquela bela sombra de caixa externa.

Usar a mesma variante de uma classe de utilitário específica em diferentes áreas da interface do usuário também garante a uniformidade em toda a aplicação e resulta em uma melhor experiência do usuário.

Caso, no entanto, você precise de algum valor realmente personalizado para qualquer estilo em particular, pode obter isso adicionando um tema personalizado no tailwind.config.js. Por exemplo, para ter um shadow-3xl (o Tailwind não fornece shadow-3xl para usar diretamente), você pode adicionar as seguintes linhas no module.exports no tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

Agora, com o advento do JIT, você também pode usar um valor arbitrário entre colchetes [], como mostrado abaixo:


  // O resto do código vai aqui

O uso de valores arbitrários pode ser útil quando você precisar de um estilo específico em apenas alguns lugares. Neste caso, criar um tema para ele no tailwind.config.js pode parecer desnecessário.

Minhas considerações

Eu realmente espero ter conseguido fazer você entender o que é o Tailwind CSS e o que você pode fazer com ele.

O Tailwind é um framework do CSS que nos fornece classes utilitárias de propósito único que são, em sua maioria, opinativas e que nos ajudam a projetar nossas páginas da web diretamente de dentro de nossos arquivos de marcação ou .js/.jsx/.ts/.tsx.

Na minha opinião, o Tailwind é simples e fácil de entender. É verdade que pode levar algum tempo para pegar o jeito de todos os nomes de classes de utilitários, mas não se preocupe – você pode consultar a documentação sempre que ficar travado.

Para todos os iniciantes, que estão recém começando em sua jornada com o desenvolvimento para a web, é muito importante saber o que é o CSS3, antes mesmo de explorar o Tailwind (ou qualquer outro framework do CSS, como o Bootstrap, o Windi CSS e outros) .

Conclusão

Obrigado pela leitura! Eu realmente espero que você tenha gostado de ler sobre o Tailwind CSS neste artigo e que o tenha achado útil.

Considere compartilhá-lo com seus amigos. Eu ficarei muito grato, de verdade. Siga o autor no LinkedIn e no Twitter e fique ligado para ver mais conteúdos incríveis. Paz!

Links

Site da web do autor (em inglês)
Outros textos do autor (em inglês)

Tutorial de Git e GitHub – controle de versão para iniciantes

Paula Flávia Pagotto Simionato — Wed, 28 Sep 2022 21:00:00 +0000

Artigo original: Git and GitHub Tutorial – Version Control for Beginners

Git e GitHub são duas tecnologias que todo desenvolvedor deve aprender, independentemente de sua área.

Se você é um desenvolvedor iniciante, pode pensar que esses dois termos significam a mesma coisa, mas são diferentes.

Este tutorial ajudará você a entender o que é Git e controle de versão, os comandos básicos do Git que você precisa conhecer, como você pode usar seus recursos para aumentar a eficiência do seu trabalho e como estender esses recursos usando o GitHub.

Este guia é voltado a iniciantes, pois os exemplos serão muito fáceis de entender. Também será um tutorial generalizado para que qualquer pessoa possa acompanhar, não importa qual seja sua linguagem de programação favorita.

Para nosso projeto, faremos uma lista de tarefas escrita em um arquivo de texto (txt). Você verá como podemos usar os recursos do Git para trabalhar e criar uma versão final da lista.

Pré-requisitos

Para concluir este tutorial, você precisará do seguinte:

Uma interface de linha de comando, um terminal.
Um editor de texto de sua escolha (usarei o VS Code).
Uma conta no GitHub.

O que é Git?

O Git é um sistema de controle de versão que permite rastrear as alterações feitas em seus arquivos ao longo do tempo. Com o Git, você pode reverter para vários estados de seus arquivos (como se usasse uma máquina do tempo). Você também pode fazer uma cópia do arquivo, fazer alterações nessa cópia e mesclar essas alterações na versão original.

Por exemplo, você pode estar trabalhando na página de destino de um site e descobrir que não gosta da barra de navegação. Ao mesmo tempo, você pode ficar apreensivo em começar a alterar seus componentes, porque o resultado pode ser pior.

Com o Git, você pode criar uma cópia idêntica desse arquivo e mexer na barra de navegação. Então, quando estiver satisfeito com suas alterações, poderá mesclar a cópia ao arquivo original.

Você não está limitado a usar o Git apenas para arquivos de código-fonte – você também pode usá-lo para acompanhar arquivos de texto ou até imagens. Isso significa que o Git não é apenas para desenvolvedores – qualquer um pode achá-lo útil.

Como instalar o Git

Para usar o Git, você precisa instalá-lo em seu computador. Para fazer isso, você pode baixar a versão mais recente no site da web oficial. Você pode fazer o download para o seu sistema operacional a partir das opções fornecidas.

Você também pode instalar o Git usando a linha de comando, mas, como os comandos variam de acordo com cada sistema operacional, vamos nos concentrar na abordagem mais geral.

Como configurar o Git

Vou assumir que, neste ponto, você já instalou o Git. Para verificar isso, você pode executar este comando no terminal: git --version. Ele mostra a versão atual instalada no seu PC.

A próxima coisa que você precisa fazer é definir seu nome de usuário e endereço de e-mail. O Git usará essas informações para identificar quem fez alterações específicas nos arquivos.

Para definir seu nome de usuário, digite e execute estes comandos: git config --global user.name "SEU_NOME_DE_USUARIO" e git config --global user.email "SEU_E-MAIL". Apenas certifique-se de substituir "SEU_NOME_DE_USUARIO" e "SEU_E-MAIL" pelos valores que você escolher — ou seja, seu nome de usuário e seu e-mail reais.

Como criar e inicializar um projeto no Git

Após terminarmos de instalar e configurar o Git, agora é hora de criar nosso projeto.

Eu criei uma pasta, no meu desktop, chamada Git and GitHub tutorial. Usando a linha de comando, navegue até o local do seu novo projeto. Para mim, eu executaria os seguintes comandos:

cd desktop

cd Git and GitHub tutorial

Se você conhece a linha de comando há pouco e ainda está aprendendo a usá-la para navegar pelo seu PC, sugiro usar o Visual Studio Code da Microsoft. É um editor de código que possui um terminal embutido para executar comandos. Você pode baixá-lo aqui.

Depois de instalar o VS Code, abra seu projeto no editor e abra um novo terminal para seu projeto. Isso apontará automaticamente o terminal/linha de comando para o caminho do seu projeto.

Agora, para inicializar um repositório do seu projeto, basta executar git init. Isso dirá ao Git para começar a observar seus arquivos a cada alteração que ocorrer. Esta é a aparência na linha de comando/terminal:

git init

A primeira linha tem informações sobre meu PC e o caminho para a pasta. A segunda linha é o comando git init e a terceira linha é a resposta enviada de volta me dizendo que meu repositório (ou repo) foi inicializado. Ele é considerado vazio porque não informamos ao Git quais arquivos rastrear.

Um repositório é apenas outra maneira de definir um projeto que está sendo monitorado/rastreado pelo Git.

Arquivos de projeto no Git

Eu criei apenas um arquivo chamado todo.txt. Essa é a aparência do arquivo:

MINHA LISTA DE TAREFAS

1. Escrever um artigo.
2. Programar.
3. Estudar pelos livros.
4. Chegar nas aulas a tempo.
5. Visitar minha tia.
6. Me candidatar a trabalhos remotos.

Antes de continuarmos aprendendo outros comandos do Git, vamos falar sobre o GitHub.

O que é o GitHub?

O GitHub é um serviço de hospedagem on-line para repositórios do Git. Imagine trabalhar em um projeto em casa e, enquanto estiver fora – talvez na casa de um amigo, de repente – se dar conta da solução para um erro de código que o deixou inquieto por dias.

Você não pode fazer essas alterações porque seu PC não está com você. Se, contudo, você tiver seu projeto hospedado no GitHub, poderá acessar e baixar esse projeto com um comando em qualquer computador ao qual tenha acesso. Em seguida, você pode fazer suas alterações e enviar a versão mais recente de volta ao GitHub.

Em resumo, o GitHub permite que você armazene seu repositório em sua plataforma. Outro recurso incrível que vem com o GitHub é a capacidade de colaborar com outros desenvolvedores de qualquer local.

Agora que criamos e inicializamos nosso projeto localmente, vamos enviá-lo para o GitHub.

Se você é iniciante, encontrará alguns termos novos como push, commit, add e assim por diante – mas não se deixe assustar com eles. Com alguma prática, você será capaz de lembrar desses termos e do que eles fazem.

Como enviar um repositório para o GitHub

Vou dividir esta seção em etapas para ajudá-lo a entender o processo com mais clareza.

Passo 1 – Crie uma conta no GitHub

Para poder usar o GitHub, terá de criar uma conta primeiramente. Você pode fazer isso no site da web do GitHub.

Passo 2 – Crie um repositório

Você pode clicar no símbolo + no canto superior direito da página e escolher "New repository" (Novo repositório). Dê um nome ao seu repositório, role para baixo e clique no botão "Create repository" (Criar repositório).

Passo 3 – Adicionar e confirmar arquivos

Antes de "adicionar" e "confirmar" nossos arquivos, você precisa entender os estágios de um arquivo que está sendo rastreado pelo Git.

Estado confirmado (committed)

Um arquivo está no estado confirmado quando todas as alterações feitas no arquivo foram salvas no repositório local. Os arquivos no estágio confirmado são arquivos prontos para serem enviados para o repositório remoto (no GitHub).

Estado modificado (modified)

Um arquivo no estado modificado tem algumas alterações feitas nele, mas ainda não foi salvo. Isso significa que o estado do arquivo foi alterado de seu estado anterior no estado confirmado.

Estado preparado (staged)

Um arquivo no estado preparado significa que está pronto para ser confirmado. Nesse estado, todas as alterações necessárias foram feitas. Portanto, o próximo passo é mover o arquivo para o estado de confirmação.

Você pode entender isso melhor imaginando o Git como uma câmera. A câmera só tirará um instantâneo quando o arquivo atingir o estado de confirmação. Após este estado, a câmera começa a comparar as alterações feitas no mesmo arquivo com o último instantâneo (este é o estado modificado). Quando as alterações necessárias forem feitas, o arquivo é preparado e movido para o estado de confirmação para um novo instantâneo.

Isso pode ser muita informação para absorver no momento, mas não desanime – fica mais fácil com a prática.

Como adicionar arquivos ao Git

Quando inicializamos nosso projeto, o arquivo não estava sendo rastreado pelo Git. Para isso, usamos o comando git add . O ponto que vem depois de add representa todos os arquivos que existem no repositório. Se você quiser adicionar um arquivo específico (por exemplo, um arquivo chamado about.txt), use git add about.txt.

Agora, nosso arquivo está no estado preparado. Você não receberá uma resposta após este comando, mas, para saber em que estado seu arquivo está, você pode executar o comando git status.

Como confirmar (commit) arquivos no Git

O próximo estado de um arquivo após o estado preparado é o estado confirmado. Para confirmar nosso arquivo, usamos o comando git commit -m "first commit"

A primeira parte do comando git commit diz ao Git que todos os arquivos preparados estão prontos para serem confirmados. Então, é hora de tirar um instantâneo. A segunda parte, -m "first commit", é a mensagem de confirmação. -m é uma abreviação de mensagem enquanto o texto entre aspas é a mensagem de confirmação (que pode ser a mensagem que você quiser e no idioma que quiser).

Depois de executar este comando, você deve obter uma resposta semelhante a esta:

git commit

Agora, nosso arquivo está no estado confirmado.

Passo 4 – Envie o repositório para o GitHub

Depois de criar o repositório, você deve ser redirecionado para uma página que informa como criar um repositório localmente ou enviar um já existente.

No nosso caso, o projeto já existe localmente, então usaremos comandos na seção "… ou enviar um repositório existente a partir da linha de comando". Estes são os comandos:

git remote add origin https://github.com/ihechikara/git-and-github-tutorial.git
git branch -M main
git push -u origin main

O primeiro comando, git remote add origin https://github.com/ihechikara/git-and-github-tutorial.git, cria uma conexão entre seu repositório local e o repositório remoto no GitHub.

O URL do seu projeto remoto deve ser totalmente diferente do anterior. Portanto, para acompanhar, certifique-se de seguir as etapas e trabalhar com seu próprio repositório remoto. Normalmente, você não receberá uma resposta após executar este comando, mas certifique-se de ter uma conexão com a internet.

O segundo comando, git branch -M main, altera o nome do seu branch principal para "main". O branch padrão pode ser criada como "master", mas "main" é o nome padrão para este repositório agora. Geralmente, não há resposta aqui.

O último comando, git push -u origin main, envia seu repositório do seu dispositivo local para o GitHub. Você deve obter uma resposta semelhante a esta:

git push

Para ajudá-lo a aprofundar sua compreensão dos estágios do arquivo, farei alterações no arquivo e, em seguida, enviarei a nova versão para o GitHub.

Lembre-se de que nosso arquivo agora está no estado confirmado. Vamos fazer alterações no arquivo e anotar os estados.

Vou adicionar uma nova tarefa à lista de tarefas:

MINHA LISTA DE TAREFAS

1. Escrever um artigo.
2. Programar.
3. Estudar pelos livros.
4. Chegar nas aulas a tempo.
5. Visitar minha tia.
6. Me candidatar a trabalhos remotos. 
7. Praticar programação

Depois de adicionar a nova tarefa, execute o comando git status. Isto é o que você deverá ver:

git status

Depois de fazer alterações no arquivo, ele foi movido para o estado modificado, mas ainda não está preparado para confirmação. Então, você ainda não pode enviá-lo para o GitHub. O Git não tirou um instantâneo final desse estado atual, pois está apenas comparando as alterações que fizemos agora com o último instantâneo.

Agora vamos adicionar (preparar) este arquivo e, em seguida, confirmá-lo e enviá-lo. Isto é igual ao que fizemos na última seção.

Primeiro, adicionamos o arquivo usando git add ., que adiciona todos os arquivos na pasta (um único arquivo, no nosso caso). Em seguida, confirmamos o arquivo executando git commit -m "added new task" (a mensagem significa "nova tarefa adicionada") seguido de git push -u origin main.

Essas são as três etapas para enviar seus arquivos modificados para o GitHub. Você adiciona, confirma e, em seguida, envia. Espero que agora você entenda os estágios do arquivo e os comandos associados a eles.

Como usar branches no Git

Com branches, você pode criar uma cópia de um arquivo no qual gostaria de trabalhar sem estragar a cópia original. Você pode mesclar essas alterações com a cópia original ou apenas deixar o branch permanecer independente.

Antes de começarmos a usar branches, quero mostrar uma representação visual do nosso repositório, que se parece com isso:

branch main

A imagem acima mostra nosso branch principal com os dois últimos commits (o primeiro commit e o commit da nova tarefa adicionada).

Neste ponto, quero adicionar mais tarefas à lista, mas ainda não tenho certeza se as quero na minha lista principal. Então, vou criar um outro branch chamado test para ver como ficaria minha lista com mais tarefas incluídas.

Para criar um outro branch, execute este comando: git checkout -b test. Vamos dividir isso em partes e explicar.

checkout diz ao Git que deve mudar para um outro branch. -b diz ao Git para criar esse outro branch. test é o nome do branch a ser criado e alterado. Aqui está a resposta que você deve obter:

git checkout -b

Agora que criamos um outro branch, é assim que nosso repositório ficará:

git branch

Criamos o outro branch a partir do estado do nosso último commit. Vamos agora adicionar mais tarefas a esse novo branch.

MINHA LISTA DE TAREFAS

1. Escrever um artigo.
2. Programar.
3. Estudar pelos livros.
4. Chegar nas aulas a tempo.
5. Visitar minha tia.
6. Me candidatar a trabalhos remotos. 
7. Praticar programação
8. Completar a tarefa de estágio.
9. Praticar aberturas do xadrez.
10. Resolver quebra-cabeças do xadrez.
11. Verificar o cronograma dos testes.

Eu adicionei quatro novas tarefas. Para mesclar o novo estado com o branch main, você deve primeiro preparar e confirmar esse branch. Não entrarei em detalhes sobre o assunto, pois fizemos isso duas vezes na última seção.

Você deve tentar fazer isso sozinho para entender como funciona. Como dica, adicione o arquivo e, em seguida, confirme com uma mensagem (consulte a seção anterior para obter detalhes de como fazer isso).

Depois de confirmar seu branch test, volte para o branch main executando este comando: git checkout main.

Você notou que não adicionamos o -b ? Isso ocorre porque não estamos criando um outro branch, mas mudando para um branch existente. Você pode verificar todos os branches que existem em seu repositório executando o comando git branch

Agora, podemos mesclar as alterações que fizemos no branch test no branch main executando git merge test. Neste ponto, você verá todas as alterações feitas no branch test refletidas no branch main. Você também deve receber uma resposta semelhante a esta:

git merge

Aqui está uma representação visual do nosso repositório:

git merge

Se você continuar a enviar seu repositório para o GitHub, verá que o branch test não será enviado. Ele permanecerá apenas em seu repositório local. Se você quiser enviar seu branch test, mude para ele usando git checkout test e execute o comando git push -u origin test.

Como extrair um repositório no Git

Fazer pull no Git significa clonar o estado atual de um repositório remoto em seu computador/repositório. Isso é útil quando você deseja trabalhar em seu repositório de um computador diferente ou quando está contribuindo para um projeto de código aberto on-line.

Para testar isso, não se preocupe em mudar para um novo computador. Basta executar cd .. para sair do diretório atual e voltar uma etapa. No meu caso, naveguei de volta para a minha área de trabalho.

Vá para o GitHub e, na página principal do seu repositório, você verá um botão verde que diz "Code". Ao clicar no botão, você deverá ver algumas opções em um menu suspenso. Vá em frente e copie o URL no formato HTTPS.

Depois disso, execute git clone SEU_URL_DE_HTTPS. Este comando puxa o repositório remoto para seu computador local em uma pasta chamada git-and-git-tutorial. Isto é o que você deverá ver em seu terminal:

git clone

Conclusão

Este artigo abordou os comandos básicos que ajudarão você a começar a usar o Git. Também começamos a aprender a usar o GitHub.

Se você seguiu até este ponto, parabéns. Você está pronto para seguir em frente. Agora, você pode usar o Git em seus projetos, independentemente da linguagem de programação que estiver usando.

Você deve saber que esses não são todos os comandos que existem no Git – portanto, sinta-se à vontade para fazer mais pesquisas para aprender mais comandos e seus usos. Este artigo e esta página de dicas (ambos em inglês) são boas fontes para se começar . Este é um ótimo lugar para ver uma lista detalhada de mais comandos do Git (em inglês).

Encontre o autor no Twitter. Feliz programação!

Como se tornar um desenvolvedor de front-end - habilidades para desenvolver para a web

Paula Flávia Pagotto Simionato — Tue, 27 Sep 2022 21:00:00 +0000

Artigo original: How to Become a Front End Developer – Front End Web Dev Skills

Alguns dos profissionais mais bem pagos do mundo são desenvolvedores de front-end. Eles usam seus conhecimentos e talentos para criar sites atraentes e fáceis de usar.
Os desenvolvedores de front-end não precisam de um diploma ou certificado escolar para trabalhar. Em vez disso, eles devem entender os fundamentos do desenvolvimento de front-end, linguagens de programação e frameworks de desenvolvimento de front-end.
Neste guia, você aprenderá como se tornar um desenvolvedor de front-end, entendendo primeiramente o que o desenvolvimento de front-end envolve, as habilidades técnicas e sociais necessárias, as linguagens e estruturas disponíveis e algumas etapas para começar.
Um desenvolvedor de front-end nos Estados Unidos pode ganhar, em média, US$ 86.178 por ano, de acordo com o Glassdoor. De acordo com o Payscale, um desenvolvedor de front-end "típico" pode ganhar uma renda anual de até US$ 71.350.

Se você é novo no setor de tecnologia, pode estar confuso sobre o que significa front-end, bem como outros aspectos do desenvolvimento para a web, como back-end e full stack. Então, vamos começar com uma explicação sobre eles.

O que é o front-end?

Todos os sites pelos quais navegamos, os sites de comércio eletrônico nos quais compramos produtos, os blogs que lemos e assim por diante, são tornados fáceis de usar e esteticamente agradáveis pelos desenvolvedores de front-end.

Existem dois aspectos principais do desenvolvimento para a web a serem considerados ao criar sites e aplicações para a web: o front-end e o back-end.
O desenvolvimento de front-end está preocupado com a "fachada" de qualquer aplicação para a web, como o nome indica (em inglês, front-end significa a "parte frontal"). É com ela que o usuário interage e é ela que o usuário vê ao executar operações como clicar em um botão, rolar uma página, preencher um formulário e assim por diante. É a funcionalidade do lado do client de uma aplicação para a web.

O back-end (em inglês, back-end significa a "parte traseira") refere-se aos eventos que ocorrem nos bastidores, como a infraestrutura, a conexão e a comunicação com o banco de dados e assim por diante. Full stack refere-se a uma combinação de front-end e back-end.

O que faz um desenvolvedor de front-end?

Acabamos de discutir os vários aspectos do desenvolvimento para a web, front-end, back-end e full stack. Para acompanhar isso, também temos diferentes tipos de desenvolvedores com base nos aspectos do desenvolvimento para a web nos quais eles são proficientes. Portanto, temos desenvolvedores de front-end, desenvolvedores de back-end e desenvolvedores full stack.

Um desenvolvedor de front-end é um profissional responsável por criar a interface do usuário e a experiência do usuário (UI/UX) com a qual os usuários interagem para acessar a aplicação em questão. Eles são solucionadores de problemas que usam linguagens de programação, ferramentas, criatividade e experiência para criar um site ou aplicação que resolva o problema de um usuário e que tenha uma boa aparência.

Como dito anteriormente, um desenvolvedor de back-end é responsável por tudo relacionado ao back-end, incluindo a lógica, a comunicação com os banco de dados e muito mais.

Por fim, os desenvolvedores full stack são aqueles que entendem tanto do desenvolvimento de front-end quanto de back-end, permitindo que eles iniciem e terminem um projeto por conta própria.

Em uma configuração profissional ou empresa padrão, geralmente há um designer de UI/UX que projeta a aparência da interface e o que eles desejam que seja a experiência do usuário.

Em seguida, eles passarão seu design para os desenvolvedores de front-end e back-end, que agora trabalham na implementação para que a aplicação que eles projetaram funcione na web. O desenvolvedor de front-end recriará o design, escrevendo o programa em HTML, CSS e JavaScript.

Como tornar-se um desenvolvedor de front-end

Até agora, discutimos o que significa front-end e quem é o desenvolvedor de front-end. Agora, vamos ver alguns dos principais requisitos/habilidades necessários antes que você possa se chamar de desenvolvedor de front-end.

É importante entender que você não precisa saber tudo antes de trabalhar como desenvolvedor de front-end, mas os fundamentos, como HTML, CSS e JavaScript, são sempre essenciais.

1. Aprenda HTML, CSS e JavaScript

Quando você olha para um site na web, as três coisas mais importantes que compõem o que você vê na web são o HTML, o CSS e o JavaScript. Portanto, essas são as três primeiras coisas a serem aprendidas como base para se tornar um desenvolvedor de front-end.

Eles são os blocos de construção para o desenvolvimento para a web e de aplicações. Portanto, você deve aprendê-los se quiser entrar no desenvolvimento para a web. Felizmente, existem vários recursos on-line disponíveis para ajudá-lo a aprender e a praticá-los.

O que é HTML?

HTML é a sigla para Hyper Text Markup Language (ou "linguagem de marcação de hipertexto", em português). Ele é o esqueleto de todas as páginas da web e aplicações, seu bloco de construção mais básico. Você usa HTML para estruturar sua página em elementos como parágrafos, seções, títulos, barras de navegação e assim por diante.

O HTML fornece a estrutura ao conteúdo que aparece em um site, como imagens, texto ou vídeos. Uma página que tenha apenas HTML é muito básica e pouco atraente, e precisará de estilo em CSS para torná-la apresentável.

O HTML é frequentemente a primeira linguagem que os desenvolvedores aprendem e é essencial para o trabalho de desenvolvimento de front-end. Quer saber mais sobre o HTML? Comece com a certificação em design responsivo para a web do freeCodeCamp e com o novo curso completo sobre HTML do Beau Carnes (texto em inglês).

O que é CSS?

CSS é a abreviação de Cascading Style Sheets (ou "folhas de estilo em cascata", em português), e você o usa para melhorar a aparência de uma página da web, adicionando estilos em CSS. Esses estilos tornam seu site mais atraente e agradável de ver e usar para o usuário final.

Você quer saber mais sobre CSS? Para começar, verifique a segunda parte da certificação em Design Responsivo para a web do freeCodeCamp.

O que é JavaScript?

O HTML é uma linguagem de marcação e o CSS são as folhas de estilo. Então, temos o JavaScript, o terceiro bloco de construção. O JavaScript é uma linguagem de programação que permite que você torne suas páginas da web mais interativas. Isso pode incluir animações, estilo dinâmico, efeitos/comportamentos quando os botões são clicados, movimento dos jogos e assim por diante.

Se você quiser aprender JavaScript, consulte a certificação em algoritmos e estruturas de dados em JavaScript do freeCodeCamp. Você também pode complementar seu aprendizado com este excelente curso de introdução ao JS (texto em inglês).

2. Pratique programação

Existe uma expressão popular que diz que "a prática leva à perfeição". Isso significa que você se tornará melhor em alguma coisa se a fizer com frequência.

Se você quer se tornar um desenvolvedor de front-end profissional, precisa praticar de forma consistente. Isso vai ajudá-lo a aprender os conceitos completamente (e não apenas na superfície). Quanto mais você praticar, mais (e melhor) você entenderá os conceitos.

3. Aprimore suas habilidades

"Aprenda constantemente. Sempre há mais uma coisa para aprender!" disse Steve Jobs. Isso vale em todos os aspectos da vida, incluindo programação e desenvolvimento de front-end.

À medida que novas tecnologias, ferramentas, sintaxe e abordagens são introduzidas, é sempre melhor manter-se atualizado com as novas tendências tecnológicas e evitar ficar para trás.

Isso ajudará você a aumentar suas habilidades como desenvolvedor de front-end, e você sempre poderá se manter atualizado, participando e interagindo com comunidades ativas de desenvolvedores. Existem muitas comunidades por aí, como a comunidade de desenvolvedores do freeCodeCamp e todas as outras comunidades locais que nos cercam, incluindo a sua.

4.Aprenda sobre a linha de comando e sobre controle de versão

Como desenvolvedor de front-end, você deve entender como a linha de comando funciona, pois ela permite acessar as funções do sistema operacional por meio de uma interface de texto. Muitos profissionais preferem as CLIs ("interfaces de linha de comando", em português) por sua velocidade e desempenho ao instalar bibliotecas e estruturas.

Desenvolvedores de front-end também devem estar familiarizados com sistemas de controle de versão, como o Git, que é o mais utilizado. Ao programar, você frequentemente desejará rastrear seu histórico de programação e outras informações.

O controle de versão torna isso muito mais fácil, pois permite que você e sua equipe se comuniquem e gerenciem (rastreiem) com eficiência todas as alterações feitas no código-fonte. Ele também fornece informações como quem fez as alterações e quais alterações foram feitas.

5. Compreenda as interfaces de programação de aplicativos (APIs)

Como desenvolvedor front-end profissional, você deve estar familiarizado com as APIs e com o modo de consumi-las e manipulá-las. Isso é fundamental para a comunicação com lógicas de back-end e bancos de dados.

Para interagir com APIs em JavaScript, você usará principalmente a API Fetch do navegador ou a biblioteca Axios. Este artigo (texto em inglês) explica como usar a API Fetch em JavaScript.

6. Aprenda e entenda as bibliotecas do JavaScript e do CSS

Hoje, existem inúmeras bibliotecas do JavaScript disponíveis, todas com o objetivo de facilitar o desenvolvimento de aplicações da web. Esses são scripts do JavaScript pré-escritos, que facilitam o desenvolvimento de aplicativos baseados em JavaScript.

Existem muitas delas, mas é melhor escolher uma e aprendê-la completamente, como o React, o Vue ou o Angular (três dos mais populares). Você pode conferir a certificação de bibliotecas de desenvolvimento em front-end do freeCodeCamp para aprender mais.

Existem também algumas bibliotecas de estilo que simplificam o estilo de suas páginas da web, como o Bootstrap, Sass/Scss, Tailwind e assim por diante.

7. Crie um portfólio on-line

Construir seu portfólio é uma maneira fácil de demonstrar sua experiência como desenvolvedor de front-end.

Se você está apenas começando como desenvolvedor de front-end, não precisa que cada parte de seu portfólio seja um projeto de cliente. Você pode assumir o comando e ser inventivo. Faça uso de novas ferramentas e bibliotecas para criar algo espetacular. À medida que sua carreira progride, você poderá apresentar ali mais projetos nos quais trabalhou.

Você também pode examinar os portfólios de seus colegas desenvolvedores de front-end para ver o que você gosta e o que não gosta. Então, sabendo o que você quer mostrar ao mundo, crie seu próprio site.

Aqui está um curso divertido (texto em inglês) que o ajudará a criar seu próprio site de portfólio com HTML, CSS e JavaScript – para que você possa praticar essas habilidades de desenvolvimento para a web.

Você também pode fazer com que amigos e membros da comunidade critiquem e testem seu site para garantir que tudo fique bem. Não se esqueça de que todas as palavras em seu site devem ajudá-lo a conseguir um ótimo trabalho. Você não quer que seja muito longo ou muito chato.

Aqui estão algumas dicas (texto em inglês) que o ajudarão a aumentar o nível do seu portfólio de desenvolvedor para realmente se destacar.

8. Cultive suas soft skills

Os desenvolvedores de front-end devem ser comunicadores eficazes (na escrita assim como na fala), pois devem interagir tanto com a equipe técnica quanto com o cliente.

Eles também devem ser excelentes comunicadores em seu código, pois é fundamental reservar um tempo para comentar e escrever a documentação apropriada em seu código para que você e outras pessoas possam entendê-lo facilmente, mesmo depois de muito tempo.

Os desenvolvedores de front-end também devem ter boa atenção aos detalhes e ser meticulosos em todos os aspectos de seu trabalho. Eles devem ter um olhar atento e ser capazes de detectar pequenos erros ou inconsistências ao criar páginas da web.

Os desenvolvedores de front-end também devem ser eternos aprendizes, pois os sites estão evoluindo e as expectativas de capacidade de resposta, acessibilidade e aparência estão sempre mudando. Os engenheiros de front-end devem permanecer o mais atualizados possível e quase certamente precisarão aprender novas linguagens de programação ou bibliotecas com o passar do tempo.

9. Comece a se candidatar a estágios ou empregos que você deseja

Depois de obter o conhecimento adequado em front-end, aprenda as habilidades necessárias e faça seu currículo (texto em inglês). Agora, você poderá começar a procurar oportunidades de trabalho em front-end.

Confira seus requisitos para ver em quais outras áreas você precisa melhorar como desenvolvedor de front-end.

Para concluir, sempre se candidate a empregos e nunca tenha medo de se candidatar. Isso dará a você alguma experiência para ajudá-lo a aprender como as empresas contratam e o que é preciso para ser contratado.

Conclusão

Neste artigo, aprendemos o que é um desenvolvedor de front-end e o que é preciso para se tornar um.

Também aprendemos que se tornar um desenvolvedor de front-end sem diploma não é apenas possível, mas também alcançável.

Uma pergunta final que a maioria das pessoas tem é sobre o tempo que leva para se tornar um desenvolvedor de front-end. Bem, o tempo que leva depende inteiramente do seu ritmo de aprendizado e de seu conhecimento prévio.

Apenas lembre-se de que você não deve comparar a si ou o seu ritmo de aprendizado com o de outros enquanto aprende. Reserve algum tempo a cada semana ou dia para aprender, faça o seu melhor para cumpri-lo e depois aproveite o processo.

Como criar um painel de análise em uma aplicação do Django

Paula Flávia Pagotto Simionato — Mon, 26 Sep 2022 21:00:00 +0000

Artigo original: How to create an analytics dashboard in a Django app

Olá, pessoal!

Python, visualização de dados e programação são os tópicos aos quais me dedico profundamente. É por isso que gostaria de compartilhar com você minhas ideias, bem como meu entusiasmo por descobrir novas maneiras de apresentar dados de maneira significativa.

O caso que vou abordar é bastante comum: você tem dados no back-end da sua aplicação e deseja dar forma a eles no front-end. Se essa situação parece familiar a você, este tutorial pode ser útil.

Depois de concluí-lo, você terá uma aplicação desenvolvida com Django, com tabelas e gráficos dinâmicos interativos.

Pré-requisitos

Para percorrer as etapas com confiança, você precisa de um conhecimento básico do framework Django e de um pouco de criatividade. ✨

Para acompanhá-lo, você pode baixar o exemplo do GitHub.

Aqui está uma breve lista das ferramentas que vamos usar:

Python 3.7.4
Django
Virtualenv
Tabelas e gráficos dinâmicos do Flexmonster (biblioteca do JavaScript)
SQLite

Nota do tradutor: no momento desta tradução, o Python se encontra em sua versão 3.10.4. As soluções constantes aqui deverão funcionar, mesmo assim.

Se você já configurou um projeto no Django e se sente confiante sobre o fluxo básico de criação de aplicações, pode ir direto para a seção Conectando dados ao Flexmonster, que explica como adicionar componentes de visualização de dados a ele.

Vamos começar!

Começando com o Django

Antes de mais nada, vamos conferir se você já instalou o Django em sua máquina. A regra geral é instalá-lo em seu ambiente virtual configurado anteriormente –uma ferramenta poderosa para isolar seus projetos uns dos outros.

Além disso, verifique se você está ativo em um diretório recém-criado. Abra seu console e inicialize um projeto do Django com este comando:

django-admin startproject analytics_project

Agora, há um novo diretório chamado analytics_project. Vamos verificar se fizemos tudo certo. Vamos para analytics_project e iniciar o servidor com um comando de console:

python manage.py runserver

Abra http://127.0.0.1:8000/ no seu navegador. Se o que você vê na página é este foguete incrível, é sinal de que está tudo certo:

Em seguida, crie uma aplicação em seu projeto. Vamos chamá-lo de dashboard:

python manage.py startapp dashboard

Aqui vai uma dica: se você não tiver certeza sobre a diferença entre o conceito de apps e de projetos em Django, (texto em inglês), dedique um tempo a aprender sobre isso para ter uma visão clara de como os projetos do Django são organizados.

Lá vamos nós. Agora, vemos um novo diretório dentro do projeto. Ele contém os seguintes arquivos:

__init__.py – para fazer o Python tratá-lo como um pacote

admin.py – configurações para as páginas de administração do Django

apps.py – ajustes para as configurações da aplicação

models.py – classes que serão convertidas em tabelas de banco de dados pelo ORM do Django

tests.py – classes de teste

views.py – funções e classes que definem como os dados são exibidos nos templates

Depois, é necessário registrar a aplicação no projeto. Vá para analytics_project/settings.py e anexe o nome da aplicação à lista INSTALLED_APPS :

INSTALLED_APPS = [
	'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard',
]

Agora, nosso projeto está ciente da existência da aplicação.

Views

No dashboard/views.py, vamos criar uma função que direciona um usuário para os templates específicos definidos na pasta dashboard/templates. As visualizações (em inglês, views) também podem conter classes.

Veja como a definimos:

from django.http import JsonResponse
from django.shortcuts import render
from dashboard.models import Order
from django.core import serializers

def dashboard_with_pivot(request):
    return render(request, 'dashboard_with_pivot.html', {})

Uma vez chamada, esta função renderizará dashboard_with_pivot.html, um template que definiremos em breve. Ele conterá os componentes da tabela e dos gráficos dinâmicos.

Mais algumas palavras sobre esta função. Seu argumento request, uma instância de HttpRequestObject, contém informações sobre a solicitação – por exemplo, o método HTTP usado (GET ou POST). O método render procura por templates de HTML em um diretório de templates localizado dentro do diretório da aplicação.

Também precisamos criar um método auxiliar que envie a resposta com dados para a tabela dinâmica no front-end da aplicação. Vamos chamá-lo de pivot_data:

def pivot_data(request):
    dataset = Order.objects.all()
    data = serializers.serialize('json', dataset)
    return JsonResponse(data, safe=False)

Provavelmente, seu IDE estará informando que não pode encontrar a referência a Order em models.py. Sem problemas - trataremos disso mais tarde.

Templates

Por enquanto, vamos aproveitar o sistema de templates do Django.

Vamos criar um diretório templates dentro de dashboard e criar o primeiro template de HTML, chamado dashboard_with_pivot.html. Ele será exibido ao usuário mediante solicitação. Aqui, também adicionamos os scripts e contêineres para componentes de visualização de dados:


  
  Dashboard with Flexmonster

Funções de visualização de mapeamento para URLs

Para chamar as visualizações e exibir templates de HTML renderizados para o usuário, precisamos mapear as visualizações para os URLs correspondentes.

Aqui tem uma dica: um dos princípios de design de URL do Django é sobre um acoplamento fraco, (texto em inglês). Não devemos fazer URLs com os mesmos nomes das funções do Python.

Vá para analytics_app/urls.py e adicione as configurações relevantes ao dashboard da aplicação em nível de projeto.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('dashboard/', include('dashboard.urls')),
]

Agora, os URLs da aplicação de dashboard podem ser acessados, mas somente se forem prefixados com dashboard.

Depois, vá para dashboard/urls.py (crie este arquivo se ele não existir) e adicione uma lista de padrões de URL que são mapeados para as funções de visualização:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.dashboard_with_pivot, name='dashboard_with_pivot'),
    path('data', views.pivot_data, name='pivot_data'),
]

Modelos

Finalmente, chegamos à modelagem de dados. Essa é a minha parte favorita.

Como você deve saber, um modelo de dados é uma representação conceitual dos dados armazenados em um banco de dados.

Como o objetivo deste tutorial é mostrar como construir uma visualização interativa de dados dentro da aplicação, não vamos nos preocupar muito com a escolha do banco de dados. Usaremos o SQLite – um banco de dados leve que acompanha o servidor de desenvolvimento para a web do Django.

Lembre-se, porém, de que esse banco de dados não é a escolha apropriada para o desenvolvimento em produção. Com o ORM do Django, você pode usar outros bancos de dados que usam a linguagem SQL, como o PostgreSQL ou o MySQL.

Por uma questão de simplicidade, nosso modelo consistirá em uma classe. Você pode criar mais classes e definir relações entre elas, complexas ou simples.

Imagine que estamos projetando um painel para o departamento de vendas. Então, vamos criar uma classe Order (em português, o pedido) e definir seus atributos em dashboard/models.py:

from django.db import models


class Order(models.Model):
    product_category = models.CharField(max_length=20)
    payment_method = models.CharField(max_length=50)
    shipping_cost = models.CharField(max_length=50)
    unit_price = models.DecimalField(max_digits=5, decimal_places=2)

Trabalhando com um banco de dados

Agora, precisamos criar um banco de dados e preenchê-lo com registros.

Como, no entanto, podemos traduzir nossa classe modelo para uma tabela de banco de dados?

É aqui que o conceito de migração é útil. A migração é simplesmente um arquivo que descreve quais mudanças devem ser aplicadas ao banco de dados. Toda vez que precisamos criar um banco de dados baseado no modelo descrito pelas classes do Python, usamos a migração.

Os dados podem vir como objetos, dicionários ou listas do Python. Desta vez, vamos representar as entidades do banco de dados usando classes do Python que estão localizadas no diretório models.

Crie a migração para a aplicação com um comando:

python manage.py makemigrations dashboard

Aqui, especificamos que a aplicação deve dizer ao Django para aplicar migrações para os modelos da aplicação de dashboard.

Após criar um arquivo de migração, aplique as migrações descritas nele e crie um banco de dados:

python manage.py migrate dashboard

Caso perceba que há um novo arquivo db.sqlite3 no diretório do projeto, é sinal de que estamos prontos para trabalhar com o banco de dados.

Vamos criar instâncias da nossa classe Order. Para isso, usaremos o shell do Django - é semelhante ao shell do Python, mas permite acessar o banco de dados e criar entradas.

Então, inicie o shell do Django:

python manage.py shell

Escreva no console interativo do shell o seguinte código:

from dashboard.models import Order

>>> o1 = Order(
... product_category='Books',
... payment_method='Credit Card',
... shipping_cost=39,
... unit_price=59
... )
>>> o1.save()

Você pode criar e salvar quantos objetos precisar do mesmo modo.

Conectando dados ao Flexmonster

Aqui está o que eu prometi explicar.

Vamos descobrir como passar os dados do seu modelo para a ferramenta de visualização de dados no front-end.

Para fazer o back-end e o Flexmonster se comunicarem, podemos seguir duas abordagens diferentes:

Usar o ciclo de request-response. Podemos usar o Python e o mecanismo de template do Django para escrever código em JavaScript diretamente no template.
Usar uma solicitação assíncrona (AJAX) que retorna os dados em JSON.

Na minha opinião, o segundo é o mais conveniente por vários motivos. Em primeiro lugar, o Flexmonster entende JSON. Para ser mais precisa, ele pode aceitar uma matriz de objetos JSON como dados de entrada. Outro benefício do uso de solicitações assíncronas é a maior velocidade de carregamento da página e o código mais sustentável.

Vamos ver como isso funciona.

Vá para templates/dashboard_pivot.html.

Aqui, criamos dois contêineres div, onde a tabela e os gráficos dinâmicos serão renderizados.

Dentro da chamada de Ajax, fazemos uma requisição com base no URL contido na propriedade data-URL. Em seguida, informamos à solicitação Ajax que esperamos que um objeto JSON seja retornado (definido por dataType).

Depois que a solicitação for concluída, a resposta em JSON retornada pelo nosso servidor será definida para o parâmetro data e a tabela dinâmica, preenchida com esses dados, será renderizada.

O resultado da consulta (a instância de JSONResponse) retorna uma string que contém um objeto de array com metainformações adicionais. Então, devemos adicionar uma pequena função para processamento de dados no front-end. Ela extrairá apenas os objetos aninhados de que precisamos e os colocará em um único array. Isso ocorre porque o Flexmonster aceita apenas um array de objetos JSON sem níveis aninhados.

function processData(dataset) {
    var result = []
    dataset = JSON.parse(dataset);
    dataset.forEach(item => result.push(item.fields));
    return result;
}

Após o processamento dos dados, o componente os recebe no formato correto e realiza todo o trabalho árduo de visualização dos dados. Uma grande vantagem é que não há necessidade de agrupar ou agregar os valores dos objetos manualmente.

Veja a aparência do script completo no template:

function processData(dataset) {
    var result = []
    dataset = JSON.parse(dataset);
    dataset.forEach(item => result.push(item.fields));
    return result;
}
$.ajax({
    url: $("#pivot-table-container").attr("data-url"),
    dataType: 'json',
    success: function(data) {
        new Flexmonster({
            container: "#pivot-table-container",
            componentFolder: "https://cdn.flexmonster.com/",
            width: "100%",
            height: 430,
            toolbar: true,
            report: {
                dataSource: {
                    type: "json",
                    data: processData(data)
                },
                slice: {}
            }
        });
        new Flexmonster({
            container: "#pivot-chart-container",
            componentFolder: "https://cdn.flexmonster.com/",
            width: "100%",
            height: 430,
            //toolbar: true,
            report: {
                dataSource: {
                    type: "json",
                    data: processData(data)
                },
                slice: {},
                "options": {
                    "viewType": "charts",
                    "chart": {
                        "type": "pie"
                    }
                }
            }
        });
    }
});

Não se esqueça de incluir este código JavaScript em tags

Paula Flávia Pagotto Simionato - freeCodeCamp.org

O que é Tailwind CSS? Um guia para iniciantes

O que é Atomic CSS?

Hello world!

Hello world 1

Hello world 2

Hello world 3

🗒️ Pontos a observar aqui:

, nomeadas bg-green, font-weight-400 e text-underline. Todas foram aplicadas no meu texto Hello world 3.

Tailwind CSS – um framework CSS visando a utilidade

Como configurar o Tailwind CSS

Mãos à obra

Image goes here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?

Vantagens do Tailwind CSS

O modo Just-In-Time (JIT) fornece tempos de construção extremamente rápidos

É opinativo e flexível ao mesmo tempo

Minhas considerações

Conclusão

Tutorial de Git e GitHub – controle de versão para iniciantes

Pré-requisitos

O que é Git?

Como instalar o Git

Como configurar o Git

Como criar e inicializar um projeto no Git

Arquivos de projeto no Git

O que é o GitHub?

Como enviar um repositório para o GitHub

Passo 1 – Crie uma conta no GitHub

Passo 2 – Crie um repositório

Passo 3 – Adicionar e confirmar arquivos

Estado confirmado (committed)

Estado modificado (modified)

Estado preparado (staged)

Como adicionar arquivos ao Git

Como confirmar (commit) arquivos no Git

Passo 4 – Envie o repositório para o GitHub

Como usar branches no Git

Como extrair um repositório no Git

Conclusão

Como se tornar um desenvolvedor de front-end - habilidades para desenvolver para a web

O que é o front-end?

O que faz um desenvolvedor de front-end?

Como tornar-se um desenvolvedor de front-end

1. Aprenda HTML, CSS e JavaScript

O que é HTML?

O que é CSS?

O que é JavaScript?

2. Pratique programação

3. Aprimore suas habilidades

4.Aprenda sobre a linha de comando e sobre controle de versão

5. Compreenda as interfaces de programação de aplicativos (APIs)

6. Aprenda e entenda as bibliotecas do JavaScript e do CSS

7. Crie um portfólio on-line

8. Cultive suas soft skills

9. Comece a se candidatar a estágios ou empregos que você deseja

Conclusão

Como criar um painel de análise em uma aplicação do Django

Pré-requisitos

Começando com o Django

Views

Templates

Funções de visualização de mapeamento para URLs

Modelos

Trabalhando com um banco de dados

Conectando dados ao Flexmonster

, nomeadas `bg-green`, `font-weight-400` e `text-underline`. Todas foram aplicadas no meu texto Hello world 3.