O que é o Challenge?
É uma forma de implementar o Challenge Based Learning que a Apple ajudou a criar. Um mecanismo onde você engaja em cima de um problema, para só depois investigar soluções com cursos, conteúdo e conversas.Quais tecnologias são utilizadas no Challenge?
Durante o Challenge os alunos são livres para desenvolverem o projeto com as tecnologias que desejarem. Dessa forma o projeto é realizado individualmente pelo aluno, e fica limitado apenas pela imaginação e conhecimento de cada um.Prazos e dinâmica do Challenge.
Os alunos são incentivados a seguirem a rotina de uma empresa real, recebendo tarefas e prazos a serem cumpridos.A dinâmica das tarefas é organizada com o auxílio do Trello.
O Challenge tem duração de 4 semanas.
Na primeira semana os alunos recebem o layout do projeto no Figma e instruções sobre as tarefas que deverão ser cumpridas durante essa semana.
Nas semanas seguintes, novas tarefas e requisitos são entregues até a conclusão do projeto.
Detalhes de como foi desenvolvido meu projeto Alura Geek.
O projeto consistia na criação da página de um e-commerce de produtos Geek.A página foi desenvoldida com HTML, CSS e JavaScript puros.
Como o projeto foi desenvolvido apenas com Front-End, foi utilizado um JSON-Server para simular uma API de consulta a um banco de dados.
Nesse banco de dados (que é na verdade um JSON) constam todas as informações dos produtos e categorias, que alimentam o site.
Visando praticar a manipulação do DOM, optei por utilizar apenas 1 arquivo de index.html.
Esse arquivo é manipulado via JavaScript, conforme as rotas passadas na URL. Novamente, por não possuir um back-end, simulei a passagem das rotas utilizando parâmetros na URL.
Para as requisições HTTP foi utilizada a Fetch API.
Para salvar a informação de que o usuário está logado, foi utilizado o WebStorage (Session Storage).
Agradecimentos!
Obrigado à equipe da Alura pelo desenvolvimento desse projeto. Principalmente à @MoniHillman e ao @AntonioEvaldo que coordenaram o desenvolvimento do Challenge e as lives.Foi muito legal ter participado e com certeza contribuiu muito pro meu desenvolvimento.
Espero participar do próximo já com conhecimento mais aprofundado, para que possa desenvolver utilizando frameworks.
Um agradecimento especial para alguns membros do Discord da Alura:
@SucoDeLarangela: por ter me indicado a possibilidade de usar o Json Server que eu ainda nao conhecia. Sem isso, meu resultado teria sido completamente diferente. E por disponibilizar seu repositório para consulta, que embora tenha sido desenvolvido com outras tecnologias, me ajudou muito como inspiração. Mesmo tendo tirado férias no meio do challenge, consegui antecipar as funcionalidades necessárias com base no seu projeto e no layout do Figma, e por isso não perdi os prazos.
@EduHcb, por ter se disponibilizado a fazer um Code Review no meu projeto inacabado, dando várias sugestões de melhorias (algumas serão estudadas e implementadas).
E também pela ajuda com os "imports" no JS. Ter aprendido isso me ajudou demais a conseguir organizar melhor os arquivos do projeto, modularizando diveras funções e componentes.
@LucasFugisawa, pela paciência ao tentar me explicar sobre a assincronicidade do JavaScript. kkkk
Embora a dúvida no Discord não tenha surgido por causa do meu projeto, a conversa que sucedeu me ajudou muito a entender melhor o que eu estava fazendo, pois o Challenge foi minha primeira experiência utilizando o fetch.
Para ter acesso à página de "Adicionar novos produtos" é necessário que o usuário esteja Logado.
Após realizar o login, o botão de Adicionar Produto ficará habilitado na página Todos os Produtos.
Dados para login:
- E-mail: [email protected]
- Senha: Ab1234
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Alura Geek |
| 🏷️ Tecnologias | HTML, CSS e Javascript |
| 🚀 URL | Acesse o site |
| 🔥 Desafio | Protótipo no Figma |
Project developed during the Challenge Front-End 5th Edition of Alura!
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Name | Alura Geek |
| 🏷️ Technologies | HTML, CSS e Javascript |
| 🚀 URL | Go to the website |
| 🔥 Challenge | Figma's prototype |