Criando aplicativos de celular com HTML5+JS

[AceStryker 25]

 

 

Prefácil

1. Introdução
   
2. A interface
   
3. Banco de dados
   
4. Finalizando source
   
5. PhoneGap
   
6. Ultimas Observações
   
7. Downloads e créditos
   

 

 

1.Introdução

 

Hoje vou mostrar a vocês uma nova (relativamente) tecnologia que converte aplicativos web em aplicativos mobile, usaremos basicamente 4 ferramentos, e criaremos no final um chat em tempo real para iOS, Windows Phone, Android, BlackBerry entre outros com o mesmo código

 

Usaremos:

• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  - Para converter os nossos códigos em HTML5 e JavaScript para aplicativos mobile
  
• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  - Para funções úteis mobile
  
• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  - Para a interface gráfica
  
• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  - Para o banco de dados do chat
  

 

2.À Interface!

 

Então, vamos por a mão na massa, primeiramente caso você não queira pagar o Codiqa pra ter uma conta decente, existe uma janela na página do jQueryMobile do Codiqa simplificada, eu usava ela quando não pagava, como quero que não precise pagar pra criar seus apps, farei o tutorial utlilzando ela, primeiro abra o site do jQuery Mobile(

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) e vá em:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

E faça sua interface, a minha ficou assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora clique em Download HTML

 

 

Você receberá um arquivo zip contendo 3 arquivos:

• app.html
  
• my.css
  
• my.js
  

 

Extraia o my.js e o app.html onde quiser, renomeie o app.html para index. e abra os dois no seu editor padrão, estarão assim(PS: Eu já criei minha página sobre):

Index.html

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

my.js

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

3.O Banco de Dados

 

OK, nossa interface esta pronta!Agora vamos começar a mexer com o banco de dados Firebase, para isso entre no site do Firebase(

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) e crie uma conta, e criee um banco de dados:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora você volta pro seu código HTML e adicione em baixo de :

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Prontooo, agora já podemos usar o Firebase, então vamos começar a programação em JavaScript, adicione o no evento OnLoad sua função loadChat() assim:

 

antigo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Novo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora no my.js vamos programar :D:D:D:D:D, adicionei comentários em todas as linhas pra você entender

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Modifique o botão de SendMessage para

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

4.Finalizando source

 

Para o PhoneGap conseguir compilar o seu aplicativo voce precisa criar um arquivo XML com o nome de config.xml, veja como fiz o meu

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

5.PhoneGap

 

Tudo esta pronto para a compilação do programa, para podermos compilar precisamos fazer uma ultima coisa, juntar esses 3 arquivos em um zip só, e depois de fazer isso, crie uma conta no PhoneGap e faça o upload do seu zip, quando fizer aparecerá uma tela assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

E quando tudo acabar ficará assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Pronto. esta compilado e pronto para ser instalado

 

6.Ultimas observações

 

Você deve estar se perguntando porque deu erro no iOS, isso é normal e ocorre porque você precisa de uma key fornecida pela AppStore quando você ganha uma conta de desenvolvedor, sem ela é impossível compilar, o QR code já redireciona para o download direto do arquivo na versão de seu OS mobile.

 

Essa mesma versão do app se for colocado num host servirá como versão mobile web normalmente, algumas versões de Android podem não rodar muito bem o aplicativo por vários motivos.Se quiser algo mais nativo em seu aplicativo use o Cordova(Apache Foundation)

 

7.Downloads e créditos

 

App.zip:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Scan:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Créditos: 100% AceStryker

 

 

Fixado: EXPL01T3R - 21-04

[☢|EXPL01T3R|☣ 46]

hummmmmmm olha o Ubuntu dele uhsauhsa

Muito bom o tutorial não conhecia esses link , o APP parece ter ficado bem legal e útil parabens

[chen1810 0]

Realmente ficou fodah piter , eu mesmo nem sabia que dava para converter o html5 para aplicativo e.e , vlw por criar o tópico. :yes:

[HenriPetain 2]

 

 

Ótimo tutorial em cores ficou muito bonito facil de enteder parabéns :star: