404jv/dev-landia

💙 Aplicativo gratuito para aprender programação.

👋 Olá Mundo! Eu sou o João Victor 🌎

📽 Redes Sociais

💚 Sobre

Sou professor de Robótica e programação, com experiência em ensinar crianças e adolescentes entre 4 a 17 anos. Sou formado em técnico em informática pelo IFPR Goioerê e atualmente curso Análise e Desenvolvimento de Sistemas no IFPR Umuarama.

Desde 2018, sou apaixonado pelo desenvolvimento back-end e web, com foco em Javascript (Node & Typescript) 💛 e conhecimento em ReactJS.

Meu objetivo é impactar positivamente a vida das pessoas ao meu redor por meio da programação. Produzo conteúdo no YouTube (Dev Lândia 💚), abordando tecnologias como React e Node.

🚀 "Eu sou aquilo que faço frequentemente, portanto meu sucesso é um hábito e não um ato".

🔧 Tecnologias

---

📺 Vídeos Recentes

• 👨‍🎤 Seu time faz essas loucuras em produção? 🤣🤣
• 👩‍🚀 3 projetos para praticar Javascript puro!
• 👾 Como criptografar senha no Nodejs com Bcrypt
• 👨‍💻 Os de verdade eu sei quem são 🤣🤣
• 🎮 Como configurar o Husky no Nodejs

📚 Artigos Recentes

• 💯 Ponteiros
• 🔥 Recursão
• ⭐ Função em C
• 🚀 Quick Sort
• 💚 Listas

dev-landia's Issues

Fichamento do artigo: "ASPECTOS PEDAGÓGICOS E TÉCNICOS DO APLICATIVO SILABANDO"

Entrega 10/05

Fichamento do artigo:

Retornar o usuário para a tela de login quando o token dele expirar.

Detalhes:

• o token do usuário expira depois de um dia que foi gerado.
• A API vai retornar um 401 e uma mesagem de "Token expired" quando o token do usuário ficar inválido.

Rota

• POST /sessions
  Nessa rota deve ser enviado um body contendo o email e password do usuário, exemplo:

{
    "email": "[email protected]",
    "password": "123"
}

Caso os dados estejam corretos a resposta vai ser:

{
   "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2NTAyOTQ4MjEsImV4cCI6MTY1MDM4MTIyMSwic3ViIjoiMTY3NDA3NWMtZDE5Yi00ZjM3LTg4OTgtYWJhMGNkN2IyZjg4In0.mJpOyFb5WAY-DkYO3Qe-unNJa04EzWtLTXlBt2qR_gg",
   "user": {
        "name": "João Victor ",
	"email": "[email protected]"
    }
}

Esse token deve substituir o token anterior no storage e o usuário redirecionado para a home ou para a última tela que ele estava antes do logout.

Assinada por: ninguém ainda.

Conectar o perfil com o Backend

Feito por: @jvolima

Ordenação de fase e arrumar problema com NaN

Novamente a Home! Nessa issue tem duas tarefas beeeem simples. A primeira é inverter a direção das fases na home, atualmente está assim:

Ou seja, a estrutura está:

• Mapa 1
• Mapa 2
• etc...

A meta é ficar:

• etc...
• Mapa 2
• Mapa 1

Assim conseguimos dar esse "feeling" de evolução (pois ninguém evolui indo pra baixo, né?) 😄.

Já a segunda vamos mudar esse "NaN%" que está aparecendo. Muito simples, o problema é existe diversas fases no app e nem todas o usuário vai ter acesso, pois ele pode não estar no nível ainda, ou seja, a fase está bloqueada e quando isso acontece o back-end não vai retornar o current_level da fase, então, se tentarmos acessar essa chave no objeto vai está um undefined.

Exemplo de fase DESBLOQUEADA

{
  "id": "585413b4-ca9f-4d22-a3a2-a8272e658425",
  "map_id": "654b369c-8459-4c7e-be93-b74531c7f8de",
  "title": "Fase 2",
  "type": "practice",
  "markdown_text": null,
  "description": "descrição fase 2",
  "max_level": 3,
  "order": 0,
  "created_at": "2022-05-01T15:24:11.619Z",
  "current_level": 0 // Olha o current level aqui!!
},

Exemplo de fase BLOQUEADA

{
  "id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
  "map_id": "2fad788d-e552-4232-ab72-ff4aa3ef6378",
  "title": "Fase 1",
  "type": "practice",
  "markdown_text": null,
  "description": "descrição fase 1",
  "max_level": 3,
  "order": 0,
  "created_at": "2022-05-01T15:24:11.659Z" // Não tem current level =(
},

PS: a regra é para todas as fases, independe do tipo de fase (teórica ou prática).

Para corrigir isso faça uma verificação no current_level se for undefined retorna um ícone de cadeado no lugar da % e deixa a barra de progresso zerada do jeito que é por padrão.

To do

• Inverter as fases.
• Colocar o ícone de cadeado quando a fase está bloqueada.

Tipagem do ReactNavigation

Isso aqui não vai mudar em questão de experiência do usuário, mas muda a qualidade do nosso código. Boas práticas em código é o que faz um bom programador, não basta só fazer funcionar. Então, é bom a gente manter boas práticas aqui no nosso repositório, até porque a gente não quer ver futuros devs ou recrutadores(a) vendo nosso código e achando feio.

Essa issue é bem simples, é só Tipar os parâmetros do ReactNavigation que está no index.d.ts:

interface NextSignUpProps {
  userData: {
    name: string;
    email: string;
    user: string;
  };
}

export declare global {
  namespace ReactNavigation {
    interface RootParamList {
      Home: undefined;
      Activity: undefined;
      Achievements: undefined;
      Perfil: undefined;
      SignIn: undefined;
      SignUp: undefined;
      NextSignUp: NextSignUpProps;
      FinishSignUp: undefined;
      Nada: undefined;
    }
  }
}

Atualmente só o NextSignUpProps está tipado. Não manjo muito de RN nem de ReactNavigation, vocês sabem mais do que eu, portanto, se quiserem explicar o porque do Nada: undefined; vou agradecer. Caso só foi feito para teste e esquecido aí pode remover.

To do

• Tipar as que precisam
• Editar o "Nada" da interface;

Adicionar pino e pino-pretty para logs no back

Essa aqui é bem simples, principalmente no back já que tem poucos logs ainda (que eu me lembre só o que mostra do server rodando e do banco de dados).

O pino é um logger, precisamos usar ele e não o console.log padrão, se não, acaba com a velocidade da nossa aplicação pq é síncrono e muuuito lento! Só da uma olhada nesse teste:

artigo completo: nesse site

Além disso, vamos usar o pino-pretty para deixar os logs um pouco mais bonito.

Sem pino-pretty:

$ {"level":30,"time":1522431328992,"msg":"hello world","pid":42,"hostname":"foo","v":1}

Com pino-pretty:

$ [1522431328992] INFO (42 on foo): hello world

É bem simples de usar essa lib, portanto, só vou deixar um exemplo de como fiz: https://github.com/404jv/nlw-return-impulse/
O arquivo server.ts e o logger.ts dentro da pasta utils do NLW mostram como deve ser feito aqui, também.

Detalhes

• Você pode usar a função vscode para achar os console.log

To Do

• instalar pino e pino-pretty
• criar uma pasta utils dentro de src
• criar e configurar o logger.ts dentro da pasta utils
• substituir todos os console.log no back-end

Caso de uso

Esse vai ser meio complicado, vamos discutir em call a respeito.

To do
Ator: aluno

• Cadastro
• Login
• Visualizar perfil
• Visualizar fases
• Corrigir fase

Ator: adm

• Criar fase
• Criar mapa
• Criar atividade
• Adicionar opção

Criação das tabelas relacionadas as medalhas

Para fazer o sistema de entrega de medalhas serão preciso 3 tabelas:

Relacionamento completo no Lucidchart

achievements

• Tabela para conter as informações das medalhas
• A coluna image_name é opcional, ou seja, isNullable

user_achievement

• Tabela para fazer o relacionamento many to many entre users e achievements

goals

• Tem relacionamento many to one com achievements (um achievement pode ter vários goal)
• Tabela para conter as informações das metas que deverão ser compridas para que o usuário receba as medalhas

objetivo
Criar 3 migrations, cada uma para a criação de cada tabela. Primeiro a migration que cria a tabela achievements, depois a que cria user_achievement e por fim a goals. Lembrando de seguir nomes bons nas migrations, recomendo: create-table-achievements, create-table-user-achievement e create-table-goals.

to-do

• migration da achievements
• migration da user_achievement
• migration da goals

Enviar atividade do usuário para correção

Essa vai ser feita quando a #32 estiver pronta! Essa aqui é bem mais simples. Quando o usuário finalizar a atividade - seja ela teórica ou prática - enviaremos ela nessa rota para "correção" - e está em aspas, pois o servidor não vai corrigir atividades e sim dar recompensas e/ou marcar fases como concluídas.

• Enviar a fase para correção na API.

PUT /game/correct/:id

Essa request precisa ter:

• Token do usuário (header)
• ID da fase (params)
• ID do map (body)

Achei importante pegar o ID do map, pois ia livrar o server de uma conexão com o baco (no caso de fases práticas). Agora, onde fica o ID do map? 🤔... Podemos pegar ele no próprio objeto da fase, já que todas vão ter o map_id:

{
	"id": "e64e8388-c289-4ff8-b70f-02775cb679d4",
	"map_id": "654b369c-8459-4c7e-be93-b74531c7f8de", // esse
	"title": "Fase teórica",
	"type": "theory",
	"markdown_text": "# Fase teste",
	"description": "Fase teórica",
	"max_level": 1,
	"order": 4,
	"created_at": "2022-04-18T21:57:33.282Z",
	"activities": [],
	"current_level": 0
}

Exemplo de request:

• A url fica assim: http://localhost:3333/game/correct/e64e8388-c289-4ff8-b70f-02775cb679d4
• O body fica assim:

{
	"map_id": "654b369c-8459-4c7e-be93-b74531c7f8de"
}

• O Header Authorization com o token Berer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....

A resposta seria assim:

{
	"current_level": 1,
	"total_coins": 1,
	"total_xp": 5,
	"is_map_done": false
}

Detalhes

• O JSON acima mostra as recompensas do usuário por ter terminado o level da fase, por enquanto, as recompensas são fixas.
• O usuário ganha 1 coin e 5 XP para cada level feito, no JSON acima tem o total de coins atualizados total_coins, ou seja, não apenas os coins que o usuário ganhou e sim todo os coins que ele já tinha mais os novos coins e a mesma coisa para os XP no total_xp.
• O is_map_done mostra se o usuário terminou o mapa fazendo aquela atividade (no caso não)
• O current_level mostra o novo atual level do usuário naquela fase.

Por enquanto não estamos armazenando os dados da tree e perfil do usuário em Cache. Então, mais para frente quando isso estiver pronto precisaremos atualizar os dados do usuário no Cache para cada level que ele terminar.

Fichamento do artigo: "Critérios de qualidade para aplicativos educacionais no contexto dos dispositivos móveis"

Entrega 10/05

Fichamento desse artigo:

Fichamento do artigo: "Aplicativos móveis como recursos pedagógicos"

Entrega 10/05

Fichamento desse artigo:

Fichamento de conteúdo para 10/05

Usar o modelo que o Bido passou pra gente.

Conectar a Home com o Backend.

Grande parte dessa já foi feita por vocês @1SyuLi e @jvolima, agora só falta fazer o calculo de porcentagem e colocar a barra de progresso de forma dinâmica.

Fichamento Duolingo 28/05

Os dois artigos estão em inglês, seja quem pegar - é bom ter o inglês afiado. Por mais que o estudo do Duolingo seja para aprendizado de idiomas, ainda acho que vai ajudar bastante no nosso app, então, esse é um fichamento muito importante pra gente.

Eles fizeram no blog deles:

Disponível em: https://blog.duolingo.com/how-we-learn-how-you-learn/
E deixaram um PDF:

Disponível em: https://aclanthology.org/P16-1174.pdf

Como são bem curtinhos cabe em uma Issue, mas se você quiser separa os dois fichamentos lá no Docs, ou deixa junto msm.

Objetivos

• Procure e destaque o máximo de adjetivos que pode ser usado para defender nosso app.
• O principal tema que estamos procurando explicar é aprendizado com repetição espaçada, pois vai ser usado no nosso app.

Além disso, queremos saber se essa mesma metodologia funciona para o aprendizado de programação, mas pra saber disso precisamos entender como ela funciona antes.

Trazer atividades do backend

Precisamos refatorar o APP para conseguir que as atividades retornadas sejam renderizadas, e atualmente o app tem os componentes necessários, só que não tá adaptado para a forma em que a API retorna os dados. Essa parte é pra ser fácil, não vai da muito trabalho.

• Refatorar a Activity
• Fazer conexão com o back

Detalhes

• Existem dois tipos de atividades: teórica e prática.
• As práticas tem 5 fases para cada level.
• As teóricas tem apenas um texto markdown.

Rotas

• GET /game/theory-phase/:id
  Nessa rota deve ser enviado o token e o ID da fase pelos parâmetros. Por exemplo, uma request assim: http://localhost:3333/game/practice-phase/259fa2dd-3e85-4dc3-8310-ca368c657023 vai retornar um array com 5 atividades que correspondem ao level do usuário:

[
	{
		"id": "4934e034-ab92-4a66-aaf3-88ba7b4399ae",
		"title": "Activity 0",
		"description": "Activity test",
		"phase_id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
		"type": "block_activity",
		"is_needed_code": false,
		"order": 0,
		"created_at": "2022-04-18T21:32:33.877Z",
		"options": [
			{
				"id": "dfb1a720-0e23-4a8d-a59c-24dd8e7b56fe",
				"name": "Option 0",
				"activity_id": "4934e034-ab92-4a66-aaf3-88ba7b4399ae",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.918Z"
			},
			{
				"id": "dd2650d7-baf3-414c-8a7f-5f81534ea855",
				"name": "Option 2",
				"activity_id": "4934e034-ab92-4a66-aaf3-88ba7b4399ae",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.941Z"
			},
			{
				"id": "759a5418-9ce4-432a-8035-30a1bcfc7f90",
				"name": "Option 1",
				"activity_id": "4934e034-ab92-4a66-aaf3-88ba7b4399ae",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.933Z"
			}
		],
		"tips": [],
		"activity_answer": [],
		"default_code": []
	},
	{
		"id": "f3103f97-dca4-4dce-a509-f13d39950f09",
		"title": "Activity 1",
		"description": "Activity test",
		"phase_id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
		"type": "block_activity",
		"is_needed_code": false,
		"order": 1,
		"created_at": "2022-04-18T21:32:33.949Z",
		"options": [
			{
				"id": "49961168-03ca-443c-83e0-105f49492c12",
				"name": "Option 1",
				"activity_id": "f3103f97-dca4-4dce-a509-f13d39950f09",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.966Z"
			},
			{
				"id": "b7d3bec7-e7c0-49cf-bedc-908afd2f68d8",
				"name": "Option 0",
				"activity_id": "f3103f97-dca4-4dce-a509-f13d39950f09",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.957Z"
			},
			{
				"id": "697d4a8b-ca56-40e4-bf96-3950fb111c55",
				"name": "Option 2",
				"activity_id": "f3103f97-dca4-4dce-a509-f13d39950f09",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:33.982Z"
			}
		],
		"tips": [],
		"activity_answer": [],
		"default_code": []
	},
	{
		"id": "4c117d44-5592-47eb-b943-98b5c3d0d62f",
		"title": "Activity 2",
		"description": "Activity test",
		"phase_id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
		"type": "block_activity",
		"is_needed_code": false,
		"order": 2,
		"created_at": "2022-04-18T21:32:33.995Z",
		"options": [
			{
				"id": "bfa7e5ac-9851-4263-8098-ddc617374f35",
				"name": "Option 2",
				"activity_id": "4c117d44-5592-47eb-b943-98b5c3d0d62f",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.032Z"
			},
			{
				"id": "eee6c03b-6ff5-4059-b0cb-205921fe8be5",
				"name": "Option 1",
				"activity_id": "4c117d44-5592-47eb-b943-98b5c3d0d62f",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.024Z"
			},
			{
				"id": "4bdc3151-a472-4318-8f3e-81d3d680b5eb",
				"name": "Option 0",
				"activity_id": "4c117d44-5592-47eb-b943-98b5c3d0d62f",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.013Z"
			}
		],
		"tips": [],
		"activity_answer": [],
		"default_code": []
	},
	{
		"id": "d07b4a05-f06e-4db0-a265-8325beabed73",
		"title": "Activity 3",
		"description": "Activity test",
		"phase_id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
		"type": "block_activity",
		"is_needed_code": false,
		"order": 3,
		"created_at": "2022-04-18T21:32:34.042Z",
		"options": [
			{
				"id": "39e3c728-a563-4ff4-93b1-dec50330e150",
				"name": "Option 2",
				"activity_id": "d07b4a05-f06e-4db0-a265-8325beabed73",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.081Z"
			},
			{
				"id": "c828b514-5671-4aca-85c3-d865f03baa62",
				"name": "Option 0",
				"activity_id": "d07b4a05-f06e-4db0-a265-8325beabed73",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.057Z"
			},
			{
				"id": "061353ea-2689-4d6f-acaf-05c800942b16",
				"name": "Option 1",
				"activity_id": "d07b4a05-f06e-4db0-a265-8325beabed73",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.073Z"
			}
		],
		"tips": [],
		"activity_answer": [],
		"default_code": []
	},
	{
		"id": "3b2c655d-105a-4cd9-88c8-7d6c5533bfbf",
		"title": "Activity 4",
		"description": "Activity test",
		"phase_id": "2895a53e-b43f-43fb-8ae8-ef7bf4da1f00",
		"type": "block_activity",
		"is_needed_code": false,
		"order": 4,
		"created_at": "2022-04-18T21:32:34.107Z",
		"options": [
			{
				"id": "382d18fa-38cd-4dd2-9920-c516a9ca66b2",
				"name": "Option 2",
				"activity_id": "3b2c655d-105a-4cd9-88c8-7d6c5533bfbf",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.131Z"
			},
			{
				"id": "74ebd8dd-7be6-4ea3-a113-7816920c4f15",
				"name": "Option 1",
				"activity_id": "3b2c655d-105a-4cd9-88c8-7d6c5533bfbf",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.123Z"
			},
			{
				"id": "3ebd4ae9-304c-4cd9-ae06-a3e62bbe9855",
				"name": "Option 0",
				"activity_id": "3b2c655d-105a-4cd9-88c8-7d6c5533bfbf",
				"type": "js_function",
				"hexadecimal_color": "#335A6A",
				"created_at": "2022-04-18T21:32:34.114Z"
			}
		],
		"tips": [],
		"activity_answer": [],
		"default_code": []
	}
]

A gente pega esse array e para cada atividade renderiza um componente que já fizemos. Bem simples!

• GET /game/practice-phase/:id
  Para as fases teóricas podemos fazer a mesma coisa, só vai mudar a rota. Pensei que seria melhor organizado e performático se mudássemos a rota das fases teóricas para uma sozinha, já que as práticas vai ter diversas regras de negócios apenas dela e a teórica não tem nenhuma. Como as fases teóricas não possuem atividades podemos apenas fazer a request, exemplo: http://localhost:3333/game/theory-phase/e64e8388-c289-4ff8-b70f-02775cb679d4 e vamos obter a fase com o markdown_text:

{
	"id": "e64e8388-c289-4ff8-b70f-02775cb679d4",
	"map_id": "654b369c-8459-4c7e-be93-b74531c7f8de",
	"title": "Fase teórica",
	"type": "theory",
	"markdown_text": "# Fase teste",
	"description": "Fase teórica",
	"max_level": 1,
	"order": 4,
	"created_at": "2022-04-18T21:57:33.282Z",
	"activities": [],
	"current_level": 0
}

Podemos enviar esse tipo de fase para o componente que já criamos.

Criar um .env.example e adicionar explicação na documentação

Essa deve ser feita quando a #36 estiver fechada. Aqui é só documentação, como .env vai ser ignorado pelo git, podemos criar um arquivo .env.example e deixar apenas os nomes das variáveis para serem preenchida. Depois disso, alterar o passo a passo da instalação para lembrar de clonar o .env.example e preencher as variáveis para a configuração de quem está baixando o projeto.

Detalhes

• O .env.example pode ter variáveis com valores, desde que não sejam dados pessoais, por exemplo, a variável PORT que é a porta onde o servidor está rodando pode estar preenchida como 3333 no .env.example.
• Na documentação o passo de clonar o arquivo pode ser feito com o cp assim:

$ cp .env.example .env

• Exemplo de projeto é o Rentx.

To do

• Criar o .env.example;
• Adicionar a variável BASE_URL como vazia no arquivo;
• Adicionar na documentação ensinando a clonar o arquivo e lembrando o leitor de preencher as variáveis do .env;

Colocar os ícones das fases no backend

As fases na Home tem um ícone, a meta era para cada uma ter o seu ícone, exceto as teóricas que vão ter o mesmo ícone. No momento os ícones são do próprio mobile, é melhor passar o png/svg para o back se virar com isso e na API é retornado apenas a URL da imagem que vai ser usada como ícone.

Home atualmente:

Detalhes

• Vai ser preciso utilizar o express.static.

Vou terminar essa Issue ainda.

Texto provisório até 30/05

Como discutido na reunião: nosso artigo precisa ter:

• introdução
• justificativa
• metodologia
• resultados esperados

Trocar a modal da atividade prática

Ainda não decidimos exatamente qual vai ser a lib que substitui a atual. Mas, eu vi que o @jvolima deu algumas ideias.

O objetivo é trocar a modal da atividade:

Atualmente essa é um pouco estranha, pois o usuário pode puxar ela sendo que nem tem conteúdo dentro.

A modal perfeita seria:

• Tem uma transição de baixo para cima (assim como a atual);
• Deve ficar na parte de baixo do celular e não sair da tela mesmo que scrolla para cima (assim como a atual);
• Não deve ser possível fechar a modal, exceto se usuário clica no botão "Continuar";
• Caso tiver alguma sugestão de modal manda aí;

Para quem assinar essa: a gente pode ir call para discutir algumas alternativas ou só mandar no chat do Discord msm.

To do

• Substituir a modal atual.
• Remove a dependência da modal antiga.

Remover os espaços inúteis dos inputs antes de enviar a request

No meu celular quando o teclado corretor completa meu email no input de login ou cadastro fica um espaço no final e isso vai fazer dar erro no login e no cadastro vai colocar meu email não como "[email protected]" e sim "[email protected] " não só nos inputs de email tá acontecendo isso e sim em todos.

Isso não é pra ser difícil, só achar como remove os que sobraram. Se o usuário escrever um username como " 404jv " pega se string e remove os espaços inúteis e envia para o back como "404jv" e a mesma coisa para os campos de email e nome.

Detalhes

• Os componentes que tem inputs são: SignUp, NextSignUp, SignIn.
• Apenas os campos de email, username e nome serão modificados.
• Um nome como "João Victor " deve ficar "João Victor".
• Campos como senha e bio não precisam mudar.

Documento de requisitos para 30/04

Essa não é código, mas é importante. Fazer a descrição de todas as funcionalidades e de cada regra de negócio.

• Entender como escreve os requisitos
• Escrever todos os requisitos

Arrumar warnings do Expo

Ao iniciar o Expo com expo start vai mandar diversos warnings de dependencias no meu bash. O objetivo é seguir as próprias instruções que são escrita em amarelo no bash.

Essa mensagem escrita em verde pode não aparecer pra você, isso acontece porque o expo na minha máquina está desatualizado.

Criar novos seeds

No momento a gente tem seeds para tudo (ou quase tudo): admin, user, activity, map e phase. No entanto, os seeds de activity e options estão muito ruim! My bad 😅. O problema é que quando cria só para o backend dá para usar tranquilo, só que quando vamos usar os seeds para o mobile é impossível, olha o exemplo de seed de activity:

  const activity = await activitiesRepository.create({
    title: `Activity ${order}`,
    description: 'Activity test',
    order,
    type: enActivityType.BLOCK_ACTIVITY,
    phase_id: '2895a53e-b43f-43fb-8ae8-ef7bf4da1f00',
  });

Até aqui tudo certo, vai ser criado várias activities enumeradas com as order de cada uma, então, "Activity 0", "Activity 1" e etc... Agora para cada activity criamos algumas options:

  await optionsRepository.create({
   activity_id,
   hexadecimal_color: '#335A6A',
   name: `Option ${order}`,
   type: enOptionType.JS_FUNCTION,
 });

Olha como sou criativo cada activity vai ter options chamadas de "Option 1", "Option 2" e etc... Se tu lembrar de como funciona o component Comand no mobile, sabe a 💩 que eu fiz kkkk. Nesse componente temos um objetos de comandos que pegamos basicamente com o nome do comando vindo do back:

  const commands: ICommands = {
    drawBlueBox: () => <Box bgColor={color} />,
    drawRedBox: () => <Box bgColor={color} />,
    drawWhiteBox: () => <Box bgColor={color} />,
    drawGreenBox: () => <Box bgColor={color} />,
    drawPurpleBox: () => <Box bgColor={color} />,
    drawYellowBox: () => <Box bgColor={color} />,

    newLine: () => <NewLine />,
  };

  const command = commands[commandName];

Caso o comando não existe no objeto, o command vai ser um undefined e isso vai basicamente quebrar a aplicação, e como a gente vai ter os benefícios e a produtividade de usar seeds se eles quebram a aplicação? 🤔.

Para resolver isso vamos mudar o seed de activity, cria no mínimo 6 activities. Pode ser bem simples, por exemplo:

{
  title: `Activity blue`,
  description: 'Activity blue test',
  order,
  type: enActivityType.BLOCK_ACTIVITY,
  phase_id: '2895a53e-b43f-43fb-8ae8-ef7bf4da1f00',
}

E as opções dessa activity serão iguais umas as outras, novamente - activities bem simples. No total cada activity vai ter duas options. Exemplo:

{
  activity_id,
  hexadecimal_color: '#0000FF',
  name: 'drawBlueBox',
  type: enOptionType.JS_FUNCTION,
}

Outra coisa é que esses seeds eles não criam default_code e nem activity_answer, então, é importante que seja criado e o default_code pode ter apenas uma option, enquanto a activity_answer tem duas.

Detalhes

• Crie 6 activities, com nomes simples como "Atividade vermelha".
• Cada activity tem 2 options.
• Cada activity tem uma tip (as dicas que aparecem), exemplo, "Dica 1" ou tu adapta a dica: "Use a função X para fazer tal coisa".
• O default_code deve ser preenchido com apenas uma option.
• A activity_answer deve ser preenchida com as duas options.
• O order nas activities começa do 0 e vai até o 5 (no total vai ser seis activities).
• O order nas options serão do 0 até o 1 (no total 2 options de cada activity).
• Os nomes das options não terminam com "()" por mais que seja uma função.
• Lembra de preencher o phase_id com 2895a53e-b43f-43fb-8ae8-ef7bf4da1f00 (id da fase 1).
• Você vai precisar usar os repositories: ActivitiesRepository, ActivitiesAnswersRepository, OptionsRepository, ActivitiesDefaultCodeRepository e TipsRepository.
• Tudo isso vai ser feito no mesmo arquivo que é activities.ts dentro da pasta seed.
• Não tenha medo de fazer muito cntrl + c e cntrl + v, qualquer coisa a gente refatora depois 😄.

To do

• Criar as 6 activities;
• Criar 2 options para cada uma;
• Criar 1 tip para cada uma;
• Adicionar o default_code para cada uma;
• Adicionar a activity_answer para cada uma;

Arrumar os problemas do Eslint

Issue de 2 pontos

Essa issue é na mesma ideia da #50. Importantíssimo manter a padronização do código, sei que as vezes o Eslint é chato mas alguém tem que fazer o papel de "advogado do capeta" pois se não nosso código fica "espaguete" ou "porco" (como dizem na comunidade dev) e não queremos isso.

Atualmente no nosso código temos diversos comentários que desativam o Eslint (alguns feitos por mim kk) e vamos mudar isso - não é preciso remover todos - e sim diminuir eles. Começando pelos que reclamam do index de array sendo usado como chave do componente:

<OptionEditorCode
  // eslint-disable-next-line react/no-array-index-key
  key={index}
  onPress={() => handleDeleteCodeFromEditor(index)}
>

Código acima está no componente Editor - Linha 43, no momento em que a gente fez esse comentário fazia sentido desativar o Eslint por conta de não termos o ID da opção, mas agora temos e não precisamos usar mais esse comentário.

Outro que precisamo remover da aplicação é esse:

export function Home(): JSX.Element {
  const theme = useTheme();
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const navigation = useNavigation<any>();

O Eslint reclama quando usamos o tipo any por um motivo, e por favor, não use o any no código. Caso tenha alguma dúvida de como tipa algum parâmetro, pesquisa no google ou faça uma pergunta em alguma comunidade. Por fim, tem outros tipos de comentários de desativação, o máximo que você conseguir remover deles melhor.

Detalhes

• Existe alguns que não vai dá para tirar, então, deixa no código que mais para frente podemos alterar as regras do Eslint.
• Você pode usar a ferramenta de pesquisa no código do vscode para pesquisar por // eslint, vai aparecer todos os comentários de desativação, remova todos que conseguir.

Passar baseURL do axios para um .env

Atualmente nosso arquivo api.ts está assim:

import axios from "axios";

const api = axios.create({
  baseURL: "http://192.168.0.194:3333",
});

export { api };

O problema aí é que cada um tem um IP diferente e sempre quando alguém comitta o seu IP, troca o de todo mundo.
Para resolver isso cria uma variável em um .env chamada BASE_URL e assim podemos ter acesso a ela com process.env.BASE_URL.

Detalhes

• Usamos a lib dotenv.
• Pesquise em qual arquivo seria melhor para importar o dotenv para conseguirmos ter acesso as variáveis.

To do

• Instalar o dotenv pela documentação oficial
• Importar o dotenv no arquivo principal (que você pesquisou e achou qual é)
• Criar a variável BASE_URL e usar no arquivo api.ts

Refatorar README.md

Arrumar documento de requisitos 30/05

Como o professor destacou na reunião: é necessário escrever as principais tecnologias usada na construção do APP e mostrar quantos XP e Coins o usuário ganha.

Essas daqui deverão ser citadas:

• Node (para o servidor)
• Javascript com Typescript (para escrever o código)
• React Native e Expo (para o aplicativo)
• PostgreSQL (banco de dados)
• Yarn (gerenciador de dependência)

Caso tiver mais algum que você acha necessário adiciona na lista. Não sei exatamente em qual local do documento é preciso adicionar isso, acho que o David sabe.

Sobre o XP, coins e leveis das fases: quando o usuário termina uma fase ele ganha 5 XP, 1 coin e um level na fase.

Por exemplo, o Joãozinho tem:

• Fase no level 2
• Coins: 2
• XP: 4

Quando Joãozinho terminar a fase vai passa a ter:

• Fase no level 3
• Coins: 3
• XP: 9

Simples, não? Deve ser destacado isso (quanto o usuário ganha) na parte da fase lá no documento de requisitos.

To do

• Adicionar tecnologias no doc
• Adicionar recompensas no doc

Tela de exercício teórico

Fazer no figma a tela teórica @1SyuLi