{"id":869,"date":"2020-07-22T13:49:49","date_gmt":"2020-07-22T16:49:49","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=869"},"modified":"2022-12-09T08:20:23","modified_gmt":"2022-12-09T11:20:23","slug":"crie-seu-primeiro-aplicativo-gratuitamente-em-menos-de-10-minutos-phonegap-build","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/crie-seu-primeiro-aplicativo-gratuitamente-em-menos-de-10-minutos-phonegap-build\/","title":{"rendered":"Crie seu primeiro aplicativo gratuitamente em menos de 10 minutos: Phonegap Build"},"content":{"rendered":"

Quando voc\u00ea v\u00ea um aplicativo, deve imaginar que foi muito dif\u00edcil para faze-l\u00f4.<\/p>\n

E se eu te falar que em menos de 10 minutos, voc\u00ea consegue criar seu primeiro aplicativo, e ter base para criar novos aplicativos em seguida, com v\u00e1rias novas id\u00e9ias.<\/p>\n

E mais, n\u00e3o precisa instalar programas pesados, configurar m\u00e1quina, e estudar v\u00e1rias linguagens ou ter n\u00edvel avan\u00e7ado para come\u00e7ar.<\/p>\n

Fa\u00e7a um aplicativo com o m\u00ednimo de conhecimento em codifica\u00e7\u00e3o. Voc\u00ea vai usar somente HTML, CSS e Javascript.<\/strong><\/p>\n

Ent\u00e3o vamos come\u00e7ar…<\/p>\n

O que vamos fazer e criar um aplicativo simples de CARA OU COROA<\/code>.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Siga os passos<\/strong><\/p>\n

1.Crie uma pasta com o nome cara-ou-coroa<\/strong><\/p>\n

\"\"<\/p>\n

 <\/p>\n

2. Copie o c\u00f3digo e as imagens abaixo e salve como index.html<\/code><\/p>\n

O c\u00f3digo \u00e9 esse:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Cara ou Coroa<\/title>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=iso-8859-1\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body style=\"user-select: none;\">\r\n\r\n <div id=\"container\" style=\"font-family:Courier New,Georgia,Arial; position: fixed; top: 0; right: 0; bottom: 0; left: 0; \">\r\n <div id=\"principal\" style=\"margin: auto; top: 40%; transform: translateY(-50%); position: relative;\">\r\n  <center>\r\n  <h1>CARA OU COROA<\/h1>\r\n<div id=\"cc\" onClick=\"jogar();\"><img src=\"cara.png\" width=\"100\"><img src=\"coroa.png\" width=\"100\" style=\"margin-left:-70px;\"><\/div>\r\n  <div id=\"result\" style=\"padding:10px;color:red;\">Clique nas moeda para come&ccedil;ar<\/div>\r\n  <\/center>\r\n  <\/div>\r\n  <\/div>\r\n  \r\n\r\n<script>\r\nvar jogadas =0; var cara = 0; var coroa = 0; var caracoroa;\r\nfunction jogar() {\r\njogadas++;\r\n    var flag = Math.floor(Math.random() * 2);\r\n    if(flag == 0){cara++; document.getElementById(\"cc\").innerHTML = '<img src=\"cara.png\" width=\"150\">'; caracoroa =\"CARA\"; }\r\n    else{ coroa++; document.getElementById(\"cc\").innerHTML = '<img src=\"coroa.png\" width=\"150\">'; caracoroa =\"COROA\"; }\r\n    document.getElementById(\"cc\").setAttribute(\"style\", \"width:150px; filter: blur(10px); transition: all 2s  ease-out;transform :rotate(7000deg);\");\r\n    setTimeout(function(){document.getElementById(\"result\").innerHTML = '<b>'+caracoroa+'<\/b><br><br>jogadas: '+jogadas+' | cara: '+cara+' | coroa: '+coroa+ ' | <a href=\"index.html\">Zerar<\/a><br><br>'; document.getElementById(\"cc\").setAttribute(\"style\", \"\"); }, 2000);\r\n    }\r\n<\/script>\r\n  \r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
E as\u00a0 imagens s\u00e3o essas:<\/p>\n
 <\/p>\n
\"\"
\n\"\"<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Na pasta vai ficar assim:<\/p>\n
\"\"<\/p>\n
Agora vamos criar o arquivo xml<\/code> que vai ter as informa\u00e7\u00f5es b\u00e1sica do aplicativo.<\/p>\n
\"\"<\/p>\n
o Arquivo vai ficar assim:<\/p>\n
<widget xmlns=\"http:\/\/www.w3.org\/ns\/widgets\" xmlns:gap=\"http:\/\/phonegap.com\/ns\/1.0\" id=\"com.joemaster.caraoucoroa\" version=\"1.0\">\r\n  <name>Cara ou Coroa<\/name>\r\n  <description>Um app simples de Cara ou Coroa feito com HTML CSS e Javascript.<\/description>\r\n      \r\n      <author href=\"https:\/\/www.joemaster.com.br\" email=\"contato@joemaster.com.br\">Joemaster<\/author>\r\n\r\n<icon src=\"icon.png\"\/>\r\n\r\n    <content src=\"index.html\" \/>\r\n    <plugin name=\"cordova-plugin-whitelist\" spec=\"1\" \/>\r\n    <access origin=\"*\" \/>\r\n    <allow-intent href=\"http:\/\/*\/*\" \/>\r\n    <allow-intent href=\"https:\/\/*\/*\" \/>\r\n    <allow-intent href=\"tel:*\" \/>\r\n    <allow-intent href=\"sms:*\" \/>\r\n    <allow-intent href=\"mailto:*\" \/>\r\n    <allow-intent href=\"geo:*\" \/>\r\n    \r\n    <platform name=\"android\">\r\n        <allow-intent href=\"market:*\" \/>\r\n    <\/platform>\r\n\r\n<\/widget>\r\n\r\n<\/pre>\n
Algumas informa\u00e7\u00f5es importantes, que deve ter nesse arquivo xml<\/code><\/p>\n
id=\"com.joemaster.caraoucoroa\" <\/code>\u00a0– id \u00fanico do aplicativo. (cada aplicativo tem o seu)<\/p>\n
version=\"1.0\"<\/code> – Sempre que lan\u00e7ar uma atualiza\u00e7\u00e3o, mude a vers\u00e3o.<\/p>\n
<name>Cara ou Coroa<\/name><\/code> – Nome do seu aplicativo.<\/p>\n
<author href=\"coloqueseusite\" email=\"coloqueseuemail\">coloqueSeunome<\/author>\u00a0<\/code> – coloque essas informa\u00e7\u00f5es acima.<\/p>\n
<icon src=\"icon.png\"\/><\/code> Esse \u00e9 o \u00edcone de seu aplicativo.<\/p>\n
<content src=\"index.html\" \/><\/code> – sua p\u00e1gina que inicia o aplicativo, sempre deixo essa.<\/p>\n
<plugin name=\"cordova-plugin-whitelist\" spec=\"1\" \/><\/code> – esse plugin coloco pra funcionar corretamente o funcionamento da web, conforme abaixo, libero esses acessos.<\/p>\n
 <access origin=\"*\" \/><\/code>
\n<allow-intent href=\"http:\/\/*\/*\" \/><\/code>
\n<allow-intent href=\"https:\/\/*\/*\" \/><\/code>
\n<allow-intent href=\"tel:*\" \/><\/code>
\n<allow-intent href=\"sms:*\" \/><\/code>
\n<allow-intent href=\"mailto:*\" \/><\/code>
\n<allow-intent href=\"geo:*\" \/><\/code><\/p>\n
 <\/p>\n
 <platform name=\"android\"><\/code>
\n<allow-intent href=\"market:*\" \/><\/code>
\n<\/platform><\/code> – aqui informo que s\u00f3 quero instalar no android,<\/p>\n
se quiser, instalar em todas as plataformas, retire isso<\/span><\/p>\n
Pronto, as informa\u00e7\u00f5es b\u00e1sicas s\u00e3o essas.<\/p>\n
 <\/p>\n
Agora vamos selecionar todos os arquivos, e zipar.<\/p>\n
\"\"<\/p>\n
Pronto a primeira etapa j\u00e1 esta pronta.<\/p>\n
Agora vamos transformar, esse zip em um aplicativo<\/p>\n
Entre nesse site, e fa\u00e7a seu cadastro, \u00e9 r\u00e1pido, fa\u00e7a autenticando pelo google, facebook ou apple, que \u00e9 mais r\u00e1pido.<\/p>\n
https:\/\/build.phonegap.com\/<\/a><\/p>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
Ap\u00f3s fazer o login, entre nessa tela, e envie o arquivo zipado.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
E envie para o servidor.<\/p>\n
\"\"<\/p>\n
O arquivo vai come\u00e7ar a compilar.<\/p>\n
 <\/p>\n
\"\"<\/p>\n
Em seguida est\u00e1 pronto.<\/p>\n
\"\"<\/p>\n
PARA ENVIAR PAGA O GOOGLE PLAY, \u00c9 PRECISO ASSINAR, MAS COMO ESTAMOS TESTANDO N\u00c3O PRECISA FAZER ESSA ETAPA AGORA, ENSINO ISSO NO FIM DO POST.<\/span><\/p>\n
Na pr\u00f3xima etapa, voc\u00ea pode baixar seu aplicativo, ou se voc\u00ea tiver um programa leitor de qrcode em seu celular, voc\u00ea pode baixar direto no aparelho.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Como esse aplicativo, n\u00e3o est\u00e1 assinado, quando voc\u00ea for instalar, vai pedir pra liberar a instala\u00e7\u00e3o de<\/p>\n
fontes desconhecidas do celular, caso tenha dificuldade de liberar. Tente as dicas abaixo:<\/p>\n
Se voc\u00ea ver a mensagem “A instala\u00e7\u00e3o de fontes desconhecidas deve ser desabilitada”, precisar\u00e1 ir para Configura\u00e7\u00f5es<\/strong>\u00a0>\u00a0Seguran\u00e7a<\/strong>\u00a0(em alguns dispositivos, pode ser\u00a0Tela de bloqueio e seguran\u00e7a<\/strong>) e desligar\u00a0Fontes desconhecidas<\/strong>.<\/p>\n
segue um v\u00eddeo ensinando:<\/p>\n