Como configurar seu Mac para construir aplicativos de página única com AngularJS e Neo4J

Configurando o ambiente

Nesta seção, listarei todas as etapas pelas quais tive que seguir para deixar meu Mac pronto para a codificação com a pilha que escolhi. Esperançosamente, isso será uma economia de tempo útil para quem decidiu fazer o mesmo. Se você encontrou esta página primeiro, não terá que fazer nenhuma pesquisa. Basta seguir meus passos e em poucos minutos (sem incluir o download robusto do Xcode da Apple) você estará instalado e funcionando, pronto para a ação 🙂

Configurando o Localhost

Ainda uso o OS X 10.7 (Lion), portanto, isso pode não ser aplicável ao seu ambiente se você estiver usando uma versão mais recente do OS X. Primeiro, apaguei a ~/Sitespasta dentro da minha pasta pessoal e, em seguida, criei uma pasta vinculada com o mesmo nome apontando para a /Library/WebServer/Documentspasta usando o seguinte comando do Terminal:

sudo ln -s ~/Sites /Library/WebServer/Documents

Dessa forma, ao digitar http: // localhost na janela do navegador, ele apontará para o conteúdo da sua ~/Sitespasta.

Instalando Ferramentas para Desenvolvedores para Mac

Você precisará instalar as Ferramentas do desenvolvedor para Mac, instaladas como parte do Xcode. O Xcode está disponível gratuitamente – um download bem grande, mas você precisará dele.

Instalando o Homebrew

Para configurar toda a pilha que vamos usar, você teria que instalar vários pacotes manualmente, um trabalho muito tedioso que prefiro ignorar. Alternativamente, tudo o que você precisa fazer é instalar o Homebrew , um gerenciador de pacotes muito útil para OS X. Para instalar o Homebrew, simplesmente copie e cole a seguinte linha na janela do Terminal:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

O Homebrew instala pacotes em seu próprio diretório e, em seguida, vincula simbolicamente seus arquivos a /usr/local.

Instalando Node.js

Assim que o Homebrew estiver instalado, você pode prosseguir e instalar o Node.js

brew install node

Fácil, certo? A seguir, vamos verificar se o Node.js está funcionando corretamente. Dentro de sua ~/Sitespasta, crie um hello-node.jsarquivo e copie o seguinte conteúdo nele:

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Em seguida, execute este código a partir da linha de comando com:

cd ~/Sites
node hello-node.js

Você deve ver a seguinte mensagem na janela do Terminal:

Server running at http://127.0.0.1:8124/

Em seguida, navegue para http://127.0.0.1:8124/ em seu navegador, você deve ver a mensagem “Hello Node.js”.

Instalando npm

npm é o gerenciador de pacotes do Node. Agora ele é instalado automaticamente com Node.js, portanto, não há necessidade de fazer uma instalação separada.

Instalando Express.js

Com o Node.js e o npm já instalados, incluir o Express em um aplicativo da web é apenas uma questão de indicar a dependência do Express em seu package.jsonarquivo de aplicativo .

Dentro da pasta do seu aplicativo (ou seja ~/Sites/HelloWorld), crie um arquivo com package.jsono seguinte nome :

{
    "name": "hello-world",
    "description": "hello world test app",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "express": "3.x"
    }
}

Agora que você definiu as dependências do seu aplicativo, use o npm para instalá-las todas:

npm install

Uma vez NPM acabamentos, você terá um 3.x dependência expresso localizada no ./node_modulesdiretório. Você pode verificar isso com

npm ls 

que exibirá uma árvore com todas as dependências do aplicativo, neste caso apenas Express e suas próprias dependências.

Para testar Express.js, sugiro passar pelo exercício explicado aqui na seção Primeiros passos, até o início do guia.

Instalando Neo4J

Usando o Homebrew , para instalar a versão estável mais recente do Neo4j Server, emita o seguinte comando

brew install neo4j

Assim que a instalação for concluída, você pode iniciar o Neo4J a partir da linha de comando com:

neo4j start

Isso fará com que uma instância do Neo4j seja executada em http: // localhost: 7474 . Basta navegar até esse URL com seu navegador para acessar o utilitário do navegador de banco de dados, que também inclui alguns tutoriais:

Organização do aplicativo

Ao construir um aplicativo de página única com AngularJS , iremos construir essencialmente duas peças:

• O cliente , com todo o JavaScript , HTML , CSS e vários arquivos de ativos necessários para que o front-end do aplicativo seja executado no navegador da máquina cliente.
• O servidor , com todos os arquivos JavaScript necessários para rodar o servidor web em cima do Express / Node.js , que atenderá as solicitações do aplicativo cliente (GETs, POSTs, PUTs, etc.), conectando o cliente à camada de persistência Neo4J .

Durante o desenvolvimento, sua máquina desempenhará as funções de cliente e servidor, com:

• o servidor da web rodando localmente no localhost em uma porta especificada (tradicionalmente na porta 3000 ),
• o banco de dados rodando localmente no localhost na porta 7474
• o aplicativo cliente rodando localmente em localhost na porta 80

Depois de ler muitos artigos, postagens de blog e perguntas no Stackoverflow sobre como organizar todos esses arquivos, deixe-me mostrar a estrutura que adotei, inspirada em https://github.com/angular-app/angular-app e em http://briantford.com/blog/huuuuuge-angular-apps.html .

No nível superior, subdividi o aplicativo em seus dois componentes principais, cliente e servidor . Eu também adicionei uma pasta * client-tests ** que planejava usar para testes de unidade. Que vergonha, eu realmente não usei. Talvez da próxima vez: (*

Dentro da pasta do cliente , estruturei o aplicativo da seguinte maneira (pastas em negrito , arquivos em itálico ):

• cliente
  • ativos
    • imagens
  • scripts
    • controladores
    • diretivas
    • filtros
    • Serviços
    • fornecedor
    • app.js
  • estilos
  • Visualizações
  • index.html

No lado do servidor do aplicativo, esta é a estrutura de pastas interna (pastas em negrito , arquivos em itálico ):

• servidor
  • node_modules (criado por npm )
  • rotas
  • package.json
  • server.js

No final das contas, não há maneira certa de fazer isso. Cada um tem sua maneira, alguns gostam de agrupar arquivos por tipo (todos os controladores juntos, todas as diretivas juntas, etc.), alguns gostam de agrupá-los por funcionalidade. Há prós e contras em ambas as abordagens, então fique à vontade para escolher aquela que fizer mais sentido para você. Você sempre poderá mover as coisas mais tarde, se estiver limitado por sua estrutura.

Parabéns!

Você está pronto para entrar em ação! Espero que você tenha achado este post útil. Levei um tempo para reunir todas as informações de que precisava para chegar a este ponto. Espero que este resumo ajude você a economizar algum tempo e seja capaz de chegar à parte divertida mais cedo 🙂

Alguns presentes opcionais

Se, como eu, você decidiu usar o Sublime Text (versão 2 ou 3), se ainda não o fez, pode instalar o Sublime Package Control . A instalação é simples e leva apenas alguns segundos. Vá para a página de instalação e copie o script correto para sua versão do Sublime Text no console do Sublime Text.

Uma vez instalado, basta abrir a Paleta de Comandos (cmd + shift + p),
selecionar “Instalar Pacote” e selecionar “Cypher”. Isso instalará o Sublime Cypher , destaque de sintaxe para a linguagem de consulta Cypher do Neo4j em Sublime Text. Você vai querer nomear seus arquivos cifrados com a .cqlextensão para que o realce de sintaxe os reconheça.

No instalador de pacotes do Sublime Text, você também encontrará o pacote AngularJS , que também pode ser instalado.

Dica para novatos do Neo4J: como redefinir seu banco de dados

Se você for como eu, especialmente durante sua fase de aprendizado de desenvolvimento com o Neo4J, você se verá construindo alguns gráficos básicos “à mão” como ponto de partida e executando consultas criptografadas que irão, mais cedo ou mais tarde, bagunçar seu gráfico.

Nesse ponto, você tem duas opções:

1. conserte manualmente as partes do gráfico que foram afetadas para voltar a um bom estado e continuar o desenvolvimento
2. redefina seu banco de dados para um estado inicial bem conhecido

Eu fiz o # 1 e fiquei entediado rapidamente com isso. Finalmente descobri a melhor maneira de fazer o # 2.

Primeiro, escreva um script .cql que construa o “estado conhecido” para o qual você deseja poder voltar. Pode ser apenas alguns nós e relacionamentos ou uma estrutura muito mais complexa. Seja o que for, todo o script deve ser parecido com o seguinte:

START n = node(*) 
MATCH n-[r]-() 
DELETE n, r 
WITH COUNT(n) AS hack
CREATE 
(Neo:Crew { name:'Neo' }),
(Morpheus:Crew { name: 'Morpheus' }),
(Trinity:Crew { name: 'Trinity' }),
(Cypher:Crew:Matrix { name: 'Cypher' }),
(Smith:Matrix { name: 'Agent Smith' }),
(Architect:Matrix { name:'The Architect' }),
(Neo)-[:KNOWS]->(Morpheus),
(Neo)-[:LOVES]->(Trinity),
(Morpheus)-[:KNOWS]->(Trinity),
(Morpheus)-[:KNOWS]->(Cypher),
(Cypher)-[:KNOWS]->(Smith),
(Smith)-[:CODED_BY]->(Architect)

As primeiras linhas do script eliminam todos os nós e relacionamentos do banco de dados. Em seguida, vem o CREATEcomando longo , que reconstrói o “estado conhecido” que precisa ser recuperado.

A única ressalva ao fazer isso é que o banco de dados ainda será o mesmo. Isso significa, por exemplo, que os IDs dos nós continuarão aumentando sempre que você executar novamente o script acima. Se você realmente deseja redefinir seu banco de dados, apenas mude para o Terminal e execute o seguinte antes de executar o script cypher acima:

cd /usr/local/Cellar/neo4j/2.0.0/libexec/data
neo4j stop
rm -rf graph.db/
neo4j start

Isso irá parar o servidor de banco de dados, remover completamente a pasta de dados da qual depende e, em seguida, reiniciar o servidor, que se reinicializará e criará uma nova pasta de dados com o mesmo nome no mesmo local exato.

Nota

Acredito que ter esses “scripts de redefinição” à mão será muito útil quando você estiver trabalhando em vários projetos ao mesmo tempo. Claro que você poderia ter vários servidores Neo4J em execução em sua máquina, um para cada projeto em que você trabalha, mas sinto que depois de um tempo pode se tornar inviável fazer isso. Portanto, ao alternar o desenvolvimento do projeto, tudo o que você precisa fazer é remover a pasta de dados do banco de dados conforme mostrado acima e, em seguida, executar o script de redefinição do código do projeto.