AceStryker 25 Postado 21 de Março 2013 Compartilhar Postado 21 de Março 2013 Prefácil 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: É 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 ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
☢|EXPL01T3R|☣ 45 Postado 21 de Março 2013 Compartilhar Postado 21 de Março 2013 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 ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
chen1810 0 Postado 21 de Março 2013 Compartilhar Postado 21 de Março 2013 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: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
HenriPetain 2 Postado 16 de Junho 2013 Compartilhar Postado 16 de Junho 2013 Ótimo tutorial em cores ficou muito bonito facil de enteder parabéns :star: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Posts Recomendados