Transforme seu site em Aplicativo! Como criar sua PWA e TWA?

Поделиться
HTML-код
  • Опубликовано: 22 ноя 2024

Комментарии •

  • @gab0nezio
    @gab0nezio Год назад +2

    Obrigado por mostrar passo a passo de como cria uma PWA do zero de um geito facil!, acredito muito que muitas e muitas empresas e startups novas relacionadas a Web 3.0 irão utilizar PWA, é evidente que isso ocorrerá, a utilização da outra nova tecnologia "WGPU" tanto para jogos como para comécios mais sofisticados tbm utilizarão!

    • @estudantepontodev
      @estudantepontodev  Год назад

      Que ótimo que gostou, eu também acredito muito que startups podem usar essa tecnologia para ajudá-las

  • @portfolioz2023
    @portfolioz2023 15 дней назад

    Oi! Seria interessante fazer um novo vídeo sobre a nova versão do SAP AppGyver, mostrando a integração com o Firebase para aplicações Web da maneira mais simples possível. De uns tempos para cá, o Google Play está mais exigente - e o iOS, nem se fala. A tendência pode ser o uso de apps na versão Web! Um vídeo assim seria muito útil!

  • @luizpedro-programador
    @luizpedro-programador 7 месяцев назад +2

    Top! não sabia que se chamava PWA, fiz um sistema em flutter web e ele faz isso ai de instalar sozinho, mas nem sabia que era essa tecnologia, vlw!

  • @vladimirmelo8188
    @vladimirmelo8188 11 месяцев назад +2

    Parabéns, excelente aula! Só uma dúvida, porque a opção "instalar app" não aparece nos navegadores Safari ou Firefox?
    Tem como resolver isso?

    • @estudantepontodev
      @estudantepontodev  11 месяцев назад

      Não sei te responder isso, mas provavelmente, deve ser configurações um pouco diferentes para fazer funcionar neles, ou até mesmo poça ser que eles não tenham a funcionalidade de reconhecer um site com PWA.

  • @Miojjin
    @Miojjin Год назад +2

    Valeu amigo, você é um amigo

  • @luizmiranda4881
    @luizmiranda4881 8 месяцев назад +2

    O arquivo offline é uma cópia do index? É Preciso fazer mais de um arquivo offline pra cada arquivo? isso, caso eu tenha mais de um além do index ?

  • @NaturezaHarmonia
    @NaturezaHarmonia Год назад +3

    Não conhecia, muito top

  • @MarkimMarques
    @MarkimMarques 7 месяцев назад

    Parabéns, ótima aula! Como faço para aparecer um popup dizendo para a pessoa instalar o app com um botão de instalar? mas que apareça apenas para quem não tem instalado

    • @estudantepontodev
      @estudantepontodev  7 месяцев назад

      Muito obrigado, no meu curso eu apresento formas de fazer isso, vale a pena da uma conferida ;)

  • @lucassiqueira8281
    @lucassiqueira8281 Год назад

    Obrigado por compartilhar todo esse conhecimento, estava precisando muito desse conteúdo, valeu.

    • @estudantepontodev
      @estudantepontodev  Год назад

      Que bom que conseguiu aproveitar bem :) Se gostar de se aprofundar no assunto, de uma conferida em meu Curso.

  • @MarceloAugustoMonteiro
    @MarceloAugustoMonteiro Месяц назад

    É possível adicionar também na Apple Store?

  • @seguraltafranquias
    @seguraltafranquias Год назад +1

    Cara muito obrigado, parabéns pelo tutorial.

    • @danilolima1962
      @danilolima1962 Год назад

      mano, você conseguiu remover a barra de endereço da TWA antes de publicar na Google Play?

    • @estudantepontodev
      @estudantepontodev  Год назад

      obrigado

  • @AlexandrePereira-wo5zd
    @AlexandrePereira-wo5zd Год назад

    Cara, parabéns o vídeo mais completo sobre o tema na internet!

  • @fadao9026
    @fadao9026 Год назад +1

    Obrigado pelo tutorial, muito bom.

  • @profedsondecarvalho
    @profedsondecarvalho Год назад

    Parabéns, excelente tutorial. Curti e seguindo!

  • @evandroferreiraoficial
    @evandroferreiraoficial Год назад +2

    Quero comprar seu curso, esse aplicativo da pra ser loja virtual?
    Eu já tenho o site, quero agora o aplicativo.

    • @estudantepontodev
      @estudantepontodev  Год назад

      Você tem a possibilidade de converter seu site de loja virtual em aplicativo sim, segue o link do curso:
      curto.dev/z29o93eK

  • @rodrigor.galvao4313
    @rodrigor.galvao4313 7 месяцев назад +3

    Tenho uma dúvida, esse arquivo offline veio de onde?, porque no site tem meus index.html, no caso eu preciso mudar o nome do meu index principal para offiline???

    • @estudantepontodev
      @estudantepontodev  7 месяцев назад +1

      o offiline precisa ser criado, para ter uma página que irá aparecer quando a pessoa tiver sem internet, eu mostro melhor no curso como criar a pagina offline

  • @rodriggobarra
    @rodriggobarra 11 месяцев назад +2

    Vlw pelo vídeo. Outros sites que criam pwa são pagos. Este pwa builder é 100% gratuito ou tem alguma restrição que tem que assinar um plano pago e sem anúncios, etc? Não encontrei nada de planos no site deles, então quero confirmar mesmo. Vlw.

    • @estudantepontodev
      @estudantepontodev  11 месяцев назад +2

      Esse site é grátis 100% criado pela Microsoft para difundir ainda mais a tecnologia da PWA e TWA!

  • @moxinnovations
    @moxinnovations 3 месяца назад

    Hola genial tu vídeo pero tengo un problema que no se cómo solucionar... Cómo elimino la barra del navegador en mi APK ? Me compila pero me muestra la barra

    • @estudantepontodev
      @estudantepontodev  2 месяца назад

      Eu falo sobre isso nesse momento do vídeo 17:18

  • @marcoskleinubing8144
    @marcoskleinubing8144 Год назад

    Parabéns! Muito bom

  • @engroga
    @engroga 7 месяцев назад

    Excelente vídeo.

  • @kleberaugus
    @kleberaugus Год назад +2

    Eu reparei que na hora de colocar o código que retira a barra do navegador você fez isso DEPOIS de já ter gerado a apk no pwabuilder, para um app offline como eu colocaria isso se a apk foi gerada antes? Não entendi.

    • @estudantepontodev
      @estudantepontodev  Год назад

      Isso por que esse arquivo ele não vai ser compilado dentro do APK ele apenas deve ficar disponível no seu site, para que o APK acesse a url e cheque as informações dentro desse arquivo para confirmar que o APK que você gerou é do mesmo dono do site, então se seu arquivo estiver disponível na URL algo como [
      SEU_DOMINIO].com/.well-known/assetlinks.json então provavelmente irá funcionar e a barra do navegador será removida do APK.

    • @kleberaugus
      @kleberaugus Год назад +1

      @@estudantepontodev Então a barra só é retirada se estiver online?

    • @estudantepontodev
      @estudantepontodev  Год назад

      @@kleberaugus Sim, no primeiro momento para qualquer PWA e TWA funcionar, precisa ter internet pelo menos na primeira vez que o usuário baixar o seu app e abrir pela primeira vez isso por que o ServiceWorks.js que faz o seu site poder ser acesso Offline vai precisar de internet ao menos uma vez para executar e baixar as páginas e arquivos que você pretende deixar disponível em modo offline, eu explico bem melhor isso no meu curso da uma conferida lá ;) curto.dev/z29o93eK

  • @Jogabilizado
    @Jogabilizado 11 месяцев назад +2

    Olá, eu fiz meu aplicativo pelo glideapp e utilizei o pwabuilder pra conseguir o .abb, infelizmente a barra de besquisa continua aparecendo. como utilizo o glideapp, é possivel algum outro tipo de configuração para sumir?

    • @estudantepontodev
      @estudantepontodev  11 месяцев назад

      Se não tiver permissão de gerenciar os arquivos hospedados no seu site então não é possível remover a barra, teria que fazer seu app/site de outra maneira!

  • @diegoguimaraes9235
    @diegoguimaraes9235 Год назад +1

    obrigado Castanhari

  • @germanoalves727
    @germanoalves727 6 месяцев назад

    Parabens pelo video! Fui tentar submeter um site em reactjs e não apareceu nenhum screenshots. Pq?

    • @estudantepontodev
      @estudantepontodev  5 месяцев назад

      Obrigado, as vezes pode ser um problema de lentidão no carregamento do Javascript no site, como alternativa você pode tirar prints do site normalmente pelo celular mesmo e colocar diretamente no manifest.json

  • @gabrielanjosbottino5116
    @gabrielanjosbottino5116 Год назад +1

    Bom vídeo, mas eu tive um problema pra crirar o manifesto. Eu criei as imagens de icone normalmente como no tutorial, porém quando faço a análise do manifesto diz que elas não existem. Será que é algum problema no local que eu estou armazenando as imagens?

    • @kidlandia3468
      @kidlandia3468 Год назад

      seu site esta funcionando normalmente, isso só funciona se o site estiver no ar já

  • @The_Showza
    @The_Showza Год назад +1

    Video muito top mano! Me tira uma dúvida, se eu fizer alterações no site vai refletir direto no aplicativo sem ter que fazer mais alterações?

    • @estudantepontodev
      @estudantepontodev  Год назад +1

      Sim, o aplicativo é o site, mas eu recomendo que faça novos build subindo o numero da versão pois a Google Play Store só vai constar que você fez uma atualizando quando subir um novo apk e s então fizer isso você não vai rankear tanto seu app, mas não precisa fazer isso sempre tambem.

  • @1996rogerio
    @1996rogerio 7 месяцев назад +1

    Boa noite amigo, consigo fazer isso em um site na Shopify ?

  • @curicash
    @curicash Год назад +1

    Gostaria de contratar os serviços. Qual seria a media de valores para transformar meu site nesses app web e app?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Oi Curi Cash, tudo bem? Nós somos uma escola de programação, mas indicamos uma consultoria chamada PlanetsWEB, você inclusive pode encontrá-la pelo site www.planetsweb.com.br e pelo email contato@planetsweb.com.br, por lá eles conseguem passar o seu orçamento =)

  • @messijurere189
    @messijurere189 7 месяцев назад

    Olá amigo. Vc sabe dizer se tem algum custo para transformar em PWA?

    • @estudantepontodev
      @estudantepontodev  7 месяцев назад +1

      não é de graça, mostro com mais detalhes no meu curso, vale a pena conferir

  • @GondonJoiasLimeira
    @GondonJoiasLimeira Год назад +1

    Obrigado!!

  • @rs-almeida7823
    @rs-almeida7823 6 дней назад

    e se for um projeto django

  • @samuelxsilva
    @samuelxsilva 2 месяца назад

    Tambem funciona para site criado em WordPress?

    • @estudantepontodev
      @estudantepontodev  2 месяца назад

      Funciona sim, inclusive existe alguns plugins que ha fazem a parte do PWA

  • @MonjaDriver
    @MonjaDriver Год назад

    Muito top esse conteúdo! Parabéns!
    Uma dúvida!
    Esse processo serve para qualquer site, inclusive php com bancos de dados mysql?
    Desde já obrigado!

    • @estudantepontodev
      @estudantepontodev  Год назад +1

      Sim esse processo server para qualquer site

    • @AdamoBS
      @AdamoBS Год назад +1

      @@estudantepontodev Humm. Então é como se ele encapsulasse um navegador web com o link para o seu site é isso? Meu site tem usuário e senha, nesse caso vai funcionar também, se entendi corretamente.

    • @hiqueaqui
      @hiqueaqui Год назад

      @@AdamoBS e isso ai mesmo

  • @gustavorocha9079
    @gustavorocha9079 Месяц назад

    Como faz pra tirar a barra de cima do app

  • @mikaelmendes340
    @mikaelmendes340 Год назад

    Eu criei um sistema simples que não tem back-end apenas para fazer cálculos. Gostaria de saber se é possível usar pwa nele e se pode ser em um arquivo que esteja salvo no dispositivo mesmo em vez de estar hospedado? Se precisar hospedar, posso hospedar na função do Github? Já que não tem back-end

    • @estudantepontodev
      @estudantepontodev  Год назад

      Precisa estar publicado na WEB hospedado, não importa onde esteja hospedado apenas precisa ter uma URL acessível de qualquer lugar e dispositivo. E para funcionar a PWA apenas o Front-End já serve pois ela usa justamente o front.

  • @woodswolf7717
    @woodswolf7717 Год назад

    cara adorei o conteúdo mas eu sou iniciante na programação como que abro essa pasta pra jogar meu arquivo manifest tem algum vídeo que me ajude nisso vlw

    • @estudantepontodev
      @estudantepontodev  Год назад +1

      Recomendo então que você de uma conferida no nosso site ou aqui no canal do RUclips, temos cursos sobre VsCode e HTML & CSS tudo de nível iniciante que podem te ajudar melhor sobre o básico de programação, depois volte a assistir esse vídeo que com toda certeza irá conseguir acompanhar melhor.

    • @woodswolf7717
      @woodswolf7717 Год назад

      @@estudantepontodev vlw de vdd

  • @eduardo-miranda
    @eduardo-miranda Год назад

    muito bom o video, no entanto pra mim aparece um no código onde aparece "importScripts", saberia me dizer por que?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Obrigado, não sei exatamente Eduardo mais caso esteja tendo problema e não conseguindo avançar com o assunto considere virar um aluno meu de aulas particulares que por lá eu irei conseguir te ajudar mais de perto com os problemas:
      curto.dev/rubens-flinco-aulas-particular

  • @michelfilipypaiva5030
    @michelfilipypaiva5030 Год назад +1

    da pra fazer isso com site construido com elementor?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Da, sim, mas você vai precisar de um plugin de PWA para o Wordpress, entra na comunidade da Estudante.dev que consigo te explicar melhor.

  • @rodriggobarra
    @rodriggobarra 11 месяцев назад

    Uma dúvida, o meu site tem alguns links de menu que quando clicam neles, abre outro site, com outra url (eles juntos fazem parte da minha plataforma). Neste caso no pwa, quando a pessoa clicar neste menu que vai pra outra url, este "novo site" abre normal no mesmo aplicativo ou dá problema. Só o site principal que abre normal. Vlw

    • @estudantepontodev
      @estudantepontodev  11 месяцев назад +1

      O comportamento normal é ele abrir sim porem se o domínio for diferente irá aparecer a barra do navegador pois ele entende que não pertence ao mesmo app

  • @algumacoisaanimacao7903
    @algumacoisaanimacao7903 Год назад

    Irmão, pra mim o popup do celular não aparece, sabe o motivo? (Estou fazendo pelo wordpress plugin SuperPWA)

    • @eduardopalma5056
      @eduardopalma5056 Год назад

      Qual pop-up não aparece? De instalação ou notificação?

  • @clipsets2
    @clipsets2 10 месяцев назад +1

    Eu consigo rodar ads da admob dentro desse esquema ai?

    • @estudantepontodev
      @estudantepontodev  7 месяцев назад

      Acredito que ADS Web sim, o Admob acho que não pois foi feito para APPs Andoid feitos em Java mesmo.

  • @danielandrade5142
    @danielandrade5142 Год назад

    muito bom, alguém pode me tirar uma duvida, fiz igual ele explicou mais meu PWA tem link de site externo e quando clica nele aparece a barra de navegador dentro da PWA

    • @estudantepontodev
      @estudantepontodev  Год назад

      isso é normal Daniel a barra do navegador só não vai aparecer se o site realmente for seu e se ele tiver hospedado o arquivo .json que menciono no vídeo

  • @gregonocode
    @gregonocode 6 месяцев назад

    Em WordPress não dar de fazer ?

    • @estudantepontodev
      @estudantepontodev  5 месяцев назад

      Da pra fazer sim, geralmente no WordPress você vai precisar de um plugin de PWA e depois que tiver o plugin vai conseguir gerar o TWA

  • @marcioalexsandro4316
    @marcioalexsandro4316 Год назад

    Porque o meu apareceu essa mensagem? Missing Name
    Your manifest description is missing.

    • @estudantepontodev
      @estudantepontodev  5 месяцев назад

      Você precisa preencher o campo "description" o campo de descrição da PWA no manifest.json

  • @VivaVidaCanal
    @VivaVidaCanal 6 месяцев назад

    Tô procurando alguém pra fazer isso na minha página, se tiver interesse responde aí

    • @estudantepontodev
      @estudantepontodev  6 месяцев назад

      A empresa PlanetsWEB faz esse tipo de serviço, recomendamos ela segue email: contato@planetsweb.com.br

  • @jonathanchristian12
    @jonathanchristian12 Год назад

    Fala irmao blz ? , gerei o Apk pelo buider e ficou bonitinho sem a barra do navegador em cima , mas na hora que subi pro play store , esta mostrando a barra , se baixo o apk para teste fica ok , mas se baixo pelo play store , dá ruim , sabe resolver ?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Boa tarde, Jonanthan é provavel que o seu assetlinks.json esteja apontando o sha256_cert_fingerprints direto no que foram gerados do apk mais não os que foram gerados pela PlayStore você pode testar o seu isso usando essa ferramenta curto.dev/4RTCJnNV
      Como é um assunto complexo não consigo abordar todo ele por aqui mais se não conseguir avançar considere se torna um aluno meu de aulas particulares onde consigo te ajudar ao vivo:
      curto.dev/rubens-flinco-aulas-particular

  • @personalpic
    @personalpic 9 месяцев назад

    saudações, mas se o site for PHP?

    • @estudantepontodev
      @estudantepontodev  7 месяцев назад

      da pra fazer tambem, o importe é ter HTML e JS

  • @vinicio724
    @vinicio724 Год назад

    Oq é twa e qual diferença com pwa?

    • @estudantepontodev
      @estudantepontodev  Год назад

      TWA é o que faz gerar o .apk o arquivo que é do aplicativo android e a PWA é o conceito de ter um site que permite ser adicionado como atalho parecendo ser um app.
      E para o TWA funcionar o seu site já precisa ter PWA então um não substitui o outros.

    • @vinicio724
      @vinicio724 Год назад

      @@estudantepontodev ata vlw

  • @gemeospodcastclipadas
    @gemeospodcastclipadas Год назад

    Como assim projeto? eu preciso ter o projeto do site?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Você precisa ja ter o site pronto, e acesso ao código dele isso é o projeto. Se não sabe muito bem como começar criando um Projeto, da uma olhada no Curso Decolando na PWA com React que lá você aprende a criar um projeto suber legal com React e transformar depois ele em PWA.

  • @RodrigoAlmeida-ii5ht
    @RodrigoAlmeida-ii5ht Год назад

    11:52 po esse botão não habilita nem a pau!!! alguém ta com esse problema?

    • @estudantepontodev
      @estudantepontodev  Год назад

      Entra na nossa comunidade no Discord que eu consigo te ajudar melhor me explica direitinho o que está acontecendo, é só acessar nosso site e ir na aba de Comunidade para entrar.

  • @cezarfernando400
    @cezarfernando400 Год назад

    não funcionou pra mim

  • @EDUCADORUPGRADE
    @EDUCADORUPGRADE 6 месяцев назад

    Então o Google Sites não serve 😢

    • @estudantepontodev
      @estudantepontodev  5 месяцев назад

      Infelizmente não :/ mas da pra fazer com WordPress

  • @welling666
    @welling666 10 месяцев назад

    Alguém já tentou usar na página feita pelo app script?

  • @Flora-ng8gt
    @Flora-ng8gt Год назад

    PWA BUILDER

  • @fudidoemalpago4425
    @fudidoemalpago4425 Год назад

    Muito bom. Obrigado.

  • @leadersatgps
    @leadersatgps Год назад

    FUNCOINA COM APP DELIVERIE

    • @estudantepontodev
      @estudantepontodev  Год назад

      sim, funciona para qualquer site

    • @leadersatgps
      @leadersatgps Год назад

      Pra cidadão não brasileiro Visa /PayPal é aceite pra modo do pagamento? Porém eu já tentei sem sucesso!