Express Tutorial: The Local Library website

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Este primeiro artigo da nossa prática series de tutoriais, explicará o que você irá aprender, e providenciará uma visão geral do exemplo de um site de "local libary" (Biblioteca Local, em tradução livre) que trabalharemos através dos próximos artigos.

Pré-requisitos:  Leia a "Indrodução ao Express" Para os seguintes artigos, você também deverá ler a "Preparação para o ambiente de desenvolvimento do Node". 
Objetivos: Para introduzir o exemplo da aplicação usada neste tutorial, e permitir aos leitores entenderem quais tópicos deverão ser abordados.

Visão Geral

Bem-vindo ao tutorial MDN "Local Libary" Express (Node), no qual desenvolvemos um website que possa ser gerenciado o catálogo para uma biblioteca local. 

Neste passo-a-passo você irá: 

  • Usar a ferramenta Express Aplication Generator (Gerador de Aplicaçãoes Expresso) para criar a estrutura do site e da aplicação. 
  • Iniciar e terminar o Web Server do Node.
  • Usar um banco de dados para armazenar os dados de sua aplicação.
  • Criar caminhos para a requisição de diferentes informações, e templates ("views") para renderizar os dados no formato HTML para ser mostrado no browser.
  • Trabalhar com "forms".
  • Lançar sua aplicação para produção.

Você já aprendeu sobre alguns desses tópicos, e um vislumbre de outros. No final destes tutoriais você aprenderá o sucifiente para desenvolver simples apps Express por si só.

O site LocalLibrary

LocalLibrary  é o nome de um website que vamos criar e desenvolver durante estes tutoriais. Como esperado, o propósito do site é prover um catálogo para uma pequena biblioteca local, onde usuários podem pesquisar livros disponíveis e gerenciar suas contas. 

Esse exemplo foi escolhido cuidadosamente por mostar os detalhes , das informações que necessitamos, e por ser um exemplo que irá usar quase qualquer recurso do Express. E mais importatne, permitirá a nós mostrar um caminho guiado pela funcionalidade que você precisará em qualquer website:

  • Em nossos primeiros tutoriais vamos definir o simples ferramenta de pesquisa ("browse-only") que o usuários da biblioteca pode utilizar para procurar livros que estejam disponíveis. Isso permite que exploremos as operações que são padrões em quase todos os sites: leitura e visualização de conteúdos do banco de dados.
  • Durente nosso progresso, o exemplo da biblioteca se extenderá naturalmente para demostrar mais informações detalhadas de recursos futuros do website. Por exemplo podemos extender a biblioteca para permitir que novos livros sejam criados, e usados para demonstrar como usar as formas, e ajudar na autenticação de usuário.

Apesar de ser um exemplo bem extenso, é chamado de LocalLibary por uma razão — esperamos mostrar o mínimo de informação que ajudará você a  melhorar com o Express rapidamente. Como resultado, armazenaremos informações sobre livros; cópias de livros, autores e outras informações-chave. Nós não iremos, entretanto, armazenar informações sobre outro itens que biblioteca pode emprestar ou fornecer a infraestrutura necessária para suportar vários sites de biblioteca ou outros recursos de "biblioteca grande".

Estou perdido, onde encontro a fonte?

Com o avanço nos tutoriais, forneceremos trechos de códigos para você copiar e colar a cada ponto, e códigos que esperamos que você desenvolva-os (com algum axílio).

Ao invés de copiar e colar todos so trechos, tente digita-los, ajudará você a se familiarizar com o código e fixará em sua mente com maior facilidade. 

Se ficar perdido, pode acessar o código inteiro pelo Github 

Nota:  As versões específicas do node, Express, e outros módulos que esta documentação foi testada, estão listadas no projeto package.json.

Sumário

Agora que você conhece um pouco mais sobre o site "LocalLibrary"  e o que vamos aprender, é hora de criar nossa estrutura do projeto para colocar nosso projeto.

 

Neste módulo

Tópicos relacionados
  1. Completos iniciantes, comecem por aqui!
  2. Iniciando na Internet
    1. Visão geral sobre Iniciando na Internet
    2. Instalação dos softwares básicos
    3. Como será seu site?
    4. Lidando com arquivos
    5. O básico de HTML
    6. O básico de CSS
    7. O básico de JavaScript
    8. Publicando seu site
    9. Como a Internet funciona
  3. HTML — Estruturando a Web
  4. Introdução ao HTML
    1. Visão geral da Introdução ao HTML
    2. Iniciando em HTML
    3. O que está no "head"? Metadados em HTML
    4. Fundamentos de Textos HTML
    5. Criando hiperlinks
    6. Formatação avançada de textos
    7. Estrutura de Documentos e Sites
    8. Depurando HTML
    9. Avaliação: Marcando uma carta
    10. Avaliação: Estruturação de uma página de conteúdo
  5. Multimídia e incorporação
    1. Visão geral sobre Multimídia e incorporação
    2. Imagens em HTML
    3. Conteúdos em Vídeo e áudio
    4. De objeto a iframe — outras tecnologias de incorporação
    5. Adicionando vetores gráficos na Web
    6. Imagens responsivas
    7. Avaliação: Página de abertura da Mozilla
  6. Tabelas HTML
    1. Visão geral sobre tabelas HTML
    2. O básico sobre Tabelas HTML
    3. Funcionalidades avançadas e acessibilidade de Tabelas HTML
    4. Avaliação: Estruturação dos dados do planenta
  7. Formulários HTML
    1. Visão geral sobre Formulários HTML
    2. Seu primeiro formulário HTML
    3. Como estruturar um formulário HTML
    4. Peças nativas de formulários
    5. Envio de dados de formulários
    6. Validação de formulários
    7. Como construir peças customizadas de formulários
    8. Enviando formulários com JavaScript
    9. Formulários HTML em navegadores antigos
    10. Estilização de formulários HTML
    11. Estilização avançada de formulários HTML
    12. Tabela de compatibilidade de atributos para peças de formulários
  8. CSS — Estilizando a Web
  9. CSS first steps
    1. CSS first steps overview
    2. What is CSS?
    3. Getting started with CSS
    4. How CSS is structured
    5. How CSS works
    6. Using your new knowledge
  10. CSS building blocks
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS selectors
    4. The box model
    5. Backgrounds and borders
    6. Handling different text directions
    7. Overflowing content
    8. Values and units
    9. Sizing items in CSS
    10. Images, media, and form elements
    11. Styling tables
    12. Debugging CSS
    13. Organizing your CSS
  11. Estilização de textos
    1. Visão geral da Estilizaço de textos
    2. Fundamentos da estilização de textos e fontes
    3. Estilização de listas
    4. Estilização de links
    5. Fontes Web
    6. Avaliação: Tipografia para a página inicial da escola pública local
  12. Esquemas CSS
    1. Visão geral de esquemas CSS
    2. Introdução
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. "Floats" - Flutuando elementos
    7. Posicionamento
    8. Multiple-column Layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy Layout Methods
    12. Supporting Older Browsers
    13. Fundamental Layout Comprehension
  13. JavaScript — Uma linguagem de script dinâmica para aplicações cliente
  14. Primeiros passos com JavaScript
    1. Visão geral dos Primeiros passos com JavaScript
    2. O que é JavaScript?
    3. Um primeiro olhar em JavaScript
    4. O que deu errado? Solução de problemas de JavaScript
    5. Guardando a informação que precisa — Variáveis
    6. Básico de JavaScript — Números e operadores
    7. Lidando com textos — Strings em JavaScript
    8. Métodos de String úteis
    9. "Arrays" — Arranjos
    10. Avaliação: Gerador de estórias bobas
  15. Programando em JavaScript
    1. Visão geral de Programando em JavaScript
    2. Tomando decisões no seu código — Condicionais
    3. Código de repetição
    4. Funções — Blocos de códigos reutilizáveis
    5. Construa sua própria função
    6. Retorno de valores em funções
    7. Introdução a eventos
    8. Avaliação: Galeria de imagens
  16. Introdução Objetos em JavaScript
    1. Visão geral de Objetos em JavaScript
    2. O básico de Objetos
    3. Orientação a Objetos em JavaScript para iniciantes
    4. "Prototypes" de objetos
    5. Herança em JavaScript
    6. Trabalhando com dados em JSON
    7. Prática de construção de objetos
    8. Avaliação: Adicionando funcionalidades ao nosso aplicativo Bolas Saltitantes
  17. Asynchronous JavaScript
    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
  18. APIs Web na aplicação Cliente
    1. APIs Web na aplicação Cliente
    2. Introdução a APIs Web
    3. Manipulando documentos
    4. Pegando dados do servidor
    5. APIs de Terceiros
    6. Desenhando gráficos
    7. APIs de Vídeo e Áudio
    8. Armazenamento na aplicação cliente
  19. Acessibilidade — Faça a Internet usável por qualquer pessoa
  20. Guias de acessibilidade
    1. Visão geral sobre Acessibilidade
    2. O que é acessibilidade?
    3. HTML: Uma boa base para acessibilidade
    4. Melhores práticas para acessibilidade em CSS e JavaScript
    5. O básico de WAI-ARIA
    6. Multimídia acessível
    7. Acessibilidade em dispositivos móveis
  21. Avaliando a acessibilidade
    1. Avaliação: Solução de problemas de Acessibilidade
  22. Ferramentas e teste
  23. Testes entre navegadores
    1. Visão geral de testes entre navegadores
    2. Introdução a testes entre navegadores
    3. Estratégias para execução de testes
    4. Lidando com problemas comuns de HTML e CSS
    5. Lidando com problemas comuns de JavaScript
    6. Lidando com problemas comuns de acessibilidade
    7. Implementando detecção de funcionalidade
    8. Introdução a testes automatizados
    9. Configurando seu próprio ambiente de testes automatizados
  24. Programação de servidores de Aplicação
  25. Primeiros passos
    1. Visão geral para os primeiros passos
    2. Introdução ao Servidor de Aplicação
    3. Visão geral da arquitetura Cliente-Servidor
    4. Frameworks Web para o Servidor de Aplicação
    5. Segurança de sites
  26. Framework Web Django (Python)
    1. Visão geral do Framework Web Django (Python)
    2. Introdução
    3. Configurando um ambiente de desenvolvimento para aplicações Django
    4. Tutorial: Um site para a Biblioteca Local
    5. Tutorial Parte 2: Criando o esqueleto de um site
    6. Tutorial Parte 3: Usando "models"
    7. Tutorial Parte 4: Um site administrativo em Django
    8. Tutorial Parte 5: Criando nossa página inicial
    9. Tutorial Parte 6: Páginas de lista genérica e detalhamento
    10. Tutorial Parte 7: Framework de sessões
    11. Tutorial Parte 8: Autenticação e permissões de usuário
    12. Tutorial Part 9: Trabalhando com formulários
    13. Tutorial Parte 10: Testando aplicações web em Django
    14. Tutorial Parte 11: Implantando Django em produção
    15. Segurança de Aplicações Web
    16. Avaliação: Faça você mesmo: Um blog pessoal
  27. Framework Web Express (Node.js/JavaScript)
    1. Visão geral do Framework Web Express (Node.js/JavaScript)
    2. Introdução a Express/Node
    3. Configurando um ambiente de desenvolvimento Node (Express)
    4. Tutorial Rápido: Um site para a Biblioteca Local
    5. Tutorial Rápido Parte 2: Criando o esqueleto de um site
    6. Tutorial Rápido Parte 3: Usando um banco de dados (com Mongoose)
    7. Tutorial Rápido Parte 4: Rotas e "controllers"
    8. Tutorial Rápido Parte 5: Mostrando os dados da Biblioteca
    9. Tutorial Rápido Parte 6: Trabalhando com formulários
    10. Tutorial Rápido Parte 7: Implantando em produção
  28. Mais recursos
  29. Questões gerais
    1. Questões sobre HTML
    2. Questões sobre CSS
    3. Questões sobre JavaScript
    4. Como a Internet funciona
    5. Ferramentas e configuração
    6. Projeto e acessibilidade
  30. Como contribuir