Conteúdo


Desenvolva seu primeiro website Node.js, Parte 2

Esta é a segunda parte de um artigo de três partes que apresenta um passo a passo do desenvolvimento com Node.js, sem a necessidade de instalação de software.

Parte 1O aplicativo "Hello World"-plus foi um ótimo ponto de partida. Você usou os IBM DevOps Services e o IBM Cloud™ para iniciar um servidor Node.js e codificou um JavaScript simples do lado do servidor para contar as solicitações para o seu servidor. Aqui, na Parte 2, você incluirá páginas HTML formatadas no site e, em seguida, transmitirá os dados a partir do servidor para serem exibidos na página HTML inicial.

Para incluir um front-end da web no Node.js, a técnica mais comum é usar a estrutura de aplicativo da web Express. Com o Express, há várias opções para formatar páginas da web, incluindo Jade, Handlebars e EJS. Para permanecer na zona de conforto, eu escolho o EJS, que usa o velho e simples HTML.

O arquivo app.js inclui toda a configuração do Express.

Eu encontrei uma boa amostra de início do Express EJS, simplifiquei ao máximo e, em seguida, ampliei para transmitir dados e entregar páginas da web estáticas. Você começará com a minha versão e aprenderá como exibir dados a partir do aplicativo Node.js em uma página HTML e como entregar conteúdo HTML estático. Na Parte 3, você usará um banco de dados Redis para persistir dados para o website.

O fluxo modificado do aplicativo é agora semelhante a este:

Diagram of the current application flow
Diagram of the current application flow

O que você precisará?

Execute o aplicativoObtenha o código

Etapa 1: Crie e implemente a sua cópia do aplicativo HTML

  1. Efetue login no DevOps Services.
  2. Clique no botão Obtenha o código deste artigo acima.
  3. No DevOps Services, clique no botão FORK PROJECT no menu para criar sua própria cópia do código, forneça um nome exclusivo e clique em CREATE .

    Agora, você tem estruturas de diretório e configuração de arquivo para o Express. O arquivo app.js inclui toda a configuração do Express:

    var app = express();
    app.set('port', process.env.PORT || 3000);
    app.set('view engine', 'ejs');
    
    app.use(morgan('dev'));
    app.use(express.static(path.join(__dirname, 'public')));

    O arquivo package.json também é suportado para incluir dependências para o Express e o EJS:

    "dependencies": {
        "express": "*",
        "ejs": "*",
        "morgan": "*"
      }
    }

    Clique no botão EDIT CODE para começar a trabalhar com o aplicativo.
  4. Ative a edição em tempo real e clique em OK para reimplementar o aplicativo: Screenshot of enabling Live Edit
    Screenshot of enabling Live Edit
  5. Clique no link da URL na barra de execução para abrir a página HTML formatada em uma nova guia do navegador.
  6. Atualize a página e acompanhe o incremento do contador a cada atualização.

Etapa 2: Altere a página de índice HTML e reimplemente

Agora, você fará algumas mudanças menores na página de índice HTML:

  1. Retornando ao IDE do DevOps Services, abra a pasta views e clique em index.ejs para editar o HTML.
  2. Edite o texto nas tags <title> e <h1> para substituir Ruth pelo seu próprio nome.
  3. Reinicie o aplicativo usando a Reinicialização de edição em tempo real e clique no link da URL na barra de execução para abrir o aplicativo. Verifique se as mudanças são exibidas:Screenshot of restarting Live Edit
    Screenshot of restarting Live Edit

Etapa 3: Transmita o conteúdo do lado do servidor para a página HTML

Este é o momento para aprender um pouco sobre a mágica do Express EJS. Para exibir dados do aplicativo Node.js em uma página HTML, você deve transmitir os dados à página da web usando esta sintaxe:

res.render('index', {userCount: userCount})

index é o nome da página HTML inicial exibida. Dentro de {} estão os nomes das variáveis a serem transmitidas, juntamente com seus valores.

Faça estas mudanças no aplicativo:

  1. Retornando ao IDE do DevOps Services, selecione app.js. Inclua uma nova variável userbytwo e inicialize-a:
    var userbytwo = 0;
  2. Incremente userbytwo:
    userbytwo = userbytwo + 2;
  3. Atualize o comando render para incluir userbytwo como uma variável a ser transmitida à página HTML para exibição:
    res.render('index', {userCount: userCount, userbytwo: userbytwo});

    Agora, o bloco de códigos app.get deverá estar semelhante a este:
    var userCount = 0;
    var userbytwo = 0; /* added var definition for userbytwo here */
    
    app.get('/', function(req, res){
      userCount = userCount + 1;
      /* add statement to increment userbytwo by two here */
      userbytwo = userbytwo + 2;
      res.render('index', {userCount: userCount, userbytwo: userbytwo});
     /* updated this line */
    });

Step 4: Exibe variáveis em uma página HTML

Naturalmente, a página HTML também precisa de uma sintaxe especial para recuperar e exibir as variáveis transmitidas:

  1. Retorne à pasta views e selecione index.ejs.
  2. Copie a linha <p> que exibe userCount e cole-a imediatamente abaixo da linha existente. Na nova linha, altere userCount para userbytwo para exibir ambas as variáveis:
    <p>The user count in my nodejs application is: <%= userCount %></p>
    <p>The user by two count in my nodejs application is: <%= userbytwo %></p>
  3. Reinicie o aplicativo usando a Reinicialização de edição em tempo real e clique no link da URL na barra de execução para abrir o aplicativo. Verifique se as mudanças são exibidas.

Etapa 5: Inclua páginas HTML vinculadas

Agora, você incluirá alguns links na página de índice do website. Não é difícil vincular para páginas adicionais, mas você deve assegurar-se de que as estruturas de diretório estejam configuradas corretamente para localizar as páginas.

Na configuração do Express, no app.js, a instrução app.use(express.static(path.join(__dirname, 'public'))); solicita que o aplicativo consulte o diretório público para procurar o conteúdo HTML. Para iniciar, a pasta pública contém duas páginas HTML, com subdiretórios de imagens e folhas de estilo.

  1. Abra a pasta views, selecione indexwithlinks.ejs e copie as linhas 9 a 15.
  2. Abra index.ejs, cole o conteúdo copiado após a linha 12 e salve. É possível ver que as linhas copiadas vinculam para sports.html e aboutme.html.
  3. Abra o diretório público e localize aboutme.html e sports.html.
  4. Faça as mudanças que desejar em aboutme.html e sports.html. É possível, até mesmo, fazer upload da sua própria figura no diretório de imagens e vincular a ela.
  5. Reinicie o aplicativo usando a Reinicialização de edição em tempo real e clique no link da URL na barra de execução para abrir o aplicativo. Verifique se as mudanças são exibidas.

Conclusão da Parte 2

Aqui, na segunda parte deste artigo de três partes, você criou um website multipáginas com dados dinâmicos do lado do servidor exibidos a partir do aplicativo Node.js. Como na Parte 1, o exemplo inteiro foi feito somente com um navegador da web acessando o DevOps Services e o IBM Cloud— sem nenhuma instalação necessária.

Agora, você está pronto para passar para a Parte 3 e armazenar os dados em um banco de dados.


Recursos para download


Temas relacionados

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cloud computing
ArticleID=981924
ArticleTitle=Desenvolva seu primeiro website Node.js, Parte 2
publish-date=04302015