javascript – Blog do Killdragon

Vue 3 com Api do Spotify – projetinho novo – WIP

Hey pessoas! Já faz um tempo desde o último post, hein. xD

De vez em quando o blog entra em uns hiatos mas não se espantem. O fluxo é esse mesmo. Mas sempre que tem algo que eu considero relevante manter para consultas futuras eu acabo postando por aqui.

Sem mais delongas. Esse projeto que estou disponibilizando no github é, na verdade, um teste que fiz para uma empresa. Só que eu não terminei o teste a tempo (pois é T.T).

A idéia era criar uma aplicação que consumisse dados da api do Spotify e filtrasse as buscas por artistas, álbums e músicas.

No momento as telinhas do app são algo como essas abaixo.

Pra dizer a verdade o projeto até que é simples. Eu demorei mais na tomada de decisões e pra ler as documentações das tecnologias que eu ia utilizar, do que pra desenvolver o app em si.

Alguns passos e decisões

Como eu disse, o app ainda está incompleto. No momento as buscas retornam dados falsos, mas são dados no formato que a api retorna e já estão filtrados.

Vou tentar resumir aqui as decisões mais importantes que tomei para este projeto.

Não utilizei nenhuma ferramenta especial para o design (nada de Figma ou seus similares). O processo de criação foi: rascunhos num caderno e sair criando html/css. Eu já tinha a idéia na cabeça, então queria ver logo como ficaria.

Levando isso em conta, ainda tem muita coisa que pode mudar no visual e eu pretendo colocar algumas animações mais maneiras quando o projeto estiver mais maduro.

Criei o projeto com Vue Create mesmo.

Como suíte de testes, a ferramenta disponibiliza o Jest por padrão. Não tenho experiência nenhuma com Jest… Até tentei escrever alguns testes no início mas os componentes tem um “jeitinho especial” de serem testados e eu ainda teria de aprender todo o fluxo de como testar dados reativos, funções assíncronas e outras coisas mais com a suíte. Então estava mais atrapalhando do que ajudando. Deixei instalado mas não escrevi testes. Juro que vou escrever no futuro. Não briga comigo. xD

Agora, com mais calma, vou até tirar um tempo pra estudar sobre isso. Acredito que vai ser bom estudar Jest, já que projetos em React e Angular também costumam usar essa suíte.

Decidi fazer a filtragem por rotas/páginas porquê a própria api precisa de uma rota de autenticação de usuário, então decidi aproveitar esse recurso, já que ia ter de implementar rotas do mesmo jeito.

Então, para gerenciar as rotas, está lá o bom e velho Vue Router.

E para gerenciar o estado da aplicação, o bom e velho Vuex.

Tomei o cuidado de deixar as camadas bem separadas e definidas. A idéia é ter uma “api” no front pra buscar os dados e fazer a filtragem pra entregar os dados como os componentes precisam consumir. Isso já acontece com os dados falsos, então, na prática, o app poderia consumir dados de qualquer api, não só do Spotify.

De qualquer maneira, já tem lá um Axios instaladinho esperando por isso. Só implementar as chamadas.

– Mas Killdragon, você pode fazer direto com fecth…

Eu gosto do Axios. Me deixe! U.U

E agora?

Bem, o projeto ainda não conecta com uma api de verdade.

Uma coisa meio chata é que a aplicação precisa de uma chave específica e um token para conectar na api. Eu li em vários lugares (inclusive na documentação), que não é bom deixar isso no frontend, já que vai ficar exposto.

Então eu até fiz testes pra ver se as coisas funcionavam com a api de verdade e até que funcionou legal. Mas ficou ruim pra desenvolver em cima disso, por isso fiz tudo na base dos “dados fake”. Na real, é melhor usar dados falsos de qualquer jeito porque isso agiliza a produção mas, enfim…

E eu já tinha intenção de subir o front no Github Pages desde o início.

Optei por não subir o projeto com essas implementações, porque eu ainda não decidi se vou criar um serverzinho pra fazer a conexão com a api e entregar os dados pro front (inclusive com o token que o usuário precisa pra logar), ou se vou tentar fazer isso na base do serverless com algum serviço tipo Amazon, Google ou Heroku ou algo assim.

Em algum momento, num futuro próximo, acho que este projeto vai ficar dividido em duas pastinhas, frontend e backend. Mesmo que eu faça serverless, vou acabar colocando os códigos dos hooks na pasta de backend, e talvez explique o fluxo num doc.

Primeiramente quero focar no frontend e aproveitar o projeto pra estudar algumas coisas que fizeram o projeto ficar “empacado” (como Jest, por exemplo).

Confesso que o design também não tá lá essas coisas e tem algumas coisinhas de UX que podem melhorar bastante. E o nome “Searchify Music” nem é bom, nem muito original kkk.

Mas pelo menos tá no ar a nossa “prova de conceito”.

Espero que possa ajudar alguém a estudar o assunto também e sair desenvolvendo apps legais por aí.

Link do projeto: https://github.com/arturguitelar/vue-spotify-example

Página online: https://arturguitelar.github.io/vue-spotify-example/

É isso.

Fiquem bem. 🙂

Criando uma ToDo List com Javascript, Mobile First, Acessibilidade, Persistência de dados e SASS

Esse aqui é um vídeo tutorial bem legal (em inglês) do canal freeCodeCamp.org:

Nele dá pra desenvolver uma aplicaçãozinha de lista de tarefas com javascript vanilla e umas firulas. É bem fácil de seguir o passo-a-passo e dá pra aprender bastante coisa.

Live Sass Compiler

Uma coisa legal que eu descobri nesse tutorial é o plugin Live Sass Compiler, pra VS Code. Ele é um plugin que fica observando as modificações dos arquivos .scss da aplicação e já compila tudo pra um arquivo .css. É bem prático de usar e o path onde ele salva o .css é configurável.

Nesse projeto, eu configurei assim:

Configuração no settings.json do VS Code

E este é o output na pasta:

Pasta de assets com arquivos js, css e sass

E o arquivo já sai minificado, na pasta indicada e cria o .map junto. Uma mão na roda. 🙂

o style.scss é o arquivo Sass de entrada. É ele que importa os outros para serem minificados no css.

No vídeo, o autor cria uma estrutura de diretório um pouco diferente, mas eu criei assim pra deixar mais organizadinho (e porquê eu sou meio chato com essas coisas haha).

Javascript modular via frontend

Eu sei que já dá pra criar módulos de javascript pra rodar diretamente no browser por um arquivo de entrada já tem um tempo… Mas pra ser sincero eu ainda não tinha feito dessa forma porquê estou quase sempre usando Nodejs com algum framework como VueJS ou ReactJS. E eles meio que já camuflam esse tipo de funcionamento com outras features.

Mas foi bem interessante ver que, pelo menos nos browsers que eu testei, a feature está funcionando muito bem. Basta colocar uma tag no html com o arquivo de entrada e depois sair codando de forma modular em arquivos separados, utilizando imports. Bem semelhante ao que já se faz no backend com NodeJS, Python, Ruby, PHP e etc.

Tem que indicar na tag que é do tipo “module”, pro navegador entender. Não esqueça.

Daí é só importar as classes, da mesma forma do backend.

E a forma de encapsulamento funciona igual. O arquivo que importa só vai conseguir ter acesso ao que é exportado.

Acessibilidade

Essa com certeza foi a parte que eu achei mais legal. Eu quase não fiz acessibilidade “de verdade” nos projetos em que eu trabalhei. Nem mesmo em projetos pagos. E isso é bem triste, devo confessar.

Daí eu não sabia muito bem o diferencial que propriedades como tabindex, aria-label e aria-live trazem no html. Mas no tutorial é apresentada a extensão ChromeVox Classic Extension, um Screen Reader para google chrome, que lê esse tipo de propriedade nos elementos html.

Eu achei isso muito legal mesmo! Acho que foi a primeira vez que ouvi um leitor de tela lendo tags de uma aplicação que eu mesmo codei.

Geralmente quando eu faço código, eu gosto de escrever nomes de variáveis e métodos (e tudo o mais que faz parte da lógica) em inglês, mas o conteúdo em português. E o leitor identificou o locale do meu browser e botou uma voz feminina pra falar o que estava no conteúdo em português.

Então ela sai falando: “Sessão tal.”, “Item tal adicionado.”, “Item removido” e etc.

Não tem como descrever como isso é. Aconselho a fazer o tutorial para entender o que quero dizer.

E é por isso que eu gosto de ficar fazendo esses tutoriais. Por mais que você acha que já aprendeu tudo, sempre tem algo novo pra aprender, mesmo num tutorial básico.

Tutorial mais que aprovado.

Eu não vou criar um repositório com o código que eu fiz baseado no tutorial porque é basicamente a mesma coisa do que está no vídeo, eu só dei uns pequenos toques aqui e ali.

É isso. 🙂

Construindo uma aplicação com Electron em 60 minutos – Traversy Media Tutorial

Hey pessoas!

Resolvi brincar um pouco com Electron e pra aprender o básico segui o tutorial do canal Traversy Media, que eu gosto bastante.

Eis o tutorial (em inglês):

E o meu resultado:

O tutorial é bem passo-a-passo. Pra quem já tem conhecimento em javascript não tem muito segredo.

Como o tutorial tem mais de 1 ano, é preciso um pequeno update:

Agora é preciso passar um parâmetro webPreferences: {nodeIntregation: true} ao criar uma janela, caso contrário as funções do Electron não estarão disponíveis nas páginas html e dá este erro: “Uncaught ReferenceError: require is not defined”.

Então fica assim:

E na função createAddWindow():

Fora isso, tudo suave.

É isso. 🙂

CRUD simples com React consumindo api em NodeJS

Criei um repositório com uma aplicação bem simples, que implementa um CRUD com ReacJS no frontend consumindo uma api em um server Nodejs/Express.

Ainda faltam algumas validações em ambos os lados (frontend e backend) mas o básico estruturado já está lá e deve servir como estudo, principalmente para inciantes que desejam criar suas aplicações mas tem poucas referências sobre como estruturar um projeto, seus diretórios, dependências e etc.

No frontend…

O frontend roda na porta 3000 (padrão do ReactJS) e foi criado utilizando o create-react-app.

Escolhi Materialize para dar uma facilitada na estilização do CSS e Axios para lidar com as requisições.

No Backend…

O backend roda na porta 3333 e já está configurado via Express com Cors (para poder rodar frontend e backend no mesmo localhost sem conflitos).

A api utiliza Sequelize para ORM e SQLite como banco de dados (pelo módulo de Sqlite3 do npm). O arquivo de banco de dados é um sqlite simples e está na pasta “database” dentro do backend do projeto.

Explicações mais técnicas estão no README do projeto.

Referências

Além das documentações oficiais eu também utilizei dois excelentes tutoriais de referência:

Link do repositório: https://github.com/arturguitelar/simple-crud-react-nodejs

Pode ser que ajude alguém. =]

API NodeJS + Express + Mongo – Rockeseat – Com Updates =] – Javascript

Eis aí um tutorial sobre criação de Api Rest que vai pouco além do básico, trazendo um código inteligente e bem estruturado. =]

Alguns Updates

Como se trata de um código desenvolvido há mais de um ano, houveram algumas atualizações de bibliotecas e coisas do gênero. Por ex.: Não é mais necessário importar o Body-Parser para o Express e as libs FS (FileSystem) e Path já estão por padrão no Nodejs atualizado (v12+).

No meu caso, o Mongoose alertou sobre alguns métodos utilizados que estão “deprecated” (depreciados) e serão substituídos por outros em versões futuras.

Como eu queria seguir o tutorial à risca, resolvi por ignorar os warnings desta forma:

A configuração do Handlebars e do Nodemailer também sofreram algumas modificações:

Aqui um adicional pessoal:

Na última aula (a de criação de Projects e Tasks), o usuário dono da task ainda é adicionado “na mão” (o tal do assignedTo).

Isso é interessante porque deixa aberta a possibilidade de adicionar usuários diferentes com tasks diferentes para um mesmo projeto.

Porém, eu resolvi (porquê sim) que só o dono do projeto pode adicionar tasks! Para que isso seja feito de forma automática, basta add o id de usuário na hora de criação de cada task.

E é isso. Espero que estes “updates” possam ajudar em algo. =]