Postado em por Admin do Vizir

Vagrant e Node.js no Windows com Cygwin

Depois de algum tempo usando VMs (Virtual Machine) para cada projeto, fui apresentado pelo Tiago ao Vagrant. No começo achei que era a mesma coisa, mas depois de usar em um projeto vi que é mais simples e prático que uma VM completa.

Com o Vagrant é possível cria um ambiente de desenvolvimento para cada projeto que trabalhamos, sem UI. A configuração da VM fica no repositório do projeto e assim, uma vez configurado, basta usar o vagrant up e sair usando!

Dado que utilizo o Windows como host (preciso dele para rodar o Crysis 3!), tive que descobrir como faria para substituir as minhas VMs Ubuntu completas, com GUI e tudo mais. Editor? Sublime, funciona perfeito no Windows! Terminal? O cmd.exe é impraticável! Para isso utilizo o bash do Cygwin. Done!

Aqui vai um passo a passo da instalação do ambiente:

1. Instalação no Windows

Sem segredos aqui. Siga o caminho feliz.

  • Instalar VirtualBox (config padrão)


  • Instalar Cygwin (config padrão com os pacotes abaixo)


    • git (/devel)
    curl (/net)
    nano (/editors)
    wget (/web)
    OpenSSH (/net)

  • Instalar Vagrant (config padrão)


  • Instalar Node.js (necessário para o Sublime)


  • Instalar CoffeeScript (necessário para o Sublime)

    • npm -g install coffee-script

2. Primara vez: baixar o projeto do git

Estou considerando que as configurações do Vagrant estão no repositório do projeto, então precisamos baixar a primeira vez através do Windows/Cygwin. Depois é possível utilizar o git diretamente na VM.

Para isso, precisamos configurar a chave ssh. Caso tenha uma chave que você já utiliza, pode copiá-la para o diretório ao invés de criar uma. Aqui iremos criar uma nova.

  • No terminal do Cygwin (ambiente Windows):

    • ssh-keygen # Criar chave ssh
    cat ~/.ssh/id_rsa.pub # Copiar e colar chave ssh no repositório do seu projeto. ex: github.com
    mkdir projects # Criar pasta de projetos de sua preferência
    cd projects
    git clone git@github.com:seuusuario/seuprojeto.git
    cd seuprojeto
    vagrant up

3. Utilizando a VM

Costumo utilizar o git dentro da VM e não mais no Windows (apenas a primeira vez). Para isso tenho que configurar o ssh novamente.

  • No terminal do Cygwin (ambiente Linux):

    • cd projects\seuprojeto
    vagrant ssh
    ssh-keygen # Criar chave ssh
    cat ~/.ssh/id_rsa.pub # Copiar e colar chave ssh no repositório do seu projeto. ex: github.com
    cd /vagrant
    git pull # Deve funcionar com a nova chave

4. Configurando o Sublime

Estamos utilizando CoffeeScript nos projetos Node.js e contamos com alguns packages do Sublime para nos ajudar. Um deles é o CoffeeCompile, que compila um arquivo .coffee em JavaScript. Se a instalação do Node.js e do CoffeeScript funcionou, então este package vai funcionar sem problemas.




Postado em por andre

Para quem só tem martelo, todo problema é prego!

 

Sem dúvida nenhuma, nossa principal característica na Vizir é resolver o problema do cliente com a melhor tecnologia para o problema. E à medida que a equipe cresce, tentamos passar esta mensagem para cada um dos novos colaboradores.

Evidentemente temos nossas tecnologias preferidas: começando pelo Rails para uma aplicação web comum, muito HTML, CSS e JavaScript bem feito, Node.js para aplicações de real-time e agora estudando muito Backbone.js e Angular.js. E aplicando estas tecnologias em projetos reais, quando o projeto realmente precisar. Se o cliente tem todo seu legado em .NET, um novo projeto simples que começarmos, será feito em .NET. Não complicaremos a estrutura do cliente sem um bom motivo.

E para alcançarmos bons resultados em nossos clientes, montamos uma equipe com os mais variados conhecimentos. No geral, toda equipe é proficiente em Ruby, Rails, HTML, CSS  e Java Script. Alguns manjam muito de PHP, outros fissurados por mobile e parte do time veio do .NET e Java. Eu, André, de 1998 a 2002 queria resolver todos os problemas com Visual Basic.

E não é só de novo código que as soluções são feitas. Se já tivermos uma solução open source para o problema, vamos considerá-la sim na resolução do problema. Às vezes grandes soluções são montadas com este formato, seja baseada em WordPress, DSpace ou alguma outra solução menos conhecida.

Por isso, sem falsa modéstia, podemos dizer que não temos só martelos em nossas mãos, e que vamos realmente tentar encontrar a melhor solução para seu problema.

 

Postado em por andre

Pizza da Vizir – Palestra e Troca de Ideias

Na noite de hoje, dia 14 de março, juntamos o pessoal em nosso escritório para uma noite de palestras, pizza e troca de ideias. Estes encontros são quinzenais, com um tema definido pelo nosso time.

Na Vizir, já utilizamos Node.js e Backbone.js em um grande projeto de um de nossos clientes, além de uma aplicação mobile que faremos baseada em Angular.js. Então é importante que toda nossa equipe esteja sintonizada e troque ideias sobre o assunto. Os temas desta noite foram:

  • Node.js: o Fabrício passou alguns conceitos básicos e suas características. Discutimos pontos do Node que nos forçam a fazer uma aplicação com bom desempenho para processar uma grande quantidade de eventos. Lembramos inclusive de um amigo nosso, Paulo Panhoto, que há 10 anos atrás fez em C uma aplicação que já incorporava diversos princípios presentes no Node.
  • Angular.js: o Antonio falou sobre o Angular, seus usos, “mágicas” e a diferente forma de raciocínio que surge quando você usa o MVC do lado do cliente. Vários Vizires ficaram com vontade de experimentar para valer em um projeto, e pelo jeito o faremos em nosso próximo aplicativo móvel.
  • Backbone.js: o David e Diego estão usando Backbone.js em um grande projeto, e contribuíram com sua experiência e impressões durante o bate-papo.

 

Obrigado Fabrício e Antonio pelas apresentações que fizeram. Seguem os slides utilizados nas palestras abaixo (o Antonio utilizou os slides do Chris Breiding sobre Angular.js).

Seguem alguns “highlights” desta conversa:

“Depois que você começa a trabalhar e raciocinar com o MVC no client-side, você não sente mais vontade de utilizar o MVC tradicional, como o do Rails.”
Diego Nakamashi

“Se você utilizar um framework de JS no client-side, você já tem meio caminho andado para fazer uma boa aplicação HTML5 para celular”
Antonio Anderson

“E aí? Quando vamos colocar o Angular em um projeto?”
Tiago Gonçalves

“Estes frameworks MV* não te forçam uma estrutura. Para você fazer um bom projeto, você acaba definindo como vai estruturar suas classes e arquivos”
David Lojudice Sobrinho

“Esta pizza de quatro queijos estava sensacional”
Comedor de Pizza Anônimo

Postado em por Fabrício

Palestra na Vizir sobre Responsive Web Design

Ontem o nosso amigo Edu Zaghi da LolDesign esteve na Vizir apresentando uma palestra para os Vizires sobre Responsive Web Design.

A palestra foi introdutória abordando o que é Responsive Web Design, porque ele é importante, as dificuldades e as estratégias para criar designs “responsivos”. Além disso o Zaghi mostrou exemplos práticos e código de exemplo (disponíveis no GitHub).

Com a palestra foi possível entender melhor a necessidade por designs responsivos, que sem dúvida será algo cada vez mais demandado pelos clientes, e por isso precisamos estar atentos e conhecer mais a fundo sobre as técnicas.

Na Vizir o Antonio e Vitor já tiveram experiências na criação de interfaces responsivas e com a palestra do Zaghi os demais Vizires conseguiram entender mais sobre o tema.

Muito obrigado Zaghi e Marco da LolDesign pela presença e palestra!

 

Postado em por ricardo.georgel

Calculando a distância entre dois pontos usando a latitude e longitude

Ontem em uma conversa com um de nossos clientes, acabamos recebendo o relato de um problema para achar os locais mais próximos pela longitude e latitude.

Com isso em mente, pesquisamos um pouco como resolver isso de forma simples. Após algumas pesquisas, achamos vários sites explicando os cálculos que devem ser realizados e uma query para o MySQL que faz as devidas conversões, e nos retorna a distância entre os pontos. Segue abaixo os testes que realizamos para ver o funcionamento da query.

mapa teste distancia

Solução do problema

No nosso exemplo, gostaríamos de encontrar os pontos do mapa acima que estivessem mais próximos do escritório da Vizir, na Rua Boa Vista, 254 em São Paulo. Para fazer esta simulação fizemos os seguintes passos:

  • Criamos uma tabela para armazenar os endereços;
  • Inserimos os endereços com latitude e longitude;
  • Executamos a query para retornar os endereços mais próximos.
Tabela e insert com os endereços
CREATE TABLE endereco (
  id int(11) NOT NULL AUTO_INCREMENT,
  nome varchar(45) DEFAULT NULL,
  longitude varchar(45) DEFAULT NULL,
  latitude varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

-- Endereços para teste
INSERT INTO endereco(nome, longitude, latitude)
  VALUES('Terminal Mercado', '-46.62913200000003', '-23.5471634');
INSERT INTO endereco(nome, longitude, latitude)
  VALUES('Viaduto do Chá', '-46.63797820000002', '-23.5464833');
INSERT INTO endereco(nome, longitude, latitude)
  VALUES('Largo da Memória, 2-56', '-46.63892820000001', '-23.548348');
INSERT INTO endereco(nome, longitude, latitude)
  VALUES('Praça da República', '-46.64323139999999', '-23.5426444');
INSERT INTO endereco(nome, longitude, latitude)
  VALUES('Praça da Sé', '-46.63431400000002', '-23.5503342');
Executando a query

Utilizamos variáveis do MySQL para facilitar a reprodução do exemplo.

-- Select 
-- Parâmetros de entrada 
-- (Endereço da Vizir Rua Boa Vista 254)
set @orig_lat= abs(-23.5454668); 
set @orig_lon= abs(-46.633525399999996);
set @distancia=10;

SELECT *, 
	((3956 * 
	2 * 
	ASIN(
		SQRT(POWER(SIN((@orig_lat - abs(dest.latitude)) * 
				   pi()/180 / 2),2) + 
		COS(@orig_lat * pi()/180 ) * 
		COS(abs(dest.latitude) * pi()/180) * 
		POWER(SIN((@orig_lon - abs(dest.longitude)) *  
					pi()/180 / 2), 2))
		) 
    ) * 1.609344) as distancia
FROM endereco dest
having distancia < @distancia
ORDER BY distancia 
limit 100;

Pronto, a query retornou os endereços ordenados por distância (em quilômetros).

Resultados obtidos
Id Nome Longitude Latitude Distância (km)
2 Viaduto do Chá -4663797820000000 -235464833 0.46744009397678077
1 Terminal Mercado -4662913200000000 -235471634 0.4856225533942553
5 Praça da Sé -4663431400000000 -235503342 0.5467863930519828
3 Largo da Memória, 2-56 -4663892820000000 -23548348 0.636702383775552
4 Praça da República -4664323139999990 -235426444 1.0372715478873693

Se você quiser saber mais detalhes sobre a fórmula de Haversine, usada pra obter a distância mínima entre dois pontos, veja os links abaixo, que contém também uma apresentação explicando em detalhes como fazer o cálculo usando o MySQL.

Fonte

[1] http://en.wikipedia.org/wiki/Haversine_formula
[2] http://pt.scribd.com/doc/2569355/Geo-Distance-Search-with-MySQL

Postado em por Antonio Anderson Souza

O ano vai chegando ao fim e que venha 2013 !

Estamos nas vésperas do Natal de 2012, momento de rever como foi este ano que está praticamente acabado, agradecer e comemorar por tudo que conquistamos, projetar o que queremos de igual e diferente em 2013.

Nós da Vizir temos muito o que agradecer à 2012 pois foi um ano maravilhoso para nossa empresa, pois começamos o ano com 6 Vizires e estamos terminando com 10, mantivemos todos os clientes e ainda obtivemos diversos novos clientes, e cada vez mais estamos convictos de nosso principal diferencial: Resolvemos o real problema de nosso cliente! Não “empurramos” para o cliente a tecnologia que nos é mais confortável e nem a que está na moda no momento. Projetamos a solução para que resolva o problema da melhor forma possível e que maximize o investimento que ele já fez ou vai fazer.

Devemos este ano maravilhoso a nossos clientes, parceiros, colaboradores e seus familiares:

Gostaríamos de agradecer a cada um de nossos clientes e parceiros: Brastel, Flytour, Foca No Cupom, Instituto Paulo Freire, Multiedro, Multipla Crédito, Neo Serviços, Portal Improvisando, Que Fala, Scabu, The Dublin Institute, Voice Technology e Voitel pois vocês são a razão de existirmos, e de nosso crescimento.

Agradecimento muito e especial para nossos colaboradores pois vocês formar um time sensacional que nos possibilita resolver cada vez mais e melhor os problemas de nossos clientes e parceiros com softwares de qualidade utilizando tecnologias de ponta.

Não poderíamos esquecer de agradecer para os familiares e entes próximos de todos so Vizires pois sabemos que muitas vezes nossa empresa demanda uma dedicação dos Vizires que acaba impactando quem está próximo, seja um dia que chegou mais tarde, ou um final de semana trabalhando, etc. mas saibam que agradecemos muito por esta dedicação, e trabalhamos para retribuir este esforço com um ambiente de trabalho diferenciado, humano, que preza muito e valoriza os seus colaboradores e entes próximos.

Desejamos um Feliz Natal e um 2013 repleto de realizações para todos, muita Saúde, Paz, Felicidades e Sucesso!!!

Postado em por Fabrício

Visualização da Comunidade Freiriana – parte 2

Conforme falamos na parte 1, o objetivo deste post é mostrar a implementação da solução. Portanto, vamos logo ao código.

O projeto está no nosso GitHub, ele é apenas uma demo totalmente funcional, para facilitar a explicação e entendimento de como usar o Google Maps para mostrar pontos dinamicamente no mapa de localizações.

Abaixo, segue uma explicação de cada parte do sistema.

RESOURCES.RB

Neste arquivo está toda a parte da aplicação que fornece os dados, criamos usando o Sinatra para facilitar o entendimento, uma vez que o foco do post é mostrar a parte de integração com o Maps e não a Intranet.

Nele temos a declaração da class Resource, que é responsável por armazenar e fornecer os recursos, que neste caso são as comunidades freirianas. Na class tem o método to_json que fornece os dados dos recursos em JSON, de acordo com a condição passada. Este método é chamado quando a página com a visualização da comunidade Freiriana, consulta esta aplicação para buscar e filtrar os dados das comunidades.

Após a class Resource temos um código para popular a base em SQLite, onde usamos a gem Geocoder, que faz interface com API de geolocalização do Google, para pegar a latitude e longitude da comunidade, e também usamos a gem Faker para criar dados genéricos. Por fim temos as duas actions que fornecem os dados de comunidades, categorias e países utilizados pela página. Na primeira todos os dados são buscados e na segunda ocorre o filtro de acordo com os parâmetros informados na url.

PUBLIC

Na public estão os arquivos da página.

index.html

O html em si, contendo um form para filtrar os dados, uma div onde o mapa é renderizado e outra div onde as informações de uma comunidade são apresentadas.

cumunidadesFreirianas.js

Aqui é onde a “mágica” acontece. A primeira coisa que a página faz é carregar o mapa com todas as informações das comunidades, por meio da function initializeMap. Nela é feita uma consulta na aplicação em Sinatra via AJAX e como a implementação que fizemos era cross domain, precisamos utilizar o JSONP, uma vez que você não pode fazer uma requição AJAX para um domínio diferente.

Como pode se notar no parâmetro jsonpCallback, que sobrescreve o nome da função de callback da request, sendo importante notar que para funcionar e você conseguir pegar os dados em JSON, retornados pela aplicação, você precisa adicionar o parâmetro de callback no retorno, como pode ser visto no arquivo resources.rb no final de cada action.

Após fazer a requisição, nos usamos a API do Google Maps, passando os dados de longitude e latitude de cada comunidade. Adicionamos um listener para ao clicar na posição do mapa mostrar as informações daquela comunidade no painel a direita e por fim montamos os selects de categorias e países.

Há ainda a function showInfo que é responsável por mostrar os dados no painel a direita do mapa e é chamada no listener. E por fim a function filter, responsável por fazer a requisição quando o usuário que filtrar as comunidades por categoria e/ou país, nela há um tratamento para a centralização do mapa, pois quando um país é selecionado, o mapa fica centralizado neste, caso contrário, ele exibe o “mundo inteiro”.

Para rodar o projeto, é recomendado usar o RVM, após instalar ele, instale o Bundler (gem install bundler) e rode o bundle install para instalar as gems do projeto. A aplicação pode ser iniciada com o shotgun (shotgun resources.rb), e após isso é só abrir o arquivo index.html que está na public. Se tudo tiver certo, você verá uma página parecida com essa:

Se tiverem alguma dúvida sobre o código, só fazer um comentário que respondemos. =D

Publicação feita por Fabrício Ferrari (@fabricioffc) e Vitor Margis (@vitormargis).

 

Postado em por Antonio Anderson Souza

Lançamento Gem Corrails

Acabamos de disponibilizar no Github a gem Corrails. Ela é um wrapper em Ruby para a API de rastreamento de entregas de 2 agentes logísticos brasileiros: os Correios e a Direct Log.

A Corrails surgiu da necessidade de nossos clientes, pois alguns projetos demandavam o rastreamento de entregas de forma integrada e automática com estes 2 agentes logísticos.

Como esta necessidade deve ser comum em sistemas que precisam fazer rastreamento de entregas, criamos e disponibilizamos a gem Corrails para que possa ser útil para outros desenvolvedores.

Hoje a gem possui somente o rastreamento de entregas. O objetivo é evolui-la para agregar mais agentes logísticos nacionais e internacionais, além de novas funcionalidades como cotações e agendamento de coletas. Justamente por isso é um projeto Open Source, para que qualquer um possa contribuir com ideias de funcionalidades e implementações.

Se você é desenvolvedor faça um fork e nos ajuda com esta empreitada! Se não for e tem necessidade de alguma funcionalidade que não existe, é só postar nas issues do projeto no Github.

 

Postado em por Fabrício

Visualização da Comunidade Freiriana – parte 1

Este é o primeiro post de uma série cujo objetivo é mostrar um case da Vizir. Mas não apenas o case em si, como também o código, afinal somos uma empresa de desenvolvimento de software. =)

Recentemente fizemos uma integração com o Google Maps, que resultou numa solução bem bacana para uma demanda de um cliente nosso, o Instituto Paulo Freire (IPF).

A demanda era a inserção e visualização dos dados da comunidade Freiriana, instituições que tem vínculo com o IPF e disseminam os métodos do educador Paulo Freire.

A origem da demanda foi para a apresentação das 176 comunidades (números atuais) no VIII Encontro Internacional do Fórum Paulo Freire, na Universidade da Califórnia, Los Angeles (UCLA/EUA).

Para atender essa demanda, usamos o Google Maps para a visualização dos dados, que são fornecidos via JSON por uma aplicação em Rails.

Os principais pontos que nos fizeram chegar a essa solução foram os seguintes:

  • A interface de visualização das comunidades deveria ser bem intuitiva e as informações mostradas e filtradas de forma simples.
    • Como já tínhamos feito uma solução semelhante para um outro cliente, em parceria com a Multiedro, envolvendo o uso do Google Maps para visualização de dados, logo pensamos que poderíamos usar novamente essa solução, uma vez que as comunidades Freirianas estão espalhadas ao redor do mundo, portanto agrupar-las por países e mostrar-las usando um mapa faz sentido.
    • Para a filtragem pensamos que o importante era ser simples e na mesma página onde os dados são apresentados. Por isso usamos requisições em AJAX para consumir os dados e atualizar o mapa. Desta forma o usuário não precisa navegar por páginas (mudar de contexto) e todas funcionalidades da solução estão em uma única página de forma concisa.
    • A página iria estar no site do Instituto, que foi desenvolvido por nós utilizando WordPress, portanto integrar com o site seria uma tarefa simples, já que estaríamos usando apenas Javascript para fazer a lógica.
  • Já para o cadastro e gerenciamento dos dados, o ponto principal foi utilizar a Intranet que estamos desenvolvendo para o IPF, uma vez que nela já existe toda uma estrutura e padrão de cadastros.
    • Deste modo ganhamos tempo, pois trabalhamos em cima de uma aplicação já existente. Precisando apenas criar os cadastros e uma API para fornecer os dados.

Abaixo segue uma ilustração da arquitetura da solução:

Arquitetura - Comunidade Freiriana

Por hoje ficamos por aqui, onde explicamos como chegamos em uma solução simples e efetiva, duas características que sempre buscamos aqui na Vizir em nossos desenvolvimentos.

No próximo post, iremos falar da parte mais técnica, explicando e compartilhando o código que foi desenvolvido. Até lá!

Postado em por Admin do Vizir

Sublime Rocks!!

Aqui na Vizir acreditamos que ter as melhores ferramentas faz toda diferença na hora de entregar o melhor para nossos clientes. Pessoas trabalhando de forma eficiente e felizes só podem produzir coisas com qualidade. Um exemplo é que todo novo colaborador da Vizir ganha um notebook top de linha para ser seu. Temos essa politica desde o primeiro dia do Vizir.

Falando em ferramenta, uma que usamos muito e amamos é o Sublime Text. Quem não ama? Aqui é unanime. Parece que juntaram tudo que sempre sonhamos (e choramos por não ter nos outros) em um único editor!

Sublime Rocks!!!

Todo mundo que utiliza o Sublime aqui na Vizir (o nosso contador ainda há de usar), ganha uma licença do editor (como o notebook, a licença é pessoal e fica com a pessoa pra sempre). Assim, demostramos nosso apreço e esperamos que o time Sublime continue nos surpreendendo com seu ótimo editor.

ps: e já tem gente brincando com outros editores.