React Native – O projeto /dev/All Mobile – Introdução
Tags: braziliandevs, react, javascript
Published: 2021-06-15 14:01:07

---
title: React Native – O projeto /dev/All Mobile – Introdução
published: true
tags: braziliandevs, react, js
cover_image: https://devkico.itexto.com.br/wp-content/uploads/2020/03/devall_mobile_post.png
---

<!-- wp:paragraph -->
<p>No <a href="https://www.itexto.com.br/devkico/?p=3009" class="rank-math-link">post anterior</a> mencionei o projeto <em>/dev/All Mobile</em>. Agora o apresento: a ideia é que todos possam acompanhar o desenvolvimento de um projeto baseado em React Native. Assim vocês poderão entender por que cada detalhe do app é da forma que se encontra e as principais dificuldades (e atalhos!) descobertos no processo de desenvolvimento.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>O projeto - arquitetura do /dev/All</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O /<a href="https://devall.com.br" class="rank-math-link">dev/All</a> nasceu como um agregador de blogs e sites voltados ao desenvolvimento de software em língua portuguesa. Há essencialmente dois tipos de usuários que acessam o site:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Leitores - as pessoas que leem os posts apresentados pelo /dev/All.</li><li>Autores - as pessoas que cadastram seus sites no /dev/All para que nosso crawler obtenha seus últimos posts e, na sequência, os apresentem aos leitores.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>O funcionamento é bastante simples: no momento em que os <strong>autores</strong> cadastram seus sites no /dev/All, seu crawler (Feed Hunter) começa a monitorar estes sites em busca de novos posts que serão apresentados no front-end. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Do ponto de vista arquitetural o /dev/All é composto pelos elementos apresentados no diagrama a seguir:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3070,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-8.png" alt="" class="wp-image-3070"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Mobile client - é a interface pública do /dev/All - inicialmente o projeto foi focado em dispositivos móveis, mas hoje sabemos que 80% dos acessos vêm de clientes desktop (guardem este dado, será importante mais à frente).</li><li>API (aka Core) - é o coração do projeto, aonde encontram-se implementadas todas as regras de negócios e acesso a dados no projeto.</li><li>Feed Hunter - é o componente responsável por monitorar os sites cadastrados, obter novos posts, tratá-los, classificá-los (novidades em breve) e disponibilizá-los à API.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>É muito importante pra nós que o projeto seja composto por estes três componentes independentes, pois isto nos permite, além de maior flexibilidade, também a possibilidade de testarmos tecnologias que usamos na itexto com nossos clientes. Isto nos possibilitou, por exemplo, validar tecnologias como Angular, Vue, React e muitas outras tecnologias front-end no cliente móvel, e diversas outras como Micronaut, Node, Ruby on Rails na API e outras tecnologias de classificação no Feed Hunter.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Internamente portanto o /dev/All é um grande laboratório para a itexto. Com esta visão macro, vamos agora às funcionalidades que o site oferece hoje.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Funcionalidades e comportamento do usuário (e nossos fracassos)</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O projeto /dev/All Mobile poderia terminar como uma prova de conceito se não tivéssemos feito um estudo a respeito de quais seriam as funcionalidades mais usadas do /dev/All. Os resultados que obtivemos foram surpreendentes. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A ideia inicial do /dev/All era apenas apresentar estes posts, mostrando quais os mais populares (mais clicados). Só que em 2018 pensamos em evoluir estas interações: e se os usuários pudessem também comentar estes posts? Marcá-los como positivos ou negativos? Compartilhá-los com seus contatos? E com base nisto incluímos as seguintes funcionalidades no site:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Os usuários podem votar positiva ou negativamente os posts apresentados.</li><li>É possível criar mini discussões em cada um dos posts.</li><li>Buscar posts (temos uma busca bem boa, diga-se de passagem).</li><li>Visualizar os últimos posts encontrados pelo crawler.</li><li>Favoritar os posts que mais lhe interessam.</li><li>Compartilhar posts.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Todos estes recursos foram incluídos no /dev/All por que eram recursos que <strong>eu</strong> gostaria de usar. Repare: não houve aí uma pesquisa de mercado, apenas o desejo de existir uma ferramenta que <strong>nós</strong> gostaríamos de usar. E aí está o mais interessante. Vamos aos números.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Favoritos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Na minha opinião este seria o recurso mais útil de todos os tempos! As pessoas devem usar bastante os favoritos do /dev/All, certo? Vamos aos números. Quantos favoritos são criados pro ano no /dev/All excluindo o meu usuário?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3071,"width":451,"height":214,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-9.png" alt="" class="wp-image-3071" width="451" height="214"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Estamos em MARÇO de 2020: <strong>ninguém</strong> marcou um post sequer como favorito. Faz total sentido isto: sites como pocket realizam um trabalho muito melhor que o do /dev/All.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Votos positivos ou negativos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Este recurso seria muito interessante para o Feed Hunter, pois nos possibilitaria detectar, por exemplo, posts nocivos ou que não tivessem a ver com o nosso foco. Além disto me parecia ser uma funcionalidade bem interessante: saber o que os outros usuários pensam a respeito do que leem no site. Vamos aos números?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3072,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-10.png" alt="" class="wp-image-3072"/><figcaption><br><br></figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Olha que interessante: no primeiro ano tivemos 110 votos apenas. Daí pra frente percebe-se claramente que é um recurso que quase ninguém usa no site. Adivinha de quem são a maior parte dos votos (que foram excluídos destes números)? Meus, claro. :)</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Comentários</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Este aqui doeu: a ideia seria que o /dev/All fosse um mini fórum para os posts mais interessantes. Vamos aos números. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3073,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-11.png" alt="" class="wp-image-3073"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Observe que durante todo o ano de 2019 só houve QUATRO comentários. Notou também que estou excluindo o usuário que é igual a 1? Aquele sou eu. :)</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Busca e visualização de posts</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Se ninguém tiver acessando o /dev/All então é hora de fechar as portas, certo? Aí que as coisas mudam e bastante. Primeiro vou mostrar aqui o número de cliques nos posts presentes em nossa tabela de histórico no sistema.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3074,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-12.png" alt="" class="wp-image-3074"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Quase 1.7 <strong>milhões</strong> de cliques durante todo este período. No histórico temos cliques que vão de 15/5/2015 até 30 de dezembro de 2019. E como estão as coisas em 2020?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3075,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-13.png" alt="" class="wp-image-3075"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Quase 37.000 cliques até o meio de março. Se mantivermos o ritmo, até o final do ano a projeção é para que tenhamos algo em torno de 178.000 cliques. Olha: as pessoas <strong>usam</strong> o /dev/All!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Infelizmente nós não temos o registro das buscas realizadas no site, mas consultando os logs do nosso servidor vimos que o endpoint de busca de fato <strong>é usado</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Observe que há uma redução significativa no número de cliques que o site recebe. Há uma razão para isto também: nós vacilamos na divulgação do site e acabamos deixando de lado sua divulgação em 2019. <strong>Mas em 2020 a história é outra!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Novo velho foco</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Leitura, leitura, leitura!</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As pessoas acessam o /dev/All portanto para ver o que estão escrevendo por aí. Não pra interagir com outras pessoas. Mesmo por que para fazer isto elas precisam se cadastrar no site, o que dá trabalho e a maioria simplesmente não quer. Sendo assim o foco deve ser a <strong>leitura deste material</strong>. E isto vai ficar claro quando você ver a diferença dos cards que apresentam os posts no /dev/All. Veja como é o card no site:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3077,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-14.png" alt="" class="wp-image-3077"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>É um <strong>super card!</strong> Você faz tudo nele: comenta, vota positivo ou negativo, marca como favorito e compartilha <strong>apenas no Twitter</strong>. Também vai te levar pro post em si (indiretamente) e também pros últimos posts publicados pelo site. Vamos ver como é o card no projeto /dev/All Mobile?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3078,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-15.png" alt="" class="wp-image-3078"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>É só isto: você vai <strong>diretamente</strong> ao post, pode ver os últimos posts publicados pelo autor e compartilhar este link <strong>com quaisquer fonte que você quiser</strong>. Note que até as cores são diferentes: o app já nasce com dark mode ativado como padrão pra facilitar <strong>a leitura</strong>. Além disto apenas o essencial é exposto.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As cores também fazem sentido: elas indicam a você <strong>o quê é clicável</strong>. E as cores distintas mostram que o alvo varia. Mas nós vamos melhorar isto no futuro, não fiquem tristes.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>E a busca, cadê?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Se você acessar /dev/All vai notar que logo no topo a busca sempre está presente. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3079,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-16.png" alt="" class="wp-image-3079"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Agora, no celular o que te interessa de <strong>imediato</strong> não é a busca, mas sim os últimos posts encontrados. Mais que isto: você quer ver <strong>mais posts em um espaço limitado</strong>. Então como resolvemos isto? Bom: pra começar, a busca não é exposta imediatamente. Observe o cabeçalho do app:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3080,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-17.png" alt="" class="wp-image-3080"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Você tem o logotipo do projeto (clicando recarrega os últimos posts) e imediatamente os últimos posts encontrados. Então como faço pra chegar na busca? Olha o fundo da página:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3081,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-18.png" alt="" class="wp-image-3081"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Se você quiser buscar, basta clicar na lupa. A busca será exposta pra você. Inclusive melhoramos um pouco este recurso salvando suas últimas pesquisas para que você possa repeti-las no futuro.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3082,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/devkico/wp-content/uploads/2020/03/image-19.png" alt="" class="wp-image-3082"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Ah, quer ver o app em ação? Dado que o lançamento pra iOS está sendo um pouco mais chato, gravei um vídeo para que todos possam ver seu funcionamento:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/EuRVAag2sXA","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/EuRVAag2sXA
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>Próximos passos</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O objetivo como disse é documentar todo o processo de evolução deste projeto. O primeiro release já está liberado no Google Play e também pelo próprio Expo. Vamos às próximas evoluções do projeto então.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Tornar o /dev/All seu feed reader padrão - você vai poder incluir seus próprios sites no /dev/All. Gosta de ler um site que não tem nada a ver com tecnologia? Você vai poder acompanhar seus últimos posts pelo /dev/All.</li><li>Receber notificações - gostaria de saber quando aquele site publicou algo? O /dev/All vai te avisar. </li><li>Melhorias de usabilidade - hoje a usabilidade do /dev/All é bem rudimentar. Vamos melhorar <strong>muito</strong> isto.</li><li>Talvez a inclusão dos recursos que nunca foram usados da versão web no app.</li><li>Apresentar as principais dificuldades relacionadas à publicação do app nas lojas da Apple e Google (muita coisa pra falar aqui).</li><li>Como usar algumas bibliotecas essenciais relativas ao React Native, como o React Navigation e o Redux.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Resumindo: o projeto é uma justificativa pra uma série de posts, e a ideia é que vocês os acompanhem tanto no blog quanto pelo app, vendo todas as evoluções e entendendo por que e COMO foram implementadas.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Como acompanhar</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Leve em consideração neste momento que temos um app estritamente funcional aqui. Você será capaz de ver os últimos posts, conhecer os autores deste conteúdo e realizar buscas apenas. Não há autenticação no app ainda por que os recursos que requeiram a autenticação do usuário, como puderam ver, simplesmente nunca foram usados em massa.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Mas você pode ter o app instalado em seu celular Android (iOS em um futuro bem próximo). Basta acessá-lo na loja clicando no link a seguir:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","width":465,"height":310,"linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><a href="https://play.google.com/store/apps/details?id=br.com.devall.mobilern"><img src="https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/11231217-18675665.jpg?v=1487751326" alt="Resultado de imagem para google play" width="465" height="310"/></a></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Pelo expo você também pode testar o projeto. Nós o publicamos no link abaixo. Mas note: este link <strong>só funciona para usuários Android</strong>. Infelizmente no caso do iOS apenas o dono do projeto (eu) pode acessar o app por lá.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","width":322,"height":157,"linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><a href="https://expo.io/@kicolobo/devallmobile"><img src="https://lh3.googleusercontent.com/7l-bQADRV4PzxAz_9GH2aozV3jkHqdlUJbOsIf4Eu_bazCi6UH_UyiAeKer2-s9GafI" alt="Resultado de imagem para expo.io" width="322" height="157"/></a></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Publicaremos novidades também na Revista do /dev/All. E, claro, contamos com seu feedback, que sempre será muito bem vindo!</p>
<!-- /wp:paragraph -->