No video :(

Offline First: Apps que funcionam sem internet | Code/Drops #47

Подписаться 368 тыс.

Просмотров 36 тыс.

50% 1

Aplicações offline-first são criadas pensando que o usuário deve poder utilizar recursos do app mesmo sem estar conectado a todo momento à internet.
A ideia por trás do conceito gira principalmente por volta de armazenar dados em um banco offline e persistir alterações nos dados assim que uma conexão estiver presente.
Nesse vídeo vamos entender como fazer o planejamento de um app offline first, desde os conceitos mais básicos até avançados abordando sobre banco de dados, sincronização, interface otimista, autenticação, etc.
No fim mostro também algumas bibliotecas que você pode utilizar no React Native para atingir esse funcionamento!!
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077

Опубликовано:

18 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 150

@adrianorocha-dev 4 года назад

22:00 "Gambiarra a gente aceita, a gente não aceita é a derrota" - Martins, Leon

@rocketseat 4 года назад

Hahahahahha 💜💜

@Joe-zw1qt 4 года назад

#GAGA

@luanbresolla4240 4 года назад

Pode trazer conteúdo sobre o WaterMelon DB, Diego.

@fabianojose3034 4 года назад

Faz de WaterMelon DB, Diego. Obrigado pelo conteúdo.

@rdgomt 4 года назад

Este assunto é muito interessante, Diego! Minha primeira experiência com offline first foi desenvolvendo o app Situs Arqueologia. Usei React Native e RealmDB. Ele já está na Google Play e a princípio está rodando tudo ok. Certamente o conteúdo aqui do canal foi essencial no meu crescimento, portanto obrigado!

@rocketseat 4 года назад

Que massa Rodrigo!! Valeeu pelo feedback! 💜💜

@fvgoya 4 года назад

Esse assunto merecia uma playlist a parte.

@rocketseat 4 года назад

Hahah quem sabe! 💜💜

@gbshadow666 4 года назад

Acho bem legal esse tipo de vídeo, explicando o conceito, fazer pensar sobre a aplicação como vc tem que pensar na construção.

@Matt-pd8vm 4 года назад

Até hoje não tive tanta curiosidade sobre o OfflineFirst, mas esse vídeo me mostrou novas possibilidades e ferramentas que já quero estudar haha, agora que estou pegando firme com o React Native vai ser muito legal implementar esse modelo nos apps Obrigado Diegão!!

@pedroimpulcetto 4 года назад

Showww demais!! Sempre muito bom os conteúdos!! Sucesso para todos nós DEVs!!! 🙏🏻🙏🏻🙏🏻

@patrickpecegueiro6917 4 года назад

Minha primeira aplicação após o GoStack foi uma aplicação offline first para a empresa que trabalho, utilizei RealmDB e foi bem pratico, tenho que melhorar muito, mas para primeira aplicação foi um passo gigante! Parabéns pelo conteúdo e obrigado pelas dicas, vou aplicar no projeto

@gabrielknoxx1 4 года назад

Eu recebi uma proposta de projeto que precisaria de algumas funcionalidades offline e eu não tinha ideia de como começar a implementar, esse vídeo clareou minha mente e me deu um norte muito grande para evoluir a aplicação

@Oculterous Год назад

Como ficou o projeto?

@gabrielknoxx1 Год назад

@@Oculterous foi concluído e eu vendi o código. Era um sistema de vendas que armazenava os pedidos offline

@joaovictor852 4 года назад

22:21 - ESPERA, O DIEGO SABE COMO QUE SAI DO VIM? 😮

@RonisonRodrigues 4 года назад

acho que eu não aprendi até hoje, quando acho que aprendi, eu esqueço kkkkkkkkkkkkkkk

@paulosantana9607 4 года назад

Ele teve que formatar o pc no meio do vídeo, pode ver que tem um corte

@saulotarsobc 4 года назад

sempre dou um google kkkkkkkkkkk

@fabioramatis2373 4 года назад

nunca entendi esse meme kkkk coisa mais facil sair do vim, é só desligar a energia da casa e ligar denovo

4 года назад

@@fabioramatis2373 kkkkkkkkkkkkkkk

@miguelhouse4820 4 года назад

Grande Diego. Tô queimando minha ponte de 10 anos Acredito muito no que vcs ensinam. Obrigado

@joaooliveira8601 4 года назад

Isso é super importante e nao temos muitos conteudos na pratica na internet. Parabens rocketseat. Só pelos proximos!

@mattosdavi 4 года назад

Seria top fazer um vídeo mostrando um pouco mais da capacidade do WatermelonDB e a sincronia de dados que ele oferece.

@83923 4 года назад

Uma coisa que temos que ter noção também é a LGPD, tem dados que devem ser tratado como privado pelos sistemas.

@buiuto 3 года назад

O conteúdo do vídeo foi de grande ajuda pra mim, com certeza colocarei isso em um projeto que tenho pra desenvolver nesse ano. Esse Kubuntu também ficou ótimo. Lindão mesmo, podia gerar uma imagem dele e disponibilizar pra nós, hehehehe, ou fazer um vídeo mostrando como configurar todo ele.

@soutoigor_ 4 года назад

Cara veio na hora perfeita, tinha começado seguindo o video antigo um app e tava dando um trabalho do caramba kkk Faz um mostrando como funciona essa conexão do Watermalon com a API pls Valeuu

@rocketseat 4 года назад

Fala, Igor! Valeeu pela sugestão! 💜

@DanielCruz-ud5vj 4 года назад

Continua falando sobre offline first!

@rocketseat 4 года назад

Opa!! Valeeu pela sugestão Daniel! Vamos tentar trazer mais conteúdo sim! 💜

@joaoleno7700 3 года назад

Eu sempre fiz assim: uso um banco de dados SQLlite, e para cada tabela eu crio uma flag e data de alteração, se uma informação for alterada ou cadastrada, quando o usuário tiver conexão com a internet, eu envio todas as alterações que possuem a flag pendente para o banco de dados remoto, e depois aplico um update informando que aquela informação foi sincronizada.

@gubetete Год назад

opa joão tudobem? estou tentando fazer algo parecido com vc, na verdade é quase igual, vc tem um exemplo no git de como fez isso?

@gabrielalmir6517 4 года назад

Diego, o equivalente a 'open' no Linux é xdg-open, você pode fazer um alias que te ajuda a lembrar, é necessário pois no Linux cada interface implementa sua própria maneira de abrir arquivos e URLs, xdg-open basicamente detecta a melhor opção para seu sistema e executa.

@rocketseat 4 года назад

Boaa Gabriel! Valeeu! 💜💜

@matheuswilliam2127 4 года назад

O app do Bradesco possui umas funcionalidades que funcionam sem internet, como por exemplo: o acesso a conta, visualização do saldo, recarga de telefones, etc. Em si eu acho que ele usa o sinal da rede mais próxima para se comunicar com o banco de dados.

@p.romulo6154 4 года назад

Diego, obrigado pelo conteúdo. Sempre grato por seu trabalho... agora manda o link aí para comprar essa blusa ai man ?!

@rocketseat 4 года назад

hahahahha. Valeeu pelo feedback do Diego, Diego 💜

@LosangeloPacifico 4 года назад

React-Native-Offline é uma boa dica para um futuro vídeo.

@rocketseat 4 года назад

Fala Losangelo! Valeeu pela sugestão! 💜

@jtciuri07 4 года назад

Tras conteudo utilizando o watermelon e essa parte de sync com API

@jadsonptr 4 года назад

Massa, mestre !!. Vamos codar.

@saulotarsobc 4 года назад

28:45 cinto de utilidades kkkk. que massa

@rocketseat 4 года назад

Hahaha boa!! 🚀

@andreghisleniraimann 4 года назад

Diego mostra como vc configurou o teu linux

@cauanex6537 4 года назад

up !

@douglaspoma 4 года назад

Faz do WatermelonDB, mostrando como ficaria a Sync em relacionamentos, dos quais ambos foram cadastrados offline...

@rocketseat 4 года назад

Fala, Douglas! Valeeeu pela sugestão!! 💜💜

@douglaspoma 2 года назад

@@rocketseat Não fizeram nada mais sobre o assunto?

@thallyssonklein1943 4 года назад

Excelente conteúdo!

@rocketseat 4 года назад

Valeeeu pelo feedback Thallysson! 💜

@hitalodev4638 4 года назад

Seria fantástico ver algum desses bancos de dados integrados com o Redux ou Redux Saga. Ou até mesmo substituindo-os.

@douglastesch8876 4 года назад

WaterMelon. Gostaria de saber as palavras chaves utilizadas para ter encontrado essas libes mais hidden, podia ter um Masterclass com esse tipo de dica, Pq encontrar informações com boa pesquisa é um tipo de poder. Essa aula já estava na espera, que bom que demorou mas chegou rápido. O/

@juracideoliveira1727 2 года назад

Diego no meu caso eu o cliente vai acessar o conteúdo premium off-line. A única diferença e dados de conteúdo favorito

@GustavoCardoso 4 года назад

Super top o conteúdo

@danielmagalhaes7240 4 года назад

Vale um projetinho com Watermelon e uma estrutura de código "correta" para a implementação do offline first (filas, sync e cache).

@rocketseat 4 года назад

Opa! Valeeu pela sugestão Daniel! 💜

@brdnsousa 4 года назад

Tem um vídeo já usando rn + watermelon db que fizeram, ano passado

@rogerionascimento8049 2 года назад

Diego, vc falou sobre o graphql, dá pra fazer offline first apenas com graphql?

@alienshikadai 4 года назад

Olá Diego, eu acho que a primeira pergunta que devia ser feita, é qual o aplicativo implementar-se-á a funcionalidade de offline first.

@joaoamadeu3659 4 года назад

Show!!

@diegohenrique5227 4 года назад

Todo mundo falando First e eu offline aqui

@geanmachado4221 4 года назад

Parabéns pelo conteúdo!! Conheci seu canal através da indicação de um amigo!! Você é de Rio Do Sul? Sou da cidade de Taió!! Você oferece cursos presenciais? Mês que vem início desenvolvimento de Sistemas no Senai!

@rocketseat 4 года назад

Faala Gean! Isso, tanto o Diego quanto a Rocketseat em si é de Rio do Sul. Nós temos um treinamento mas ele é totalmente online. No link abaixo você pode ver mais detalhes!! rocketseat.com.br/gostack

@leandroaraujo3364 4 года назад

Top demais! E que distro Linux é essa com KDE? :)

@gfrsolutions8042 4 года назад

Mostra como funciona a sync do watermelon no lado do servidor . e qdo o servidor tem dados a enviar?

@naothomachida9746 4 года назад

O browser/navegador que o Diego usa é o Vivaldi. Comentei porque fui procurar e não achei aqui no comentários kkkk

@Guiriloo 4 года назад

Vlw, fiquei procurando tb alguém comentando sobre

@rocketseat 4 года назад

Hahah esse mesmo! 💜

@arthurdebortoli1654 4 года назад

Diegão, traz pra nós o WatermelonDB!!! Voce comentou que ele suporta decorators ou observables do typescript, fui pesquisar e também não entendi muita coisa, até porque sou iniciante no TS. Se puder já dar uma explicada nesses conceitos que traz na homepage do Watermelon, seria de muita valia também!

@rocketseat 4 года назад

Faala Arthur! Valeeu pela sugestão! 💜

@arthurdebortoli1654 4 года назад

@@rocketseat será que é o diego que responde? 😱😱😱

@jonatasrosamoura9666 Год назад

Como que faz Offline first com aplicação PWA?

@romerioribeiro9163 4 года назад

O que vocês recomendariam de tecnologia para processar atualizar uma grande quantidade de informação?

@LGKentertainment 4 года назад

Faaaala Diego! Como aplicaríamos o off-line first caso os payloads fossem imagens,ou arquivos de áudio, e não simples objetos ? Exemplo: eu acumularia uma série de arquivos de mídia, e quando tivesse conexão disponível, faria esse upload para um s3 ou google cloud storage... Existe algum paradigma, ou ferramental pra resolver esse problema ?

@renansantos8727 4 года назад

Achei pouco conteudo sobre WaterMelon DB no YT, ajuda nós aí Diego! (CodeDrops sem código foi meio tenso hein)

@rocketseat 4 года назад

Hahahah valeeeu Renan! 💜

@isaipack 4 года назад

Acho que o mais importante pra entender primeiro é o banco de dados, então, manda o vídeo de WatermelonDB, Diego.

@rocketseat 4 года назад

Opa!! 💜💜

@alissonmelquiades5743 4 года назад

Offline first com expo não rola né? Conteúdo muito top

@euvocemodaesportivasltdabo4107 4 года назад

BOA NOITE FERA!!

@fahanjo 4 года назад

Na empresa que trabalho estamos utilizando RealmDB quando está offline e quando está online utilizamos o Postgres, e há toda uma lógica de sincronia de dados entre os DB's

@alexandrehansen3419 4 года назад

Diego, conseguiria fazer uma abordagem rápida com websockets e offline first?

@rocketseat 4 года назад

Faala Alexandre! Valeeu pela sugestão! 💜

@fredguth1315 2 года назад

Pouch e CouchDB?

@FernandoPonteFilho 4 года назад

O "open" do Linux tá no pacote do "xdg-utils". No caso do Arch e MintLinux é esse mesmo o nome.

@assisnetodamasceno93 4 года назад

muito bom

@UmFilipe 4 года назад

Linux, Mac ou Windows para programar? (sei que o Linux/Mac são melhores mas ainda não me convenci para trocar de SO ou fazer dual boot) #PR

@brdnsousa 4 года назад

Depende mto do que quer fazer e usar, pq cada um tem suas peculiaridades e melhoras, por exemplo, usar docker no Windows não é mto legal, mas no Linux é melhor, já usar o Android Studio no Linux dar mto trabalho que no Windows por exemplo é melhor, tem que olhar a necessidade do q vc vai fazer

@renanfelipe4169 4 года назад

vim tmux kitty i3 e Linux é perfeito mas não é plug in play

@GabrielLima-pv9nl 4 года назад

Faz um video falando das opções de libs para React Js

@renanricoldifroispedro3755 4 года назад

Acho que n tem MT sentido em offline First para sites, já que eles precisam ser acessados e tal?

@casadogaspar 4 года назад

Trocou o Mac por linux ou está só testando algo novo?

@eduardoprates6783 4 года назад

First!

@wesleycristiano289 4 года назад

Second

@NewtonJR1987 4 года назад

Vídeo top em! Tenho uma dúvida não em relação ao React Native e sim para Web (PWA), na parte de autenticação sobre salvar a identificação do usuário em um storage seguro dentro da aplicação, existe algum seguro para web? Atualmente eu utilizo muito o localStorage e o IndexedDB, mas de seguro não tem nada né, qualquer um pode ir lá e olhar os dados.

@sampaioleal2140 4 года назад

acredito que você deve se preocupar mais na segurança da API, fazer com que o token tenha permissões para apenas os registros que pertencem a ele, etc.... pq realmente no front n tem nada que o usuário n possa ver, até pq tá tudo "local" né

@sampaioleal2140 4 года назад

um problema que vejo mtt acontecer é tokens tendo permissões para todo tipo de registro Ex em uma aplicação como o YT: usuário pode deletar vídeos de outro usuário requisitando um DELETE em /video/

@NewtonJR1987 4 года назад

@@sampaioleal2140 Entendi. Na verdade eu já faço isso de validar o usuário, mas valeu pela dica, o negócio é tentar blindar ao máximo as autorizações do usuário no backend como você falou. Obrigado.

@sampaioleal2140 4 года назад

@@NewtonJR1987 pse, eu duvido muito que venha ter algo assim "seguro" no front O jeito é blindar o back que é oq a gente tem controle

@lucasluizss 4 года назад

Cadê o App mobile da Rocketseat? 🤔

@sora6430 4 года назад

O RealmDB e o Wtermelon são usados para React Native? Ou dá para usar com o React e Node?

@rocketseat 4 года назад

Fala dev! São para o RN! 💜

@geovanildsilva 4 года назад

É possível fazer um aplicativo totalmente offline? Tipo salvar todos os dados no aparelho da pessoa?

@geovanildsilva 4 года назад

@@JohnProudStar Não sabia muito obrigado pelo feedback

@RomuloAssis7 4 года назад

Se eu estiver usando Apollo com Graphql e colocar as querys em cache, também é uma forma de trabalhar com offline-first?? #PR

@rocketseat 4 года назад

Fala, Romulo! Valeeu pela sugestão para o #PR! 💜

@sampaioleal2140 4 года назад

diegão de KDE, hehehe, adorei

@eduardosbk589 4 года назад

Coincidência, ouvi hj de manhã o faladev #17

@rocketseat 4 года назад

Coincidência nada, nós lemos mentes! 🔮

@OMatheusBenites 4 года назад

traz conteudo de watermelon na parte de syncronismo

@rocketseat 4 года назад

Faala dev! Valeeu pela sugestão!! 💜

@gustavosantos5889 4 года назад

Que versão é essa do linux, pode passar as configurações certinha?

@rocketseat 4 года назад

Faala Gustavo! É o Ubuntu 20.04 com KDE Plasma! 💜

@Pepa667 4 года назад

Cara, preciso fazer um app em que eu possa inserir animações em uma gravação live do face... Tipo: Camera -> app insere animações (css, js, geradas no after fx) -> vídeo resultado é transmitido como saída final pra captura do face Que plugins devo procurar

@crjstjanojose 2 года назад

WaterMelon é uma boa pra Galera,

@RonisonRodrigues 4 года назад

Diegão, faz um vídeo usando WatermelonDB na prática, fazendo um ToDo da vida ou algo do tipo kkkk

@rocketseat 4 года назад

Boa! Valeeu Ronison! 💜

@ebnermatias7979 4 года назад

TOP

@joaooliveira8601 4 года назад

Um exemplo com REALM seria afude

@AndreLuis-gj7yb 4 года назад

Traz um code challange com offline first

@rocketseat 4 года назад

Opa!! Valeeu pela sugestão Andre! 💜

@Kgtc3300K 4 года назад

Realm era top, o mongo comprou... Tá mais ou menos a versão beta, tá cheio de bugs, mas quando sair release vai tá top p offline first

@ismaelaquino2448 4 года назад

Por quê está usando Linux e não o MacOS? Apesar desse Linux tá bem com cara de Mac 😂 #PR

@rocketseat 4 года назад

Na verdade sempre utilizamos os 2! Porém o Linux tem se mostrado muito melhor para gravar as aulas e também fica mais perto do mesmo ambiente que a maioria dos alunos utilizam 💜

@lucasviece 4 года назад

nenhum deles da com EXPO =/

@ygorluiz 4 года назад

Só eu notei que eles migraram para o Linux ? XD Qual o motivo ?

@oallanmendes 4 года назад

Também queria saber, mas meu chute é de que seja pra quebrar um pouco do distanciamento inicial que criam com novos alunos/visitantes quando os veem usando Mac.

@brdnsousa 4 года назад

Na live falou que o Mac não dava conta se não me engank