Countdown

Final Countdown

Faltam dias. Ou segundos.

quarta-feira, 27 de maio de 2015

#23) Banco de Dados MySQL

Olá!

Hoje abordaremos o assunto Banco de Dados. Atualmente, ouvimos falar o tempo todo sobre MySQL, SQL, Database, etc no ambiente de desenvolvimento de softwares, desde pequenas até grandes empresas.
 
A verdade é que a computação se encarrega de uma tarefa crucial que é o armazenamento de dados e da criação de estruturas cada vez mais eficientes para se gerenciá-las, minimizando o custo de memória para gravar estes dados e também tornando os algoritmos de manipulação de dados mais velozes.

"Bancos de dados são coleções organizadas de dados que se relacionam de forma a criar algum sentido (Informação) e dar mais eficiência durante uma pesquisa ou estudo.São de vital importância para empresas e há duas décadas se tornaram a principal peça dos sistemas de informação. Normalmente existem por vários anos sem alterações em sua estrutura."

O MySQL é um produto da Sun, é um dos sistemas gerenciadores de banco de dados mais usados e indicados mundialmente pela sua alta performance e por ser opensource.

Independente do banco de dados usado, a linguagem padrão para a manipulação de dados é a SQL (Structured Query Language). Existem até mesmo frameworks de alto nível para a criação de banco de dados, mas estas ferramentas não serão abordadas neste tópico.

Manipulação de Banco de Dados

Qualquer seja o Sistema Gerenciador de Banco de Dados usado, temos quatro etapas básicas para criar o ambiente de manipulação de banco de dados:

  1. A criação do banco de dados.
  2. A inclusão do driver a ser usado para a conexão ao banco de dados;
  3. A definição do endereço (URL) da localização do banco de dados que será incluído na aplicação.
  4. A criação da aplicação java propriamente dita para acessar os dados.
Não é um procedimento de 7 cabeças, mas é um tanto complicado. O primeiro passo é razoável por ser bem documentado na internet. O quarto é o emprego do banco de dados no software, portanto podemos considerar como trivial. Já o segundo requer um pouco mais de atenção e será abordado neste post. Já o terceiro nem será abordado aqui. Apenas utilizaremos o banco de dados local.

1. Instalação do MySQL

Para instalar o MySQL é preciso basicamente acessar o site oficial, baixar e instalar o programa:

Em caso de dúvidas, você pode consultar a referência.

Há duas maneiras básicas de se utilizar o MySQL. A primeira é através do Prompt de Comando e a segunda é através do NetBeans. Como trabalhamos com a ferramente NetBeans neste blog, vamos optar por utilizá-la devido à maior familiaridade do leitor.

Abra o NetBeans e registre um novo servidor MySQL, na aba Serviços, colocando o nome do host a ser usado, usuário administrador e senha, conforme a figura abaixo:

Depois deste processo, teremos um novo item Servidor MySQL, contendo os bancos de dados atuais armazenados no MySQL, conforme a figura abaixo. Clique com o botão da direita e escolha conectar, para iniciar o serviço.


Muito bem! Clique novamente com o botão direito no Servidor MySQL e crie um novo banco de dados. Depois disso, clique novamente com a direita e se conecte a esse novo banco de dados. Um novo item será adicionado:


Agora vá na pasta Tabelas e escolha a opção Executar Comando. Outra alternativa é criar diretamente a Tabela, selecionando a opção:

Agora, vamos escrever um pequeno comando de criação de tabela, para assimilar a sintaxe dos comandos do MySQL. Poderíamos executar diretamente do Prompt de Comando, se quiséssemos. Poderíamos também usar a opção "Criar Tabela" e usar a interface gráfica do MySQL, mas vamos usar o meio-termo desta vez:


O comando basicamente cria três variáveis: login e senha, strings de tamanho 35, e uma variável n inteira, que por ser primary key, serve como uma coluna base para identificar os demais parâmetros, ou seja, é uma espécie de index que serve como referência. Já auto_increment impede a repetição em tabelas, criando um novo campo para cada item adicionado.

Note que eu já executei o comando e que novos itens foram adicionados ao nosso banco de dados, exibidos na aba Serviços, em nosso banco de dados. Clique em exibir dados, no item da Tabela. Será possível agora visualizar a tabela e adicionar a ela novos elementos, como mostrado na imagem abaixo:


Adicionando alguns elementos, teremos o seguinte resultado:


Agora já temos a ferramenta básica do MySQL implementada e pronta para o uso, para a adição de informações e elementos (o uso propriamente dito do banco de dados)? NÃO. Ainda faltam mais alguns procedimentos. Confesso que achei o procedimento um tanto penoso, mas vamos em frente.

2. Inclusão do Driver

Para acessar um banco de dados por meio de Java é necessário carregar um driver específico, que nada mais é que uma classe em Java. 

Procure na aba Serviços se o Driver para o MySQL já está devidamente instalado:


Caso contrário, acesse o site do MySQL (link abaixo) e baixe o conector para Java:

Não satisfeito com isso, MySQL vai simplesmente te humilhar ao requisitar a configuração de ClassPath e adição do arquivo .jar ao projeto. Simplesmente um processo vergonhoso para uma ferramenta tão conhecida mundialmente. É tão deprimente quanto comprar um carro sem as rodas. Pior ainda é tentar executar o instalador e não conseguir. Seria como abrir o capô e ver que falta o motor ¬¬.

A paciência é a maior das virtudes. Acesse o link abaixo e baixe essa #####:

Siga o procedimento do site da Referência:

Depois de instalar o driver no Banco de Dados, vamos adicioná-lo ao projeto. Acessamos as configurações do projeto e depois vamos até a aba biblioteca:
Na aba biblioteca, adicionamos ao projeto o arquivo .jar que baixamos no site, o mysql-connector-java-x.x.x-bin.jar:



Agora basta adicionar o "include" do driver que estamos utilizando em nosso código:
Class.forName("pacote.nome-do-driver")
Class.forName("com.mysql.jdbc.Driver")

3. A conexão ao Banco de Dados

Sei que este post está um saco. Portanto, vamos escrever algum código para suavizar essa tortura sem fim. É recomendável criar uma classe própria para manipular o Banco de Dados ou mesmo para estabelecer a conexão com ele. No meu caso, criei a classe BancoDados.java:

package code;
import java.sql.*;
import javax.swing.*;

public class BancoDados 
{
    final String DRIVER = "com.mysql.jdbc.Driver";
    final String URL = "jdbc:mysql://localhost:3306/players";
    
    public void conecta(){
        try{
            Class.forName(DRIVER);
            Connection connection = DriverManager.getConnection(URL,"LOGIN","SENHA");
            JOptionPane.showMessageDialog(null, "Conexao realizada com sucesso");
            connection.close();
        }catch(SQLException erro){}
        catch(ClassNotFoundException erro){}
    }
}
Lembre de trocar o nome do banco de dados, o login e a senha para realizar a correta conexão. Não perca a fé! Acredite em si mesmo! Se você tiver feito tudo certo até aqui, um miraculoso JPanel irá informar o seu sucesso, indicando que você está próximo para finalmente começar a parte mais divertida: Gerenciar o Banco de Dados, fazer o nosso programinha : )

Se você não conseguiu realizar alguma etapa, procure ajuda na referências, nos comentários deste post ou tente entrar em contato comigo.

No próximo post entraremos no item 4 do uso do Banco de Dados. Vamos enfim utilizar o que preparamos aqui com tanto cuidado e sacrifício.

Boa noite!

Referências

Instalação do MySQL:

Instalação do Driver:

Comandos de Tabela MySQL:

segunda-feira, 25 de maio de 2015

#22) Arquivos XML em Java

Boa noite!

Hoje apresento a vocês o formato de arquivo .xml (eXtensible Markup Language), o qual é muito utilizado para o armazenamento das principais configurações de software e informações diversas, desde variáveis do programa até informações sobre os diretórios de arquivos utilizados no projeto, como por exemplo, o diretório de um arquivo de imagens.

Seu emprego se deve à sua simplicidade e universalidade (possui infraestrutura única que pode ser usada por diversas linguagens de programação). É muito usada par ao compartilhamento de informações através da internet e tem forte semelhança com a estrutura da linguagem HTML.


Exemplo de arquivo .xml.

Seu conteúdo pode ser editado como um documento de texto simples, igual ao formato .html, tornando-o ainda mais interessante. Além disso, até os comentários seguem o mesmo padrão de HTML: (<!--comentário-->).

Arquivo .xml gerado pelo projeto Bizuca.

---//---


Vamos agora trabalhar em um pequeno exemplo de como implementar uma classe geradora e leitora de arquivos .xml para gerenciar as informações de nosso programa.


--- [Estrutura da Classe] ---

Os principais métodos da classe que manipulam o arquivo .xml são os seguintes:

---> loadXML()
Método que verifica a existência do arquivo XML. Caso exista, lê o arquivo. Caso contrário, o cria usando valores default.Em Game.java também há invocações diretas para gerar o arquivo .xml, salvando alterações das configurações do jogo.

------> lerXml(); 
Faz o mapeamento das configurações descritas no arquivo .xml e as variáveis do objeto da classe Config.java. Em outras palavras, carrega as configurações do arquivo e as atribui devidamente.

------> gerarXml();
Cria um documento com as informações do programa (variáveis da classe Config.java) e chama o conversor do documento para .xml. Depois de realizada a operação, chama o método para salvar o arquivo final.

---------> converter();
A partir do documento recebido como parâmetro, faz a conversão ao formato .xml.

---------> salvarArquivo();
Salva o arquivo .xml gerado.

--- [Implementação] ---


Primeiramente, vamos importar as bibliotecas necessárias. Vamos usar as API's nativas do JDK para isso, de modo que não é necessário adicionar bibliotecas externas:

import org.w3c.dom.*;
import org.xml.sax.*;
import javax.xml.parsers.*;
import javax.xml.transform.*;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;


Como queremos um objeto da classe de configurações global, vamos implementá-lo segundo as técnicas aprendidas no post passado. Logo em seguida, já podemos declarar as variáveis do arquivo de configurações, bem como definir sua inicialização padrão (caso não seja possível carregar o arquivo .xml):

public class Config 
{
    private static Config instance;
    public static Config getInstance(){
        if (instance == null) instance = new Config();
        return instance;
    }
    
    // Variáveis diversas
   
    public String title = "Web Bizuca";
    public int HTela = 1280, VTela = 720;
    
    //...

---[ loadXML() ]---

Então, agora vamos criar um método intermediário entre a classe de configurações e a classe que faz uso destas configurações, que deverá ser invocado no escopo da classe que faz uso destas configurações:

    private static File file = new File("src\\config.xml");

    public void loadXML()
    {
        try{
            if (file.exists())
                lerXml();
            else gerarXml();
        } catch(Exception e){}
    }

---[ gerarXML() ]---

Se o arquivo .xml não for encontrado, o procedimento é utilizar os valores padrão de variável atribuídos no próprio escopo da classe. A partir destes dados, é gerado um novo arquivo .xml atrave´s do método gerarXml(). O mesmo método é empregado pode ser empregado na classe de utilização para guardar alterações de modificação das configurações do programa. Esse método tem a seguinte estrutura:

[ funcionamento ]

-> Deleta o arquivo .xml, caso ele exista

-> Cria um novo documento e adiciona Elementos (Tags) a ele:
Element WindowTitle = doc.createElement("Title");

-> A cada Tag, pode ser atribuído um conteúdo interno a ele:
WindowTitle.setTextContent("Web Bizuca");

-> Cada Tag filha deve ser depois adicionada a uma Tag pai ou ao próprio documento:
subTagWindowConfig.appendChild(WindowTitle);

doc.appendChild(tagConfig);

-> Depois de criado o documento, é preciso convertê-lo ao formato .xml, que é feito usando a função converter()

-> O arquivo .xml editado é salvo

[ funcionamento ]


O código exemplo ilustrativo é mostrado abaixo:

public void gerarXml() throws Exception 
    {
        if (file.exists()) file.delete();
        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
        DocumentBuilder db = dbf.newDocumentBuilder();
        Document doc = db.newDocument();
        
        Element tagConfig = doc.createElement("Config");
        
            Element subTagWindowConfig = doc.createElement("Config_Window");
        
                Element WindowTitle = doc.createElement("Title");
                Element WindowWidth = doc.createElement("Window_Width");
                Element WindowHeigth = doc.createElement("Window_Height");
                
                WindowTitle.setTextContent("Web Bizuca");
                WindowWidth.setTextContent(""+HTela);
                WindowHeigth.setTextContent(""+VTela);
    
                subTagWindowConfig.appendChild(WindowTitle);
                subTagWindowConfig.appendChild(WindowWidth);
                subTagWindowConfig.appendChild(WindowHeigth);
                 
            tagConfig.appendChild(subTagWindowConfig);

        doc.appendChild(tagConfig);
        
        String arquivo = converter(doc);
        salvarArquivo(arquivo);
    }

---[ converter() ]---

Basicamente, converte o documento que é recebido como parâmetro para o formato padrão de um arquivo .xml, cujo conteúdo é retornado em forma de string.

    private static String converter(Document document) throws TransformerException {
        Transformer transformer
                = TransformerFactory.newInstance().newTransformer();

        transformer.setOutputProperty(OutputKeys.INDENT, "yes");

        StreamResult result = new StreamResult(new StringWriter());
        DOMSource source = new DOMSource(document);
        transformer.transform(source, result);

        String xmlString = result.getWriter().toString();
        return xmlString;
    }

[ lerXml() ]

Abre o arquivo .xml e, a partir da identificação das Tags, faz a leitura dos dados do arquivo e atribui seus valores às variáveis da classe de configurações, como o exemplo abaixo:

 private static void lerXml() throws Exception, SAXException, TransformerException 
    {
        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
        DocumentBuilder db = dbf.newDocumentBuilder();
        Document doc = db.parse(new InputSource(file.toString()));
        
        Element raiz = doc.getDocumentElement();
        
        NodeList endList = raiz.getElementsByTagName("Config_Window");
        Element endElement = (Element) endList.item(0);
        
        instance.title = getChildTagValue(endElement, "Title");
        instance.HTela = Integer.parseInt(getChildTagValue(endElement,"Window_Width"));
        instance.VTela = Integer.parseInt(getChildTagValue(endElement,"Window_Height"));
        
    }

[ getChildTagValue() ]

Faz a busca do valor de determinada Tag do arquivo .xml, retornando o seu valor:

       public static String getChildTagValue(Element elem, String tagName) throws Exception {
            NodeList children = elem.getElementsByTagName(tagName);
            String result = null;
            if (children == null)
                return result;
            Element child = (Element) children.item(0);
            if (child == null) 
                return result;
            result = child.getTextContent();
            return result;
        }

--- [Conclusão] ---


Fizemos neste post a geração e leitura manual das informações de um arquivo .xml, o que pode ser um processo um tanto penoso em um projeto grande. Poderíamos ter usado Arrays / ArrayLists para gravar estas informações, porém seria mais difícil saber a finalidade de cada uma das variáveis se não houver uma boa documentação sobre elas, de forma que por finalidades didáticas preferimos nomear uma a uma as variáveis de configuração.

Qualquer dúvida, acesse uma das referências ou consulte a classe Config.java do projeto Web Bizuca, disponibilizado no link abaixo:
https://github.com/ftuyama/Web-Bizuca


Referências:

http://pt.wikipedia.org/wiki/XML
http://www.mballem.com/post/manipulando-arquivo-xml-parte-i-api-nativa/

sexta-feira, 22 de maio de 2015

#21) Singleton - Objeto "global" em Java

Olá!

Hoje venho rapidamente mostrar um recurso que descobri recentemente para criar um objeto global em Java. Um objeto que possa ser declarado em uma determinada classe do programa e reaproveitado em outras classes do mesmo projeto, utilizando para isso o recurso static.  

Assim, se quisermos reutilizar um objeto A em uma classe diferente, declaramos um objeto qualquer B e fazemos o objeto B receber o conteúdo de A através do método getInstance(). Se A ainda não tiver sido declarado, simplesmente o criamos.

Observe que em momento algum criamos um novo objeto B, de modo que sua declaração funciona de modo similar ao tipo ponteiro da linguagem C.

Abaixo, temos um exemplo ilustrativo:

public class Sessao {
    // Variável estática que conterá a instancia da classe
    private static Sessao instance;

    // Construtor privado (suprime o construtor público padrão).
    private Sessao() {}

    // Método público estático de acesso único ao objeto!
    public static Sessao getInstance() {
        if (instance == null)
            instance = new Sessao();
        return instance;
    }

    /*
    Pode criar outros métodos que precise aqui, como getters e setters.
    */
}
Sessao sessao = Sessao.getInstance();
// Aqui popula os atributos da sessão que você irá utilizar

Assim, o objeto sessao receberá o conteúdo do objeto instance, da classe Sessao. Poderíamos fazer:

Sessao sessaoA = Sessao.getInstance();
Sessao sessaoB = Sessao.getInstance();
Sessao sessaoC = Sessao.getInstance();

De modo que todos os objetos sessaoA, sessaoB e sessaoC se referem na verdade ao mesmo objeto estático, como faria um ponteiro. Note que poderíamos criar um objeto de Sessao diferente simplesmente fazendo:

Sessao sessao = new Sessao();


Esse conceito parece bem bobinho, mas é uma solução genial para grandes projetos, como por exemplo o Jogo Bizuca.


Referência:
http://pt.stackoverflow.com/questions/54588/como-criar-manter-variavel-global-em-java-para-login

quarta-feira, 20 de maio de 2015

#20) Junit, uma ferramenta para testes

Olá!

Junit é uma framework com suporte à criação de testes unitários automatizados para a linguagem Java. Antes de introduzi-lo, vamos mostrar o conceito de Testes unitários e a sua relevância:

Teste unitário é uma modalidade de teste que tem como objetivo testar pequenos componentes do projeto, as suas unidades lógicas básicas.

Desta forma, há uma série de vantagens, tais como:

  • Prevenção de BUG's no projeto, indicando erros a serem corrigidos.
  • Maior confiabilidade no código, sempre colocado à prova.
  • Serve como um requisito de projeto, a ser cumprido.
  • Prevenção de grandes erros em um projeto que nunca foi testado, evitando o dispêndio de tempo para se encontrar onde se localizam os erros do software.

O ideal é implementar uma bancada de testes para cada tarefa do projeto, de modo que os testes possam ser realizados juntamente com o processo de codificação.

mpjuiiujfig02.jpg
Processo de testes unitários em um projeto.


Inicializando o Junit

Para utilizar essa ferramenta, é necessário baixar o plugin do Junit para a IDE utilizada (Netbeans / Eclipse). No caso do Netbeans, podemos baixar diretamente da própria IDE, conforme o procedimento abaixo:

Primeiro, vamos decidir para qual classe desejamos criar a bancada de testes. Em seguida, acessamos em Ferramentas a opção "Criar/ Atualizar Testes", usando o Junit.



Caso a framework não tenha sido instalada, uma janela de instalação será aberta. Depois de devidamente instalada, uma nova classe de testes terá sido criada:


Observe que o código é aberto (permitindo sua modificação) e é gerado automaticamente, economizando bastante tempo de codificação.

Na classe criada, temos um método especial específico para realizar os testes:

assertEquals(expResult, result, delta);

Em que expResult é o resultado esperado para o retorno da classe, result é o resultado obtido pelo retorno da classe e delta é a tolerância para o teste de igualdade.

O método para o teste tem a seguinte estrutura básica:

    @Test
    public void testRaiz() {
        Bhaskara B = new Bhaskara();
        float raiz = B.raiz(1,2,1);
        assertEquals(-1.0, raiz , 0.1);
        System.out.println("raiz = "+raiz);
    }

Agora basta testar o arquivo:



O resultado te informa a porcentagem de testes corretos e o tempo de execução total, resultados extremamente interessantes e úteis para um projeto, permitindo otimizar o código e corrigir eventuais bugs no mesmo:



Podemos criar múltiplas funções de teste e depois testá-las simultaneamente:

Lembrando que nossa função de extrair a raiz a partir da fórmula de Bháskara só contabiliza uma raiz, de modo que o resultado do testRaiz3() deverá ser falho:


É possível ver exatamente qual teste falhou e a linha de código que gerou aquele resultado falho, de modo a facilitar que o programador encontre o erro lógico de seu código e o corrija o quanto antes:



Métodos de teste do Junit

Temos vários métodos de teste da framework Junit. Abaixo, indicamos alguns principais:

  1. assertEquals (a, b, delta);  // Verifica a igualdade a = b com tolerância delta ( b - delta < a < b + delta).
  2. assertTrue( a>b );  assertFalse( a==0 ); // Verifica uma dada condição.
  3. public void DISABLED_teste() {...}   // Desativa um determinado teste.
  4. // Testes de pertinência para um ArrayList:

  // Nossa classe
   public void adicionarPalavra(){
        palavras.add("palavra");
    }
   // Classe de testes
    public void testAdicionarPalavra(){
        operacao.adicionarPalavra();
        assertTrue(NewClass.palavras.contain("palavras"));
    }


Um último recurso que trago como bônus é o requisito de teste usando um tempo limite de execução, indicando falha caso o teste demore um tempo superior ao desejado. Abaixo, temos a implementação deste método usando Threads, como já explicado em posts passados deste blog:

    /**
     * Test of raiz method, of class Bhaskara.
     */
    @Test
    public void testRaiz() throws InterruptedException 
    {
        Thread testThread = new Thread(){
            public void run(){
                raiz = B.raiz(1, 2, 1);
            }
        };
        
        testThread.start();
        Thread.sleep((long) 1); // Tempo desejado
        testThread.interrupt();
        
        if (testThread.isInterrupted())
            fail ("demorado demais");
        
        assertEquals(-1.0, B.raiz(1, 2, 1) , 0.1);
    }

Apenas para esclarecer as notações do Junit (especialmente do código padrão gerado assim que criamos um novo pacote de testes), vou deixar um pequeno glossário abaixo, retirado de uma das referências no final deste post:

Como demonstrado neste tutorial, um dos principais aprimoramentos no JUnit4 é o seu suporte para anotações. No JUnit 4 você agora pode usar anotações para fazer o seguinte:
  • Identificar um teste usando a anotação @Test ao invés de uma convenção de nomeação
  • Identificar os métodos setUp e tearDown com as anotações @Before e @After
  • Identificar os métodos setUp e tearDown que se aplicam à toda a classe de teste. Métodos anotados com @BeforeClass são executados somente uma vez, antes que quaisquer métodos de teste na classe sejam executados. Métodos anotados com @AfterClass também são executados somente uma vez, após todos os métodos de teste serem finalizados.
  • Identificar exceções esperadas
  • Identificar testes que deveriam ser ignorados usando a anotação @Ignore
  • Especificar um parâmetro de time-out para um teste

Assim concluímos o estudo da framework Junit, de modo que agora estamos aptos a testar futuros projetos que vamos desenvolver no futuro.


Referências:
http://www.devmedia.com.br/junit-implementando-testes-unitarios-em-java-parte-i/1432
http://pt.slideshare.net/JudsonMeloBandeira/junit-uma-ferramenta-para-testes-passo-a-passo
https://netbeans.org/kb/docs/java/junit-intro_pt_BR.html

#19) PhoneGap e Aplicações Mobile [Parte 3]



Olá novamente galera!


Hoje iremos abordar o tópico mais importante sobre o PhoneGap, que é a programação do conteúdo do nosso aplicativo, em HTML.

 Aprenderemos a criar um protótipo de aplicação, a projetá-la propriamente dito e também a simular o nosso projeto em diversos dispositivos móveis através do próprio Desktop.

Protótipo

Um programador em HTML pode muito bem atacar o problema diretamente, codificando a estrutura do aplicativo, mas veremos que é possível criar protótipos com ferramentas disponíveis na Web, de forma a predefinir o que iremos implementar em nosso código.

Neste site, temos 20 indicações para a prototipagem (wireframing) de aplicações mobile:  http://mashable.com/2013/04/02/wireframing-tools-mobile/

Para este tutorial, escolhi arbitrariamente o MockFlow: http://www.mockflow.com.



Não, o protótipo não pode ser convertido em um arquivo HTML, mas nos ajuda a organizar nossas ideias antes de colocá-las na prática, como um esboço do nosso programa.

O design gráfico

"Como o HTML 5 fornece muita liberdade para o desenvolvedor construir interfaces, muitas vezes fica difícil adequar esta interface aos padrões. Existem frameworks que ajudam os desenvolvedores a se adequarem a esses diferentes padrões de interfaces que existem.

Dois desses frameworks são o Ionic e o Ratchet. O Ratchet é o mais simples deles bastando utilizar as suas classes para que a nossa interface seja formatada."

Leia mais em: Projetando e criando Aplicativos para Dispositivos Móveis http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671#ixzz3a8qQysbl


Seguindo os passos do mestre, vamos baixar o Ratchet, conforme a imagem abaixo:

Baixando o Ratchet para utilizarmos no nosso projeto

Basta agora descompactar o arquivo .zip e copiar a pasta "dist" para o diretório [www] do nosso projeto, conforme demonstrado no site do devmedia.

Vamos testar o poder desta fabulosa criatura? Vamos usar o próprio código do site do Ratchet para testar o seu potencial. Substitua o código index.html do seu projeto por este abaixo:

------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://goratchet.com">
              <strong>Ratchet documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
              <strong>Ratchet Google group</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://twitter.com/goratchet">
              <strong>Ratchet on Twitter</strong>
            </a>
          </li>
        </ul>
      </div>
    </div>

  </body>
</html>
------------------------------------------------------------------------------------------------
Código HTML

Abra o aplicativo do PhoneGap em seu celular (Aquele que você baixou pela loja virtual, lembra?), insira o número do servidor disponibilizado pelo seu Desktop, conforme explicado na parte 2 deste tópico. Você também pode abrir o arquivo index.html no seu navegador Browser.

Uma forma alternativa de testar o design gráfico do seu projeto é utilizando o site MobileTest.me, que permite prever a visualização do site em diversos aplicativos móveis: http://mobiletest.me/

Enfim, você deverá ver uma formatação deplorável para o seu aplicativo. Sentirá vontade de chorar e desistir desse projeto, depois de tudo o que aprendeu até agora.



Mas acalme-se, eu tenho (ou melhor, Ratchet tem) as palavras mágicas para salvar o visual do seu projeto. O include da framework Ratchet pode ser feito logo após a cláusula <head>, adicionando:

<link href="dist/css/ratchet.css" rel="stylesheet"> 
 <script src="dist/js/ratchet.js"></script>


Muito bom! O seu aplicativo agora deve ter ficado muito show!


"Existem ainda diversas outras classes que podemos utilizar e aprimorar ainda mais nossa aplicação HTML 5 sem nenhum esforço adicional. Essas classes podem ser encontradas na documentação do Ratchet e são exemplificadas na página http://goratchet.com/components/.
Para transformarmos nosso aplicativo HTML em um aplicativo híbrido precisamos adicionar algumas configurações ao código, essas e muitas outras informações são encontradas na página do Ratchet."

Leia mais em: Projetando e criando Aplicativos para Dispositivos Móveis http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671#ixzz3a8v9ZQU9

O código

Que tal enfim construir uma aplicação para PhoneGap?

Comecei tornando o código um pouco mais enxuto, abrindo espaço para adicionar novas estruturas em nosso programa HTML:


------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <link href="dist/css/ratchet.css" rel="stylesheet">
        <script src="dist/js/ratchet.js"></script>
        <meta charset="utf-8">
        <title>Ratchet template page</title>

        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

    </head>
    <body>

        <header class="bar bar-nav">
            <h1 class="title">Meu Aplicativo</h1>
        </header>

        <div class="content">
            <p class="content-padded">Bem vindo ao meu primeiro Projeto.</p>

            <div class="card">
                <ul class="table-view">
                    <li class="table-view-cell">
                        <a class="push-right" href="http://javadivertido.blogspot.com.br">
                            <strong>Java Divertido</strong>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </body>
</html>
------------------------------------------------------------------------------------------------
Código HTML enxuto.

Vamos agora adicionar um formulário para a inserção de dados. Observe que o código html é bem intuitivo e parecido com o estilo de programação a que estamos acostumados:


------------------------------------------------------------------------------------------------
(...)
        <p class="content-padded">Bem vindo ao meu primeiro Projeto.</p>

            <form name="calculo" class="form input-group">
                <label for="X">X:</label>
                <input type="text" name="X" placeholder="Digite X:"/><br />

                <label for="Y">Y:</label> 
                <input type="text" name="Y" placeholder="Digite Y"/><br /> 

                <input class="btn" type="button" value="Calcular" onClick="calcular()" />
                
                <label for="R">Resultado:</label>
                <input type="text" name="resul" size="5" readonly />
                
                <label for="M">Multiplicação:</label>
                <div id="resultado"></div>
                
            </form>

            <div class="card">
(...)
------------------------------------------------------------------------------------------------
Código HTML adicionado.

Tendo a estrutura (o corpo do nosso programa) em HTML, basta criarmos agora um arquivo .js (javascript) e programarmos a função que será executada ao clicar o botão, responsável por dividir e multiplicar, exibindo depois a resposta em nosso aplicativo:

Eu criei o arquivo na pasta [js], por isso, no include deste arquivo, realizado na parte <head> do arquivo html, teremos:

<script src="js/calculo.js"></script>

------------------------------------------------------------------------------------------------
function calcular(){
    
    var X = Number(document.calculo.X.value);
    var Y = Number(document.calculo.Y.value);
    
    var Div = X/Y;
    var resultado = 'A divisão deu ' + Div;
    var mult = 'A multiplicação deu ' + X*Y +'</br></br>';
  
    document.calculo.resul.value = resultado;
    document.getElementById('resultado').innerHTML = mult;
}
------------------------------------------------------------------------------------------------
Código Javascript adicionado.

Testando o nosso programa no site http://mobiletest.me/
(Lembrando que o endereço a ser inserido é algo do tipo http://192.168.0.19:3000)




Se você quiser testar o aplicativo em seu próprio dispositivo Android, disponibilizei o link do App para download, logo abaixo:



Sentiu um pouco do poder desta ferramenta? Assim encerramos com sucesso a parte 3 deste pequeno tutorial sobre o PhoneGap. Espero que faça bom proveito de seus novos superpoderes.

Conclusão

Depois desta série de 3 posts sobre a framework PhoneGap, considere-se apto para iniciar o desenvolvimento do seu aplicativo. Você já conta com as ferramentas básicas para trabalhar, conhecimento da linguagem de programação empregada, tem informações sobre como melhorar o design gráfico e aprimorar o seu conhecimento.

Agora está na hora da diversão! @javadivertido


Referências:

[PhoneGap - Vídeo Aulas]