Forem: Robson Junior

Não tenha medo de mudar de rota

Robson Junior — Mon, 26 Jul 2021 17:31:49 +0000

Escolhas... Não importa o quanto nós treinemos durante toda a vida a ter que fazê-las, tomar decisões não parece se tornar uma tarefa mais simples com o tempo. Vamos usar a sua potencial área de atuação como exemplo. Mesmo já sabendo que você gostaria de tentar Ciência da Computação (e mesmo se não for o caso, não desista desta postagem!), esse termo abarca uma infinidade de possibilidades. Como ter certeza de que o que você escolher vai possibilitar sua satisfação por tempo suficiente até você descobrir a próxima grande coisa?

Resposta rápida, ou melhor, a única resposta: é impossível garantir isso.

Não se preocupe: não vou te atacar com mais perguntas difíceis, nem usar termos de coach para mudar o seu #mindset. Também não tenho nenhuma solução para oferecer, infelizmente. No lugar disso tudo, quero compartilhar uma história sobre o lado bom de criar coragem para tomar decisões difíceis, mesmo quando as suas escolhas anteriores não anteviam esse futuro.

Cursos de graduação geralmente culminam em um Trabalho de Conclusão de Curso, certo? Aquela última disciplina que quase ninguém quer, mas vai ter que cursar, sendo geralmente o último obstáculo entre você e o tão sonhado diploma. Nesse caso em específico, o TCC se deu em duas etapas: um Projeto de TCC, consistindo basicamente no esboço e planejamento do trabalho, e o TCC propriamente dito, cada um em um semestre.

O primeiro passo foi, naturalmente, escolher qual professor(a) eu abordaria quanto à orientação, o que felizmente não foi uma decisão muito difícil. Embora eu tenha estudado com vários professores e professoras sensacionais, levei em consideração principalmente com quem eu ainda não tinha (até o momento) tido a chance de trabalhar, quem poderia me ajudar a encontrar mais possibilidades para o TCC e, principalmente, com quem eu realmente me sentia confortável.

Em seguida, surgiu uma dúvida bem mais complicada: qual tema escolher? Eu sabia que queria fazer sobre um tema que realmente me despertasse interesse, mas, mesmo com as opções sendo teoricamente infinitas, nem todas se sustentam como uma temática de TCC. Depois de contatar a minha orientadora para definirmos isso, eu pensava que não fazia ideia do que queria trabalhar. Depois dela dar umas dez (sério mesmo) sugestões de temas super interessantes, eu... Propus o meu próprio. Pensei rapidamente que o que me traria satisfação seria construir algo com algum impacto social, e então dei uma ideia de um sistema que atuaria nesse sentido.

Vieram mais dúvidas: como se daria esse trabalho? Focaríamos o TCC no desenvolvimento desse sistema, ou utilizaríamos os aprendizados obtidos ao longo do curso para viabilizar uma pesquisa? Como encaixar isso no contexto de Computação? Como encontrar os contatos das pessoas que poderiam nos ajudar a ceder as informações necessárias?

Depois de uma série de ameaças à validade do tema e inseguranças quanto ao que poderíamos fazer, conseguimos chegar em uma proposta sólida ao fim de Projeto de TCC. Caramba, já tínhamos bastante coisa: uma introdução que poderia muito bem ser aproveitada, um cronograma otimista, referências a artigos multidisciplinares que poderiam nos guiar…

Mesmo assim, quando começamos TCC, comecei a enxergar mais furos naquilo tudo. Como íamos conseguir contatar todas aquelas pessoas? Como íamos abraçar o mundo com aquele projeto, estando no meio de uma pandemia que cada vez mais minava a minha vontade de interagir com outros virtualmente? Ainda assim, planejamos uma redução de escopo, fizemos mais pesquisas e estava tudo bem, talvez.

Mas não estava. Eu já sabia que, apesar de já ter sido apaixonado por aquele tema, nenhum caminho que eu via naquele momento me levaria a um resultado satisfatório. E isso, a cada reunião, estava me deixando cada vez mais ansioso e incerto. Aquela sensação de saber o que precisa ser feito agora, mas perder todo o ânimo de continuar só por imaginar que no fim das contas não vai haver tempo o suficiente para fazer o melhor possível.

Junto a isso, havia uma impotência ainda maior na insatisfação com aquele tema. Afinal, que direito eu tinha de não querer trabalhá-lo? Eu me agarrei com unhas e dentes a uma ideia que eu mesmo havia sugerido, fiz com que a lapidássemos de diversas formas e tinha uma proposta que, de diversos ângulos, parecia factível. Desistir de algo que você insistiu não é nada fácil. Mas eu não estava nada feliz.

Foi nesse momento que uma ideia antiga, que eu não havia sugerido anteriormente por não ter domínio do tema, voltou à minha mente. Ao comentá-lo com alguns amigos que estavam acompanhando o andamento do meu trabalho, eles perceberam que essa nova proposta realmente me deixava empolgado e me incentivaram a sugeri-la. Com um novo ânimo, criei coragem e conversei com a minha orientadora: "não quero decepcioná-la, mas podemos mudar de tema?"

E mais uma vez, provavelmente por eu ter muito privilégio de estar rodeado de gente incrivelmente acolhedora, eu não fui contrariado. Estávamos lá, com menos de três meses para desenvolver todo o TCC, com uma nova proposta em uma área totalmente diferente, com um propósito totalmente diferente. A diferença era: agora eu sentia que era o tema certo.

Escrevi uma nova proposta, comecei a fazer os experimentos, digitei incansavelmente aquele trabalho e, o melhor de tudo, eu me vi apaixonado mais uma vez por um projeto. Depois de muitas linhas de código, muitas horas ouvindo "Te Amo Lá Fora" da DUDA BEAT, muitas revisões e muito apoio, consegui terminar o trabalho de que mais me orgulho até hoje.

Eu‌ ‌esqueci‌ ‌dessa‌ ‌lição‌ ‌de‌ ‌me‌ ‌tratar‌ ‌com‌ ‌mais‌ ‌amor‌ ‌
Restou‌ ‌um‌ ‌pouco‌ ‌de‌ ‌esperança,‌ ‌dеcidi‌ ‌que‌ ‌é‌ ‌pra‌ ‌lá‌ ‌que‌ ‌eu‌ ‌vou

Espero que essa história ~de superação~ seja um incentivo para você acreditar que não deve ter medo de mudar de rota. É claro: seja racional, considere bem todas as suas opções. Se, no fim das contas, você sente que há algo que poderia te levar por um caminho em que você se sinta uma pessoa mais realizada, não tema.

Como diria Lady Gaga em sua fala icônica, pode haver 100 pessoas em uma sala e 99 não acreditam em você, mas basta que uma acredite. E essa primeira pessoa, por mais clichê que seja dizer isso, precisa ser você. Espero que, como eu tive e tenho, você tenha a chance de estar rodeado por uma comunidade de pessoas que te levam para frente, mas acreditar em si é o primeiro e mais importante passo!

Obrigado pela leitura! Meu nome é Robson e normalmente você pode me encontrar no Twitter, no Instagram ou no LinkedIn.

Bem-vindos e bem-vindas, feras de Computação@UFCG!

Robson Junior — Thu, 12 Mar 2020 16:51:09 +0000

Oi, feras!

Primeiramente, bem-vindos ao curso de Ciência da Computação! Esperamos que todos se sintam acolhidos com esse contato inicial da Semana do Fera. O PET organiza tudo com muito carinho e ficamos felizes em fazer parte de um pouquinho disso. ✨

Tivemos a apresentação de algumas organizações estudantis do nosso curso, incluindo o OpenDevUFCG. Como prometido, vamos repassar algumas informações para quem ainda ficou meio perdido/orientações iniciais para quem não esteve presente ficar por dentro da nossa comunidade.

Quais são os links mais importantes?

O link mágico que centraliza tudo é o nosso portal. Lá tem descrição da nossa visão (basicamente o motivo de nós existirmos), alguns dos nossos projetos e os integrantes do nosso core team. Outros projetos que devem ser de principal interesse para vocês nesse momento inicial:

Tamburetei, o nosso repositório de leites e dicas das disciplinas;
Glossário, o guia para entender e se localizar melhor no curso;
o blog OpenDevUFCG, que você deve estar lendo nesse momento.

O código fonte de todos esses projetos está hospedado no nosso GitHub:

OpenDevUFCG / opendevufcg.org

Portal da OpenDevUFCG

OpenDevUFCG

Este repositório contém o código que faz o portal da OpenDevUFCG.

Objetivo

Objetivo do opendevufcg.org é ser um site de apresentação para qualquer um que queria saber quem é a OpenDevUFCG, contendo informações sobre o que fazemos, nossos valores, e também uma listagem de projetos e maintainers atuais.

A filosofia desse projeto é ser simples sempre!

Como funciona

O site é feito utilizando apenas o essencial, Javascript, HTML e CSS. Caso não conheça essas linguagens e como elas se comunicam, veja aqui.

Você pode encontrar o código na pasta docs/. Caso queira entender melhor do código, veja nosso Contributing

Desenvolvimento

Caso deseje fazer alterações no código, você pode rodar o site na sua máquina, basta apenas que você tenha algum browser. Recomendamos que você faça um Fork do repositório e o Clone para sua máquina:

git clone https://github.com/<seu_usuario>/opendevufcg.org

Substitua <seu_usuario&gt…

View on GitHub

Mas eu ainda não entendi nada de open source e GitHub, o que eu faço?

Falando mais especificamente do blog, ressaltamos a publicação que faz uma introdução do zero a alguns conceitos de open source e GitHub que foi pensada especialmente para quem está chegando agora:

Contribuindo para projetos open source com GitHub

Lucas de Medeiros for OpenDevUFCG ・ Aug 3 '19

#opensource #community #github #ptbr

E é claro, estamos disponíveis para esclarecer eventuais dúvidas. ;)

E o que eu tenho a ganhar contribuindo com open source?

Fanny, integrante do nosso Core Team, conta um pouco de como o open source e o OpenDevUFCG contribuíram para que ela chegasse até uma vaga de estágio no Facebook. Tem que respeitar, viu?

Como entro em contato com o OpenDevUFCG?

O principal meio de comunicação com a comunidade OpenDevUFCG é o nosso Discord. Também é possível ficar por dentro das nossas atividades através das redes sociais: Instagram e Twitter.

No mais, lembrem-se que estamos aqui para ajudá-los. Não fiquem com vergonha de falar conosco caso tenham dúvidas de como começar e como contribuir. Desejamos a todos um ótimo período! <3

Projetos open source que apoiamos no Hacktoberfest 2019

Robson Junior — Sat, 05 Oct 2019 23:46:06 +0000

Já estamos no quinto dia do Hacktoberfest 2019 e amando ver tanta gente engajada com a causa! Pedimos aos alunos de Computação@UFCG que compartilhassem conosco seus projetos open source e agora nós os compartilhamos com todo mundo. Confira alguns dos repositórios criados e mantidos por alunos do nosso curso!

Guardians-DSC / horarios-ufcg

Visualização dos horários das disciplinas do curso de Ciência da Computação da UFCG

Tópicos: Frontend, design
Principais linguagens e tecnologias: JavaScript, HTML, CSS, Vue

Guardians-DSC / horarios-ufcg-api

Api dos horários das disciplinas do curso de Ciência da Computação da UFCG

Tópicos: Backend
Principais linguagens e tecnologias: JavaScript, Node.js, Docker

Guardians-DSC / iarl-vue

Aplicação da Interface de Acesso Remoto aos Laboratórios em VueJS

Tópicos: Frontend, design
Principais linguagens e tecnologias: JavaScript, Vue, Docker

dadosjusbr / api

Site que publica as informações libertadas pelo DadosJusBR

Tópicos: Data science, recuperação da informação, frontend
Principais linguagens e tecnologias: Go, HTML

joseims / doqueru-kun

🐌

Tópicos: Sistemas operacionais
Principais linguagens e tecnologias: Perl, Shell, Python

richecr / CamaraDosDeputados

Aplicativo web da câmara dos deputados usando ReactJS.

Tópicos: Frontend, design
Principais linguagens e tecnologias: JavaScript, HTML, CSS, React

richecr / PyGraph

Biblioteca com intuito de implementar os tipos de grafos e os algoritmos de Teoria dos Grafos.

Tópicos: Backend, educação, biblioteca
Principais linguagens e tecnologias: Python

richecr / PyTwitterSDK

A Python SDK for the API Twitter.

Tópicos: Backend
Principais linguagens e tecnologias: Python

felipemarinho97 / pipeline-previewer

Application that allows you to view and manage multiple deploys on a single static server through a graphical interface.

Tópicos: Frontend, backend, dev tools
Principais linguagens e tecnologias: JavaScript, HTML, CSS, Vue, Node.js

dados-congresso / raspador-discursos-camara

scripts para baixar discursos dos deputados em sessões políticas

Tópicos: Data science, scraping
Principais linguagens e tecnologias: Python

0xHericles / cast-sh

📟 An instance of your terminal in your browser

Tópicos: Frontend, backend
Principais linguagens e tecnologias: Python, HTML, JavaScript, Docker

Benardi / touvlo

🤖 ML algorithms implemented from scratch and provided block by block

Tópicos: Machine learning, data science
Principais linguagens e tecnologias: Python

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

Tópicos: Backend, biblioteca
Principais linguagens e tecnologias: TypeScript, mocha, chai, nock

calluswhatyouwant / musicritic

Your personal music-specific Metacritic.

Tópicos: Frontend, design
Principais linguagens e tecnologias: JavaScript, HTML, CSS, React

calluswhatyouwant / spotify-playlist-editor

Sort your Spotify playlists any way you want.

Tópicos: Frontend, design
Principais linguagens e tecnologias: JavaScript, HTML, CSS, React

Repositórios do OpenDevUFCG

Não vamos esquecer dos nossos próprios repositórios, né? ❤️ Temos várias issues abertas, especialmente no Tamburetei, que é super fácil de contribuir. Corre lá!

OpenDevUFCG / Tamburetei

Fazendo de tamburete as cadeiras de CC@UFCG.

Ainda mais repositórios

Jessica Temporal publicou no blog dela uma lista enorme de projetos brasileiros para contribuir nesse Hacktoberfest. Não deixe de conferir o montão de ideias que são mantidas por pessoas do nosso país!

Article No Longer Available

Mais por vir!

Estamos preparando bastante coisa para esse mês tão lindo para o open source. Continuem nos acompanhando nas redes sociais (Twitter e Instagram)!

// Detect dark theme var iframe = document.getElementById('tweet-1179961889675235329-130'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1179961889675235329&theme=dark" }

Usando o spotify-web-sdk para gerenciar requisições à API Web do Spotify

Robson Junior — Sun, 15 Sep 2019 00:45:18 +0000

Eu e Renan temos uma organização open source chamada Call Us What You Want, na qual desenvolvemos aplicações com foco em música. Um de nossos projetos é um SDK para a API Web do Spotify, que criamos para servir de apoio para outras aplicações que fazem uso desses dados.

Nessa postagem (que é tradução de uma feita originalmente no dev.to da nossa organização), vou mostrar como o spotify-web-sdk pode facilitar a recuperação e a gerência de dados de usuários do Spotify. Farei isso descrevendo o processo de desenvolvimento de uma aplicação inspirada por um problema muito sério que eu enfrentava como usuário dessa plataforma de streaming.

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

Spotify Web SDK

A JavaScript SDK for the Spotify Web API Note that this project is still a BETA version.

Features

"Why should I use this?"

We want to handle the hard work for you. Even to make simple requests, such as to get information on a track, you'd need to make a bunch of setups. Here is how you could do the same thing with our aid:

import * as spotify from 'spotify-web-sdk';
spotify.init({ token: 'YOUR SPOTIFY TOKEN HERE!' }); // You should only need to run this once.
spotify.getTrack('3LOpHuEpjkL4T1Zcjhko8w'); // Or any other track id.

Yes, it's as simple as that!

"I still think it's no hard work at all.

…

View on GitHub

Um problema do mundo real (A little motivation)

A seção de álbuns da minha biblioteca do Spotify é bem desorganizada, mas não exatamente por culpa minha — na implementação do aplicativo, sempre que um single é adicionado às músicas, o mesmo também acaba aparecendo como álbum. Isso acaba sendo um problema na hora de localizar algo para ouvir, já que eu prefiro consumir álbuns do início ao fim no lugar de entrar no modo aleatório das playlists.

Comfort Crowd and People são singles, mas também aparecem na minha biblioteca como álbuns.

Pensei em uma solução simples: criei uma playlist contendo a primeira faixa de cada álbum que eu já ouvi. Ter essa playlist é muito útil para que eu também mantenha o registro do dia em que ouvi os trabalhos inteiros pela primeira vez (pelo menos quando eu lembro de adicioná-los assim que termino de escutá-los). Problema resolvido... ao menos parcialmente. Bem, para manter as coisas ainda mais organizadas, eu ainda queria poder ordenar as referências aos álbuns pelas suas datas de lançamento, algo que o Spotify ainda não dá suporte (mesmo com usuários pedindo por essa feature há mais de cinco anos).

Procurei por ferramentas que pudessem gerenciar esse método de ordenação para mim e descobri uma aplicação web chamada Sort Your Music. Apesar de ser super simples e eficiente de usar, a abordagem de ordenação deles sobrescreve a data de adição das faixas. Sei que por agora você já deve estar revirando os olhos com a minha insatisfação, mas, sabendo que é possível conseguir o resultado que eu desejo, decidi implementar a minha própria ferramenta. Nada como um pequeno "faça você mesmo", certo?

Perdoe-me caso você não enfrente esse problema no seu dia a dia.

Devagar e sempre

A API Web do Spotify disponibiliza dois endpoints para gerência de playlists: um que permite sobrescrever todas as faixas e outro que pode ser usado para mover uma faixa ou um bloco de faixas. Ao contrário do primeiro, este não modifica o timestamp que indica quando as faixas foram adicionadas à playlist e o identificador de quem as adicionou (para playlists colaborativas).

Visualização de como funciona o endpoint "reordenação de faixas de uma playlist".
Fonte: Spotify for Developers

Como visto acima, esse endpoint funciona de forma que ordenar uma playlist requer várias requisições consecutivas (basicamente uma requisição por faixa na playlist), o que também significa que leva muito mais tempo do que simplesmente sobrescrever tudo. Sacrifícios tiveram que ser feitos, mas o resultado é exatamente o esperado: aqui está o Spotify Playlist Editor!

Quando você tiver feito login, algo assim deve aparecer na tela inicial da aplicação.

Detalhando o processo (mas não demais)

Eu queria prototipar uma aplicação React o mais rápido possível, então usei o create-react-app, que me poupou muito tempo de configurações iniciais. Em geral, encorajo que você tente entender como criar uma aplicação React do zero, mas isso é com certeza é uma mão na roda quando se tem pressa. Para manter tudo simples, o Spotify Playlist Editor é serverless, mas permite que todos acessem seus dados do Spotify através de uma implementação do fluxo de concessão implícita, uma abordagem simples para conseguir token de acesso à API.

Incluí alguns pacotes e ferramentas para simplificar o processo de codificação (por exemplo, Bootstrap para que eu me preocupasse menos com estilos e prettier para ajudar a manter o código padronizadinho). Também considero interessante mencionar que uso Flow para checagem estática de tipos. Eu amo que JavaScript tem tipagem dinâmica, mas como o SDK lida com muitos modelos que têm, por sua vez, muitos atributos, Flow se torna um ótimo aliado.

Você pode até odiar o Flow, mas o fato é que React + Flow + IntelliSense é um verdadeiro dream team.

Conheça o melhor amigo autoproclamado da API Web do Spotify, o spotify-web-sdk!

Aqui está um trecho de código tirado do componente UserPage. Você pode ver que alguns imports são feitos diretamente ao SDK:

/* @flow */

import React, { Component } from 'react';
import {
    /* Funções que encapsulam endpoints da API do Spotify */
    init,
    getCurrentUserPlaylists,
    getCurrentUserProfile,
    /* Modelos */
    Page,
    PlaylistSimplified,
    PrivateUser,
} from 'spotify-web-sdk';

type Props = {
    history: any,
};

type State = {
    page: Page<PlaylistSimplified>,
    playlists: PlaylistSimplified[],
    user: PrivateUser,
};

class UserPage extends Component<Props, State> {
    // ...
}

Uma vez que o usuário esteja conectado ao Spotify, UserPage é a página principal da aplicação. Seu principal propósito é exibir uma lista de playlists do usuário, com um botão que permite selecionar uma playlist de interesse. Inicialmente, cinco playlists são recuperadas:

componentDidMount = async () => {
    const page = await getCurrentUserPlaylists({ limit: 5 });
    this.setState({
        page,
        playlists: page.items,
    });
}

Ao manter o objeto page no state do componente, requisitar mais playlists é tão simples quanto poderia ser. Isso é graças à lógica de recuperar os próximos dados já estar implementada lá na declaração da classe Page no spotify-web-sdk:

class Page<T> {
    // ...
    async getNextPage() {
        if (!this.hasNext()) throw new Error('There are no more pages');
        const params = {
            ...this.queryParams,
            limit: this.limit,
            offset: this.offset + this.limit,
        };
        const response = await this.getAxiosPageInstance().get('/', { params });
            return new Page<T>(response.data, this.t, this.wrapper);
    }
}

Dessa forma, lidar com toda essa lógica no editor de playlists se resume a uma simples chamada de função, dispensando a necessidade de manter-se a par de valores como limite e offset:

loadMorePlaylists = async () => {
    const { page } = this.state;
    const nextPage = await page.getNextPage(); 
    // Relaxa e deixa o spotify-web-sdk lidar com o trabalho duro!
    this.setState(prevState => {
        const playlists = prevState.playlists.concat(nextPage.items);
        return { playlists, page: nextPage };
    });
};

O propósito principal da aplicação é permitir que os usuários ordenem suas playlists, então vamos focar nisso agora. Do componente PlaylistPage, o usuário pode selecionar um método de ordenação (incluindo por data de lançamento!). Por baixo, minha implementação determina primeiro a ordem final esperada das faixas e então faz uso de chamadas sequenciais para reordená-las. É assim que funciona mais ou menos em código:

import { reorderPlaylistTracks } from 'spotify-web-sdk';

export const sortPlaylistTracksByAttribute = async (
    playlistId: string,
    attribute: string
) => {
    let insertionOrder = await getInsertionOrder(playlistId, attribute);
    return insertionOrder.reduce(async (previousPromise, current) => {
        await previousPromise;
        return moveTrackToTop(playlistId, current);
    }, Promise.resolve());
};

const getInsertionOrder = async (
    playlistId: string,
    attribute: string
) => { /* Determina a ordem de inserção baseada no atributo escolhido. */ };

const moveTrackToTop = (id: string, oldIndex: number) =>
    reorderPlaylistTracks(id, oldIndex, { rangeLength: 1, insertBefore: 0 });

A propósito, se você não está familizarizado com essa abordagem de resolver Promises sequencialmente usando Array.prototype.reduce(), tem um excelente artigo explicando como e, mais importantemente, a razão disso funcionar. Dá uma olhada lá no CSS Tricks!

Como mostrado acima, o objetivo principal do spotify-web-sdk é poupar tempo dos desenvolvedores que desejam fazer acesso à API Web do Spotify. No lugar de fazer chamadas diretas à API e se preocupar com detalhes, a maior parte do seu trabalho deve ser importar uma função e invocá-la no código.

Caso você tenha interesse em construir sua própria aplicação usando dados do Spotify, a versão atual do spotify-web-sdk está hospedada no NPM e pode ser adicionada rapidamente em um projeto com package.json rodando npm add spotify-web-sdk.

O Spotify Playlist Editor também está no ar aqui se você quiser brincar um pouco. Caso você experiencie qualquer coisa inesperada ao usar a aplicação, é apenas um treino para estimular o espírito open source: crie uma issue no repositório do GitHub! PRs também são sempre bem-vindas (tem umas issues abertas e o Hacktoberfest está logo aí...).

calluswhatyouwant / spotify-playlist-editor

Sort your Spotify playlists any way you want.

Spotify Playlist Editor

Sort your Spotify playlists anyway you want! 🛠

Features

Create new playlists out of your recent Spotify tracks or your all-time top tracks;
Sort playlists based on:
- playlist track attributes (addition date);
- track attributes (name, length, popularity);
- album attributes (name, release date);
- artist attributes (name).

Current limitations

It's highly recommended to create a copy of the playlists you want to edit or to use one of the playlist creation options. (play around, but do it safely!);
You can only sort playlists with 100 tracks or less;
Sorting might take a while (a playlist with 100 tracks can take between 30 seconds and 1 minute). Do NOT reload or close the playlist page until sorting is over.

Community

Installation and Usage

Simply run yarn install to install the project's dependencies…

View on GitHub

Se quiser ficar por dentro das novidades dos projetos do Call Us What You Want, acompanhe o nosso perfil no Twitter!

Muito obrigado pela leitura! Fique atento: em breve, teremos novos artigos de contribuidores do OpenDevUFCG aqui no dev.to. Acompanhe o OpenDevUFCG no Twitter, no Instagram e, claro, no GitHub.

Using spotify-web-sdk to handle requests to the Spotify Web API

Robson Junior — Mon, 29 Apr 2019 18:00:15 +0000

This is the first post of the Meet spotify-web-sdk! series, in which we (Call Us What You Want) will comment about the possibilities offered by the Spotify Web API and some of our code design choices. In this first part, we'll see how spotify-web-sdk can help build an application that uses Spotify Web API to retrieve information and manage a user's data.

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

Spotify Web SDK

A JavaScript SDK for the Spotify Web API Note that this project is still a BETA version.

Features

"Why should I use this?"

import * as spotify from 'spotify-web-sdk';
spotify.init({ token: 'YOUR SPOTIFY TOKEN HERE!' }); // You should only need to run this once.
spotify.getTrack('3LOpHuEpjkL4T1Zcjhko8w'); // Or any other track id.

Yes, it's as simple as that!

"I still think it's no hard work at all.

…

View on GitHub

The real-world problem (Another day, another drama)

The Album section of my Spotify library is very cluttered — the thing is, if I save a new single, it ends up being saved as an album as well. Maintaining a simple way to access each album is important to me because most of the time I'd rather listen to a whole EP/LP from start to finish instead of hitting the shuffle button in a playlist.

ME! and The Other Side are both singles but also show up in my Spotify library as albums.

I came up with a seemingly simple solution: I created a playlist containing the first track of each album I've listened to. Having this playlist is also a great way to keep track of the day I first listened to new releases (at least when I remember to add them right away). Problem solved... at least partially. Well, to keep things tidier, I still wanted to sort my album references by their release date. The problem is that Spotify doesn't support this sorting method, even though users have been requesting it for over five years. Guess we can't have it all.

I searched for tools that managed this sorting for me and there's a great web app named Sort Your Music. Even though it's pretty simple and efficient to use, their sorting approach overwrites the addition dates of tracks. I know I'm being quite a handful (uh), but knowing it's possible, I decided to implement my own tool. Nothing like a little DIY, right?

I'm alright with a slow burn

Managing playlists with the Spotify Web API can be done using two endpoints: one that allows replacing all tracks and another one that can be used to reorder a track or a block of tracks. Unlike the first one, the latter doesn't touch the timestamp that indicates when the tracks were added and the identifier of who added them (for collaborative playlists).

Visualization of how the "reorder a playlist's tracks" endpoint works. Source: Spotify for Developers

As seen above, the endpoint works in such a way that sorting a playlist requires a lot of consecutive requests (basically, one request per track in the playlist), which also means it can take much longer than simply overwriting everything. Sacrifices had to be done, but the result is exactly what expected: here's Spotify Playlist Editor!

Once logged in, something like that should appear to you.

Detailing the process (but not too much)

I wanted to prototype a React application as fast as I could, so I used create-react-app, saving me a lot of time of configuration. In general, I suggest everyone to take their time to understand how to create a React app from scratch, but this sure comes in handy! To keep things simple, Spotify Playlist Editor is serverless but still lets anyone access their Spotify data by implementing the Implicit Grant Flow.

I included some packages and toolkits to simplify the coding process (for instance, Bootstrap so that I could worry less about styles and prettier to help keep the code neat). I think it's worth mentioning I'm using Flow for static type checking. I like that JavaScript is a dynamically typed language, but since the SDK deals with a lot of models which have each many attributes, Flow becomes a great ally.

Also, React + Flow + IntelliSense is a dream combo.

Meet Spotify Web API's self-proclaimed best friend, spotify-web-sdk!

Here's a snippet of code taken from the UserPage component. You can see some imports made directly to the SDK:

/* @flow */

import React, { Component } from 'react';
import {
    /* Functions that wrap Spotify endpoints */
    init,
    getCurrentUserPlaylists,
    getCurrentUserProfile,
    /* Models */
    Page,
    PlaylistSimplified,
    PrivateUser,
} from 'spotify-web-sdk';

type Props = {
    history: any,
};

type State = {
    page: Page<PlaylistSimplified>,
    playlists: PlaylistSimplified[],
    user: PrivateUser,
};

class UserPage extends Component<Props, State> {
    // ...
}

Once the user has connected to Spotify, UserPage is the main page of the application. Its main purpose is to display a list of the current user's playlists, with a button to allow them to select a playlist of interest. Initially, five playlists are retrieved:

componentDidMount = async () => {
    const page = await getCurrentUserPlaylists({ limit: 5 });
    this.setState({
        page,
        playlists: page.items,
    });
}

By keeping the page object in the state, requesting more playlists is as simple as it gets. This is because the following logic is already implemented on spotify-web-sdk's Page object:

class Page<T> {
    // ...
    async getNextPage() {
        if (!this.hasNext()) throw new Error('There are no more pages');
        const params = {
            ...this.queryParams,
            limit: this.limit,
            offset: this.offset + this.limit,
        };
        const response = await this.getAxiosPageInstance().get('/', { params });
            return new Page<T>(response.data, this.t, this.wrapper);
    }
}

Therefore, dealing with all this logic in the playlist editor is summed up to a single function call, dismissing the need of keeping track of values such as limit and offset:

loadMorePlaylists = async () => {
    const { page } = this.state;
    const nextPage = await page.getNextPage(); // Sit back and let spotify-web-sdk handle the hard work!
    this.setState(prevState => {
        const playlists = prevState.playlists.concat(nextPage.items);
        return { playlists, page: nextPage };
    });
};

The whole point of the application is to let users sort their playlists, so let's get to it. From the PlaylistPage, the user can select a sorting method (release date included!). Initially, the expected order of the tracks is defined and then sequential operations are done to reorder them. This is more or less how it works in code:

import { reorderPlaylistTracks } from 'spotify-web-sdk';

export const sortPlaylistTracksByAttribute = async (
    playlistId: string,
    attribute: string
) => {
    let insertionOrder = await getInsertionOrder(playlistId, attribute);
    return insertionOrder.reduce(async (previousPromise, current) => {
        await previousPromise;
        return moveTrackToTop(playlistId, current);
    }, Promise.resolve());
};

const getInsertionOrder = async (
    playlistId: string,
    attribute: string
) => { /* Determines the insertion order based on the attribute. */ };

const moveTrackToTop = (id: string, oldIndex: number) =>
    reorderPlaylistTracks(id, oldIndex, { rangeLength: 1, insertBefore: 0 });

BTW, if you're not familiar with this approach of resolving Promises sequentially using Array.prototype.reduce(), there's a great article about how it works and, most importantly, why it works. Check it out on CSS Tricks!

If you'd like to see more details, I think that the commit log can be a good guide on what was added and when, since I try to make descriptive and succinct commit messages. Spotify Playlist Editor is also live right here if you want to play around a bit. If you come across anything unexpected, please, create an issue in the project's GitHub repository. PRs are also welcome and we do have a few issues already open, so suit yourself!

calluswhatyouwant / spotify-playlist-editor

Sort your Spotify playlists any way you want.

Spotify Playlist Editor

Sort your Spotify playlists anyway you want! 🛠

Features

Create new playlists out of your recent Spotify tracks or your all-time top tracks;
Sort playlists based on:
- playlist track attributes (addition date);
- track attributes (name, length, popularity);
- album attributes (name, release date);
- artist attributes (name).

Current limitations

It's highly recommended to create a copy of the playlists you want to edit or to use one of the playlist creation options. (play around, but do it safely!);
You can only sort playlists with 100 tracks or less;
Sorting might take a while (a playlist with 100 tracks can take between 30 seconds and 1 minute). Do NOT reload or close the playlist page until sorting is over.

Community

Installation and Usage

Simply run yarn install to install the project's dependencies…

View on GitHub

This is it for the part one of the Meet spotify-web-sdk! series. What do you think? Let us know in the comments! If you're interested in knowing what we're up to, you can find us on Twitter.

Thank you so much for reading and see you next time! 😉

Call Us What You Want is officially on board!

Robson Junior — Fri, 19 Apr 2019 23:27:51 +0000

Hello, World!

We contemplated creating our own website from zero or using a platform such as Medium. In the end, we've decided that dev.to is the perfect environment for our posts — just like Call Us What You Want, it's 100% open source!

Right now, you might be asking yourself: what is Call Us What You Want? Put it simply, we're (at least two) friends that love music and programming. We originally created this organization with our first project idea: an open source platform where people can rate the music they listen to.

// Detect dark theme var iframe = document.getElementById('tweet-1107781263820275712-67'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1107781263820275712&theme=dark" }

We have been working on this project (which we named Musicritic) and spotify-web-sdk for over a year now and while there's still a lot of work to be done, we've sure come a long way! We'd be honored if you took your time to check out our projects and maybe contribute with them yourself.

// Detect dark theme var iframe = document.getElementById('tweet-1103478430555951104-594'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1103478430555951104&theme=dark" }

Here in dev.to we intend to discuss our experiences and share what we've been learning along the road. Code design decisions, how to contribute with our repositories, our recommended best practices... We're here to continue improving ourselves and (who knows?) inspire people to contribute with open source as well.

That's just about everything. Hope to see you all soon with posts that actually have some interesting content!

Oh, I've just come across a pizza recipe posted here... I guess we'll feel free to post about some other things from time to time. 😅

Until next time!

Forem: Robson Junior

Não tenha medo de mudar de rota

Bem-vindos e bem-vindas, feras de Computação@UFCG!

Oi, feras!

Quais são os links mais importantes?

OpenDevUFCG / opendevufcg.org

Portal da OpenDevUFCG

OpenDevUFCG

Objetivo

Como funciona

Desenvolvimento

Mas eu ainda não entendi nada de open source e GitHub, o que eu faço?

Contribuindo para projetos open source com GitHub

Lucas de Medeiros for OpenDevUFCG ・ Aug 3 '19

E o que eu tenho a ganhar contribuindo com open source?

Como entro em contato com o OpenDevUFCG?

Projetos open source que apoiamos no Hacktoberfest 2019

Guardians-DSC / horarios-ufcg

Visualização dos horários das disciplinas do curso de Ciência da Computação da UFCG

Guardians-DSC / horarios-ufcg-api

Api dos horários das disciplinas do curso de Ciência da Computação da UFCG

Guardians-DSC / iarl-vue

Aplicação da Interface de Acesso Remoto aos Laboratórios em VueJS

dadosjusbr / api

Site que publica as informações libertadas pelo DadosJusBR

joseims / doqueru-kun

🐌

richecr / CamaraDosDeputados

Aplicativo web da câmara dos deputados usando ReactJS.

richecr / PyGraph

Biblioteca com intuito de implementar os tipos de grafos e os algoritmos de Teoria dos Grafos.

richecr / PyTwitterSDK

A Python SDK for the API Twitter.

felipemarinho97 / pipeline-previewer

Application that allows you to view and manage multiple deploys on a single static server through a graphical interface.

dados-congresso / raspador-discursos-camara

scripts para baixar discursos dos deputados em sessões políticas

0xHericles / cast-sh

📟 An instance of your terminal in your browser

Benardi / touvlo

🤖 ML algorithms implemented from scratch and provided block by block

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

calluswhatyouwant / musicritic

Your personal music-specific Metacritic.

calluswhatyouwant / spotify-playlist-editor

Sort your Spotify playlists any way you want.

Repositórios do OpenDevUFCG

OpenDevUFCG / Tamburetei

Fazendo de tamburete as cadeiras de CC@UFCG.

Ainda mais repositórios

Article No Longer Available

Mais por vir!

Usando o spotify-web-sdk para gerenciar requisições à API Web do Spotify

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

Spotify Web SDK

Table of Contents

Features

"Why should I use this?"

"I still think it's no hard work at all.

Um problema do mundo real (A little motivation)

Devagar e sempre

Detalhando o processo (mas não demais)

Conheça o melhor amigo autoproclamado da API Web do Spotify, o spotify-web-sdk!

calluswhatyouwant / spotify-playlist-editor

Sort your Spotify playlists any way you want.

Spotify Playlist Editor

Table of Contents

Features

Current limitations

Community

Installation and Usage

Using spotify-web-sdk to handle requests to the Spotify Web API

calluswhatyouwant / spotify-web-sdk

A JS SDK for the Spotify Web API.

Spotify Web SDK

Table of Contents

Features

"Why should I use this?"