Criando um PWA com React Native & Expo Web | Code/Drops #34

[@leviarcanjo6309]

O mais legal foi a cara do Diego quando a camera abriu de primeira kkkk

[@rocketseat]

Hahahahah 💜💜💜

[@valterdebrito3990]

É verdade. Voltei o vídeo 2x atrás para ver de novo.

[@naothomachida9746]

Eu ri litros nesse video com as caras kkkk

[@naothomachida9746]

Muito bom, ótimo conteúdo kkk

[@marciozebedeu]

passei pra dizer que estou a fazer uma maratona nos videos todos do canal. Um forte abraço!

[@atilalevy8793]

25:51 igualzinho a figurinha do pernalonga kkkkk conteúdo top como sempre! Rocketseat nunca decepciona! edit: errei o frame do vídeo rsrs

[@rocketseat]

Hahahaha💜💜 Valeu, Atila! 💜

[@LeonardoRuas]

Excelente explicação e demonstração de pwa. Primeira vez que eu vejo alguém explicar esse assunto com segurança e sem encher um monte de linguiça.

[@rocketseat]

💜💜 Valeeeu pelo feedback, Leonardo! 💜

[@Maxnovais777]

gostei muitoooo desse cara❤😂😂😂 ele não deixa agente cansar a aula dele e faz agente rir 😅

[@adielcardoso8854]

É disso que o Brasil gostaaaaa, I Love You RocketSeeat

[@rocketseat]

We love you too 💜💜 Valeeu, Adiel!

[@braddoidao8818]

PWA pra mim é a solução pra aplicações em que o público alvo vai ter preguiça e/ou desistir por algum outro motivo, pois ta sendo obrigado a baixar um app. Eu mesmo já desisti de alguns serviços pq quando eu encontrava ele no google, ele queria me jogar na play store kkkk PWA é um escape muito bom.

[@rocketseat]

Faaala, Brad! Valeeu por compartilhar sua opinião com a gente! 💜💜💜

[@fellipecechinel]

Por isso é legal a possibilidade de pensar ter recursos pra usuário de vários tipos. Eu já sou o contrário. Deixo de usar serviços por não ter app na play store kkkkk Não sou muito adepto do pwa pra uso pessoal

[@braddoidao8818]

@@jesusdEcristo aí está outro ponto. Talvez teu usuário não tenha espaço no telefone. Tu n pode obrigar ele a instalar algo. Tem que ter outras opções.

[@rodrigomoreas]

Essa facilidade do diego é assustadora demais Oo.... Parabéns mesmo, vc é top diegao!!!

[@rocketseat]

Ele é muito top né? 💜💜💜

[@EduardoPinaCampinas]

sensacional o video Diego!!!!! cada vez mais voce e a rocket crescendo e elevando o conhecimento de quem esta comecando com o desenvolvimento em react..... parabens a equipe!!!!!!

[@rocketseat]

Valeeu pelo feedback, Eduardo! 💜💜💜💜

[@lucioeiras]

Tava ansioso por essa logo nova desde que vi ela no dribbble do Cleiton Avi. Tá bonita demais, seh loko

[@rocketseat]

Ele é top né? 💜💜

[@lucioeiras]

@@rocketseat Demais, tô pirando na identidade visual nova que vcs tão construindo

[@ageurodriguesdeoliveira8953]

Cara isso vai me ajudar muito depois de 3 anos :) hahah

[@romualdo_ah]

Minha cabeça explodiu... super massa!!

[@rafaeldiogodasilva2024]

Otimo exemplo sobre pwa, vai muito alem dos blablabla que se vê por ai. Show muito fã de seus trabalhos.

[@rocketseat]

Valeeu pelo feedback, Rafael! 💜💜

[@LucasGenari]

Like antes de ver o vídeo pq né... 🤣🚀🚀🚀

[@WiuverRibeiro]

Diego digitando é uma coisa linda de se ver kkkk

[@AnibalGutierrezYoSoy]

Men! que excelente video! Saludos desde Argentina!

[@fabiopasti2473]

Caramba, pensei hoje mesmo em pedir um conteúdo sobre pwa!!! Amanhã vou ver o vídeo com mais calma!!! Parabéns Rocket

[@rocketseat]

A gente é tão bom que atende o pedido antes mesmo de ele ter sido feito. 😍😍💜

[@moisesdematosgil7860]

Esse Diego é um monstro sagrado do JS.

[@TheKroow]

Nem vi ainda mas sei q o conteúdo é top!! Bora estudar 🚀🚀🚀

[@rocketseat]

Valeeu pelo elogio, Diego! 💜💜

[@sergioaraujo2748]

Ótimo vídeo, depois que vi como pwa é construído vi que se a comunidade desse um pouquinho mais de atenção ele cresceria

[@rocketseat]

Faala, Sergio! 💜💜 Valeu por compartilhar sua opinião com a gente!

[@moacirmota340]

Que abertura top mano!!! Parabéns pela vinheta de abertura!!! To vendo o dia q o nome vai ser RocketseatTV de tanta qualidade nos videos. 🚀

[@rocketseat]

Hahahha valeeeu pelo feedback, Moacir! 💜

[@alexalannunes]

Show de bola. Muito massa. @Rocketseat . Só senti falta de tipo quando precisar fazer modificações no pwa e subir pra prod. Será q o cache vai ser re-armazenado . Substituir o antigo . Fora isso Parabéns. Sempre show

[@Oculterous]

Adorei que vc falow de PWA no canal!

[@rocketseat]

Valeeu! 💜💜💜

[@iagofreire9768]

Ficou top a demonstração da funcionalidade.

[@allyssonribeiro5599]

Pela primeira vez na vida me peguei rindo em uma vídeo aula kkkkkkkk aula muito massa Diego

[@rocketseat]

Hhahaha aí sim! 💜

[@vulgoglzinn8509]

I been through loads of video's about soft . but you are the best thanks for your video's.

[@jonathanmenezes9504]

Topzera abordar esse assunto tão interessante! Parabéns.

[@heudersena]

Já tava com saudades, em ver mais um vídeo da #Rocketseat

[@filipedossantos2179]

Da hora. Valeu, guri! Ficou muito bom.

[@matheussunderhus]

Só conteúdo AAA. Vlw Diego, vlw Rocketseat!

[@rocketseat]

Valeeeu, Matheus! 💜💜💜

[@morou3543]

Um drops antes de dormir é good!

[@rocketseat]

antes de dormir, pra assistir enquanto come o almoço, na pausinha pro café... Code/Drops é bom à qualquer hora! 💜💜💜💜

[@lucasaugusto1131]

Meu Deus Rocketseat 💜 Fantástico !!!

[@rocketseat]

Valeeu, Lucas! 💜💜💜

[@Js501sJ]

eu fiz isso outro dia. Só que se você quiser transformar uma aplicação em um site MESMO tem que usar linking no react navigation pra fazer as rotas como o reactJS usando react-router-dom(tipo /main,/home,etc). Dai vc pode usar o back do navegador e não fica só na mesma url. Mt bom vídeo Abração.

[@rocketseat]

Valeeu por compartilhar sua experiência e essa dica com a gente, Thiago! 💜

[@natands.8183]

Estive esperando por esse momento 😍😍😍

[@rocketseat]

agora é só aproveitar então!!! 😍😍😍💜💜

[@mouravocal]

Pra mim vai ser necessário por enquanto, já qua não tenho mac, posso criar meu aplicativo usando expo/bare workflow e testar no Android e criar um PWA dele para quem usa iPhone, observando as funções nativas do aparelho.

[@rocketseat]

Depois conta pra gente como foi a experiência, Diego! 💜

[@linezinhu]

Uma dúvida, a gente consegue hospedar o pwa na play store ou teria que gerar um apk pra públicar ou teria que copiar e colar o código em um projeto react-native e gerar o apk ?

[@fabolazao]

Essa vinheta tá parecendo abertura do Ben 10 kkkk, muito bom

[@rocketseat]

😂😂💜

[@joaoamadeu3659]

Eitaaaa, grande intro😍😍🐱‍🏍🐱‍🏍🐱‍🏍

[@rocketseat]

💜💜💜💜 F*@a, né? 💜

[@r4tok1ller]

Uma coisa curiosa é que, se você colocar o Toggle device toolbar depois de acessar o Instagram, não aparece igual o video. Acaba que ausência a opção de colocar status e se torna mais limitado. Agora se, logo de cara você ativar o Toggle device, o Instagram fica fiel ao app.

[@felipesilva_flk]

Nossa mano, que intro foda!!! Parabéns pelo vídeo. Só fiquei com a dúvida de como fazer isso sem ser utilizando o Expo...

[@CostelaFifa]

Fala Diego!! Uma pergunta para o PR. Notei que algumas empresas tratam essa questão do PWA identificando o User Agent do dispositivo que faz a requisição e se for um dispositivo mobile, redirecionam para um sub domínio que retorna o conteúdo estático da versão mobile, como no caso do Twitter que você disse (mobile.twitter) e facebook (m.facebook). Porém ao acessar este domínio diretamente de um desktop não redirecionam para a aplicação desktop. O Twitter é responsivo completamente e inspecionando o código parece utilizar a mesma solução, já o facebook não. Como acha que deve ser tratada a responsividade em soluções em que utilizamos RNWeb?

[@rocketseat]

Valeeu pela sua pergunta, João! 💜 #PR #diegorespondeaí

[@rodolfogama5164]

É possível converter um Web app feito com React.js para React Native?

[@hallanchristian3499]

Top Diego!!!

[@FelipeFontana]

desculpa o palavrão, mas PQP, nem assisti o vídeo, só vi a entrada ficou animal!!!

[@rocketseat]

O editor arrasa, né? Fala sério! 💜💜💜

[@FelipeFontana]

Rocketseat demais demais mesmo!!!

[@urielguy]

Muito bom o vídeo, sempre trazendo um conteúdo excelente. Gostaria de saber quanto ao SEO, é possível utilizar tbm o next js?

[@Oculterous]

vc faz pwa com o nextjs muito fácil um exemplo: apod.pictu.one quanto a por o nextjs no expo de alguma forma parece que sim, vi algo sobe um dia desses

[@alienshikadai]

Diego, em África - Angola, estão contratando por causa da Rocketseat.😅😅

[@fulviocezarcanduccidias]

Então pelo que eu entendi, pode ser utilizar esse em vez de Expo para Web como se fosse uma aplicação Mobile?

[@FC.HAALAND]

Olá, gostaria da sua ajuda. Estou criando um novo projeto no react native, entretanto não sei como faço pra deixar meu app com o mesmo tamanho em celulares com tamanho diferentes (ex: 6,0 plg - 6,4, plg - 6.5 plg) Você poderia me explicar o que eu devo fazer ?

[@FanaticoSama]

@Rocketseat Vcs pretendem fazer algum vídeo falando sobre o React Suspense?

[@rocketseat]

Valeeu pela sugestão, Fernando! 💜

[@JeanMKowalski]

Vídeo direto ao ponto, muito bom. Seria possível colocar isso dentro de um app electron?

[@king_dela719]

Absolute G

[@joaomucilon]

Microsoft Edge no Mac? muito interessante, ta mais leve que o chrome?

[@danilovieira4442]

A abertura ficou sensacional! Sobre a aula, implementei aqui e ainda fiz um botão de toggle entre as câmeras traseira e frontal no iOS e Android hahaha Ahh Diego, a tua tentativa de colar o link não funcionou porque você tinha que dar o long press com o mouse dentro do emulador ao invés de dar o Ctrl + C.

[@rocketseat]

Valeeeu, Danilo! Nosso querido Space Squader 💜💜

[@souzaramon9522]

Muito bom Diego! Ja deu um,a olhada na lib react-query? Acho que seria uma boa mostrar no canal!

[@rocketseat]

Valeeu pela sugestão, Ramon! 💜💜

[@LuizFerK]

Salve, Diegão. Então, pensando em casos de uso do React Native Web, não seria uma alternativa interessante pensar em usar o PWA em todas as aplicações e hospedar esse PWA separadamente, pra que, quando a aplicação for acessada de um smartphone pelo navegador dele, ele use o PWA e não a aplicação Web em si (que está hospedada em outro local)? #PR

[@rocketseat]

Faala, Luiz Fernando! Valeeu pela sua pergunta! #PR #Diegorespondeaí

[@jordandossantosoliveira9560]

Conteúdo muito top, iniciei uma aplicação com React Native e possivelmente vou usar a questão de offline First. Acabei escolhendo o Realmdb por ter mais familiaridade. Mas os próximos vou de cabeça no Watermelon

[@AlissonNunes]

Cara, curti bastante o vídeo! Só achei que você acabou falando de muitas coisas, o vídeo ficou bem denso... Mas uma dúvida, como separar o PWA da versão de desktop? Digo em questão de como o usuário acessa e o servidor responde. Por que o usuário vai querer acessar da mesma forma, logo o servidor vai responder igual

[@valerianolasco162]

Really appreciate the video .I would like further demonstration on how to use actual tutorial in soft to make soft .

[@MsDannis]

Show de bola!!!

[@matheuspimentel9666]

Vídeo top demais!!!

[@rocketseat]

Valeeu, Matheus! 💜

[@diegoalmeida8790]

Pessoal!! Fiquei com uma dúvida! Após criar a PWA feita no React Native e publicar ela a partir da build web no expo, ao publicar ela, quando acessar pelo smartphone android ou iOS, automaticamente a aplicação vai reconhecer o meu SO e funcionar como se fosse a versão dele? Pq estou testando dessa forma antes de publicar e a versão que roda no meu celular continua sendo a versão web, sei disso pq alguns recursos que usei só funcionariam para mobile... não tem suporte para web. Estou testando na rede local pelo ip do computador com yarn web. Se testo pelo qr code funciona de boa.

[@uesleisuptitz]

Tbm to com esse problema

[@uesleisuptitz]

Você achou uma solução?

[@josepaulojr7227]

Faz tempo que estava aguentando essa dádiva.

[@rocketseat]

💜

[@losfagalas]

Sensacional

[@FelipedaSilvaRosas]

WatermelonDB funciona no Expo com react-native-web?

[@apholo8308]

Como eu poderia manipular as versões da minha aplicação de modo que, quando o usuário acessa se pelo dispositivo móvel na web, a versão que aparece seja a versão PWA, porém na web gostaria que fosse a versão web com React msm. Como seria esse controle?

[@rocketseat]

Faala, Apholo! Você pode tirar essa dúvida lá na nossa comunidade aberta! 💜 Segue o link: www.rocketseat.com.br/comunidade

[@reismatias]

Qual é o nome desse site que eles usam para fazer essas listas? Com caixas de marcação, os emojis e tals.

[@henriqueandre4836]

Quais seriam as diferenças, vantagens e desvantagens de uma aplicação PWA e uma outra com electron rodando em um PC? #PR

[@rocketseat]

Faala, Henrique! Valeeu pela sua pergunta! 💜💜💜

[@mateuscunha7294]

galera, fui criar o prejeto e deu o seguinte erro: ERROR: Node.js v13.13.0 is no longer supported. expo-cli supports following Node.js versions: * >=10.13.0 =12.13.0 =14.0.0

[@VictorHugoMalheiro]

Sua versão do node ta muito recente, baixa uma mais antiga, o próprio Diego fez o downgrade...

[@lucasluizss]

Daria pra instalar pelo chrome do desktop também.

[@rocketseat]

Valeeu pela dica! 💜

[@8dmidias685]

informative video good sir, Gracias

[@joseveras2473]

Consigo extrair o URL do PWA e abrir como app no android?

[@o_jeffersoncunhaofc]

Daria para usar um mapview com o GPS do Chrome?

[@rocketseat]

Faala, Jefferson! 💜 Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver 💜 Segue o link: www.rocketseat.com.br/comunidade

[@LuizGustavo-ph2pe]

Falaaa DEV

[@rogeriopst450]

parabens. ja deixei o like. uma duvida: se eu n estou conseguindo ver a camera na web local e estou usando o chrome e, pelo q vi, deixei o codigo correto igual vcs deixaram, tem alguma permissao no navegador q pode estar faltando? ja tive problemas c GPS no meu navegador tb e n resolvi nem na epoca nem está resolvido kkk vlw.

[@rocketseat]

Faala, Rogerio! 💜 Você conhece nossa comunidade aberta? Por lá você pode mandar essa e outras dúvidas que tiver 💜 Segue o link: www.rocketseat.com.br/comunidade

[@kakashisuzuki8068]

Fico pensando na pessoa/equipe que pensou: - 'Hm ovo pega essa linguagem (JS) vou criar o front web'; Outro(s): - 'Se pode no front pode da no back.'; Outros(s): - Se pode no front e back, vai da pro mobile e ja vai pro android e ios.'; Outro(s): - Da pra usar no front, no back e mobile, então ovo criar uma forma de programar mobile e rodar na web' 🧙‍♂️

[@higormatheusoliveira5914]

#PR fala Diego com esta nova versão do expo posso utilizar a web como emulador pro androide o androide Studio vive travando no meu pc i7 8GB emular no celular é mas rápido gostaria de um emulador melhor

[@rocketseat]

Fala Higor! Valeeu pela sugestão para o #PR! 💜💜

[@Ferrugemn1]

Incrível

[@dieg0tauchert]

consigo desenvolver um app como o garageband, com gravação de áudio e efeitos como delay e reverb em RN ?

[@rocketseat]

Fala Diego! Certamente consegue, há diversas libs relacionada a isso que pode utilizar 💜

[@danielvinicius4906]

Top!

[@MateusHenrique-ne5el]

13:00 MELHOR REAÇÃO KKKKKKKKKKKKKKKKKKKKKKKK

[@nikolassantos5727]

13:28 PRAMIM FOI ESSSA KKKK

[@rocketseat]

😂😂😂💜💜

[@bananadasilva2820]

Caraca eu estou morrendo com esse vídeo kkkkkkk

[@rocketseat]

Mooorre não! 😂😂💜

[@Jheisonmacielines]

O code drops que eu esperava..

[@rocketseat]

Agora não precisa esperar mais! 💜😍

[@luizhms_]

Eita Giovana

[@rocketseat]

😂💜

[@emanueldsc]

Tudo é muito rápido usando Web. Mas quando a coisa vai pro celular ... Parece que os emuladores são movidos a jegues de potência.

[@danifreitas1662]

know where to start a new soft and I didn't know how to switch from soft to . You are the best THANK YOU FOR NOT

[@augustomarcelo]

Qual seria o intuito de, tendo um app mobile, eu criar um pwa? Não precisar ocupar espaço instalando o app nativo?

[@uesleisuptitz]

É, não precisar publicar na loja de imediato, já que isso as vezes pode demorar no caso da AppleStore

[@mateusbaoba]

Olá pessoal! Blz? Alguém aí já teve algum problema com as permissões do expo? Quando eu rodo a aplicação no ambiente local do expo, funciona perfeitamente. No entanto, quando faço o build:web e faço o deploy, tenho a excessão: "_ExpoBarCodeScannerModule__WEBPACK_IMPORTED_MODULE_15__.default.requestPermissionsAsync is not a function"... tentei usar o módulo de câmera e tenho o mesmo erro... Se alguém tiver uma luz do que possa ser, fico grato. Até mais.

[@uesleisuptitz]

Acho que você deve pedir a permissão para utilizar a câmera

[@ronnyacacio9944]

Massaaaa!!! 💜

[@rocketseat]

Valeeeu, Ronny! 💜

[@brunolombardi1512]

Opa galera da Rocket beleza? Poderiam trazer um vídeo falando mais de PWAs, incluindo como funcionam service Workers, que inclusive já vem uma estrutura pronta para isso no React? O essencial de um PWA é ele funcionar offline, ser instalado no mobile, etc

[@rocketseat]

Fala Bruno! Valeeu pela sugestão! Vamos tentar trazer mais conteúdos sim, sobre esses temas também 💜

[@JoaoLucas-dd4xm]

30:35 pra quem for rápido pegou vários spoilers

[@rocketseat]

👀

[@LorhanSohaky]

Muito bom, só acho que vale um outro vídeo só explicando como configurar o service worker do Expo. Já tentei modificá-lo para Network First, mas falhei miserávelmente 😭

[@rocketseat]

Valeeu pela sugestão, Lorhan! 💜💜💜

[@FernandoGarcia-tu3yu]

muito bom é facil!, eu utilizo Angular

[@allan.abq9]

Diego usando ao mesmo tempo o programa de gravar tela, VSCode, o browser, dois emuladores mobile: "essa é a hora que meu Mac parece um helicóptero, começa a girar a ventoinha de todos os lugares" Paro pra ouvir e reparo que o meu computador tá girando a ventoinha para rodar o vídeo do KZbin kkkkkkkk 😅😅😅

[@rocketseat]

😂😂😂💜

[@matheusalmeida955]

Muito legal o vídeo, mas senti falta da integração de um pwa com uma aplicação reactjs

[@revolutionary_tower]

Não consegui fazer com que a camera rodasse no chrome/firefox para android. Aparentemente há um problema de permissão onde o navegador nem chega a pedir permissão pra usar a câmera, tentei com as funções Camera.requestPermissionsAsync(); e Permissions.getAsync(Permissions.CAMERA); do pacote expo-permissions. Gera um erro no apenas no browser (funciona normalmente quando executo como app nativo android) dizendo que requestPermissionsAsync()/getAsync() não é uma função. tentei até limpar o cache, as permissões reinstalar o app dos navegadores mas não consegui fazer a câmera funcionar. Acredito que seja melhor fazer o uso do React.js mesmo para criação de PWAs. EDIT (SOLUÇÃO): Pessoal, consegui resolver o problema da câmera que não funcionava no firefox/chrome para android. É necessário criar uma conexão HTTPS para que o navegador permita o uso da câmera basicamente fiz 3 coisas. 1 - Remover a função `Camera.requestPermissionsAsync()` (o ideal seria envolver num if caso o usuário estivesse acessando através do app nativo, mas por hora resolveu...) 2 - criei uma chave SSH com o comando ssh no terminal (linux): `ssh-keygen -t rsa -b 4096 -C "[e-mail]"` 3 - fiz um redirecionamento de portas utilizando um serviço gratuito rodando no terminal (linux) `ssh -R 80:192.168.1.50:19006 [e-mail]` sendo 80 a porta http padrão 192.168.1.50 o meu IP local e 19006 a porta do servidor web criada pelo expo

[@rocketseat]

Boaa Rayon! Obrigado por compartilhar a solução que encontrou 💜

[@mateuscunha7294]

Fala Diego, @rocketseat faz um code/Drop de ts com typeORM se possivel

[@rocketseat]

Valeeu pela sua sugestão, Mateus! 💜💜

[@weickmamferreira3507]

Que início de code/drops foi esse??🤯

[@rocketseat]

TOP né?💜

[@lucaslins7406]

Preciso de um Mac para publicar na loja da Apple alguem sabe me dizer ?

[@FabianoRamosInfo]

De fato a Apple é um pé no saco mesmo. É muita frescurada por parte deles. Acho que o termo pé no saco foi até um elogio

[@LuizGustavo-ph2pe]

Questão de tempo amigo

[@jorgealegretti4796]

@@LuizGustavo-ph2pe do jeito que a apple é só vai funcionar PWA criado por mac hehehe

[@stamina_gaming]

$100 dol ano por dev, pense uahuahu

[@roni_castro]

Apple sempre cagou para seus desenvolvedores e comunidade, e nunca avança em coisas que podem fazer ela perder seu monopólio, vai se acostumando.

[@FabianoRamosInfo]

@@roni_castro Já passo raiva com a Apple desde o Ionic 3. São 3 anos de briga sempre quando vou colocar um app na loja. Sem contar o descaso do suporte

[@viniciusclemente5119]

Muito bom, teria como fazer um Code Drops criando uma PWA com React?

[@rocketseat]

Valeeu pela sugestão, Vinicius! 💜

[@viniciusclemente5119]

@@rocketseat Mais vídeos de React Native tbm por favor kkk :)