Série Dropbox: Conectando com DropBox API Java

Olá Pessoal,

Hoje quero compartilhar uma experiência bem bacana que tive com a API do dropbox. Estou trabalhando em um projeto novo e vamos usar alguns recursos do DropBox como ferramenta  para poder automatizar alguns processos e facilitar a vida do usuário. A ideia deste post é mostrar como conectar sua aplicação com o DropBox.

Lets go…

Starting…

No inicio foi meio confuso de entender como funcionava a documentação do dropbox. É até boa, mas o tutorial não é muito objetivo. Levei algumas horas para entender nos detalhes como realmente as coisas funcionavam, até porque na primeira versão sempre que eu parava e iniciava a aplicação o code da autorização precisava ser gerado de novo. Veja os passos que precisamos fazer antes de colocar a mão no código:

  • Ir no https://www.dropbox.com/developers/apps e create app. Daí é só seguir os passos e ir respondendo as perguntas. Não tem erro aqui por serem bem diretas. No meu caso usei a opção full Access e permiti que a aplicação acesse os arquivos já existentes.  Claro que você precisa estar logado no dropbox.

dropboxapiappcreated

  • Ao clicar na app que foi criada teremos dois caras importantes, veja:

 

dropboxkeygenerated

Precisamos dessas Keys para poder conectar a nossa conta.

Pronto, só isso. Agora vamos programar.

Development

Crie um Java Project

O nosso exemplo será com Java Application somente para vermos a conexão e listagem do que temos no dropbox. O meu projeto é um maven project, portanto vamos precisar da API do dropbox. Adicione o código abaixo no pom.xml

<dependency>

<groupId>com.dropbox.core</groupId>

<artifactId>dropbox-core-sdk</artifactId>

<version>1.7.2</version>

</dependency>

 

Crie uma classe com método main do Java (chamei minha classe de Main). O código a seguir é o que está nessa página: https://www.dropbox.com/developers/core/start/java

A ideia aqui é explicar como fazer tudo funcionar. Ter apenas o código e executar não é o suficiente.  Veja o código:

public class Main {
public static void main(String[] args) {
final String APP_KEY = "KEY HERE";
final String APP_SECRET = "KEY SECRET HERE";

DbxAppInfo appInfo = new DbxAppInfo(APP_KEY, APP_SECRET);

DbxRequestConfig config = new DbxRequestConfig("JavaTutorial/1.0",
Locale.getDefault().toString());

DbxWebAuthNoRedirect webAuth = new DbxWebAuthNoRedirect(config, appInfo);
String authorizeUrl = webAuth.start();

System.out.println("AuthorizeURL " + authorizeUrl);
System.out.println("3. Copy the authorization code.");

try {
String code = new BufferedReader(new InputStreamReader(System.in)).
readLine().trim();

DbxAuthFinish authFinish = null;

authFinish = webAuth.finish(code);

DbxClient client = new DbxClient(config, authFinish.accessToken);

System.out.println("Linked account: "

+ client.getAccountInfo().displayName);
DbxEntry.WithChildren listing = client.getMetadataWithChildren("/");

System.out.println("Files in the root path:");

for (DbxEntry child : listing.children) {
System.out.println("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " + child.name + ": " + child.toString());
}
}
catch (DbxException e) {
e.printStackTrace();
}
catch (Exception e) {
e.printStackTrace();
}
}
}

 

Agora é que vem o pulo do gato. Se você rodar essa app e não fizer nada, o que acontece? Bem, você poderia esperar que fossem listados todos os seus arquivos que estão na raiz da sua conta do dropbox, certo? Por causa dessa linha aqui:

       DbxEntry.WithChildren listing = client.getMetadataWithChildren("/");

Rode e veja o resultado a seguir:

dropboxrunningmain

O que você precisa fazer? Copiar a URL e colar no browser. O dropbox vai solicitar allow para app que está querendo acessar, então você dar autorização e ele gera um token:

dropboxtokenbrowser

Feito isso vá para a aplicação e vamos alterar apenas uma linha veja qual:

//String code = new BufferedReader(new InputStreamReader(System.in)).readLine().trim();

String code = "TOKEN CREATED HERE";

 

Observe que comentei uma linha e coloquei o token que foi gerado na variavel code, poderia também ter digitado no console. Se tudo der certo você vai ver tudo que tem na raiz do seu dropbox:

dropboxworking

Simples, não? Você pode fazer o que quiser com os arquivos. Na documentação você pode ver como fazer o download.

Problema

Se você rodar a aplicação novamente, o code gerado acima é inválido e será preciso criar um novo. No próximo post vamos ver como resolver isso.

Abraços, see ya!!

Série AngularJS – Por onde começar? Qual o melhor livro?

Olá Pessoal,

Resolvi criar esse post para ajudar aqueles que estão querendo começar com o AngularJS, mas não sabem como dar os primeiros passos.

Lets go…

Por onde começar?

Essa é uma pergunta muito comum para quem quer ter o primeiro contato com o framework da Google. Eu também fiz essa pergunta quando me foi apresentado o AngularJS, apesar de que a documentação do framework é boa e está em atualização constante. Algumas coisas não são bem explicadas como deveriam, mas dá pra fazer pelo menos um “Hello world” e tirar dúvidas de como usar algumas funcionalidades do Angular, sem falar que a lista de discussão deles é bem ativa e os próprios desenvolvedores do framework estão lá participando.

Sabemos que se formos no Google.com e realizarmos uma pesquisa sobre AngularJS vai ter bastante post sobre assunto, e alguns de qualidade, mas será o suficiente para você de fato aprender o framework? Depende até onde você deseja ir. Para sair do 0 x 0 o material que está disponível na internet já é mais que o suficiente, mas se você deseja se aprofundar mais no framework e começar a tratar o mesmo para ambientes corporativos, dai terá que entender alguns assuntos mais específicos, pois achei as informações práticas limitadas na documentação. Sem falar que entender angularJS é apenas uma parte da história, o ideal é que você entenda como trabalhar com frameworks JS da mesma forma que você trabalha do lado do servidor, por exemplo unit test, build etc. Eu particularmente estou entrando aos poucos no mundo JS e o Angular está sendo meu ponto de entrada, uma vez que client-side nunca foi meu forte por questões de projetos e fora um trauma que tenho de JavaScript de 13 anos atras, mas hoje acho que ja superei.

Quando me perguntam por onde começar com o AngularJS sempre recomendo na seguinte ordem:

1. Internet: pesquise posts sobre o assunto na Internet, veja aqueles que tem qualidade e comece a ler, e se for prático ja saia metendo mão na massa. Leia a parte teórica que tem na documentação, participe de grupo de discussões como o AngularJS-Brazil  e  o AngularJS-Brasil no Faceboook. Aqui seu objetivo é descobrir o framework, de poder brincar com ele e saber se você curtiu o jeito de “trampar”. Acho que é a melhor forma e mais barata que se deve seguir quando ainda está experimentando se você deve investir tempo e dinheiro no angularJS. No grupo AngularJS-Brazil eu postei uma pilha de hotlinks sobre o framework, é só acessar o grupo e conferir.

2. Livros: Hoje há bastante livro  sobre o assunto comparado a 3 meses atras onde tinham apenas 2-3. Mas o negócio cresceu e temos mais opções.

3. Comunidade: Participe das comunidades ativas do AngularJS. A página no facebook é bem agitada e recentemente criei um grupo no Google Groups AngularJS-Brazil para centralizar posts, links e discussoes sobre o framework.

A seguir alguns livros que recomendo:

1. AngularJS na Prática

É um livro em português sobre o framework, mas ainda está em desenvolvimento. Acho que já passou da hora do autor publicar, pois esse foi o primeiro livro que vi do assunto em português, lá em meados de julho/13. Recomendo o livro para quem quer dar os primeiros passos com o framework. A escrita do autor é bem confortável e os exemplos funcionam. Um detalhe importante é que a parte de server-side é em PHP, mas não vejo isso como problema, é só pegar o conceito e aplicar na linguagem que você trabalha.

2. Recipes with Angular.js
É um livro bacana que recomendo para quem já está mexendo com AngularJS. Não precisa ser um expert, mas se você já aprendeu a base do framework já consegue fazer um pequeno projeto (nem que seja um crud) usando o AngularJS. Esse livro vai dar umas dicas legais, é bem pequeno e prático. Pena que o autor não mostra o resultado do código, apenas joga e o resto fica direcionado para pegar no github dele. Mas ele organizou bem os arquivos no github e você pega por capítulo. Recomendo. Foi o terceiro livro que li.

3. Instant AngularJS Starter

Esse livro aqui não é dos melhores. Em termos teóricos até ajuda, mas parece que o autor pegou o que tem na documentação, jogou no livro e tratou apenas deixando a escrita direcionada para o modelo de livro. Eu li e gostei como ele conceituou, já que no início tinham coisas que não eu sabia o porquê e a forma que ele explicou ficou melhor de entender. Muitos dos códigos que estão no livro estão quebrados, parece que o copy/paste não foi feito da melhor forma. Por um lado foi minha primeira oportunidade em abrir a fazer um fix em um código angularJS escrito por outra pessoa. Pelo preço do livro na versão kindle talvez vale a pena comprar só pra não aprender pelo caminho feliz.

4. ng-book (http://www.ng-book.com/)

É um livro que ainda não li, mas vi que quem leu gostou do livro. Está na minha lista. Aqui

5. Mastering Web Application Development with AngularJS

Esse é o que estou começando a ler. Os comentarios de quem já leu são animais. Parece ser um bom livro. Estou esperando chegar o meu exemplar, pois pela quantidade de página prefiro ler na versão impressa, além de poder usar o marcatexto, escrever no livro, etc. O preço é diferente, $40 doletas e ainda tem IOF + Frete. A versão Kindle tá mais em conta. Assim que terminar de ler posto um review aqui no blog.

Estou com um post em draft com review dos livros que já li. Vou postar em breve e com mais detalhes.

Bom, é isso pessoal. Vou ficando por aqui e espero que tenham gostado da série AngularJS, foi mais de um mês postando e compartilhando com vocês há muito mais coisas sobre o framework (claro) e quem sabe fica para uma outra série mais lá na frente?

Abracos, see ya!!!

SérieAngularJS: Internacionalização com Angular-Translate

Olá Pessoal,

No post de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.

Lets go

O angularJS suporta internacionalização ?

Sim, mas com limitação, e muita até. Como, por exemplo, ele consegue suportar internacionalização para datas, números, mas não suporta internacionalização para o conteúdo da sua aplicação.

E o que faço?

Se você pesquisar na internet pode encontrar alguns frameworks  que ajudam na internacionalização. Eu pesquisei bastante e testei alguns, e o melhor foi esse aqui:

Angular-Translate

http://pascalprecht.github.io/angular-translate/#/guide

Github

https://github.com/PascalPrecht/angular-translate/wiki/Getting-Started#configuring-translateprovider

Pelo seguinte:

  • Fácil de usar;
  • Boa documentação;
  • Comunidade bem ativa;
  • Releases constantes;
  • Bug fixing curto;

O ponto negativo que adiciono é que o autor colocou o nome dele na declaração do uso da API. Acho isso ruim, ‘pascalprecht.translate’. Se a API vira e o Google adota, iai? Certamente eles vão tirar esse nome e deixar algo global. E a migração para o novo nome é fácil?

Outro ponto negativo é a forma de obter o arquivo .min.js É preciso instalar o bower e rodar

bower install angular-translate 

Por que não disponibilizar o .min.js on-line no próprio github?

Para quem usa JSF, por exemplo, está acostumado a ter um arquivo .properties que possui uma key:value  para tradução e o JSF se vira para saber o idioma do browser e faz o translate. Mas com AngularJS é um pouco diferente. Claro que não teremos um arquivo .properties, mas sim um arquivo .js que funciona da mesma forma key:value.

Na prática

Vou considerar que você já tem uma aplicação com Angular e agora quer apenas internacionalizar. Veja os steps:

Passo 1

O que achei ruim, apesar de ser rápido, é instalar o bower para obter o .min.js

Se você tiver o git bash, apenas digite

npm install -g bower 

Dúvida, veja aqui: https://github.com/bower/bower

Passo 2

Após ter instalado o bower vamos gerar o min.js do angular-translate  no git bash

bower install angular-translate

Aguarde terminar a instalação e veja onde está o .min.js Será algo assim:

Xxx\bower_components\angular-translate

Passo 3

Copie o arquivo angular-translate.min.js para o seu projeto. No meu caso eu tenho uma pasta lib somente para js, veja:

angularjsangulartranslatelib

Passo 4

Crie um arquivo que terá a internacionalização, ou seja, que terá o que você gostaria que fosse traduzido (eu chamei de inter.js). O conteúdo é bem simples, veja:

$app.config([‘$translateProvider’, function ($translateProvider) {

  $translateProvider.translations(‘en’, {

    ‘label.question.movie’: ‘What is your favorite movie?’,

    ‘label.title’: ‘Vote in Movie?’,   

  });

  $translateProvider.translations(‘pt’, {

    ‘label.question.movie’: ‘Qual filme você gosta mais?’,

    ‘label.title’: ‘Vote no Filme’   

  });

  $translateProvider.preferredLanguage(‘en’); //temos que dizer qual é a default.

}]);

Passo 5

Após ter criado o arquivo que contém as mensagens de tradução, precisamos dizer ao angular que vamos usar esse cara para isso. No arquivo js que você cria o module, vamos adicionar o translate (no meu caso é o arquivo application.js)

var $app = angular.module(‘app’,[‘ngResource’,’pascalprecht.translate’]);

Passo 6

No meu arquivo index.html preciso carregar o .js do angular-translate. Veja:

<body>

<script src=“js/lib/angular.js”></script>

<script src=“js/lib/angular-resource.js”></script>

<script src=“js/lib/jquery.js”></script>

<script src=“js/lib/angular-translate.min.js”></script>

Outros codigos omitidos aqui

</body>

 Passo 7

Agora vamos chamar as keys que criamos no inter.js  no nosso arquivo .html . Temos várias opções, veja:

Usando Diretivas

<H2 translate=“label.title”></H2>

Usando expression

{{movie.name}}

Passo 8

Salve as alterações, build o projeto e suba.

angularjsvotenomovieapp

Um ponto importante: a tradução não vai ocorrer com base no idioma definido no browser e sim o que você setou como preferido. Infelizmente ainda não tem essa feature. Daí, para que o usuário queira ver aplicação no idioma dele, você terá que colocar algo como a bandeira do país na aplicação, e ao clicar o valor do preferred é alterado.  Na documentação tem um exemplo.

GitHub

https://github.com/camilolopes/workspaceAngularJs

Vou ficando por aqui. Caso queiram ver aplicação movie-vote usando API basta ir ao meu github e fazer clone ou download e executar

Abraços, see ya!!

Entendendo Maven archetypes AngularJS para Java Developers

+

Olá Pessoal,

O post de vou apresentar os archetypes maven que criei com angularJS. Espero que gostem e vejam a diferença de

cada um.

Lets go…

Entendendo os archetypes

Bom, além de responder ao leitor, resolvi fazer um post para explicar cada archetype que criei e a diferença entre eles. Cada um nasceu a partir da necessidade de projetos reais, quando tivemos que fazer só uma POC e não queríamos dar copy/paste em outro projeto, mas sim ter um esqueleto funcionando e com mínimo de trabalho possivel, pois há copy/paste que ter que fazer os ajustes é algo muito estressante. Vamos entender aqui cada um deles:

archetype-webApps-Module

Esse aqui nasceu com objetivo de deixar em aberto o que vai ser usado no front-end, mas o back-end, com o que é básico, já vem configurado. Por exemplo: Hibernate, Spring, Jersey (se for o caso), DBUnit, DAO Generic, Service Generic, etc, mas o front-end fica em aberto para você escolher. Esse archetype atende quando precisamos usar o recurso de módulos (module) do maven, e por default vem com webapps-core que é para back-end e webapps-web para front-end. O principal é conhecido como parent, e no pom.xml dele tem as libs em comum para os dois módulos.

Iai, vai criar um novo projeto e não sabe o que vai ser no front-end e quer usar a estrutura de modules?

Recomendo usar esse archetype.

https://github.com/camilolopes/archetype-webapps-module

archetype-webapps-module-angularjs

Esse aqui tem tudo o que tem no archetype anterior, a diferença é que vem com o angularJS configurado pelo Yeoman tools. Então, se vai começar um projeto com angularJS e separado por modules back/front-end, recomendo usar esse archetype. Claro, considerando que a estrutura do front-end vai seguir o que o Yeoman gera, e já vem com suporte ao twitter boostrap, mas você vai precisar que o bower baixe as dependências, portanto build seu projeto antes via grant.

https://github.com/camilolopes/archetype-webapps-module-angularjs

archetype-webapps-java-angularjs

https://github.com/camilolopes/archetype-webapps-java-angularjs

Esse aqui tem tudo o que os outros archetypes tem em termos de framework, exceto que esse não usam módulos do Maven. É um único projeto JEE, como estamos acostumados. Ele usa o angularjs 1.2.x. e segue uma estrutura simples de organização dos controllers, services e outros JS.

Quando usar?

Quando você precisa criar um projeto JEE com angularjs, mas que não precisa ser separado em módulos e não quer usar o Yeoman. Aqui é a estrutura é bem pura, ou seja, nada do front-end é gerado por ferramentas.

archetype-webapps-java-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-java-angularjs-yeoman

Tem tudo o que o archetype-webapps-java-angularjs tem, a diferença é que o front-end é gerado pelo yeoman com AngularJS 1.0

archetype-webapps-simple-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-simple-angularjs-yeoman

Esse aqui tem tudo que o anterior tem, exceto que não vem com os frameworks Java.

archetype-webapps-simple-angularjs

https://github.com/camilolopes/archetype-webapps-simple-angularjs

Esse aqui é o mais simples archetype. Ele não tem nada de framework java, apenas o AngularJS configurado e a estrutura dos packages para JS. Se você quer testar o angularJS da maneira mais simples, esse é o archetype ideal.

Pronto pessoal. Essa é a lista de archetypes que criei para facilitar a nossa vida com AngularJS. Espero que ajudem também no dia a dia de vocês.

Abracos. See ya!!

Série AngularJS: Maven archetype com AngularJS e Yeoman

 

Olá Pessoal,

Iai vai desenvolver sua aplicação com AngularJS e Java, mas vai no archetype do maven e não tem nada? Já era, agora tem rs. Acabei de criarum archetype Maven com AngularJS + Yeoman

Lets…

Overview 


O motivo de criar esse archetype é que tenho trabalhado bastante nos últimos 4 meses com AngularJS e back-end Java e tem surgido novos projetos, alguns pequenos, outros médio porte, e ter que fazer setup toda hora é meio chato, heim? Então, para unir o útil ao agradável, resolvi um problema aqui no projeto para todos os projetos que vão trabalhar usando módulos no maven e o back-end será Java com front-end AngularJS, para evitar aquele tempo gasto em setup (mesmo que seja uma hora, já compensa). Eu já fiz outros archetypes e estão no meu github.

O que tem de legal nesse archetype?

Bem, o que tem de legal é o seguinte:

  • Hibernate 4.x já vem configurado com o Spring;
  • Spring Core 3.x;
  • MySql 5.x
  • DBUnit (configurado e pronto pra sair usando);
  • DAO Generic e Service Generic;
  • Jersey 1.x
  • AngularJS 1.0.x
  • Yeoman Tools
  • Twitter Bootstrap
  • Flyway (para db migration – opcional a configuração)

Só isso que vem de legal, rs. No AngularJs eu optei pela versão estável ao invés da Release candidate.

Como usar?

Simples. Para não repetir aqui no blog o que já escrevi no readme.md do projeto, siga os passos da instalação do archetype no seu repositório maven local.

Instalado. E agora?

Vamos criar um projeto e fazer uns ajustes como com qualquer template que vem com informações default e precisam ser ajustadas para atender ao nosso projeto.

Passo 1

Crie um novo projeto maven e escolha a opção All Catalogs e em seguida digite br. para filtrar e aparecer o archetype que acabou de instalar.

archetypeangularjscatalog

Passo 2

Escolha o archetype e preencha com as informações do seu projeto.

Passo 3

Clique em finish.

Passo 4

Seu projeto vai estar quebrado, conforme a imagem a seguir

archetypeangularjsprojectfailure

Passo 5

Abra o pom.xml do projeto webapps-web e remova a dependência webapps-core que tem configurações default do archetype

archetypewebappscoreangularjsremoved

Passo 6

Adicione a dependência do seu projeto

archetypeangularjswebappscore

Passo 7

Seu projeto deve estar assim agora:

archetypeangularjsprojectresult

Dentro de webapps-web/webapps temos a pasta apps e toda a estrutura gerada pelo Yeoman.

Passo 8

Vá na raiz do projeto e execute:

mvn tomcat:run

Aplicação deve subir agora acesse: http://localhost:8080/webapps-web/

Pronto, agora é só usar.

Claro que você vai precisar especificar as informações de banco de dados, estrutura do seu packages, etc. Vou assumir que você já conhece os frameworks(spring, hibernate, jersey etc) que o archetype aborda e sabe alterar, afinal de contas você não vai criar um projeto com Spring se não sabe mexer com o framework, concorda? Para facilitar, deixei comentários nos arquivos .xml, onde você deve alterar.

Download Archetype Maven AngularJS 

https://github.com/camilolopes/archetype-webapps-module-angularjs

Em breve stou subindo outros archetypes para projetos pequenos, aguardem mais alguns dias :D.  Se quiser ser avisado assim que publicar pode me acompanhar no github ou assinar o blog. 

Abracos. Vou ficando por aqui.