Forem: Proesc

Como criei um dashboard estratégico com Streamlit usando dados do Jira (sendo Product Owner)

Aline Daher — Wed, 15 Jan 2025 20:03:46 +0000

Como Product Owner, meu papel é atuar como um facilitador de decisões estratégicas, ajudando a liderança e o time a alcançar seus objetivos com base em dados precisos e acionáveis. No meu dia a dia, identifiquei uma necessidade crítica: acessar informações detalhadas e personalizadas sobre o desempenho do time técnico, composto por profissionais de dados, desenvolvedores, infraestrutura, UX e PMs.

A abordagem tradicional de obter essas informações diretamente no Jira provou ser recorrente, pouco escalável e custosa, principalmente pela dependência de aplicativos adicionais da plataforma. Diante desse cenário, resolvi criar o Tech Reports, um ambiente personalizado que me permite coletar métricas específicas e gerar relatórios sob medida, adaptados às demandas tanto do time quanto da liderança.

Essa iniciativa vai além das atribuições tradicionais da minha função, mas trouxe um impacto significativo ao meu trabalho. Com o Tech Reports, consegui otimizar processos, reduzir custos e, mais importante, garantir que dados confiáveis e relevantes estejam sempre disponíveis como base para decisões estratégicas.

Confira os tópicos que abordaremos hoje:

Por que criar uma solução própria?
Relatórios no ambiente
Ferramentas e tecnologias
Código em ação
Impacto no time e na liderança

Vou explicar como esse projeto foi estruturado, os relatórios que implementei e o impacto que ele teve na equipe e na liderança.

Por que criar uma solução própria?

Embora o Jira ofereça ótimos recursos, nem todos atendem às necessidades específicas de times ou lideranças. Alguns impedimentos me motivaram a criar o Tech Reports

Custos adicionais: Muitos relatórios ou dashboards no Jira requerem plugins pagos.
Falta de personalização: As visões disponíveis nem sempre atendem às necessidades do time ou da liderança.
Tarefas repetitivas: Criação e gestão de sprints em múltiplos boards tomavam um tempo precioso.

A solução? Uma ferramenta personalizada que integra a API do Jira com dashboards interativos criados com Streamlit e Plotly.

Relatórios no ambiente

Os relatórios do Tech Reports foram desenvolvidos para trazer uma visão abrangente e detalhada das sprints e da capacidade das equipes. Aqui estão os principais relatórios e suas funcionalidades:

Quantitativo da sprint
Apresenta uma visão geral das tarefas da sprint, categorizando-as em: total, tarefas planejadas e tarefas não planejadas.
Esta segmentação permite compreender rapidamente o panorama da sprint em termos de volume e organização.

Entrega planejada vs não planejada
Compara a entrega de tarefas planejadas com as tarefas não planejadas, destacando a proporção entre elas. Esse comparativo ajuda a visualizar o equilíbrio entre demandas planejadas e urgências.

Resolução da sprint
Exibe o percentual de tarefas em cada status, oferecendo uma visão geral do progresso e da conclusão das atividades durante a sprint.

Tarefas não planejadas por setor
Analisa quais setores são responsáveis por originar o maior número de tarefas não planejadas, ajudando a identificar padrões e oportunidades de melhoria no planejamento.

Visão por squad
Detalha a distribuição de issues por membro do time, incluindo o status atual de cada tarefa, com uma visualização colorida para facilitar a identificação rápida.

Capacidade do squad
Apresenta a capacidade de trabalho de cada membro em horas estimadas, destacando potenciais sobrecargas ou subutilização de recursos.

Medição de horas trabalhadas e horas planejadas
Realiza a comparação entre as horas planejadas e as horas efetivamente trabalhadas por cada integrante da equipe, identificando desvios nas estimativas e na execução.

Disponibilidade da equipe por sprint
Mostra a capacidade remanescente de cada membro com base em um limite padrão de 75 horas por sprint, facilitando o gerenciamento de recursos e a alocação de novas tarefas.

Taxa de utilização
Indica a proporção de utilização de cada membro da equipe em relação à capacidade máxima estipulada, permitindo monitorar o ritmo de trabalho.

Distribuição de esforço por cargo
Fornece uma visão detalhada da divisão do esforço entre diferentes cargos dentro da sprint, com base no total de horas dedicadas.

Distribuição de esforço por issue
Apresenta a alocação percentual de issues por responsável, utilizando estimativas de horas como métrica principal, permitindo analisar a carga de trabalho individual de forma precisa.

Ferramentas e Tecnologias

Essas foram as ferramentas e bibliotecas que usei para dar vida ao projeto:

Streamlit: Framework para criar dashboards web de forma simples e rápida.
Requests: Para consumir e manipular dados da API do Jira.
Pandas: Para transformar e estruturar os dados.
Plotly: Para criar gráficos e visualizações interativas.
Streamlit-authenticator: Controle de acesso e autenticação de usuários.
Python-dotenv: Gerenciamento de variáveis sensíveis, como tokens de API.
Psycopg2: Conexão com banco de dados PostgreSQL
Openpyxl: Manipulação de relatórios em Excel.
Boto3: Integração com AWS para armazenar arquivos.

Nota: É necessário instalar o Streamlit antes de iniciar o projeto. Confira a documentação oficial para instruções de instalação.

Código em ação

1. Configurando a autenticação com a API do Jira
Antes de acessar os dados, configuramos a autenticação usando as credenciais armazenadas em variáveis de ambiente. Essas credenciais são codificadas em base64 para serem enviadas como parte do cabeçalho das requisições.

import base64
import os
from dotenv import load_dotenv

// Carrega variáveis de ambiente
load_dotenv()

// Configuração de credenciais 

jira_username = os.getenv("JIRA_USERNAME")
jira_api_token = os.getenv("JIRA_API_TOKEN")
jira_domain = os.getenv("JIRA_DOMAIN") 

// Codifica as credenciais para autenticação

jira_credentials = f"{jira_username}:{jira_api_token}"
jira_encoded_credentials = base64.b64encode(jira_credentials.encode()).decode("utf-8")

// Cabeçalhos para requisições
def get_jira_headers():
    return {
        "Authorization": f"Basic {jira_encoded_credentials}",
        "Content-Type": "application/json"
    }

Dica: Certifique-se de configurar suas variáveis de ambiente corretamente no arquivo .env com as seguintes informações:

JIRA_USERNAME=seu_usuario
JIRA_API_TOKEN=seu_token
JIRA_DOMAIN=seu_dominio.atlassian.net

2. Coletando sprints e issues
Usei a API para buscar todas as sprints ativas e fechadas de um board específico. Isso permite que o sistema exiba opções dinâmicas no dashboard.

@st.cache_data(show_spinner=False)
def get_all_sprints_for_board(board_id):
    headers = get_jira_headers()
    url = f"https://{jira_domain}/rest/agile/1.0/board/{board_id}/sprint?state=all"
    response = requests.get(url, headers=headers)
    if response.status_code == 200:
        sprints = response.json().get("values", [])
        return sorted(sprints, key=lambda x: x.get("startDate", ""), reverse=True)
    else:
        st.error("Erro ao buscar sprints.")
        return []

Essa abordagem organiza as sprints em ordem cronológica, permitindo que o dashboard exiba dados recentes primeiro.

3. Processando e visualizando dados
Para transformar as informações das tarefas em insights úteis, criamos um DataFrame usando Pandas. Em seguida, utilizamos Plotly para visualizações interativas. Aqui está um exemplo de gráfico de pizza que mostra a distribuição de esforço por cargo:

@st.cache_data(show_spinner=False)
def process_issues_by_role(df):
    // Agrupa tarefas por cargo e ajusta horas
    df['Role'] = df['Assignee'].apply(assign_role)
    role_hours = df.groupby('Role')['Time Estimate'].sum().reset_index()
    return role_hours

// Exibição do gráfico
fig_role = px.pie(
    role_hours,
    names='Role',
    values='Time Estimate',
    title="Distribuição de Esforço por Cargo",
    width=800,
    height=600
)
st.plotly_chart(fig_role)

4. Medindo capacidade e utilização
Um dos dashboards mais úteis é o de capacidade. Ele compara as horas planejadas e trabalhadas por cada membro da equipe:

fig_hours = px.bar(
    df_hours,
    x="Assignee",
    y=["Horas Planejadas", "Horas Trabalhadas"],
    barmode="group",
    title="Medição de Horas Planejadas vs Trabalhadas",
)
st.plotly_chart(fig_hours)

Dica: Defina uma capacidade máxima por sprint (exemplo: 75 horas por membro) para calcular a disponibilidade restante de cada integrante do time.

Impacto no time e na liderança

Com o Tech Reports, consegui criar uma visão detalhada sobre o time técnico, englobando desde a capacidade de entrega até a performance em sprints. Alguns dos principais benefícios incluem:

Tomada de decisão baseada em dados: A liderança agora tem informações claras e precisas para orientar decisões estratégicas.
Maior visibilidade: Os gráficos permitem uma análise detalhada da saúde das sprints, da capacidade do time e do impacto das demandas.
Identificação de gargalos: Relatórios específicos, como o de tarefas não planejadas por setor, ajudam a entender os pontos críticos do fluxo de trabalho.
Planejamento mais preciso: A análise de capacidade e disponibilidade garante que o planejamento seja baseado em dados reais e não em suposições.
Maior eficiência operacional: A automatização de tarefas e a organização visual economizam tempo e reduzem custos com ferramentas adicionais.

Essas melhorias não apenas economizaram tempo, mas também aumentaram a eficiência e a precisão nas discussões de progresso e prioridades.

O Tech Reports é uma solução que integra dados, automação e visualizações interativas para transformar a forma como a equipe técnica e a liderança trabalham. Ao fornecer métricas claras, insights detalhados e automações inteligentes, ele se tornou um aliado indispensável para melhorar o planejamento e a execução de projetos.

Construindo um monolito moderno com Inertia.js

Luma Montes — Fri, 03 Jan 2025 20:31:56 +0000

Recentemente tive uma experiência com Inertia Js em um projeto, e fiquei impressionada com a facilidade que foi o desenvolvimento! Neste artigo, vou falar um pouquinho sobre como o Inertia funciona e seus benefícios.

O que é o Inertia.js?

O Inertia JS é uma nova abordagem criada pra facilitar o desenvolvimento de monolitos modernos. Ele tem uma forte relação com o ecossistema Laravel, mas também pode ser usado em outros frameworks de backend. Um projeto com Inertia.js é bem parecido com os projetos em PHP, a diferença é que o frontend agora é em React (ou Vue). O inertia.js atua fazendo a comunicação entre o seu frontend e seu backend, substituindo a necessidade por uma API, por exemplo.

Por que usar o Inertia.js?

Seu objetivo de negócio e o seu time são alguns dos pontos a levar em consideração! Em projetos onde os times de frontend e backend são separados ou há integração entre diferentes negócios ou empresas, faz sentido dividir o sistema em serviços ou projetos independentes.

Em contrapartida, um só time com poucos desenvolvedores que precisariam ser multidisciplinares, trabalhando tanto no código frontend quando backend o tempo todo, fez bastante sentido em utilizar o inertia pra entregar o projeto sem grandes complexidades que os microserviços trazem.

Como funciona?

O Inertia.js elimina a necessidade de uma API tradicional. Você pode enviar dados do backend diretamente para o frontend como parâmetros em uma resposta, e o frontend usa esses dados para renderizar componentes. Para realizar a instalação, você pode seguir os passos da documentação:https://inertiajs.com/server-side-setup

Aqui adicionei um exemplo simples:

Definição de rota:

// web.php
Route::get('/books', [BooksController::class, 'index']);

Criação de lógica no controller:

//BooksController.php

namespace App\Http\Controllers;

use App\Models\Book;
use Inertia\Inertia;

class BooksController extends Controller
{
    public function index()
    {
        $books = Book::all();

        return Inertia::render('Books/Index', [
            'books' => $books
        ]);
    }
}

Renderização da sua view usando React e Typescript:

// resources/js/Pages/Books/Index.tsx
import { usePage } from '@inertiajs/react';

type Book = {
    id: number;
    title: string;
};

export default function BooksIndex() {
    const { books } = usePage().props;

    return (
        <div>
            {books.map((book: Book) => (
                <div key={book.id}>
                    {book.title}
                </div>
            ))}
        </div>
    );
}

E pronto! Esse é um exemplo simples do funcionamento do inertia, quem já vem do desenvolvimento em PHP percebe que é bem parecido com as blades do PHP (tirando o fato de ser React/Vue).

Nesse exemplo acima, o hook usePage do Inertia é usado pra puxar as informações que mandamos como lá no controller. Além disso, alguns dos principais utilitários disponíveis são:

useRemember: Armazena dados entre navegações de página.
WhenVisible: Componente usado como forma de só carregar dados quando um elemento se torna vísivel na página
Deferred: Permite você adie o carragamento de determinados nados da ágina até depois da renderização inicial, especialment usando em casos onde parte dos dados não são imediatamente necessárias no primeiro carregamento
Link: Componente usado para navegação, similar ao do React Router

Conclusão

Logicamente, tudo depende dos requisitos do seu projeto e do seu time. Mas o Inertia é uma ótima ferramenta que vem crescendo e se desenvolvendo cada vez mais no ecossistema laravel, uma ótima pedida pra projetos monolitos com PHP e com frameworks modernos como React/Vue para trazer uma melhor experiência para os usuários. A seguir o link da documentação, que foi base para este artigo, recomendo a leitura para conhecer mais sobre o Inertia:

https://inertiajs.com/

Iniciando em React

Lucas Edilson — Fri, 10 May 2024 13:13:05 +0000

Para quem curte trabalhar com interfaces interativas o conhecimento de React é de grande ajuda para o desenvolvimento dessas interfaces. Se você utiliza redes sociais com frequência, principalmente do ecossistema do Facebook, já percebeu que partes determinadas da tela têm comportamentos especifícos e independentes do restante da aplicação. Um exemplo disso seriam os anúncios que são exibidos nas aplicações.

Tentando identificar a melhor forma de lidar com esse tipo de funcionalidade, a equipe de desenvolvedores do Facebook desenvolveu uma forma muito específica de lidar com as informações exibidas e a atualização dessas pequenas partes da aplicação: o React.

O que é o React?

O React é uma biblioteca de JavaScript focada na construção de interfaces altamente interativas, ou seja, se trata de um conjunto de linhas de código em JavaScript criados pela comunidade, que podem ser reutilizados em diversos projetos.

Indo um pouco além, várias empresas de tecnologia, como por exemplo o Instagram, a Netflix, o Airbnb e o Twitter, utilizam o React em suas aplicações web e mobile.

Isso indica que existe uma boa variedade de oportunidades de mercado em diferentes tipos de empresas que se utilizam do React. Fora isso, o React é uma biblioteca de código aberto, o que significa que ele tem uma comunidade ativa de desenvolvedores que contribuem constantemente com códigos e recursos para ajudar a melhorar a tecnologia.

React é um framework?

Não, o React não é um framework, ele é uma biblioteca utilizada para criação de de interfaces. Dito isso, ele é utilizado em vários frameworks como por exemplo o Remix, Next.js, RedwoodJS e Blitz.js.

SPA x SSR

SPA ou single page application é uma forma em que a aplicação web é carregada em uma única página, atualizada dinamicamente conforme o usuário interage com a aplicação.

SSR ou server side rendering é uma técnica de renderização em que o servidor processa a solicitação do usuário e envia uma página HTML completa de volta ao navegador. Ou seja, antes de a página ser exibida no navegador, todo o processamento necessário já foi feito no servidor.

A principal diferença entre SSR e SPA é aonde a página é renderizada. Enquanto no SSR, a página é renderizada no servidor antes de ser enviada para o navegador, já no SPA, a renderização ocorre no navegador, conforme o usuário interage com a aplicação. Um destaque importante é que o SPA é melhor para a experiência do usuário, pois evita um desgaste com o recarregamento de várias telas consecutivas.

Iniciando um projeto em React

Ferramentas:

Node instalado no computador.
Um gerenciador de pacotes chamado npm, ele vem incluído automaticamente na sua instalação do Node.
Um bom editor de código para trabalhar nos arquivos do projeto.

Para criar um novo projeto em React, podemos usar a ferramenta npx. Ela nos possibilita na utilização do pacote create-react-app sem ter de instalá-lo primeiro no seu computador.

npx create-react-app meu-app-do-react

Após isso, o projeto será criado no seu computador e para iniciar ele basta utilizar o seguinte comando:

npm start

Componentes e Propriedades

# Componentes no React

Os componentes são blocos de construção fundamentais para qualquer aplicação React. Eles são a representação de partes isoladas da interface do usuário e variam em tamanho e complexidade.
A modularização de componentes no React nos permite criar e reutilizar eles de maneira eficiente.

function MeuComponente(props) { return <div>Olá, {props.nome}!</div>; }

# Propriedades no React

As propriedades, normalmente abreviadas como props, são um mecanismo fundamental para passar dados de um componente pai para um componente filho. Ou seja, permite que os componentes sejam preenchidas de maneiras dinamicas e sejam facilmente reutilizáveis dentro do código.

function MeuComponente(props) { return <div>Olá, {props.nome}!</div>; }

Boas práticas de Product Owner no time de tecnologia

Aline Daher — Thu, 11 Apr 2024 02:13:44 +0000

No ambiente acelerado e muitas vezes complicado das equipes de tecnologia, o papel do Product Owner é um catalisador sem o qual todos os esforços não serão suficientes. Atuando como o elo entre os objetivos do negócio e os detalhes técnicos, o Product Owner é necessário para garantir que sua equipe não apenas cumpra as expectativas, mas as supere. É por isso que este artigo busca compartilhar um conjunto de dicas e abordagens para Product Owners que desejam aprimorar sua contribuição para as equipes de tecnologia. Desde técnicas de interação diárias que garantam o bom funcionamento, este guia será útil para Product Owners em qualquer etapa de sua carreira. Dito isto vamos mergulhar nas estratégias que podem transformar a forma como você lidera e contribui para o seu time de tecnologia!

Confira os tópicos que abordaremos hoje:

Intercalação de Daily Top Down e Round Robin
- Acompanhamento via Dashboard
Revisão Contínua do Backlog
Checklist de Refinamento
Análise de Indicadores: Identificando Travas e Oportunidades

Essas estratégias foram vistas, estudadas e aplicadas por mim, que sou atualmente Product Owner na Proesc.com, com base nas leituras dos livros "Sprint a Sprint" de Mary Provinciatto e Paulo Caroli, bem como "Product Backlog Building" de Fábio Aguiar e Paulo Caroli. Ambas as obras fornecem insights valiosos e práticas recomendadas que serviram de fundamento para os tópicos que exploraremos, garantindo uma abordagem fundamentada e eficaz para o papel do Product Owner em equipes de tecnologia.

Intercalação de Daily Top Down e Round Robin

A estratégia de intercalar as dailys com abordagens Top Down e Round Robin atende à necessidade de acompanhar o progresso e o sucesso na conclusão de tarefas pelos desenvolvedores. Esse método é essencial para identificar rapidamente se é necessária a redistribuição de conhecimentos dentro da equipe, a fim de otimizar as entregas.

Acompanhamento via Dashboard: Para complementar, o uso de um dashboard individualizado, mostrando todas as tarefas e o índice de conclusão na sprint, permite um acompanhamento preciso e visual do progresso. Esse recurso visual é crucial para identificar, em tempo real, onde a equipe está prosperando e onde pode precisar de ajustes ou realocação de recursos.

Exemplo de dashboard que utilizo:

Legenda
Top Down: Visão geral do progresso em relação às metas da sprint, onde cada colaborador irá divulgar sua ferramenta de acompanhamento e atualizar a equipe como está o status de cada task

Round Robin: Discussão detalhada do progresso individual e desafio, baseado no padrão: 
1. O que fiz ontem?
2. O que farei hoje?
3. Tive/Estou tendo alguma dificuldade?

Revisão Contínua do Backlog

Mantenha o backlog limpo: Certifique-se de que cada item esteja atualizado, claro e diretamente vinculado aos objetivos de longo prazo. Elimine ou redefina tarefas que não serão abordadas nas próximas cinco sprints para evitar confusão e a transformação do backlog em um mero inventário.
Alinhamento estratégico: Garanta que as tarefas contribuam para os OKRs e o roadmap, revisando e ajustando regularmente o backlog para refletir mudanças estratégicas ou prioridades.

Checklist de refinamento

Antes de uma tarefa ser levantada para a sprint, ela deve passar por um checklist rápido para garantir sua prontidão, baseado em três pilares:

Informações Completas: Verifique se a tarefa tem todas as informações necessárias para execução.
Épico Selecionado: Confirme se a tarefa está associada a um épico específico.
Viabilidade de Conclusão: Avalie se a tarefa pode ser concluída dentro de uma sprint.

Se todos esses critérios forem atendidos, o item está pronto para a sprint. Caso contrário, deve permanecer no backlog para ser atualizado pelo responsável de produto e posteriormente reavaliado pelo Product Owner.

Exemplo de Template para descrição de tarefa:

Análise de Indicadores: Identificando Travas e Oportunidades

Para além das dailys, o Product Owner deve realizar análises periódicas de indicadores que reflitam o progresso da equipe. Esta análise estratégica dos dados permite identificar não só os gargalos na entrega, mas também oportunidades de otimização. Ações como:

Acompanhamento Direto: Engajar-se diretamente com desenvolvedores que enfrentam desafios, oferecendo suporte e direcionamento.
Promoção de Pair Programming: Incentivar a colaboração entre desenvolvedores, especialmente em tarefas complexas, para compartilhar conhecimentos e habilidades.
Esclarecimento de Dúvidas: Disponibilizar-se para resolver quaisquer questões sobre a especificidade e funcionamento das tarefas.

Estas iniciativas visam não apenas desbloquear obstáculos pontuais mas também aumentar a eficiência da equipe como um todo, elevando a taxa de conclusão das tarefas, tanto em nível micro quanto macro, ao longo das sprints.

Espero que este artigo sirva como um recurso valioso para os Product Owners em busca de excelência da mesma forma que foi gratificante para mim escrevê-lo, ajudando-os a liderar suas equipes na criação de produtos excepcionais.

Fluxo de autenticação no React Native usando Expo Router

Luma Montes — Sun, 18 Feb 2024 05:33:32 +0000

Quem já trabalhou com rotas com Expo ou React Native, sabe que o React Navigation é a forma padrão de lidar com navegação! No entanto, conforme mais telas você vai criando no seu app, o código utilizado pode ficar bem grande, com processos manuais que precisam de muitas linhas de código para serem feitos. Logo, o time do Expo lançou uma novidade: Expo Router, uma alternativa ao React Navigation para roteamento e navegação com React Native.

Esse post irá mostrar como criar um fluxo de autenticação com Expo Router no seu app React Native.

Índice

Principais funcionalidades do Expo Router:
Pré-requisitos
Exemplo de código
- 1 - Crie um contexto de autenticação
- 2 - Adicione o arquivo app/_layout.tsx
- 3 - Crie a tela de login
- 4 - Adicione a lógica de autenticação no arquivo app/(auth)/_layout.tsx
Conclusão

generated with Summaryze Forem 🌱

Principais funcionalidades do Expo Router:

Nativo: Construído em cima do React Navigation, a navegação do Expo Router é nativa e otimizada.
Compartilhável: Toda tela do seu aplicativo é automaticamente configurada com deep linking. Tornando qualquer rota do seu aplicativo compartilhável com links, como por exemplo, um link de redirecionamento de uma notificação, não sendo necessário configurar manualmente quais telas são acessíveis por links.
Offline-first: Os aplicativos são armazenados em cache e executados de forma offline first, com atualizações automáticas quando você publica uma nova versão.

O Expo Router trás um conceito de file based routing, ou seja, as rotas da aplicação refletem a estrutura dos arquivos criados na pasta /app. Parecido, por exemplo, com a estrutura do Next.js.

Quando um arquivo é criado na pasta app, automaticamente se torna uma rota no app. Logo, diferentemente do React Navigation, todas as stacks (ou rotas) do seu app já ficam publicas e disponíveis para navegação! Além disso, as navegações para diferentes telas podem ser feitas usando um elemento <Link href='/nome-da-rota', por exemplo. bem parecido com o que fazemos na web. Você pode usar um router.replace('nome-da-rota') para definir globalmente o redirecionamento de rota, além de rotas dinâmicas, criação de grupos de rotas e muito mais. 🤯

Pré-requisitos

Para o exemplo a seguir, você pode clonar o projeto para reproduzir o exemplo.



git clone git@github.com:lumamontes/expo-router-auth.git

Instale as dependências do projeto:



npx expo install

E rode o projeto:



npx expo start

Mas, caso queira criar um projeto do zero, você pode seguir os passos originais do Expo Router.

Exemplo de código

Agora, vamos a um exemplo no código! Vamos implementar um fluxo de autenticação utilizando o Expo Router para navegação. Vamos analisar a estrutura do projeto:

Alguns pontos chaves para entender o Expo Router:

Todos os arquivos que estão na pasta /app serão rotas (com exceção de arquivos "especiais", que irei comentar abaixo!)
_layout.tsx: O expo router possibilita a criação de Layout routes, elementos que são compartilhados entre diversas telas, como uma header. No caso do arquivo app/_layout.tsx, ele é um layout que será compartilhado entre todas as telas dentro da pasta /app.
Pastas (auth) e (tags): são grupos de rotas do Expo Router, que são usados para organizar as rotas do app. Você pode adicionar quantos grupos quiser. Grupos também são bons para organizar seções do app. No exemplo a seguir, temos app/(auth) que irá ter as telas para usuários autenticados. Um ponto interessante é que os grupos não afetam a url, ou seja, um arquivo localizado na pasta app/(auth)/nome-do-arquivo.tsx não terá a url app/(auth)/nome-do-arquivo, mas sim app/nome-do-arquivo.
ctx.tsx: é um contexto de autenticação, que irá centralizar algumas informações globais como a sessão do usuário, a função de logar e deslogar.
+not-found.tsx: é uma rota que será acessada quando nenhuma outra rota for encontrada.

Logo, o nosso app irá possui duas camadas:

Rotas para usuários autenticados (todo o conteúdo do grupo (auth))
Rotas para usuários não autenticados (somente a tela de login)

Para fazer essa separação entre a camada de usuários autenticados e não autenticados, é possível criar um contexto que vai definir essas regras de negócio:

1 - Crie um contexto de autenticação

Esse contexto irá centralizar algumas informações e lógicas globais como a sessão do usuário, a função de signIn e signOut.



iimport React from "react";
import { useStorageState } from "./useStorageState";

const AuthContext = React.createContext<{
  signIn: () => void;
  signOut: () => void;
  session?: string | null;
  isLoading: boolean;
}>({
  signIn: () => null,
  signOut: () => null,
  session: null,
  isLoading: false,
});

// This hook can be used to access the user info.
export function useSession() {
  const value = React.useContext(AuthContext);
  return value;
}

export function SessionProvider(props: React.PropsWithChildren) {
  const [[isLoading, session], setSession] = useStorageState("session");
  return (
    <AuthContext.Provider
      value={{
        signIn: () => {
          // Add your login logic here
          // For example purposes, we'll just set a fake session in storage
          setSession("John Doe");
        },
        signOut: () => {
          setSession(null);
        },
        session,
        isLoading,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
}

A função signIn irá salvar a sessão do usuário, nesse caso, uma simples string 'John Doe', e a função signOut irá remover a sessão alterando esse valor para null.

Para finalidade de testes, a função signIn não irá ter nenhum tipo de validação, sempre que ela for chamada, o usuário será autenticado. No entanto, em um app real, você pode adicionar a lógica de login do seu app fazendo uma requisição para uma API, por exemplo.

Um ponto importante é que iremos salvar essas informações de sessão do usuário no storage do dispositivo, para que o usuário não precise logar toda vez que abrir o app.

Para isso, utilizaremos o hook useStorageState que retornar um estado e uma função para alterar esse estado, salvar e recuperar as informações do storage do dispositivo utilizando a biblioteca expo-secure-store.

Esse hook é composto por três funções:

A função useAsyncState irá retornar um estado e uma função para alterar esse estado, mas com um estado inicial de loading, que será true, e o valor inicial, que será null.



import * as SecureStore from "expo-secure-store";
import * as React from "react";
import { Platform } from "react-native";

type UseStateHook<T> = [[boolean, T | null], (value: T | null) => void];

function useAsyncState<T>(
  initialValue: [boolean, T | null] = [true, null]
): UseStateHook<T> {
  return React.useReducer(
    (
      state: [boolean, T | null],
      action: T | null = null
    ): [boolean, T | null] => [false, action],
    initialValue
  ) as UseStateHook<T>;
}

setStorageItemAsync: que irá salvar ou deletar um item no storage do dispositivo, dependendo do valor passado.



export async function setStorageItemAsync(key: string, value: string | null) {
  if (value == null) {
    await SecureStore.deleteItemAsync(key);
  } else {
    await SecureStore.setItemAsync(key, value);
  }
}

useStorageState: que irá retornar um estado e uma função para alterar esse estado, salvando e recuperando as informações do storage do dispositivo utilizando a biblioteca expo-secure-store.



export function useStorageState(key: string): UseStateHook<string> {
  const [state, setState] = useAsyncState<string>();

  React.useEffect(() => {
    SecureStore.getItemAsync(key).then((value) => {
      setState(value);
    });
  }, [key]);

  const setValue = React.useCallback(
    (value: string | null) => {
      setState(value);
      setStorageItemAsync(key, value);
    },
    [key]
  );

  return [state, setValue];
}

Logo, se eu usar o hook dessa forma: useStorageState('session'), ele irá retornar: isLoading, session e setSession.

Mas se eu usasse dessa forma: useStorageState('user'), ele irá retornar: isLoading, user e setUser, por exemplo.

Podemos então entender que o useStorageState é um hook genérico que irá retornar um estado e uma função para alterar esse estado, salvando e recuperando as informações do storage do dispositivo utilizando a biblioteca expo-secure-store.

2 - Adicione o arquivo app/_layout.tsx

Esse arquivo é um layout que será compartilhado entre todas as telas do app. Nele, podemos:

- Definir a rota inicial do app



export const unstable_settings = {
  initialRouteName: "login",
};

Essa simples linha de código irá garantir que a rota inicial do nosso app será sempre 'login', ou seja, o componente presente no arquivo de login.tsx!

- Adicionar o nosso contexto por volta de todo o seu app

Ele irá apenas retornar o children, que será a stack do grupo (auth) ou a tela de login, dependendo se o usuário está autenticado ou não. Para isso, usaremos o <Slot> do Expo Router, que é um elemento que irá renderizar o "children" da rota atual:



import { Slot } from "expo-router";
import { SessionProvider } from "./ctx";

export default function RootLayoutNav() {
  return (
    <SessionProvider>
      <Slot />
    </SessionProvider>
  );
}

3 - Crie a tela de login

Na tela de login, que será o arquivo app/login.tsx, você pode adicionar a lógica de login do seu app, como um formulário de email e senha. No nosso caso, vamos somente um botão que irá logar o usuário no app.



export default function Login() {
  const { signIn } = useSession();
  const handleLogin = () => {
    signIn();
    //Antes de navegar, tenha certeza de que o usuário está autenticado
    router.replace("/");
  };

  return (
    <View>
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

Isso irá redirecionar para (auth)/\_layout.tsx!

4 - Adicione a lógica de autenticação no arquivo `app/(auth)/\_layout.tsx`

Esse arquivo é um layout que será compartilhado entre todas as telas do app no grupo (auth), ou seja, todas as telas que precisam de autenticação para serem acessadas. Nele, podemos adicionar a lógica de autenticação do app:

Se o usuário não possuir sessão, redirecionar para a tela de login
Caso o usuário tenha sessão, retornar a stack do grupo (tabs), que contém o restante das telas do app.



const { session } = useSession();

if (!session) {
  return <Redirect href="/login" />;
}

return (
  <Stack>
    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />

    <Stack.Screen name="modal" options={{ presentation: "modal" }} />
  </Stack>
);

Assim, ao clicar para login e ser redirecionado com sucesso, o usuário irá ter acesso a tela app/(auth)/(tabs)/index.tsx!

E caso o usuário não esteja autenticado, ele será redirecionado para a tela de login, completando um fluxo básico de autenticação.

Conclusão

Fazendo um comparativo com React Navigation, acredito que o Expo Router é bem acessível e fácil de entender, principalmente pra quem vem do desenvolvimento de frontend web.

Onde no React Navigation, várias funcionalidades eram feitas de forma manual, como a criação das rotas, a configuração de deep linking, entre outras, esses processos super importantes são feitos já automaticamente pelo Expo Router, deixando o código bem mais limpo. Pelo fato de ser file based routing, a estrutura do projeto fica bem mais organizada, e a navegação entre telas é bem mais simples, com a utilização do elemento <Link href='/nome-da-rota'.

No geral, acredito que o Expo Router é uma ótima ferramenta para quem está começando a desenvolver apps com react native, ou para quem já tem experiência com react native e quer otimizar o tempo de desenvolvimento e manter uma navegação de fácil implementação. Estarei utilizando nos meus novos projetos com Expo 🚀

Segue o link do projeto no github, caso queira testar o código:

Expo Router Auth

Forem: Proesc

Como criei um dashboard estratégico com Streamlit usando dados do Jira (sendo Product Owner)

Por que criar uma solução própria?

Relatórios no ambiente

Ferramentas e Tecnologias

Código em ação

Impacto no time e na liderança

Construindo um monolito moderno com Inertia.js

O que é o Inertia.js?

Por que usar o Inertia.js?

Como funciona?

Conclusão

Iniciando em React

O que é o React?

React é um framework?

SPA x SSR

Iniciando um projeto em React

Ferramentas:

Componentes e Propriedades

# Componentes no React

# Propriedades no React

Boas práticas de Product Owner no time de tecnologia

Intercalação de Daily Top Down e Round Robin

Revisão Contínua do Backlog

Checklist de refinamento

Análise de Indicadores: Identificando Travas e Oportunidades

Fluxo de autenticação no React Native usando Expo Router

Índice

generated with Summaryze Forem 🌱

Principais funcionalidades do Expo Router:

Pré-requisitos

Exemplo de código

1 - Crie um contexto de autenticação

2 - Adicione o arquivo app/_layout.tsx

- Definir a rota inicial do app

- Adicionar o nosso contexto por volta de todo o seu app

3 - Crie a tela de login

4 - Adicione a lógica de autenticação no arquivo app/(auth)/\_layout.tsx

Conclusão

4 - Adicione a lógica de autenticação no arquivo `app/(auth)/\_layout.tsx`