Pular para o conteúdo principal

Desenvolvendo um mapa usando ReactJS, MongoDB e um pouquinho de Redux - Parte 1 #BoraCodar

Sou um entusiasta

desse negócio de transformar minhas ideias em código e ainda mais, quando isso me traz alguns bônus como: Aprender algo novo; contribuir com a comunidade; ou qualquer outra coisa que envolva sair da rotina.
Sem mais delongas, dias atrás após conversar com alguns amigos do laboratório de computação da UEL (Universidade Estadual de Londrina), percebi que muita gente sai do ensino médio sem uma noção de quais cursos interessantes existem perto de onde mora, ou pior, aonde ela poderia encontrar aquele curso que mais se encaixa em seu perfil. Eu mesmo, antes de ir pra computação fiz 2 vestibulares na área de humanas (História e Ciências Sociais - ambas na Unesp) e um em computação (Fema - Assis, SP). Contudo,  quando saiu a nota do Enem vi que havia uma universidade próximo da minha cidade que era federal que que aceitava o programa Sisu. Foi assim que ingressei na UTFPR de Cornélio Procópio.
Essa odisseia toda, me fez refletir que seria interessante usar meu tempo livre pra criar uma ferramenta que ajude outros estudantes na mesma situação. Por isso, nesse conjunto de artigos vou construir um mapa que permite filtrar por interesses as universidades que possuem o curso pesquisado. No escopo, será previsto que a própria comunidade cadastre novos cursos, ou universidades.

Requisitos da Aplicação

Essa aplicação deve permitir:

  1. Cadastrar novos cursos por universidade (tem que ser transparente, ou seja, o usuário vai selecionar a universidade no formulário de cadastro por meio de uma consulta no Google Maps);
  2. Google Maps será usado na renderização dos mapas e na consulta de universidades no formulário de cadastro; e
  3. Na página de busca o usuário deve filtrar por curso.

O que vamos abordar nos próximos artigos?

Nos próximos artigos serão abordados os assuntos:

  1. Definição da estrutura de dados e arquitetura
  2. Construção da API
  3. Construção da interface web
  4. Integração da interface web com a API
Continue acompanhando as próximas publicações. Um forte abraço !

Comentários

Postagens mais visitadas deste blog

Como serializar todos os dados de um formulário em um objeto JSON usando jQuery? #fastTip

Um dos pilares de um código bem escrito é: DRY (Dont Repeat Yourself - não se repita). Acontece que muitas vezes nos deparamos com situações que por conta da necessidade de entrega expressa (famoso código miojo - feito em 2 minutos), acabamos deixando de aplicar boas práticas. O que difere um amador de um profissional é a sua capacidade de avaliar o impacto que um código mal escrito causa e identificar os caminhos pra resolver esses impasses. Enfim, vamos ao que interessa: O Problema Desejo criar um objeto JSON à partir de um formulário, para ser enviado em uma requisição assíncrona. Atualmente, o objeto é criado assim: var data = { name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), }; Olhando pra esse código, vemos diversos problemas: Se mudar o name do input, precisará ir lá no código para alterar a atribuição. Se houver um formulário com 20 campos, terá que fazer 20 atribuições, e assim por diante. A Soluçã

Prefira exceções à códigos de erros #FastTip #CleanCode

Gostaria de compartilhar com vocês uma técnica que aprendi a me acostumar ao longo dos anos, mas que conheci pelo livro do Robert C. Martin, o Clean Code . De forma bem sintetizada, o autor relata que uma boa prática é retornar exceções, ao invés de códigos de erro, pois isso evita a escrita de códigos de verificação, e mantém ele enxuto, mais confiável, sem aberturas para bugs relacionados à erros não previstos. Esse conteúdo você encontrará no capítulo 3 (página 46 - 47) e no capítulo 7 (página 103 - 112), do livro supracitado. Aí como exemplo, desenvolvi um pequeno código Javascript que pode servir de referência para os demais, por ser simples de entender. // ----------------------------- // Criei uma classe genérica que permite acesso ao objeto // Error, padrão do JS, e escrevo a stack trace nomeada // à partir de um Error genérico class GenericError extends Error { constructor(message) { super(message); this.name = this.constructor.name; Error.captureStackTrace(t

Executar uma tarefa em background no Android usando React Native

Pegue um café e se ajeite na cadeira, pois vou contar uma história um pouco longa a respeito de como executar serviços em segundo plano com React-Native e imagino que vai servir mais como um norte na hora de desenvolver esse tipo de funcionalidade. Primeiro, pesquisei na documentação oficial do React, e lá é indicado um recurso chamado Headless JS, que permite criar uma ponte entre o JS e o código nativo, e executar tarefas em background. Em seguida, fiz uma pesquisa sobre como funcionam as tarefas em segundo plano no Android para entender quais são as possibilidades e prós e contras de cada abordagem. Sobre as abordagens, temos: # WorkManager A API WorkManager facilita a programação de tarefas adiáveis e assíncronas que precisam ser executadas mesmo se o app fechar ou o dispositivo reiniciar. Principais recursos: Compatível com versões anteriores até a API 14 Usa o JobScheduler em dispositivos com a API 23 ou posteriores Usa uma combinação de BroadcastReceiver + AlarmManage