covitalMembro VIP 
Idade : 27
Posts : 2107
Créditos : 0
Respeito : 18
God damn asshole
Criando aplicativos de celular com HTML5+JS
Sáb 01 Jun 2013, 22:35
Prefácil
1. Introdução
- Introdução
- A interface
- Banco de dados
- Finalizando source
- PhoneGap
- Ultimas Observações
- 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:
- PhoneGap | Home - Para converter os nossos códigos em HTML5 e JavaScript para aplicativos mobile
- jQuery Mobile | jQuery Mobile - Para funções úteis mobile
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - Para a interface gráfica
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - 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 (jQuery Mobile | jQuery Mobile) e vá em:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E faça sua interface, a minha ficou assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora clique em Download HTML
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js">
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="my.js">
</script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script>
try {
$(function() {
});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="home">
<div data-theme="b" data-role="header">
<h3>
WC Chat
</h3>
</div>
<div data-role="content">
<h4>
Messages:
</h4>
<div id="messages"></div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput3">
</label>
<input name="" id="textinput3" placeholder="Type here" value="" type="text" />
</fieldset>
</div>
<a data-role="button" data-theme="b" href="#page1" data-icon="check" data-iconpos="left">
Send Message
</a>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput4">
My Nickname:
</label>
<input name="" id="textinput4" placeholder="type here" value="" type="text" />
</fieldset>
</div>
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#home" data-transition="pop" data-theme="b" data-icon="home" class="ui-btn-active ui-state-persist">
Home
</a>
</li>
<li>
<a href="#about" data-transition="fade" data-theme="b" data-icon="info">
Sobre
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- About -->
<div data-role="page" id="about">
<div data-theme="b" data-role="header">
<h3>
Sobre
</h3>
</div>
<div data-role="content">
<h2>
Criador:
</h2>
<h4>
AceStryker
</h4>
<h2>
Powered by:
</h2>
<h4>
Firebase, PhoneGap, Codiqa & jQuery Mobile
</h4>
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#home" data-transition="pop" data-theme="b" data-icon="home">
Home
</a>
</li>
<li>
<a href="#about" data-transition="pop" data-theme="b" data-icon="info"
class="ui-btn-active ui-state-persist">
Sobre
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
my.js
- Código:
// Put your custom code here
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(https://www.firebase.com/) e crie uma conta, e criee um banco de dados:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora você volta pro seu código HTML e adicione em baixo de :
- Código:
<script src="my.js">
</script>
- Código:
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
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:
- Código:
<body>
- Código:
<body onload="loadChat()">
Agora no my.js vamos programar :D:D:D:D:D, adicionei comentários em todas as linhas pra você entender
- Código:
// Put your custom code here
function loadChat()
{
var fire = new Firebase("https://wcchat.firebaseio.com/messages");//Inicializa o firebase na pasta messages
fire.on('child_added', function(data){ //Cria uma função de callback em tempo real pra cada child adicionada
var msg = data.val(); //Transforma o DataSnapshot em array
displayChatMessage(msg.nick, msg.msg); //Mostra a mensagem recebida
});
}
function displayChatMessage(name, text)
{
$('#messages').append('<p><b>'+name+'</b> says: '+ text); //Adiciona o texto na página
$("body").animate({ scrollTop: $("#messages").height() }, "slow"); //Move a tela pra baixo
}
function sendMessage()
{
var txt = $("#textinput3").val(); //Pega o texto do input de mensagem
var nick = $("#textinput4").val(); //Pega o texto do input de nick
var fire = new Firebase("https://wcchat.firebaseio.com/messages"); //incializa o firebase
fire.push({nick: nick, msg: txt, timestamp: Date()}); //envia a mensgem pro firebase
}
Modifique o botão de SendMessage para
- Código:
<a data-role="button" data-theme="b" data-icon="check" data-iconpos="left" onclick="sendMessage()">
Send Message
</a>
4.Finalizando source
Para o PhoneGap conseguir compilar o seu aplicativo você precisa criar um arquivo XML com o nome de config.xml, veja como fiz o meu
- Código:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.wc.processname"
versionCode="10"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>WC Chat</name>
<description>
Teste de chat para WebCheats
</description>
<author href="https://build.phonegap.com" email="support@phonegap.com">
AceStryker
</author>
</widget>
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:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E quando tudo acabar ficará assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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:
Scan:app.zip
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Créditos: 100% AceStryker
DeuceAdministrador - Idade : 28 Posts : 2560 Créditos : 0 Respeito : 328
Fundador do ProPixel
Re: Criando aplicativos de celular com HTML5+JS
Ter 04 Jun 2013, 07:14
Bem interessante, depois dou uma analisada melhor, quando eu chegar em casa. :D
AlvaroMembro Lendário - Idade : 25 Posts : 3935 Créditos : 200 Respeito : 29
All users are.
Re: Criando aplicativos de celular com HTML5+JS
Ter 04 Jun 2013, 13:14
Hm, muito interessante, quem sabe eu não tento ^^
iLoginMembro - Idade : 26 Posts : 97 Créditos : 0 Respeito : 1
ProPixel Fórum ;)
Warning :
Re: Criando aplicativos de celular com HTML5+JS
Sex 12 Jul 2013, 09:12
Hum, Não é muito dificil , obrigado estava procurando!
ZukermanMembro - Idade : 32 Posts : 101 Créditos : 0 Respeito : 0
ProPixel Fórum
Warning :
Re: Criando aplicativos de celular com HTML5+JS
Sex 26 Jul 2013, 20:43
Obrigado pelo codigos..
- Conteúdo patrocinado
Re: Criando aplicativos de celular com HTML5+JS
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|