Começando com Meteor

2

Porcentagem Traduzida

Neste capítulo, você irá:

  • Instalação Meteor & Meteorite.
  • Aprenda sobre 5 tipos de pacotes Meteor.
  • Organização da estrutura de arquivos de sua aplicação Meteor.
  • Primeiras impressões são importantes, e o processo de instalar o Meteor deve ser relativamente indolor. Na maioria dos casos, você estará em desenvolvimento em menos de 5 minutos.

    Para começar, nós podemos instalar o Meteor abrindo a janela do terminal e teclando:

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

    Isto instalará o executável meteor no seu sistema pronto para você usar Meteor.

    Não Instalando Meteor

    Se você não pode (ou não quer) instalar Meteor localmente, nós recomendamos checar Nitrous.io

    Nitrous.io é um serviço que permite a você rodar aplicativos e editar o código dos mesmos direto no seu navegador, e nós escrevemos um pequeno guia para ajudá-lo a começar.

    Você pode simplesmente seguir o guia até (e incluindo) o segmento “Instalando Meteor & Meteorite”, e então seguir junto com o livro novamente começando do segmento “Criando um Simples Aplicativo” deste capítulo.

    Meteorite

    Devido ao fato que Meteor não suporta pacotes de terceiros diretamente, Tom Coleman (um dos autores do livro) e alguns membros da comunidade criaram Meteorite, um invólucro para Meteor. Meteorite também toma conta da instalação de Meteor para você e juntando a ele qualquer pacote que você encontrar.

    Já que nós necessitaremos de pacotes de terceiros para algumas das funcionalidades do Microscope, vamos instalar Meteorite.

    Instalando Meteorite

    Você precisará se assegurar que node e git estejam instalados na sua máquina. Instale-os da forma padrão para o seu Sistema Operacional, ou tente os links a seguir:

    Segundo, vamos instalar Meteorite. Como é um executável npm (Node Packaged Module, formato padrão de módulo do Node), nós o instalaremos com:

    $ npm install -g meteorite
    

    Erros de Permissão?

    Em algunas máquinas você pode precisar de root permission para instalar Meteorite. Para evitar problemas, faça questão de usar sudo -H:

    $ sudo -H npm install -g meteorite
    

    Você pode ler mais sobre esta questão na documentação do Meteorite.

    É isso aí! Meteorite lidará com as coisas agora.

    Nota: ainda não há suporte Windows para Meteorite, mas você pode dar uma olhada no nosso tutorial windows.

    ### mrt vs meteor

    Meteorite instala o executável mrt, o qual nós usaremos para instalar pacotes no nosso aplicativo. Quando nós quisermos ativar nosso servidor, entretanto, nós usaremos o executável meteor.

    Criando um Simples Aplicativo

    Agora que nós temos o Meteorite instalado, vamos criar um aplicativo. Para fazer isto, nós usamos a ferramenta da linha de comando do Meteorite mrt:

    $ mrt create microscope
    

    Este comando carregará o Meteor, e estabelecerá um projeto Meteor básico e pronto para você usar. Após isto, você poderá ver um diretório, microscope/, contendo o seguinte:

    microscope.css
    microscope.html
    microscope.js
    smart.json
    

    O aplicativo que o Meteor criou para você é um simples aplicativo clichê demonstrando alguns padrões simples.

    Apesar do nosso aplicativo não fazer muito, nós já podemos rodá-lo. Para rodá-lo, vá até o terminal e digite:

    $ cd microscope
    $ meteor
    

    Agora navegue no seu navegador para http://localhost:3000/ (ou o equivalente http://0.0.0.0:3000/) e você deverá ver algo assim:

    Meteor's Hello World.
    Meteor’s Hello World.

    Commit 2-1

    Created basic microscope project.

    Parabéns! Você conseguiu rodar seu primeiro aplicativo em Meteor. Aliás, para desativar seu aplicativo tudo o que você precisa fazer é abrir a janela do terminal onde o aplicativo está rodando, e pressionar ctrl+c.

    Adicionando um Pacote

    Nós agora usaremos Meteorite para adicionar um pacote inteligente que nos permitirá incluir Bootstrap no nosso projeto:

    $ mrt add bootstrap
    

    Commit 2-2

    Added bootstrap package.

    Uma nota sobre Pacotes

    Quando se fala de pacotes no contexto de Meteor, deve-se ser específico. O Meteor usa cinco tipos básicos de pacotes.

    • O núcleo do Meteor em si é dividido em diferentes pacotes nucleares. Eles estão inclusos em cada aplicativo em Meteor, e você em geral quase nunca precisará se preocupar com eles.
    • Os pacotes inteligentes do Meteor são um grupo de uns 37 pacotes (você pode ver a lista completa com meteor list) que vêm embrulhados com Meteor e que você pode opcionalmente importar para o seu próprio aplicativo. Você pode adicioná-los até quando você não está usando Meteorite, com meteor add packagename.
    • Pacotes locais são pacotes customizados que você pode criar e por no diretório /packages. Você também não precisa usar Meteorite para usá-los.
    • Pacotes inteligentes da Atmosphere são pacotes Meteor de terceiros listados em Atmosphere. Meteorite é necessário para importar e usá-los. Atmosphere.
    • Pacotes NPM (Node Packaged Modules) são pacotes do Node.js. Apesar deles não funcionarem diretamente com Meteor, eles podem ser usados pelos tipos de pacote prévios.

    A Estrutura de Arquivos de um Aplicativo em Meteor

    Antes de nós começarmos a programar, nós precisamos estabelecer nosso projeto apropriadamente. Para assegurar que nós tenhamos uma construção limpa, abra o diretório microscope e delete microscope.html, microscope.js, e microscope.css.

    A seguir, crie cinco diretórios raíz dentro de /microscope: /client, /server, /public, /lib, e /collections, e nós também criaremos arquivos main.html e main.js vazios dentro de /client. Não se preocupe se isso quebrará o aplicativo por enquanto, nós começaremos a preencher esses arquivos no próximo capítulo.

    Nós devemos mencionar que alguns desses diretórios são especiais. Em relação a arquivos, o Meteor tem algumas regras:

    • Código no diretório /server roda apenas no servidor.
    • Código no diretório /client roda apenas no cliente.
    • Todo resto roda tanto no cliente quanto no servidor.
    • Arquivos no /lib são lidos antes dos outros.
    • Qualquer arquivo main.* é lido após todo resto.
    • Seus recursos estáticos (fonts, images, etc.) vão no diretório /public.

    Note que apesar do Meteor ter regras, ele realmente não força você a usar nenhuma estrutura de arquivos predefinida para o seu aplicativo se você não quiser. Então a estrutura que nós sugerimos é apenas a nossa forma de fazer as coisas, não uma regra absoluta.

    Nós encorajamos que você cheque a documentação oficial do Meteor se você quiser mais detalhes sobre isso.

    O Meteor é MVC?

    Se você está vindo para o Meteor de outros frameworks tais como Ruby on Rails, talvez você esteja se perguntando se aplicativos em Meteor adotam o padrão MVC (Model View Controller).

    A resposta curta é não. Ao invés de Rails, Meteor não impõe nenhuma estrutura predefinida para o seu aplicativo. Então neste livro nós simplesmente deixaremos o código de uma forma que faça mais sentido para nós, sem se preocupar demais com acrônimos.

    Não público?

    OK, nós mentimos. Nós não realmente precisamos do diretório public/ pela simples razão de que o Microscope não usa recursos estáticos! Mas já que a maioria dos aplicativos em Meteor irão incluir pelo menos um conjunto de imagens, nós pensamos que seria importante cobrir esse assunto.

    Aliás, você pode também ter notado um diretório .meteor escondido. Aqui é onde o Meteor guarda seu próprio código, e modificar coisas aqui é geralmente um idéia muito ruim. Aliás, você nunca realmente precisará olhar este diretório. As únicas excessões a isto são os arquivos .meteor/packages e .meteor/release, os quais costumam respectivamente listar seus pacotes inteligentes e a versão do Meteor a se usar. Quando você adicionar pacotes e mudar versões do Meteor, pode ser útil checar as mudanças a esses arquivos.

    Underscores vs CamelCase

    A única coisa que nós iremos dizer sobre o antigo debate underscore (my_variable) vs camelCase (myVariable) é que realmente não importa qual você escolha desde que você permaneça nele.

    Neste livro, nós usaremos camelCase porque é a forma JavaScript comum de ser fazer as coisas (até mesmo por que é JavaScript e não java_script!).

    As únicas exceções a esta regra são os nomes de arquivos, os quais usaremos underscores (my_file.js), e classes em CSS, as quais usam hífens (.my-class). A razão para tanto é que no sistema de arquivos, underscores são o mais comum, enquanto a própria sintaxe CSS já usa hífens (font-family, text-align, etc).

    Cuidando das CSS

    Este livro não é sobre CSS. Então para evitar retardá-los com detalhes de estilização, nós decidimos disponibilizar a stylesheet desde o começo, para que você jamais precise se preocupar com isto de novo.

    As CSS são lidas e minificadas automaticamente pelo Meteor, então diferentemente de outros recursos estáticos elas vão no /client, não no /public. Vá em frente e crie um diretório client/stylesheets/ agora, e ponha este arquivo style.css dentro dele:

    .grid-block, .main, .post, .comments li, .comment-form {
        background: #fff;
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }
    body {
        background: #eee;
        color: #666666;
    }
    .navbar { margin-bottom: 10px }
    .navbar .navbar-inner {
        border-radius: 0px 0px 3px 3px;
    }
    #spinner { height: 300px }
    .post {
        *zoom: 1;
        -webkit-transition: all 300ms 0ms;
        -webkit-transition-delay: ease-in;
        -moz-transition: all 300ms 0ms ease-in;
        -o-transition: all 300ms 0ms ease-in;
        transition: all 300ms 0ms ease-in;
        position: relative;
        opacity: 1;
    }
    .post:before, .post:after {
        content: "";
        display: table;
    }
    .post:after { clear: both }
    .post.invisible { opacity: 0 }
    .post .upvote {
        display: block;
        margin: 7px 12px 0 0;
        float: left;
    }
    .post .post-content { float: left }
    .post .post-content h3 {
        margin: 0;
        line-height: 1.4;
        font-size: 18px;
    }
    .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px;
    }
    .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa;
    }
    .post .post-content p { margin: 0 }
    .post .discuss {
        display: block;
        float: right;
        margin-top: 7px;
    }
    .comments {
        list-style-type: none;
        margin: 0;
    }
    .comments li h4 {
        font-size: 16px;
        margin: 0;
    }
    .comments li h4 .date {
        font-size: 12px;
        font-weight: normal;
    }
    .comments li h4 a { font-size: 12px }
    .comments li p:last-child { margin-bottom: 0 }
    .dropdown-menu span {
        display: block;
        padding: 3px 20px;
        clear: both;
        line-height: 20px;
        color: #bbb;
        white-space: nowrap;
    }
    .load-more {
        display: block;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.05);
        text-align: center;
        height: 60px;
        line-height: 60px;
        margin-bottom: 10px;
    }
    .load-more:hover {
        text-decoration: none;
        background: rgba(0, 0, 0, 0.1);
    }
    
    client/stylesheets/style.css

    Commit 2-3

    Re-arranged file structure.

    Uma nota sobre CoffeeScript

    Neste livro nós iremos escrever em puro JavaScript. Mas se você preferir CoffeeScript, Meteor te dá cobertura. Apenas adicione o pacote CoffeeScript e está pronto para seguir:

    mrt add coffeescript