Executando verificação de segurança...

3 min de leitura ·

[Pitch] - TabNews Mobile - React Native

Apresento à vocês o TabNews Mobile. Iniciei ele para renovar meus conhecimentos em RN com expo, pois estava há 1 ano sem desenvolver nada para mobile. Claro! Longe de estar perfeito, mas dá pra fazer o básico: Ler, publicar, comentar, votar e responder. Não cheguei a botar contra o fogo e utilizar no dia a dia, mas quero muito a opnião de vocês.

Ficam aí algumas imagens

Desenvolvendo

Bom, antes de qualquer, vou colocar alguns pontos:

O projeto não é comercial! Esta mais para uma POC, porém quero sim subir nas lojas para uso público, assim como é o site tabnews.com.br!
Não tenho nenhum vínculo com o site oficial, logo, pelo menos por enquanto, talvez não consiga dar o suporte necessário. Caso venha se tornar útil para comunidade, minha ideia é adicionar colaboradores, assim podemos todos dar suporte e adicionar melhorias.
O app ainda pode ter falhas, algumas já são conhecidas (mais abaixo), mas a ideia de postar aqui, é essa mesmo: descobrir problemas e pontos de melhora.

Caso queira ver o app rodando

O projeto foi desenvolvido em React Native + Expo, o que torna o desenvolvimento e publicação extremamente mais prático. Por estar em modo público, qualquer um com o link e o app Expo Go, consegue abrir a última versão (03/01/2023):

IOS

exp://u.expo.dev/update/93b983ce-b4c4-4d22-b356-3d572cdf4b08

Android

exp://u.expo.dev/update/90e9d479-70ca-4f84-8bb2-600e94d3ba58

Caso queira conhecer o app

Pra quem quiser acompanhar o desenvolvimento ou sugerir novas feature, este é o repositório do app: https://github.com/danielkv/tabnews-mobile

Falhas conhecidas

O conteúdo de algumas publicações foram convertidas incorretamente ou parcialmente convertidas. Como o markdown aceita também html acredito que a lib utilizada não soube lhe dar muito bem com isso.
A navegação ficou um pouco lenta. Em alguns testes entre páginas a navegação engasgou em alguns momentos no emulador. Não percebi isso no dispositivo.
Não foi testado em dispositivo IOS ainda

Finalizando

Espero que gostem!

UI simples e fiel ao site, muito bom!

Parabéns é uma ótima ideia talvez você consiga apoio dos criadores do tabnews para continuar esse projeto.

Autor

Boa, seria muito legal se conseguir! Acho que os leitores iriam curtir bastante também!

Clean, exatamente como deveria ser. Está muito bom visualmente o projeto! Parabéns pela iniciativa, vou seguir no GitHub.

wow! Que massa! Gostei do UI apresentado nas imgs, com certeza um projeto promissor!

Que show man, parabéns.

Já pensei em iniciar um projeto como esse do tabnews, mas sabe como é programador, a gente tem muitos projetos na cabeça mas não damos o primeiro passo hehe.

Trabalho diariamente com React Native faz alguns anos. Vou seguir o projeto no Github, talvez eu possa contribuir com algo.

Autor

Com certeza vagner. Manda ideias aew. Quanto mais gente colaborar melhor vai ficar o app.

Baita projeto Daniel. Comecei a programar a pouco para mobile e escolhi React Native (Expo) pelas suas facilidades para quem já tinha experiência com JavaScript/React.

Autor

Boa Thiago, há 8 anos atrás comecei com React Native pelo mesmo motivo, eu já tinha uns 10 anos de JS o que ajudou muito. Acredito que optei pelo caminho certo hehe! Gosto muito do Flutter também, mas minha paixão mesmo ta no JS. Pra web já estudei de tudo um pouco: Angular, Svelte, Vue, etc, algumas muito promissoras, como o próprio Svelte, que PARECE ser mais performático que React, mas é uma mudança de paradigma bem grande.

Mas cara, força nos estudos que vamos longe! Precisando de ajuda em algo ae, só chamar, podemos trocar experiências.

Estou focado em aprender react, next e react native para ter um bom conhecimento em web e mobile. Mas tenho planos de estudar node para agregar o backend nos estudos também. Aprendizado tem que ser contínuo.

Autor

Boa, tenta focar bastante na linguagem e estruturas. Typescript também é uma boa estudar.

Na verdade eu iniciei com PHP, como era pra web acabei precisando do JS, mas depois o backend foi tranquilo.

Ficou sensasional, vou seguir o projeto e me aprofundar em React Native. Parabéns !!!

Excelente conteúdo, Baita projeto Daniel!
Gostaria de ver esse projeto na loja(google play ou apple store), acredito que será um baita aprendizado para vc. abraço.

Autor

opa, claro! vou colocar nas lojas sim, porém para apple é mais complicado, é caro a conta de desenvolvedor. Como ja coloquei alguns apps nas lojas a conta para Android já tá habilitada, é bem mais baixo o custo, mas da Apple além de ser mais caro, tem recorrência anual.

sem duvida um otimo app, pelo que percebi você ta acessando a pagina web recomendo acessar via API que a latencia e o erro com o markdown vai ser resolvido... parabens pelo app

Autor

Opa, é realmente pela API, estou utilizando uma lib chamada react-native-markdown-display pra converter e mostrar o conteúdo.

Eu acredito que com algumas configurações eu faça funcionar, não me dediquei ainda muito pra esse erro, quis terminar e lançar aqui pra mostrar pra galera.

Mas já agradeço pela dica!

DiegoRamosGomes

Eu estava fazendo um app do tabnews em react native também e testei essa mesma lib que vc porém não curti muito ela, optei eu usar a react-native-github-markdow, com ela a parte de html fica tranquila e o markdown também porém isso acontece por que ela gera uma webview com o conteudo

Na minha opinião, se a ideia é uma POC não teria problema em ter a webview por traz apenas do conteudo

Autor

oi Diego, inicialmente eu coloquei uma webview, porém percebi que a performance caiu muito e algumas vezes crashou o app. Acho que por conta de exibir vários conteúdos na mesma rota acaba pesando muito ter várias webview.

também se quiser sugerir algo através de uma issue, fica a vontade, de verdade. é um app pra galera usar mesmo.

achei que vc estava acessando via web pois o template e igual, ficou bom o app

Autor

Ah sim, segui o mesmo layout pra não variar mesmo, mas tô aberto a sugestões de mudanças. É um app para a comunidade, então a ideia é pra ficar o melhor possível pra todo mundo.

baixei o codigo e sem duvida você mandou bem na programação parabens, precisa implementar uma segurança maior no token que e atribuida como string.

Autor

Esse token é gerado pela própria API do tabnews, eu apenas guardo ela com AsyncStorage. Não sei se há alguma maneira de adicionar alguma camada de segurança pelo lado do client, pelo menos desconheço.

Caso saiba algum jeito de fazer, podemos abrir uma issue lá no repositório, acho que fica até mais fácil discutir lá coisas mais específicas. Depois colocamos o link aqui nos comentários pra quem quiser acompanhar.

Update

Achei essa lib que talvez ajude com isso: https://github.com/oblador/react-native-keychain, mas há alguns pontos pra considerar. Como náo estou salvando username e password, teria que adptar pra essa lib.

Outra coisa também é que o token ele expira (se não me engano em 24h), logo o usuário teria que logar novamente. Não sei se é um grande risco manter no AsyncStorage apenas.

De qualquer forma, do jeito que montei o código seria fácil pra alterar usando essa lib.

show!

codecompanybrasil

Interessante. Só um adendo, estava dando uma olhada no app pelo expo android e vi ele não está interpretando algumas tags HTML nos posts, como IMG ou A. Foi as que eu achei.

Fiz o teste no meu próprio post:

https://www.tabnews.com.br/codecompanybrasil/notificacao-de-publicacoes-do-tabnews-no-discord-como-fiz-essa-integracao-discord-py

Mas parabéns pelo projeto e boa sorte no desenvolvimento! Ganhou meu like

Autor

Isso mesmo codecompanybrasil. Já é um bug conhecido hahaha. eu to tentando resolver aqui, acho até que ja cheguei em uma solução, mas nao consegui implementar ainda hoje. Acho que até dou volta nisso!

Parabéns pelo baita projeto! Já vários clientes aqui no TN desde Python, Flutter, etc... e me alegro todas as vezes que vejo mais um projeto destes! Tem muito valor! Contribui adicionando uma estrela no repo 🙂😝 Só uma coisa que acho que pode fazer sentido é colocar [Pitch] no título da publicação, pois assim fica mais fácil identificar publicações valorosas como essas de projetos. Muito obrigado pelo projeto mais uma vez!

Autor

Pow valeu Victor, que legal qur gostou. Vou ver a possibilidade de alterar o título pra adicionar [Pitch].

tarcisiodelmondes

Daniel você consegue colocar o QR Code do link para acessar o app com Expo? Assim quem ta no computador poderia apontar o celular para o QR Code e baixar o app no Expo.

Em relação a o app estar lento no emulador, acredito que seja normal ja que o emulador do Android não é do melhores, se no celular estiver bem é o que importa

Autor

Opa vou pegar o qrcode aqui, ja coloco ae. 10min 😅

Autor

Aew galera, mals não ter mais atualizado o app no expo, hoje não consegui dar atenção, surgiu muita coisa no trampo. Prometo que até segunda trago alguma novidade!