Entenda o async e await

Async e await são extensões das promises. Caso você não conheça promises, acesse o artigo seguinte e realize a leitura antes de prosseguir com async e await: https://www.mundojs.com.br/2020/03/02/o-que-sao-e-como-criar-promises/.

Quando uma função assíncrona é chamada, ela retorna uma promise. Uma função assíncrona pode conter uma palavra-chave await, que pausa a execução da função e espera pela resolução da promise passada, retomando a execução após a resolução da promise e retornando o valor resolvido.

A proposta das funções async/await é simplificar o uso de promises. Assim como promises são similares a callbacks estruturados, as funções async/await são similares à junção de generators com promises.

async:

A palavra async antes de uma função significa que a função sempre retorna uma promise. Outros valores serão agrupados em uma promise resolvida automaticamente. Por exemplo, esta função async retorna uma promise resolved com a string “Ola Mundo”:

async function funcaoAsync() {
    return 'Ola Mundo';
}

funcaoAsync().then(console.log);

E nós podemos retornar uma promise explicitamente, que retornaria a mesma coisa:

async function funcaoAsync(){
    return Promise.resolve('Ola Mundo')
}

funcaoAsync().then(console.log);

Então, o async garante que a função retorne uma promise.

Mas há outra palavra-chave, chamada await, que funciona apenas dentro de funções assíncronas.

await:

A palavra-chave await faz com que a função espere até que a promise seja estabelecida e retorne o seu resultado. Confira neste exemplo o seu funcionamento:

async function funcaoAsyncAwait() {
    // Criaremos uma promise que retornará a string 
    // "Promise concluída", após o tempo de 5 segundos.
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Promise concluída!"), 5000)
    });

    // Esta variavel resultado recebe o resultado da promise, após sua conclusão.
    let resultado = await promise;
    console.log(resultado);
}

funcaoAsyncAwait();

Nesta função, a execução “pausa” e somente retorna quando passa o tempo de execução da promise. Literalmente falando, o await aguarda a conclusão da promise para retornar o resultado! Então, você verá a string “Promise concluída” após 5 segundos de execução, que é o tempo que estabelecemos para a conclusão da promise.

Observação: Não podemos utilizar o await em função síncronas. Ele funciona somente em funções assíncronas, então, precisamos ter o async em nossa function.

Continue lendo “Entenda o async e await”

Utilizando o File System para atualizar, deletar e renomear arquivos

Dando sequência ao nosso artigo de File System do Node.js, já temos os métodos de ler e criar arquivos. Você pode conferir o artigo anterior no link:

Neste artigo, iremos mostrar os métodos:

  • Update
  • Delete
  • Rename

Vamos lá?

Update:

O file system possui os seguintes métodos:

  • fs.appendFile()
  • fs.writeFile()

O método fs.appendFile() anexa conteúdo no final do arquivo especificado:

// Primeiro criaremos uma requisição para o módulo fs
let fs = require('fs');
// Depois, especificamos o arquivo a ser atualizado
// e colocamos o conteúdo a ser anexado.
fs.appendFile('meuNovoArquivo2.txt', 'Esse é o conteúdo anexado.', function(err){
    if (err) throw err;
    console.log('Atualizado!')
})

E teremos nossa saída:

O método fs.writeFile() substitui o arquivo e conteúdo especificados:

let fs = require('fs');

// Especificamos o arquivo a ser atualizado
// e o novo conteúdo
fs.writeFile('meuNovoArquivo2.txt', 'Conteúdo atualizado', function (err){
    if (err) throw err;
    console.log('Salvo!')
})

E a nossa saída será:

Delete:

Para excluirmos um arquivo com o file system, podemos utilizar o método fs.unlink(). Veja na prática:

let fs = require('fs');

// Especificamos o nome e extensão do arquivo a ser deletado
fs.unlink('meuNovoArquivo.txt', function (err){
    if (err) throw err;
    console.log('Arquivo deletado!');
})

E pronto! O arquivo “meuNovoArquivo.txt” foi deletado!

Renomear:

Podemos utilizar o método fs.rename() para renomear um arquivo:

let fs = require('fs');

// Especificaremos o arquivo a ser renomeado
// e o novo nome
fs.rename('meuNovoArquivo2.txt', 'arquivoRenomeado.txt', function(err){
    if (err) throw err;
    console.log('Arquivo renomeado!');
})

E teremos:

E assim, terminamos os artigos obre o File System do Node.js!

Gostou? Comente abaixo!

 

Utilizando o File System para leitura e criação de arquivos

O módulo File System do Node.js permite o trabalho com o sistema de arquivos do computador. Podemos incluir o File System no nosso arquivo js utilizando o método require:

let fs = require('fs');

Para que serve o módulo File System? O que podemos fazer com ele?

  • Ler arquivos
  • Criar arquivos
  • Atualizar arquivos
  • Deletar arquivos
  • Renomear arquivos

Para ler arquivos usando o file system:

Podemos utilizar o método fs.readFile() para ler arquivos salvos no computador. Por Exemplo, podemos ter o seguinte arquivo html (que esteja localizado na mesma pasta de execução do node):

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>readFile()</title>
</head>
<body>
    <h1>Cabeçalho da página</h1>
    <p>Parágrafo da página</p>
</body>
</html>

Após isso, criemos um arquivo javascript (node) para ler o nosso arquivo html e retornar o conteúdo:

// criando uma requisição http para criação do servidor
let http = require('http');

// criando uma requisição para o módulo filesystem
let fs = require('fs');

// criando um servidor funcionando na porta 8080
// e utilizando o fs.readFile para ler o arquivo html
http.createServer(function (req,res){
    fs.readFile('index.html', function(err, data){
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
    });
}).listen(8080);

A nossa saída deve ser assim:

E como podemos criar arquivos com o File System?

Podemos utilizar o módulo para criar novos arquivos utilizando os métodos:

  • fs.appendFile()
  • fs.open()
  • fs.writeFile()

O método fs.appendFile() anexa o conteúdo especificado a um arquivo. Se o arquivo não existir, ele será criado. Crie um novo arquivo chamado appendFile.js e faça o seguinte:

// Crie uma requisição para o módulo file system
let fs = require('fs');

// Utilize o appendFile() para criar um novo arquivo que será anexado à sua pasta node
// onde 'meuNovoArquivo.txt será o arquivo a ser criado
// 'Eu sou o novo conteudo é o conteúdo do arquivo txt

fs.appendFile('meuNovoArquivo.txt', 'Eu sou o novo conteudo', function (err){
    // Se ocorrer um erro, especifique
    if (err) throw err;
    // Senão, logue no console = salvo!
    console.log("salvo!")
})

Perceba que o arquivo foi criado na mesma pasta de origem:

Podemos também utilizar o método fs.open() para criar um arquivo vazio:

let fs = require('fs');

// 'w' significa 'write' = escrever
fs.open('meuNovoArquivo2.txt', 'w', function (err, file){
    if (err) throw err;
    console.log("Aberto!");
});

E teremos nosso arquivo criado:

E, finalmente, o método writeFile():

O método writeFile() substitui o arquivo e conteúdo especificados, se existirem. Se o arquivo não existir, ele será criado:

let fs = require('fs');

// Substituiremos o conteúdo em meuNovoArquivo2.txt pela frase
// 'Novo conteúdo!'
fs.writeFile('meuNovoArquivo2.txt', 'Novo conteúdo!', function (err){
    if (err) throw err;
    console.log('Salvo!')
})

E esse será o resultado:

Esses são os métodos de leitura e criação de arquivos utilizando o File System do NodeJS!

Gostou deste artigo? Acompanhe os próximos artigos e comente abaixo!

Conheça o Callback Hell e como evitá-lo

Conheça o Callback Hell

JavaScript assíncrono, ou JavaScript que usa callbacks, é complicado de acertar intuitivamente. A causa do call-back hell é quando as pessoas escrevem JavaScript de uma maneira que ocorre a execução de cima para baixo, visualmente falando. Em algumas outras linguagens, como C, Python, existe a expectativa de que o que quer que aconteça na linha 1, tenha que terminar antes que o código da linha 2 execute, e assim por diante. Mas no JavaScript, isso funciona de uma maneira diferente.

O que são Callbacks?

São apenas o nome de uma convenção para o uso de funções JavaScript. Não existe nada chamado “callback” no JavaScript, sendo apenas uma convenção. Em vez de utilizar retorno imediato como a maioria das funções. As funções call-back demoram algum tempo para produzir resultados. A palavra “assincronismo”, conhecida no JavaScript como “async”, significa “demora algum tempo / acontece no futuro”.

Quando você chama uma função normal, pode usar seu valor de retorno:

let resultado = multiplicarDoisNumeros(5, 10);

console.log(resultado);

No entanto, funções assíncronas e que usam call-backs não retornam nada imediatamente:

let foto = downloadFoto('http://coolcats.com/cat.gif')

// foto é 'undefined'!

Nesse caso, o gif pode demorar muito para ser baixado e você não deseja que seu programa seja pausado enquanto aguarda a conclusão do download. Em vez disso, você armazena o código que deve ser executado logo após a conclusão do download em uma função. Este é o callback. Você executa a função downloadFoto e ele executará seu callback, quando o download estiver concluído e passará a foto (ou um erro se algo der errado).

downloadFoto('http://coolcats.com/cat.gif', lidarComFoto)

function lidarComFoto (error, foto) {
  if (error) console.error('Erro de Download!', error)
  else console.log('Download finished', foto)
}

console.log('Download iniciado')

Como podemos evitar o callback hell?

  1. Mantenha seu código limpo:

Callback hell geralmente é causado por más práticas de codificação. Escreva melhor o seu código e não passará trabalho.

let form = document.querySelector('form');
form.onsubmit = function formSubmit (submitEvent) {
    let name = document.querySelector('input').value;
    request({
        uri: "http://example.com/upload",
  body: name,
        method: "POST"
        }, function postResponse (err, response, body) {
        let statusMessage = document.querySelector('.status');
  if (err) return statusMessage.value = err;
  statusMessage.value = body;
    })
}

Nomear funções é uma prática benéfica e facilita a leitura do código.

Agora podemos mover as funções para o nível superior do nosso programa:

document.querySelector('form').onsubmit = formSubmit;

function formSubmit (submitEvent) {
  let name = document.querySelector('input').value;
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse (err, response, body) {
  let statusMessage = document.querySelector('.status');
  if (err) return statusMessage.value = err;
  statusMessage.value = body
}
  1. Modularize:

Segundo Isaac Schlueter (do projeto Node.js): “Escreva pequenos módulos que cada um faz uma coisa e monte-os em outros módulos que fazem uma coisa maior. Você não terá um callback hell se não for lá”.

Criando um módulo, ficaria assim:

module.exports.submit = formSubmit

function formSubmit (submitEvent) {
  let name = document.querySelector('input').value;
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse (err, response, body) {
  let statusMessage = document.querySelector('.status');
  if (err) return statusMessage.value = err;
  statusMessage.value = body;
}
  1. Lide com todos os erros:

Existem diferentes tipos de erros: de sintaxe, de runtime, erro de permissões, falha no disco rígido, entre outros. Ao lidar com callbacks, você, por definição, está lidando com tarefas despachadas, executa algo em segundo plano e, em seguida, conclui com êxito ou aborta devido a alguma falha. Podemos manipular isso deixando o primeiro argumento da função callback reservada ao erro.

function lidarComFoto (error, foto) {
  if (error) console.error('Erro de Download!', error)
  else console.log('Download finished', foto)
}

Dito isto, sempre lide com todos os erros e mantenha seu código simples e limpo.

Para maiores informações, acesse o site: http://callbackhell.com/

Referências: http://callbackhell.com/

O que são e como criar Promises:

Você sabe o que são promises?

Promises vem do termo “promessa”, que representa um valor que pode estar disponível em algum momento no futuro, no presente, ou nunca estar disponível. Ele é um objeto utilizado em processamento assíncrono. Um promise representa um proxy para um valor não necessariamente conhecido, permitindo uma associação de métodos de tratamento para eventos em uma ação assíncrona na hipótese de sucesso ou falha, permitindo que o método assíncrono retorne uma “promessa” ao valor em algum momento no futuro.

Quais são os estados de um promise?

  • pending (estado: pendente): O promise ainda não foi rejeitada, nem realizada. É o estado inicial;
  •  fulfilled (estado: realizado): O promise obteve sucesso na operação;
  • rejected (estado: rejeitado): O promise falhou na operação;
  • settled (estado: estabelecido): O promise foi estabelecido. Significa que o promise foi realizado ou rejeitado.

Sintaxe:

new Promise (/* executor */ function (resolve, reject) { … });

O executor é uma função que recebe os argumentos resolve e reject. O executor é chamado antes que o construtor de Promise retorne o objeto criado. As funções resolve e reject, quando chamadas, resolvem ou rejeitam (respectivamente) a promessa. Quando estiver concluído o trabalho assíncrono, o executor chama as funções resolve ou reject para definir o estado da promise.

Uma promise pode se tornar realizada ou rejeitada. Com a ocorrência de algum desses estados, o método them do Promise é chamado, e ele chama o método associado ao estado (resolved ou rejected).

O que é composição?

São métodos encadeados. Isso pode ocorrer com os métodos Promise.prototype.then e Promise.prototype.catch, já que ambos retornam promises que podem ser encadeadas.

Métodos:

  • Promise.all(lista): Retorna uma promise que é resolvida quando todas as promises no argumento forem resolvidas ou rejeitada quando uma das promises do argumento for rejeitada. É um método útil para agregar resultados de múltiplas promises.
  • Promise.race(lista): Retorna uma promise que resolve ou rejeita assim que uma das promises do argumento resolve ou rejeita.
  • Promise.reject(motivo): Retorna um promise que foi rejeitado por algum motivo.
  • Promise.resolve(valor): Retorna um promise que foi resolvido com dado valor. Se o valor for thenable (possuindo um método then), a promise retornada seguirá este metodo. Caso contrário, a promise será realizada com o valor.

Criando uma promise:

// Vejamos se a mãe está feliz. Utilize true para sim e false para não
let maeEstaFeliz = false;

// primeira promise que criaremos
let ganharTelefoneNovo = new Promise(
    (resolve, reject) => {
        if (maeEstaFeliz) {
            let telefone = {
                marca: 'iPhone',
                cor: 'Branco'
            };
            resolve(telefone);
        } else {
            let razao = new Error('Mãe não está feliz');
            reject(razao);
        }

    }
);

// Agora criaremos a segunda promise
async function mostrarTelefoneNovo(telefone) {
    return new Promise(
        (resolve, reject) => {
            var message = 'Hey cara, eu tenho um novo ' +
                telefone.marca + ' ' + telefone.cor;

            resolve(message);
        }
    );
};

// chamando nossa promise
async function perguntarParaMae() {
    try {
        console.log('Antes de perguntar para a mãe');

        let telefone = await ganharTelefoneNovo;
        let message = await mostrarTelefoneNovo(telefone);

        console.log(message);
        console.log('Depois de perguntar para a mãe');
    }
    catch (error) {
        console.log(error.message);
    }
}

(async () => {
    await perguntarParaMae();
})();

Gostou deste artigo? Comente abaixo!

Referências:

 

Phaser.js #7 – Criando jogo Final!

Estamos chegando ao final de nosso projeto com Phaser pessoal! Lembrando que vocês podem acessar o projeto original em inglês na documentação diretamente no site do Phaser (deixarei o link no final do post).

Pontuação

O que é um jogo sem uma pontuação, não é mesmo? Como saberemos quantas estrelas coletamos?

Para isso, precisamos criar um objeto de jogo de texto. Vamos criar duas variáveis para conter uma pontuação e o objeto de texto:

var score = 0;
var scoreText;

O scoreText será configurado na função create():

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

A coordenada que exibiremos o texto score: 0 é na 16×16. A fonte padrão de textos do Phaser é a Courier.

Agora, precisamos modificar a função collectStar para que, quando o player coletar uma estrela, o contador seja aumentado, adicionando o nosso score:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);
}

Deste modo, cada vez que coletamos uma estrela, o nosso contador, que é a variável score, é incrementada em 10, ou seja, a cada estrela coletada, +10 pontos para você 🙂

Você pode verificar isso no seu arquivo part9.html!

Continue lendo “Phaser.js #7 – Criando jogo Final!”

Phaser.js #6 – Criando jogo Parte 5

E aí pessoal, dando sequência ao nosso tutorial de Phaser.js, iremos dar um propósito ao nosso jogo agora.

Já temos as plataformas, já temos a gravidade implantada, e já temos o nosso player com seus comandos especificados (andar para as laterais e pular para as plataformas). Agora, iremos inserir algumas estrelas no nosso cenário, para que o nosso player as colete. Para isso, criaremos um grupo chamado stars e o preencheremos dentro de nossa função create():

stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

stars.children.iterate(function (child) {

    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

});

Este é um processo muito parecido como quando criamos nosso grupo de plataformas, mas como as estrelas precisam se mover e saltar, elas são um grupo dinâmico de física.

Ok, mas o que faremos agora?

Bom, primeiramente precisamos definir a chave de textura (key) para a nossa imagem. Mas o que isso significa?

Significa que todos os objetos filhos criados como resultado do objeto de configuração estrela receberão as texturas de estrela por padrão. 

Ok, já criamos uma estrela, e agora? Agora precisamos definir o repeat. O repeat é o valor de repetição das estrelas. Precisaremos de 12 estrelas saltitando pelo nosso mapa, então precisamos repeti-la 11 vezes.

Feito isso, usaremos o setXY para definir a posição das 12 estrelas criadas pelo nosso grupo star. cada estrela (child) será colocada começando em x:12 e y:0, e com um passo x de 70.

Mas o que isso significa?

Isso significa que a primeira estrela será posicionada em 12 x 0, a segunda terá 70 pixels em 82 x 0, o terceiro em 172 x 0, aumentando 70 pixels proporcionalmente para cada uma das 12 estrelas. Com o valor de 70 pixels, as estrelas vão se espalhar perfeitamente espaçadas na nossa viewport.

Mas e o que a última parte deste código faz?

Bem, esta parte do código itera entre todas as estrelas criadas pelo grupo e fornece a elas um valor aleatório entre 0,4 e 0,8 no eixo Y. O intervalo de rejeição é entre 0 e 1, sendo 0 sem rejeição e 1, rejeição completa. Como as estrelas iniciam sem gravidade, elas são puxadas para o solo, até que ocorra colisão com alguma plataforma.

Continue lendo “Phaser.js #6 – Criando jogo Parte 5”

Conheça o Vue.js, um framework JavaScript:

Vue é um framework para construção de interfaces JavaScript. Ele é projetado para ser adotado de forma incremental. A biblioteca principal é focada na camada de visualização e é de fácil entendimento e integração com outras bilbiotecas ou projetos existentes.

Instalando:

Você pode incluir diretamente o vue em uma tag script, via cdn:

<!-- Utilize para fins de prototipagem ou aprendizado -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Utilize para produção um número de versão específico, para evitar quebras inesperadas -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Se você estiver utilizando ES Modules:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

npm:

# latest stable
$ npm install vue

bower:

# latest stable
$ bower install vue

Começando:

Renderização Declarativa:

O vue nos permite renderizar declarativamente dados para o DOM:

<div id="app">
  {{ message }}
</div>
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Com isso, já criamos o nosso primeiro aplicativo Vue! Os dados e o DOM agora estão vinculados e tudo é reativo.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Voce carregou esta pagina em ' + new Date().toLocaleString()
  }
})

Você verá a “message” pousando o mouse por cima do seu elemento renderizado no DOM.

Condicionais e Loops:

Continue lendo “Conheça o Vue.js, um framework JavaScript:”

Você sabe o que é Docker?

Neste artigo, imostrarei o que é Docker e os conceitos de containers.

O Docker é uma plataforma para criar, compartilhar e executar aplicativos com containers. Quando você utiliza containers para implantar os seus aplicativos, você utiliza a containerização.

Os containers são:

  • Flexíveis: Até as aplicações mais complexas podem ser containers;
  • Leves: os containers aproveitam e compartilham o kernel do host, tornando-os muito mais eficientes em termos de recursos do sistema do que as máquinas virtuais;
  • Portáteis: você pode criá-los localmente, implantar na nuvem e executar em qualquer lugar;
  • Fraco acoplamento: Containers são auto-suficientes e encapsulados, isto é, permitem substituir ou atualizar um sem atrapalhar outros;
  • Escaláveis: Você pode distribuir automaticamente réplicas de containers por um datacenter;
  • São seguros: aplicam restrições e isolamentos agressivos.

Mas o que é um container?

Bsicamente, não passa de um processo que está em execução, com o porém de ser isolado do host e de outros containers. Cada container interage com seu sistema de arquivos privado, sendo esse um sistema fornecido por uma imagem do Docker. Essa imagem incluirá tudo que for necessário para executar o aplicativo.

Ele difere de uma máquina virtual pois uma VM executa um SO completo, com acesso virtual a recursos do host. Já o Docker é executado nativamente no Linux e compartilha o kernel do Host com outros containers, executando um processo discreto, tornando-o leve.

Vantagens:

Com o Docker, temos uma alta portabilidade e podemos escalar nossos apps entre nuvens e datacenters, garantindo que esses aplicativos sejam executados da mesma maneira em qualquer lugar.

Orquestradores:

São ferramentas para gerenciar, dimensionar e manter aplicativos em containers. Os exemplos mais comuns são Kubernetes e Docker Swarm.

Continue lendo “Você sabe o que é Docker?”

Conheça o Meteor, um framework JavaScript.

O Meteor é um framework JavaScript completo para a criação de aplicativos Web e móveis moderno. Ele inclui um conjunto de tecnologias para a criação de aplicações reativar, uma ferramenta para construção, entre outros.

  • O Meteor permite o desenvolvimento JavaScript em ambientes de servidores de aplicativos, navegadores da web e dispositivos móveis;
  • Ele usa dados na conexão, ou seja, o servidor envia os dados, não HTML, e o cliente os processa;
  • Full Stack reactivity: Sua UI reflete perfeitamente o true world state com o mínimo de esforço de desenvolvimento.

Por onde começar?

O Meteor possui suporte para OS X, Windows e Linux.

No Linux e OSX, execute o seguinte comando:

curl https://install.meteor.com/ | sh

No Windows, primeiro instale o Chocolatey e, depois, use o seguinte comando no Prompt de Comando como Administrador:

choco install meteor

E agora?

Depois de instalado o Meteor, crie um projeto:

meteor create myapp

Depois de criado, execute-o localmente:

cd myapp
meteor npm install
meteor

Sua saída será algo como:

# Meteor server running on: http://localhost:3000/

O meteor já vem com o npm incluído, ou seja, você pode digitar meteor npm sem se preocupar se está instalado.

Agora, vamos criar um app simples:

Para criar um app, abra o seu terminal e escreva:

meteor create simples-todos

Isso vai criar uma nova pasta chamada simple-todos, com todos os arquivos que o aplicativo Meteor necessita:

client/main.js        # um arquivo de JavaScript carregado no cliente
client/main.html      # um documento HTML para definir seu templates[
client/main.css       # um arquivo CSS para definição de estilos
server/main.js        # um arquivo JS carregado no servidor
test/main.js          # um arquivo JS para testes
package.json          # um arquivo de controle para instalar pacotes npm
package-lock.json     # descreve a árvore de dependência npm
node_modules/         # pacotes instalados por nmp
.meteor/              # arquivos internos do Meteor
.gitignore            # um arquivo de controle para GIT

Para rodar o aplicativo criado:

cd simple-todos
meteor

Agora, abra o seu web browser e vá para http://localhost:3000 e veja o seu aplicativo rodando. Experimente colocar um <h1> dentro do seu client/main.html e veja a sua página ser atualizada com o novo conteúdo!

Você pode verificar a documentação original em inglês aqui: https://www.meteor.com/tutorials/blaze/creating-an-app

Gostou deste artigo? Comente abaixo!