Forem: Suami Medeiros

vem ver isso aqui rapidin

Suami Medeiros — Mon, 23 Mar 2026 19:30:14 +0000

Fran Borges

Mar 23

Engenharia de Prompt: Por Que a Forma Como Você Pergunta Muda Tudo(Um guia introdutório)

#ai #productivity #beginners #braziliandevs

Comments 2

7 min read

Análise de correspondência, o que é e como fazer com Python, usando Naruto como exemplo

Suami Medeiros — Mon, 02 Feb 2026 21:21:21 +0000

Dentro desse artigo vamos explorar diferentes técnicas para análise de dados categóricos, para entender de forma lúdica vamos vestir nossas bandanas e nos transportar para o mundo de Naruto (que eu particularmente gosto muito). Vamos seguir a seguinte linha de raciocínio: Imagine que você seja um sensei na vila de konoha acompanhando seus alunos no exame chunin e deseja saber qual o estilo de luta que é mais popular entre os shinobis de cada aldeia para traçar estratégias junto com os mesmos. Vamos lá?

Indíce

O inicio de tudo - Análise de correspondência
Definindo nosso cenário básico - Importando bibliotecas
Carregando nossos dados para análise
Visualizando-os com uma tabela de contingência
Calculando os perfis de linha e coluna - Qual é o estilo da aldeia?
- Visualizando o perfil de linha de maneira estruturada
Teste QUI-Quadrado - Isso é uma coincidência ou não?
Resíduos padronizados - Quem está fora do esperado?
Decomposição SVD - Reduzindo o mundo em duas dimensões
Mapa de Correspondência (Biplot) - O mapa final do mundo do Naruto
Interpretação final
Biblioteca Prince - Otimizando o tempo
Conclusão

O inicio de tudo - Análise de correspondência

Para isso vamos conhecer nossas armas: A análise de correspondência simples é uma técnica estatística multivariada utilizada para explorar e visualizar relações entre as variáveis categóricas em tabelas de contingência. Para compreender melhor esse conceito é bom entender uma categoria como um conceito que representa grupos não numéricos, ou seja, se você estiver agrupando coisas que são diferentes de grupos numéricos então você está usando categorias.

Dentro do nosso cenário, vamos imaginar que recebemos o relatório com os resultados feito pelos pesquisadores da aldeia e vamos começar a analisar esses dados:

Definindo nosso cenário básico - Importando bibliotecas

Nesse primeiro momento vamos garantir que todas as nossas bibliotecas estão importadas e vamos configurar o estilo do nosso gráfico afim de garantir um aspecto mais visivelmente agradável.

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
from scipy.stats import chi2.contigency

sns.set_style('whitegrid')
plt.rcParams.udate((
  'font.family': 'sans-serif',
  'font.size': 11,
  'axes.titlesize': 15,
  'axes.titleweight': 'bold',
  'axes.labelsize': 12
))

Carregando nossos dados para análise

Nessa parte da análise vamos carregar o relatório que nos foi enviado para que possamos visualizar melhor em gráficos e ter uma noção melhor de quais são as aldeias¹ comparados com os tipos de estilo de luta².

¹: Nesse relatório as aldeias são apresentadas como linhas na tabela
²: Nesse relatório os estilos de luta são apresentados como colunas na tabela

dados = pd.read_csv('tabela_contigencia_naruto.csv', index_col=0)

Agora que carregamos nosso relatório, vamos visualizar os dados de forma básica para termos uma ideia geral do cenário:

print('Forma da tabela', dados.shape)
data

Visualizando-os com uma tabela de contingência

Aqui temos mais uma de nossas armas: A tabela de contingência nos ajuda a cruzar duas categorias relacionadas — que no nosso caso são aldeias e estilos de luta —

Utilizaremos um heatmap (mapa de calor) para visualizar os dados brutos de uma forma mais intuitiva. Nele podemos visualizar através de tons, onde quanto mais escuro mais shinobis existem naquela combinação.

plt.figure(figsize=(10,6))
sns.heatmap(
    dados, 
    annot=True, 
    fmt='d', 
    cmap='TlordRd', 
    linewidth=0.5, 
    linecolor='#cccccc', 
    cbar_kws={'label': 'Quantidade de Shinobis'})
plt.title('Tabela de Contingência - Dados Brutos') 
plt.xlabel('Estilo de Luta')
plt.ylabel('Aldeia')
plt.tight_layout()
plt.show()

Calculando os perfis de linha e coluna - Qual é o estilo da aldeia?

Agora que podemos visualizar nosso dado de formas diferentes vamos começar a nos perguntar o que esse dado precisa nos dizer como pode ser visto abaixo:

Olhar para o perfil de linha é como perguntar: "De todos os shinobis da vila de Konoha, qual a porcentagem de cada estilo?", ou seja, nós dividismo cada valor pela soma da linha, essa informação nos aproxima do que seria o perfil de combate geral em cada aldeia.
Já olhar para o perfil de coluna nos diz justamente o contrário: "De todos os que preferem Taijutsu, quantos são de cada aldeia?", ou seja, olhamos para o perfil de um estilo específico visto por cada aldeia.

Para calcular o perfil de linha vamos realizar o calculo dos dados:

row_profile = dados.div(dados.sum(axis=1), axis=0)
print('Perfil de linha (proporção por aldeia)')
print(row_profile.round(3))
print('\nSoma por linha (deve ser 1.0):', row_profile.sum(axis=1).values)

Já para o perfil de coluna faremos o contrário como foi explicado:

col_profile = dados.div(dados.sum(axis=0), axis=1)
print('Perfil de coluna (proporção por estilo)')
print(col_profile.round(3))
print('\nSoma por coluna (deve ser 1.0):', col_profile.sum(axis=0).values)

Visualizando o perfil de linha de maneira estruturada

Perfeito! Agora que entendemos o conceito e conseguimos visualizar nossos numeros brutos dos perfis, vamos visualiza-los em um gráfico:

CORES_ALDEIAS = {
'Konoha': '#F25C54',
'Suna': '#F2A83A',
'Kiri': '#3AA3F2',
'Ame': '#8E5CF2'
}

fig, ax = plt.subplots(figsize=(10,6))
x = np.arange(len(dados.colums))
width = 0.2

for idx, aldeia in enumerate(dados.index):
    ax.bar(x + idx * width, row_profile.loc[aldeia] * 100,
        width, label=aldeia, color=CORES_ALDEIAS[aldeia],
        edgecolor='white', linewidth=0.8)
    ax.set_title('Perfil de Linha - "Perfil de combate" de cada aldeia')
    ax.set_xlabel('Estilo de luta')
    ax.set_ylabel('Proporção (%)')
    ax.set_xticks(x + width * 1.5)
    ax.set_ylim(0, 42)
    ax.yaxis.set_major_formatter(plt.FuncFormatter(lambda v, _: f'{v:.0f}%'))
    plt.tight_layout()
    plt.show()

Teste QUI-Quadrado - Isso é uma coincidência ou não?

Um dos aspectos mais importantes em uma análise de dados é questionar nossa base com carater investigativo, dentro do nosso cenário devemos nos perguntar se há mesmo uma relação entre aldeias e estilos de luta ou se estamos atribuindo causalidade³ para dados correlacionados⁴.

³: Causalidade refere-se a uma relação de causa e efeito entre duas informações, onde o efeito de uma influencia diretamente o efeito da segunda.
⁴: Já a correlação mostra uma associação entre duas informações, mas não implica causalidade.

Para nos auxiliar nessa investigação vamos utilizar mais uma de nossas armas ninjas: O teste qui-quadrado, ele nos ajuda a fazer exatamente essa verificação onde se o p-valor for menor que 0,05 podemos dizer então que não há coincidência e que existe uma associação real entre as informações analisadas.

p < 0,05 - Existe associação significativa (não é coincidência)
p > 0,05 - Não há evidência suficiente de associação

Para informações mais detalhadas sobre o assunto, [leia o artigo](https://docs-scipy-org.translate.goog/doc/scipy-1.17.0/reference/generated/scipy.stats.chisquare.html?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt&_x_tr_pto=tc](https://docs-scipy-org.translate.goog/doc/scipy-1.17.0/reference/generated/scipy.stats.chisquare.html?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt&_x_tr_pto=tc )

chi2, p_value, dof, expected = chi2_contingency(dados)

print('Teste Qui-Quadrado')
print(f'Chi-Quadrado : {chi2:.4f}')
print(f'P-valor      : {p_value:.4f}')
print(f'Graus de lib.: {dof}')
print()

if p_value < 0.05:
    print('Resultado: p < 0,05 - Existe associação')
else:
    print('Resultado: p > 0,05 - Não existe associação')

print('Frequência Esperada (Se não houvesse associação)')
expected_df = pd.DataFrame(expected, index=dados.index, columns=dados.columns)
print(expected_df.round(2))

Resíduos padronizados - Quem está fora do esperado?

Após nossa análise investigativa temos a certeza que estamos no caminho certo! Sem a associação entre a aldeia e o estilo, as propoções seriam quase iguais em todos os lugares.

Para continuar nossa análise devemos questionar novamente nossa base de dados e entender quem está fora do esperado. Para isso vamos conhecer mais uma de nossas armas ninjas: Os resíduos padronizados nos proporcionam uma medição dessa diferença: O que vemos de fato x O que veríamos se tudo fosse igual ou parecido.

Afim de calcular essa informação seguimos a formula de resíduo onde resíduo = (observado - esperado) / esperado (raiz quadrada de esperado).

n = dados.sum().sum()
row_sums = dados.sum(axis=1)
col_sums = dados.sum(axis=0)

residuals = pd.DataFrame(index=dados.index), columns=dados.columns, dtype=float)

for i in dados.index:
    for j in dados.columns:
        expected_ij = (row_sums[i] * col_sums[j]) / n
        residuals.loc[i, j] = dados.loc[i, j] - expected_ij) / np.sqrt(expected_ij)

print('Resíduos Padronizados)
print(residuals.round(3))

Agora com nossos números brutos definidos, podemos visualiza-los em gráfico onde:

Valor positivo (azul): Mais do que o esperado, associação forte.
Valor negativo (vermelho): Menos do que o esperado. Fórmula: resíduo = (observado - esperado) / esperado(raiz quadrada de esperado)

plt.figure(figsize=(10,6))
sns.heatmap(residuals, annot=True, fmt='.2f', cmap='RdBu_r', center=0,
linewidths=0.5, linecolor='#cccccc',
cbar_ks={'label': 'Resíduo Padronizado'},
annot_kws={'size': 16, 'weight': 'bold'},
vmin=-1.8, vmax=1.8)
plt.title('Resíduos Padronizados\nAzul= Acima do esperado | Vermelho = Abaixo do esperado')
plt.xlabel('Estilo de Luta')
plt.ylabel('Aldeia')
plt.tight_layout()
plt.show()

Decomposição SVD - Reduzindo o mundo em duas dimensões

Vamos imaginar o mapa do mundo de naruto:

Podemos observar nossa amostra com mil aldeias e mil estilos de luta. Dentro desse cenário é impossível de visualizar, concorda? Para isso a decomposição SVD ajuda a pegar todas essa informação e comprimi-la em duas dimensões, como se você fosse um cartógrafo e decidisse criar um mapa mais simplificado que ainda captura informações importantes.

Não perde tudo, só os detalhes menos relevantes. É como usar o sharingan: você foca no que importa.

Em termos mais técnicos: A SVD (Singular Value Decomposition) é o coração matemático da CA (Correspondency Analysis). Para ela temos algumas etapas necessárias afim de aplica-la efetivamente:

1. Normalizar a matriz
2. Calcular a matriz
3. Aplicar SVD para obter as coordenadas

Primeiro vamos normalizá-la:

P = dados.values / n
print('Matriz de Proporções (P)')
print(pd.DataFrame(P, index=dados.index, columns=dados.columns).round(3))
print(f'Soma total (deveser 1.0): {P.sum():.1f}')

Em seguida calculamos a matriz Z e massas:

row_mass = P.sum(axis=1) # massa das linhas
col_mass = P.sum(axis=0) # massa das colunas

print ('Massa das linhas (aldeias):')
for aldeia, massa in zip(dados.index, row_mass):
    print(f'{aldeia}: {massa:.3f}')

print ('Massa das colunas (estilos):')
for estilo, massa in zip(dados.colums, col_mass):
print(f' {estilo}: {massa:.3f}')

# Matriz Z (resíduos padronizados pela massa)
Z = (P - np.outer(row_mass, col_mass)) / np.sqrt(np.outer(row_mass, col_mass))

print('Matriz Z (entrada SVD)')
print(pd.DataFrame(Z, index=dados.index, columns=dados.columns).round(4))

E por fim aplicamos a SVD de fato:

U,s, Vt = np.linalg.svd(Z, full_matrices=False)

print('Valores Singulares (s)')
for i, val in enumetate (s):
    print(f' s[{i}] = {val:.4f}')

# Coordenadas nas duas primeiras dimensões
row_coords = U[:, :2] * s[:2]
col_coords = Vt.T[:, :2] * s[:2]

# Inércia explicada por dimensão
inertia = s**2
explained_var = inertia / inertia.sum() * 100

print('Inércia explicada por dimensão')
for i, var in enumerate(explained_var):
    print(f' Dimensão {i+1}: {var:.2f}%')
print(f'\n Acumulada (Dim 1 + 2): {explained_var[0] + explained_var[1]:.2f}%')

print('Coordenadas das aldeias')
    coords_aldeias = pd.DataFrame(row_coords, index=dados.columns, columns=['Dim ', 'Dim 2'])
print(coords_aldeias.round(4))

print('Coordenadas dos estilos')
coords_estilos = pd.DataFrame(col_coords, index=dados.columns, columns=['Dim 1', 'Dim 2'])
print(coords_estilos.round(4))

Mapa de Correspondência (Biplot) - O mapa final do mundo do Naruto

Finalmente nos aproximamos ao final de nossa análise afim de podermos traçar as melhores estratégias para nossos queridos alunos!

Pontos próximos = relação forte.

Se Konoha e Taijutsu estão do mesmo lado do mapa, significa que a Konoha é conhecida por Taijutsu. Faz sentido, né? Rock Lee, Guy-Sensei, todos são de Konoha e são mestres de Taijutsu.

Pontos longe = relação fraca.

Se Kiri fica do outro lado, significa que os shinobis de Kiri não são tão voltados para Taijutsu.

A origem do mapa (centro) é o ponto neutro, sem associação forte com nada.

# maior residuo padronizado positivo

associacoes = {}
for aldeia in dados.index:
    estilo_mais_forte = residuals.loc[aldeia].idxmax()
    associacoes[aldeia] = estilo_mais_forte

CORES_ESTILOS = {}
for aldeia, estilo in associacoes.items():
    CORES_ESTILOS[estilo] = CORES_ALDEIAS[aldeia]
for estilo in dados.columns:
    if estilo in dados.columns:
        CORES_ESTILOS[estilo] = '#999999'

print(' Associações por resíduo mais forte: ')
for aldeia, estilo in associacoes.items():
    print(f' {aldeia} - {estilo} (resíduo: {residuals.loc[aldeia, estilo]:.2f})')

fig, ax = plt.subplots(figsize=(10,8))

# Linhas de referência
ax.axhline(0, color='#aaaaaa', linewidth=0.8, linestyle='--')
ax.axvline(0, color='#aaaaaa', linewidth=0.8, linestyle='--')

# Linhas conectando ao centro
for i in range(len(dados.index)):
    ax.plot([0, row_coords[i, 0]], [0, row_coords[i,1]],
        color=CORES_ALDEIAS[dados.columns[i]], linewidth=1.5, alpha=0.4)

# Aldeias (círculos)
for i, aldeia in enumerate(dados.index):
    ax.scatter(row_coords[i,0], row_coords[i,1],
        s=100, c= CORES_ALDEIAS[aldeia], edgecolors='black',
        linewidth=1.5, zorder=5)
    ax.annotate(aldeia, (row_coords[i,0], row_coords[i,1]),
        textcoords='offset points', xytext=(12,9),
        fontsize=13, fontweight='bold', color=CORES_ALDEIAS[aldeia])

# Estilos (quadrados)
for i, estilo in enumerate(dados.columns):
    ax.scatter(row_coords[i,0], row_coords[i,1],
        s=100, c=CORES_ALDEIAS[aldeia], edgecolors='black',
        linewidth=1.5, zorder=5)
    ax.annotate(aldeia,(row_coords[i,0], row_coords[i,1]),
        textcoords='offset points', xytext=(12,9),
        fontsize=13, fontweight='bold', color=CORES_ALDEIAS[aldeia])


# Legenda das associações
legend_handles = []
for aldeia, estilo in associacoes.items():
    legend_handles.append(
        plt.Line2D([0], [0], marker='o), color='w',
        markerfacecolor=CORES_ALDEIAS[aldeia], markersize=12,
        label=f'{aldeia} ● {estilo}', linestyle='None')
        )
legend_handles.append(

plt.Line2D([0], [0], marker='o', color='w', markerfacecolor='#cccccc',

markersize=10, label='● = Aldeia', linestyle='None')

)

legend_handles.append(

plt.Line2D([0], [0], marker='s', color='w', markerfacecolor='#cccccc',

markersize=10, label='■ = Estilo', linestyle='None')

)

ax.legend(handles=legend_handles, loc='lower right', fontsize=10,

framealpha=0.95, title='Associações', title_fontsize=11)

ax.set_title('Mapa de Correspondência (Biplot)\nCores iguais = aldeia e estilo mais associados')

ax.set_xlabel(f'Dimensão 1 ({explained_var[0]:.1f}% da inércia)')

ax.set_ylabel(f'Dimensão 2 ({explained_var[1]:.1f}% da inércia)')

ax.set_title('Mapa de Correspondência (Biplot)\nCores iguais = aldeia e estilo mais associados')

ax.set_xlabel(f'Dimensão 1 ({explained_var[0]:.1f}% da inércia)')

ax.set_ylabel(f'Dimensão 2 ({explained_var[1]:.1f}% da inércia)')

Interpretação final

No final do mapa, você veria Konoha bem perto de Taijutsu ( Rock Lee e Guy), Kiri perto de Senjutsu (por exemplo), e assim por diante.
Cada cluster conta uma história sobre quem se parece com quem no mundo dos shinobis.
É basicamente isso. A Análise de Correspondência é um mapa que mostra quais categorias se parecem entre si, sem precisar olhar para uma tabela cheia de números!

Biblioteca Prince - Otimizando o tempo

Durante toda a análise, calculamos manualmente cada etapa: a matriz de proporções, as massas, a matriz Z, a decomposição SVD e as coordenadas.

Isso foi muito importante para entender o que acontece por baixo dos panos, como se você fosse um Sensei explicando cada movimento de uma técnica de luta aos seus Genins.

Mas imagina que agora você precisa executar a técnica o mais rápido possível para uma missão (Ou, talvez... A vila esteja sendo atacada e precisam saber com quem podem contar de cada Aldeia). É exatamente isso que a biblioteca PRINCE oferece, ela encapsula toda essa matemática em poucas linhas de código, assim como o Naruto não precisa pensar em cada passo do Rasenshuriken depois que já dominou a técnica.

O Prince entrega tudo pronto: coordenadas das aldeias, coordenadas dos estilos, inércia explicada e contribuições de cada ponto. É a diferença entre um genin aprendendo Taijutsu passo a passo e um jounin executando a técnica em um segundo.

A única desvantagem que percebo é que, assim como usar um jutsu poderoso sem entender sua origem, você perde a visibilidade do que acontece internamente. Por isso, entender a implementação manual primeiro é fundamental antes de partir para algo mais avançado como o Prince.

Conclusão

Obrigada por ler até aqui! :)

Fontes:

Para ter acesso a todo código da análise sinta-se a vontade para se basear no repósitorio: https://github.com/surocham/ca_naruto

Agradecimento especial para @cherryramatis que me ajudou revisando este artigo. 💗💗💗

Minha Jornada na Área de Dados: Um Guia Para Quem Está Começando

Suami Medeiros — Fri, 30 Jan 2026 23:08:56 +0000

Hoje recebi uma mensagem no LinkedIn da Mari perguntando como foi meu início na área de dados. A resposta honesta? Ainda estou descobrindo.

Mas o fato de alguém me perguntar isso já mostra que estou no caminho certo. Fico feliz que meus posts do desafio #100DiasDeCodigo estejam alcançando pessoas que, assim como eu, buscam uma oportunidade em dados.

Mesmo sem saber tudo, mas muito motivada e determinada, decidi criar este guia para quem se sente perdido nessa área.

Por Que Este Guia É Diferente?

Existem milhares de conteúdos excelentes sobre transição de carreira para dados. Mas ao encontrar minhas publicações, talvez você tenha curiosidade de saber exatamente como eu fiz e estou fazendo: com os erros, acertos e a bagunça organizada que é aprender enquanto se constrói uma carreira.

Meu Contexto (Aviso: Não Faça Isso em Casa)

Estou fazendo muitas coisas simultaneamente e não recomendo isso para ninguém:

Pós-graduação na FIAP
Ativa em comunidades de dados: DataTalks da Laura, AI Girls, Indicium, ComuniDados, Data Creators e He4rt Devs
Mãe solo conciliando rotina doméstica, estudos e busca por vagas

Não é fácil, mas encontrei pessoas incríveis que me ajudam demais! Agradecimento especial ao @ Ricardo e @ Cherry.

A Decisão Que Mudou Tudo

Quando decidi entrar em dados, não sabia por onde começar. Pensei: "Quero muito isso e vou fazer acontecer, mesmo sem saber exatamente como".

Tive medo. Ainda me sinto insegura sobre muitas coisas. Mas já faz um tempo que comecei e não me arrependo. Cada dia aprendo algo novo e descubro múltiplas formas de resolver um mesmo problema.

Minha evolução: não sabia nem fazer cálculo no Excel, hoje crio planilhas limpas e organizadas. Posso dizer que estou orgulhosa de mim!

Ferramentas que descobri: RStudio, Google Colab (Jupyter), Databricks, Qlik, AWS, Docker, Azure, Fabric

5 Passos Para Não Se Perder

Saiba o que você quer agora - clareza no objetivo de curto prazo
Anote seu objetivo final - visualize seu destino
Organize metas cronologicamente - dê check quando alcançá-las
Compartilhe com o máximo de pessoas - isso evita desistência e promove seu trabalho
Contribua com a comunidade - ajude quem está começando

Meu Caminho: De Dev para Dados

Como desenvolvedora, já tinha feito bootcamp de Python pela Embraer. Pesquisei: "Qual a melhor forma de entrar na área de dados hoje?"

A resposta: Análise de Dados.

Em eventos de tecnologia em Belém, conversei com @ Gustavo Ramos e a Artemisia (referências em dados) que confirmaram: essa é a porta de entrada.

Hard Skills Essenciais

Power BI
Excel
Python
SQL

Soft Skills: O Diferencial

É sobre negócios. Tenho consumido conteúdo do Sasaki e aprendido como as empresas realmente esperam que analistas de dados entreguem: resultados na mesa.

Meu Plano de Estudos

Dos quatro itens essenciais, eu só tinha Python. Precisei correr atrás do resto.

Excel

Playlist do Boson Treinamentos no YouTube

Power BI

Evento com Karine Lago (referência em Power BI) - criei meu primeiro dashboard
Evento da Hashtag Treinamentos
Curso "Power BI para Business Intelligence" da Data Science Academy (gratuito, +70 horas) - questionei o tempo todo se aquele conteúdo gratuito era real!
Bootcamp de Análise de Dados pela DIO
Bootcamp focado em Azure e Fabric

Certificações Conquistadas (Gratuitas!)

Databricks Fundamentals
IBM Data Fundamentals
Curso de Docker pelo LinuxTips
Curso de AWS pelo ChamaAsMina do LinuxTips

Próximas Certificações na Mira

PI-900
AWS Practitioner
Google Cloud
Badges e certificações Databricks

(Alô, alguém me patrocina? 😅)

Outras Ferramentas

Tableau
Looker Studio

A Jornada Continua: sobre Comunidade

Nesse meio tempo, migrei para Linux Arch e explorei os repositórios 4Noobs da He4rt.

Como uma coisa leva à outra, vi o guia de Arch Linux e também o de Obsidian. Aí lembrei que a Cherry escreveu um artigo incrível no DEV sobre como compartilhar conhecimento com o mundo.

Obrigada a comunidade He4rt que me acolheu desde 2022, sempre tirei muitas duvidas, sempre participei dos eventos (quando dava) e a troca real, valeu demais pelos toques.

O Segredo? Não Existe Segredo

Uma série de coisas me trouxe até aqui. De pouquinho em pouquinho, vou chegando mais perto dos meus objetivos, tentando não surtar nem desistir.

A verdade é que a jornada não é linear. É cheia de desvios, descobertas e conexões inesperadas. E está tudo bem.

Obrigada por chegar até aqui! Se você também está nessa jornada, vamos trocar experiências nos comentários?

#AreaDeDados #AnaliseDeDados #100DiasDeCodigo #TransiçãoDeCarreira #DevCommunity

My first time participating in Hacktoberfest 2024

Suami Medeiros — Sun, 13 Oct 2024 13:46:19 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Maintainer Experience

This was my first time participating in this event, and I was really happy because I was able to actively contribute to open-source projects that I really like and follow.

I made a total of five PRs in beginner-level projects since I wasn't very confident in my developer skills. So I started my journey with a really cool project of useful links for learning programming languages. My first PR was rejected because I messed up the commit formatting, hehe. I didn't give up, tried again, and now I'm waiting, hoping it will be approved.

The second PR was for a really cool app made with Flutter and Rust, which is very similar to Notion, called AppFlowy. This PR was a bit challenging for me because I wasn't sure how to contribute. I looked at the issues, evaluated the documentation, and didn't have much success, but I still tried something and submitted the PR. I'm also waiting for that one to be accepted.

The third PR was to add a link to a learning path for C, and the fourth was to update the README of a project idea, which was really nice. Now I'm searching for my last repository to submit a PR and wait.

But I absolutely loved this experience and recommend it to every beginner dev, it's worth gold!

Como fazer deploy no vercel com o seu app web flutter

Suami Medeiros — Sat, 28 Sep 2024 02:11:59 +0000

Como fazer deploy no vercel com o seu app web flutter

Venho aqui trazer esse "guia" de como publicar sua aplicação web flutter no site muito famosinho chamado Vercel.

Dei algumas alternativas de como fazer isso e no final vou deixar a referência que me inspirou a digitar esse artigo(passem lá pra dar os claps pro coleguinha, rs).

Antes de tudo...

Gostaria de desejar os meus parabéns pelo seu ótimo trabalho. Publicar uma aplicação web é um marco enorme para qualquer desenvolvedor, e se você chegou até aqui, é por estar a um passo de compartilhar o seu trabalho com o mundo.

Agora vou te mostrar como fazer a publicação do seu app web flutter para a plataforma Vercel.

Indice

Preparando a sua aplicação flutter para Web.
- Habilitar o suporte web no seu projeto Flutter.
  - Criar a versão web da sua aplicação.
Criando uma conta na Vercel.
- Acessar o site da Vercel.
  - Criar uma conta.
Subindo sua aplicação para o GitHub.
- Inicialize o git no seu projeto.
  - Adicionar todos os arquivos e fazer o commit inicial.
  - Subir a aplicação para o GitHub.
Conectando o seu projeto à Vercel
- Conectar o repositório.
  - Configurar as opções de build.
  - Clicar em deploy.
Publicação finalizada e opção de customizar o link.
- Verificar se está tudo ok.
  - Atualização automática
Fim.

Preparando a sua aplicação flutter para Web

Vamos garantir que a sua aplicação está configurado corretamente para web.

Habilitar o suporte web no seu projeto flutter

Vá ao terminal (No meu VSCode o atalho é Ctrl + Shift + ') e digite e execute o seguinte comando:

flutter config --enable-web

Criar a versão web da sua aplicação

Agora precisamos gerar os arquivos necessários para o deploy. Mais uma vez, no terminal, digite e execute:

flutter build web

Será criada uma pasta build\web, que vai ter os arquivos necessários que comentei anteriormente, após fazer a compilação do seu projeto.

Criando uma conta na Vercel

Se você não conhece a Vercel é uma plataforma bem legal pra subir os seus projetos. Para subir seu projeto você vai precisar criar uma conta mas não se preocupe pois não é preciso pagar nada (Só se você quiser um domínio personalizado, vamos falar disso no final, ok?).

Prosseguindo..

Acessar o site da Vercel

https://vercel.com/

Criar uma conta

Você pode se registrar com uma conta do GitHub, GitLab ou BitBucket. Isso poderá ser útil mais tarde.

Subindo sua aplicação para o GitHub

Antes de fazer o deploy do seu projeto flutter no Vercel, é preciso que o seu projeto esteja no github ou em alguma plataforma citada anteriormente.

Vou mostrar como se faz no GitHub.

Inicializar o Git no seu projeto

Abra o terminal dentro do seu projeto e digite e execute:

git init

Adicionar todos os arquivos e fazer o commit inicial

Após execute o git init, digite e execute:

git add .
git commit -m " sua mensagem de preferencia"

Subir o projeto para o GitHub

Finalmente a última etapa para subir a sua aplicação para o GitHub.

Depois de dar o commit inicial, vá no seu repositório e copie o link, você vai precisar para essa etapa.

Mais uma vez abra o terminal do seu projeto e digite e execute:

git remote add origin https://github.com/seu-usuario/seu-repositorio.git
git push -u origin master

Detalhe importante: se for em outras plataformas o processo é muito semelhante.

Conectando o projeto à Vercel

Belezuras, agora podemos finalmente configurar a publicação na Vercel.

Conectar o repositório

Com a sua conta logada na Vercel, encontre o botão New Project, após clicar no botão escolha o Github e procure pelo seu projeto, digitando o nome na barra de busca deve encontrar rápido.

Configurar as opções de build

Na seção Build & Development Settings, escolha Other como a predefinição da estrutura. Flutter infelizmente não é uma opção padrão no Vercel, então você precisará defini-lo manualmente.

Substitua as configurações padrões:

obs: para isso é preciso clicar no toggle que fica do lado de cada configuração para ativar cada campo.

Build Command

flutter/bin/flutter build web --release

Output directory

build/web

Install Command

if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web

Clicar em deploy

Ao clicar no botão de deploy a Vercel fará todo o trabalho dai em diante. Vai compilar e hospedar o seu app web Flutter automaticamente e é claro que isso pode demorar um pouco.

Publicação finalizada e opção de customizar o link

Quando a plataforma concluir a publicação, vai aparecer uma nova janela com o link para o seu projeto deployado (acabei de inventar essa palavra que muitos usam rs).

Certo, agora você finalmente concluiu sua publicação na Vercel. Meus parabéns!! 🎊

Verificar se está tudo ok

Pode ser que algum problema aconteça mas você pode voltar nas outras etapas e verificar o que pode ter acontecido.

Atualização automática

E só pra você saber: O maior beneficio de subir pela Vercel é que as suas atualizações são automáticas.

Fim

Obrigada por chegar até aqui. Agora seu aplicativo web está ativo, certifique-se de compartilhar com o mundo através das redes sociais, artigos e boca a boca também rs. Networking é o poder!!

Vou me despedindo por aqui, espero que tenha gostado e até a próxima <3

Happy Coding 🚀

Referência:

How to Deploy a Flutter Web App to Vercel - Leszek W. Król

Como projetar para várias telas? Aprenda os 4c's

Suami Medeiros — Fri, 31 May 2024 15:54:45 +0000

Ao projetar um novo produto ou recurso, é importante pensar sobre os diferentes tipos de plataforma em que o design será disponibilizado. Para lembrar, uma plataforma é o meio pelo qual os usuários utilizam seu produto. Algumas plataformas comuns são:

Computadores desktop
Laptops
Celulares
Tablets
Portáteis, como relógios inteligentes
TVs
Telas inteligentes

À medida que projeta para vários dispositivos, você precisa considerar o tamanho da tela do dispositivo, a interação entre o dispositivo e o usuário, a forma como o conteúdo será organizado em vários tamanhos de tela, a maneira como os usuários vão interagir com cada dispositivo e muito mais.

Para proporcionar uma ótima experiência de usuário em vários dispositivos, tenha em mente os 4Cs:

Consistência: ter um design uniforme para que os usuários sintam familiaridade com todos os dispositivos e produtos.
Continuidade: proporcionar uma experiência tranquila e ininterrupta aos usuários enquanto eles navegam entre dispositivos.
Contexto: projetar para as necessidades de um dispositivo específico e a forma como o usuário vai utilizar esse dispositivo em qualquer situação.
Complementariedade: levar em consideração como o design do produto em cada dispositivo pode melhorar a experiência geral do usuário.

A plataforma selecionada deve ser aquela que atende melhor às necessidades dos usuários finais. Mais tarde, você pode projetar para outras plataformas. Além de ter uma experiência do usuário consistente entre plataformas, também é importante ter uma identidade de marca consistente.

Por exemplo, uma Empresa deve ter o mesmo visual e sensação no computador desktop e no celular. E é importante ter em mente que algumas funcionalidades existem apenas em certas plataformas. Pense em um assistente de voz que permite que você faça perguntas ou controle seu celular com a voz. Muito inteligente, não é? No início, apenas celulares tinham assistentes de voz. Se o produto que você projetasse exigisse o uso de um assistente de voz, a única plataforma em que ele funcionaria seria em um celular. Mas, atualmente, assistentes de voz são integrados a muitas outras plataformas, como computadores desktop, TVs e até geladeiras.

Esse foi um papo mais de ux mas que faz sentido para quem desenvolve front tanto web quanto para app. Espero que tenham gostado.

Obrigada 🫰💚

Web ou App? Qual o melhor para criar em Flutter?

Suami Medeiros — Fri, 31 May 2024 15:35:12 +0000

A criação de aplicações modernas pode ser um desafio, especialmente quando se considera a necessidade de alcançar usuários em várias plataformas. Flutter, um framework desenvolvido pelo Google, tem se destacado por sua capacidade de criar interfaces de usuário nativas para iOS, Android, Web e desktop com um único código-base. No entanto, quando se trata de decidir entre desenvolver para a Web ou como um aplicativo móvel (App) em Flutter, há várias considerações a serem feitas.

A principal diferença entre desenvolver para Web e para App em Flutter reside na forma como a aplicação é distribuída e utilizada. Aplicações Web são acessadas através de navegadores e não requerem instalação no dispositivo do usuário. Elas são ideais para alcançar um público amplo rapidamente, pois basta um link para que os usuários possam acessar a aplicação. Um exemplo comum de aplicação Web seria um sistema de gerenciamento de conteúdo (CMS) ou uma plataforma de e-commerce, onde o acesso instantâneo e a compatibilidade com múltiplos dispositivos são cruciais.

Por outro lado, um aplicativo móvel (App) em Flutter é instalado diretamente no dispositivo do usuário, seja ele iOS ou Android. Isso permite uma integração mais profunda com o hardware do dispositivo, como câmeras, GPS, sensores de movimento, entre outros. Aplicativos móveis também oferecem a possibilidade de funcionar offline e fornecer uma experiência de usuário mais rica e responsiva. Um exemplo clássico de um aplicativo móvel seria um aplicativo de redes sociais ou um jogo, onde a performance e a interação com o hardware são primordiais.

A escolha entre Web e App em Flutter depende muito do público-alvo e das funcionalidades desejadas. Se a prioridade é alcançar rapidamente o maior número possível de usuários com uma solução que não requer instalação, a Web pode ser a melhor escolha. Além disso, aplicações Web são mais fáceis de atualizar e manter, já que as mudanças são refletidas imediatamente sem a necessidade de download de atualizações pelos usuários.

Entretanto, se a aplicação necessita de um desempenho superior, acesso a funcionalidades avançadas do dispositivo ou uma experiência de usuário mais fluida, o desenvolvimento de um App pode ser mais apropriado. Aplicativos móveis também podem se beneficiar de notificações push e outras funcionalidades nativas que são mais limitadas ou inexistentes na Web.

No entanto, muitas vezes, um único produto pode precisar de ambas as abordagens para atender a diferentes necessidades do usuário. Por exemplo, uma empresa de serviços financeiros pode oferecer um aplicativo móvel para clientes que necessitam de acesso rápido e seguro às suas contas e transações, enquanto também oferece uma versão Web para usuários que preferem acessar esses serviços a partir de um computador desktop. Neste caso, utilizar Flutter para desenvolver tanto a versão Web quanto a versão App pode ser altamente benéfico, uma vez que permite a reutilização de grande parte do código, economizando tempo e recursos no desenvolvimento e manutenção do software.

Em resumo, a decisão entre desenvolver para Web ou App em Flutter deve ser orientada pelas necessidades específicas do projeto e dos usuários finais. Cada abordagem tem seus próprios benefícios e limitações, e muitas vezes, a melhor solução pode ser uma combinação de ambas, utilizando a flexibilidade do Flutter para criar uma experiência de usuário consistente e eficiente em múltiplas plataformas.

Obrigada 🫰

Roteiro Altamente Subjetivo para Desenvolvimento com Flutter

Suami Medeiros — Thu, 18 Apr 2024 15:07:40 +0000

Roteiro Altamente Subjetivo para Desenvolvimento com Flutter

1

Independentemente de estar usando o Android Studio ou o VSC, dedique tempo para aprender atalhos e plugins da IDE. Investir algumas horas nisso vai valer a pena a longo prazo, economizando tempo e esforço. Vale a pena aprender o Flutter CLI, já que algumas tarefas são mais rápidas de serem realizadas pela linha de comando.

Também é importante desenvolver o hábito de usar um sistema de controle de versão o mais cedo possível. O Git é atualmente a opção mais popular. Embora usar a linha de comando possa parecer legal, recomendo utilizar um cliente Git amigável como Fork, Sourcetree, ou um integrado à sua IDE.

2

É importante seguir o estilo de código, mas se você é totalmente novo nisso, pode adicionar frustração, então sinta-se à vontade para pular isso por agora, mas retorne a ele mais tarde.

O manual "Effective Dart" é o caminho a seguir. Use um linter rigoroso como o very_good_analysis desde o início.

Quando se trata de Programação Orientada a Objetos (OOP) e Programação Funcional, é melhor começar com o básico. Não se preocupe com padrões complexos ou conceitos como monads por enquanto. Concentre-se em aprender os fundamentos e desenvolver suas habilidades gradualmente.

3

Assista ao Widget of the Week no Youtube, explore os conceitos de Material Design, e familiarize-se com os widgets básicos do Flutter que estão sendo disponibilizados.

O programa Package of the Week irá apresentar alguns dos widgets e pacotes de terceiros mais populares disponíveis para o Flutter.

4

Os padrões de design são os blocos de construção para desenvolver aplicações robustas. Compreender esses padrões é essencial para o desenvolvimento avançado e para obter um entendimento mais profundo do próprio framework. Além disso, esses padrões são universais e não específicos para nenhum framework ou linguagem de programação em particular. Portanto, investir tempo em estudá-los é uma escolha sábia para o trabalho de desenvolvimento futuro. Para começar a aprender sobre padrões de design, o antigo livro "Gang of Four" é um ótimo recurso.

5

Manter o princípio KISS (Keep It Simple, Stupid) e DRY (Don't Repeat Yourself) como foco tático durante o desenvolvimento de software é importante, mas também é essencial construir sobre uma base sólida de princípios estratégicos como SOLID. O livro "Clean Code" de Uncle Bob é um recurso valioso que ajudará em todas essas áreas. Sugiro usar Provider ou get_it para injeção de dependência. Se estiver se sentindo aventureiro e quiser experimentar geração de código, o pacote injectable é uma excelente opção.

6

É importante entender como funciona a comunicação entre front-end e back-end e os detalhes por trás das redes. Utilize a geração de código em produção.

Retrofit, Dio e Json Serializable são ótimos aliados aqui.

Se você estiver interessado em GraphQL, experimente o Ferry.

7

Armazenar dados é um requisito comum para quase todo aplicativo, mas nem todo aplicativo precisa de uma solução de armazenamento extensa. Em muitos casos, é melhor manter as coisas simples e usar persistência básica quando for suficiente. O plugin shared_preferences, ou suas alternativas, podem ser uma boa opção a considerar para esse propósito.

8

Quando você precisa aumentar a capacidade de armazenamento dos seus dados, pode ser hora de considerar soluções mais maduras, ou até mesmo opções baseadas em nuvem.

9

Está tudo bem desenvolver aplicativos com Provider, desde que você siga alguns acordos ou padrões arquiteturais. Você pode querer mudar para flutter_bloc, flutter_mobx, async_redux, ou outros padrões mais conscientes da arquitetura.

Suami: Leve em consideração que packages não oficiais podem depender de seus respectivos mantenedores e que por isso pode cair em desuso ou sofre falta de atualizações. (Importante levar em consideração para o tipo de projeto).

10

Quando se trata de escrever aplicativos rapidamente, a chave é escrevê-los corretamente desde o início. Para fazer isso, comece com a abordagem TDD (Test Driven Development) e depois faça a transição para BDD (Behavior Driven Development). O livro de Kent Beck, "Test Driven Development by Example", é um ótimo recurso para começar com TDD. Além disso, a série "Clean Code" do Uncle Bob cobre o tópico em profundidade.

11

Aprender o desenvolvimento nativo de aplicativos móveis pode ajudá-lo a obter uma compreensão mais profunda da plataforma subjacente, o que pode ser valioso para corrigir problemas com bibliotecas de terceiros ou desenvolver seus próprios plugins. Para começar, faça o curso da Udacity para Android e o curso de Stanford para iOS. FFIgen e JNIgen nos ajudarão a acessar seu código nativo.

12

Agora é hora de entender como o async/await realmente funciona e por que o stateless é benéfico. O uso de pacotes como freezed pode ajudar a melhorar o gerenciamento de modelos, enquanto fpdart ou dartz podem tornar seu código mais elegante. Para um entendimento mais profundo, recomendo fazer um curso básico sobre Closure de C#.

13

Criar seu próprio plugin pode ser um desafio emocionante! Se estiver se sentindo confiante, desafie-se criando um plugin com uma visualização nativa. E se isso não for o bastante, certifique-se de testar minuciosamente seu plugin e garantir que não haja vazamento de memória. É uma excelente maneira de expandir suas habilidades e contribuir para a comunidade de desenvolvimento. Boa sorte!

14

Entender como encontrar vazamentos de memória e identificar problemas de desempenho é crucial para o desenvolvimento eficiente de aplicativos. Você pode começar assistindo a uma palestra de Filip Hracek sobre esse tema no Flutter Europe, disponível no YouTube. Isso fornecerá uma base sólida para melhorar a qualidade e o desempenho dos seus aplicativos Flutter.

15

Para obter um entendimento mais profundo do framework, reserve um tempo para aprender sobre o pipeline de renderização do Flutter e como ele organiza seus widgets. Confira recursos como "Flutter's Rendering Pipeline" de Ian Hickson para começar. Isso ajudará você a compreender melhor o funcionamento interno do Flutter e a otimizar o desempenho de seus aplicativos.

16

Descobrir que alguém roubou seu aplicativo e o publicou sob um nome diferente seria desanimador e frustrante. O MASVS (Mobile Application Security Verification Standard) pode ajudá-lo a considerar e abordar diferentes cenários de segurança, incluindo esse. Além disso, o freeRASP é uma maneira simples, embora não suficiente por si só, de proteger seu aplicativo contra várias ameaças de segurança. Ao implementar medidas de segurança adequadas, você pode ajudar a proteger seu aplicativo e os dados dos usuários contra esses tipos de ataques e violações de segurança.

17

Ao aproveitar o poder do Flutter, você pode criar aplicativos que não são limitados pelas restrições dos smartphones - não se esqueça de explorar também desktop e web.

Se estiver interessado no desenvolvimento full stack, frameworks como dart_frog podem valer a pena conferir. Eles oferecem uma abordagem abrangente para o desenvolvimento de aplicativos, cobrindo tanto o frontend quanto o backend, utilizando a linguagem Dart em toda a pilha de tecnologia. Isso pode proporcionar uma experiência de desenvolvimento mais integrada e eficiente para projetos complexos.

18

Evite construir builds de produção a partir da pasta de desenvolvimento local. Em vez disso, considere usar ferramentas como Codemagic, Travis, GitHub Actions, Circle CI, ou registrar sua máquina de desenvolvimento como um nó CI para GitLab CI. Construir um ciclo de vida de desenvolvimento de software e coletar cobertura de código e outras métricas ajudará a manter a qualidade do código. Confira o Danger, SonarQube e, mais importante, FastLane. Um linter estrito é indispensável aqui. Isso garantirá que seu código esteja em conformidade com padrões de codificação consistentes e ajudará a detectar problemas potenciais antes que eles se tornem problemas reais.

19

A análise é essencial para entender como os usuários interagem com seu aplicativo e para tomar decisões orientadas por dados. Firebase Analytics, Firebase Crashlytics e DataDog são apenas algumas das muitas plataformas que oferecem recursos de análise gratuitamente. Ao usar essas ferramentas, você pode acompanhar o desempenho do seu aplicativo, identificar problemas e oportunidades de melhoria e tomar decisões informadas para melhorar a experiência do usuário.

20

Você tem a responsabilidade de orientar seus clientes sobre o que é possível e o que não é em termos de conformidade legal. Isso inclui o cumprimento das leis de privacidade, como GDPR e CCPA, além de aderir às políticas e diretrizes da loja de aplicativos. É fundamental garantir que seu aplicativo esteja em conformidade com todas as regulamentações relevantes e políticas da plataforma para evitar problemas legais e garantir a confiança dos usuários.

Links

Ambiente de desenvolvimento

Android Studio Shortcuts - Atalhos para acelerar o desenvolvimento no Android Studio.
VSCode Shortcuts for Windows, macOS - Atalhos para acelerar o desenvolvimento no VSCode.
Flutter CLI - Explicação detalhada de todos os comandos Flutter CLI.
Dart CLI - Explicação detalhada de todos os comandos Dart CLI (dart fix pode ser bastante útil no desenvolvimento diário).
DartPad - Uma ferramenta para criar conteúdo educacional eficaz e envolvente para usuários de Dart e Flutter.
DartPad Documentation - Documentação do DartPad em dart.dev.
Zapp! - Ambiente sandbox on-line gratuito para criar e compartilhar aplicativos Dart e Flutter, com suporte a todos os pacotes pub.dev, análise estática, incorporação, visualização e muito mais.
Interactive Git learning online - Aprenda comandos git de forma interativa no site learngitbranching.

Linguagem

https://dart.dev/guides/language/language-tour - Um breve tour pela linguagem Dart.
https://dart.dev/guides/language/effective-dart - Um guia para escrever um código Dart melhor.
https://dart.dev/guides/language/analysis-options - Um guia de configuração de análise estática.
https://dart.dev/guides/language/sound-problems - Um guia sobre como corrigir problemas comuns no código Dart.
https://dart.dev/tools/linter-rules - Uma lista de todas as regras do Dart linter disponíveis.
Dart Code Metrics - Uma ferramenta para ajudá-lo a gerenciar a qualidade e a consistência do código (fornece regras adicionais de lint, métricas de código e muito mais).

Package Manager

Developing packages & plugins - How to develop packages and plugins for Flutter.
CocoaPods - package manager for Swift and Objective-C projects.
Gradle - build automation system and package manager for Android.

Profiling

https://flutter.dev/docs/perf/rendering/ui-performance
https://youtu.be/vVg9It7cOfY

Flutter Interno

https://youtu.be/UUfXWzp0-DU
https://youtu.be/dkyY9WCGMi0
http://www.cs.cmu.edu/~bam/uicourse/830spring20/05-830-2020-03-23-Lecture-10-Flutter.mp4
https://mrale.ph/dartvm/
https://surf.dev/flutter-under-the-hood/
https://docs.flutter.dev/resources/architectural-overview
https://surf.dev/flutter-architecture-guide/

Segurança

OWASP MASVS - Mobile Application Security Verification Standard
https://pub.dev/packages/freerasp

Integração Continua

https://fastlane.tools
https://danger.systems
https://www.sonarqube.org
https://codemagic.io/
https://travis-ci.org

Analytics - Análises Métricas

https://firebase.google.com/docs/analytics
https://docs.microsoft.com/en-us/appcenter/analytics/
https://developer.mixpanel.com/docs/flutter
https://docs.smartlook.com/docs/sdk/flutter
https://pub.dev/packages/datadog_flutter_plugin

Store - Loja

https://developer.apple.com/app-store/review/guidelines/
https://play.google.com/about/developer-content-policy/
https://developer.android.com/distribute/best-practices/launch/launch-checklist

Agora finalmente você é um desenvolvedor(a) Flutter Senior! Parabéns.

Ps: Com o tempo vou atualizando o artigo e adicionando mais coisas, então já salva se for importante pra você é claro.

Muito obrigada!

Roteiro Altamente Subjetivo para Desenvolvimento com Flutter
por Oleksandr Leushchenko (@olexale)
traduzido por Suami Rocha

Faça uma cópia da imagem no figma:
https://www.figma.com/community/file/1362804868277413920/roadmap-flutter-2024

5 Dicas de Flutter

Suami Medeiros — Sun, 14 Apr 2024 15:56:51 +0000

Atenção desenvolvedores Flutterers,

Você está procurando melhorar suas habilidades de desenvolvimento com Flutter?

Aqui estão cinco dicas práticas e truques para Flutter:

Aproveite o Hot Reload para economizar tempo e fazer alterações rapidamente.
Utilize widgets para reutilização e organização de código mais limpo.
Mantenha seu código simples e evite adicionar recursos desnecessários.
Use programação assíncrona para melhor eficiência e experiência do usuário.
Mantenha-se atualizado com a interface do usuário (UI) em evolução do Flutter e continue aprendendo.

Lembre-se, entender a perspectiva do usuário é crucial para um ótimo desenvolvimento do Flutter.

Não hesite em experimentar e testar diferentes abordagens para encontrar o que funciona melhor para seus projetos.

Imagem usada para demonstrar um exemplo de organização de código em Flutter

IMPORTANTE
Se uma função ou método fizer uma tarefa complexa, não use assíncrono. Em vez disso, os use isolados.

Cada abordagem tem seus pontos fortes dependendo do objetivo da tarefa.

Muito obrigada pela atenção 🩵🩵✌️

Referências:

Flutter Clean Architecture Series — Part 1 (UPDATED)

Desenvolvendo um widget de upload com Flutter 🩵

Suami Medeiros — Wed, 10 Apr 2024 05:09:49 +0000

Desenvolvendo um widget de upload com flutter

Oi, muito obrigada por estar aqui, gostaria de informar que esse é o meu primeiro artigo publicado oficialmente aqui no Dev To e que estão tods convidads a se chegarem e lerem um pouquinho das experiências e vivências minhas, eu que sou atualmente estagiária flutter, também sigo atuando como freelancer front end nas horas vagas e uxui por hobby.

Pois bem, apresentada, agora vamos ao que interessa.

Esse foi um dos meus muitos desafios que tive no cotidiano do estágio. Em algum momento precisei desenvolver um widget que fizesse o upload de pdfs e que além disso também tivesse a funcionalidade de drag e drop na área ao redor.

Para a criação desse projeto, utilizei o seguinte comando:
flutter create --project-name testedropdrag --org br.com.suamirocha --platforms web ./testedropdrag

Dessa forma, fica claro que o projeto será feito para web.

Para implementar o widget e deixar ele funcional como eu gostaria, vou utilizar os seguintes pacotes:

ps: encontre os pacotes no site oficial dos pacotes: https://pub.dev

agora que baixei as minhas dependencias, elas ficam assim no arquivo pubscpec.yaml

Agora vamos organizar o projeto.

No meu arquivo Main, vai apenas o principal para rodar a nossa página:

Agora podemos trabalhar na nossa página principal que é onde o nosso widget ficará.

A princípio o código vai estar assim:

Agora vamos fazer os imports dos pacotes de instalamos no nosso projeto:

Eles ficarão assim mas não se assuste rs

Em relação ao pacote cross _file, ele irá identificar os nossos arquivos, então além de importá-lo eu preciso também instanciar o XFile junto a uma matriz de bytes para ter acesso aos seus métodos e propriedades de metadados.

Vou fazer a importação do Uint8List e aqui vai uma explicação legal sobre isso:

A Uint8List é uma lista de comprimento fixo de inteiros não assinados de 8 bytes.
Mas de uma forma simples e divertida, imagine que você tenha um monte de brinquedos diferentes, certo? E às vezes você quer organizar em grupos diferentes e especiais. A UintList8 é como uma caixa onde você pode guardar coisas, mas é especial porque só guarda números pequenos entre 0 e 255.

Então nessa linha de código:

final List<(XFile file, Uint8List bytes)> _list = [];

Está criando uma lista chamada _list que é uma lista de pares, onde cada par consiste em dois objetos, sendo um o XFile e o outro o Uint8List, dessa forma o XFile representa o arquivo em si e o Uint8List os bytes desse arquivo.

E isso tudo é útil porque em alguns casos você quer acessar tanto o arquivo, quando os seus bytes então faz sentido agrupá-los dessa forma, como é o nosso caso.

Dando continuidade…

Adicionei essas propriedades para centralizar o nosso widget:

Adicionei o DropTarget(desktop_drop) que cuidará dos eventos de drop e drag do nosso arquivo em pdf.

Estilizei o widget como queria e agora vamos deixar ele funcional

Crio um booleano iniciando como falso, para criar um estado no futuro:

bool isHovering = false;

Basicamente essa função basicamente faz a leitura do bytes e os adiciona na _list com o xFiles de forma assíncrona.

Essa função seleciona um ou mais arquivos essa condição no final quer dizer que se o resultado for diferente de null ele irá selecionar o arquivo e colocar no 'result'

Quando o usuário soltar os arquivos na área que escolhi, essa função vai processar os arquivos que foram soltos.

Já nessa nossa última função assíncrona, vamos apenas deletar o par de Xfile e Uint8List que representa o nosso arquivo que fizemos o upload.

Por fim, fiz as alterações necessárias no nosso widget DropTarget para ligar os estados e deixar a nossa área funcional.

Mas ainda faltam alguns detalhes..

Agora preciso criar um widget onde mostrará meu arquivo quando ele subir ou for carregado, assim saberei que deu tudo certo e posso excluí-lo futuramente caso precise.

E essa aqui foi a minha solução para isso, envolvi todo o conteúdo do DropTarget em uma coluna e no final adicionei uma fila com icone e texto para representar o meu arquivo.

Enfim, temos o nosso Widget completo do inicio ao fim esse aqui é o resultado final:

Muito obrigada pela atenção 🩵🩵✌️

Agradecimento especial aos meus chefinhos, ao arthur e lizandra que me inspiraram a fazer o widget, ao pessoal da devs norte que me motivaram a escrever por aqui e muito obrigada a todos os demais que de alguma forma única contribuíram para que eu chegasse aqui.

Caso você queira ver o meu código desse tutorial, ele se encontra nesse link: https://github.com/suamirochadev/upload-widget-flutter

Referências: