Forem: OpenDevUFCG

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.

Script para abrir webcam com Python utilizando OpenCV

Maria Eduarda de Azevedo Silva — Mon, 19 Jul 2021 17:07:49 +0000

Já pensou em desenvolver algum projetinho que precisa de uma captura de imagem em tempo real, mas não sabe por onde começar? Nesse post vamos trazer uma solução simples de como fazer um script utilizando Python3 e OpenCV para abrir a sua webcam!

Um pouco sobre a biblioteca OpenCV

A OpenCV é uma biblioteca de código aberto desenvolvida pela Intel nos anos 2000, inicialmente nas linguagens C e C++, com o objetivo de melhorar o aparato disponível para o desenvolvimento de aplicações, assim como nos estudos e pesquisas na área de Visão Computacional. Hoje em dia ela ainda é referência e se tornou multiplataforma e multilinguagem, isto é, podemos utilizá-la em aplicações nos mais diversos sistemas operacionais e linguagens de programação.

OpenCV + Python == "PERFEIÇÃO"

O OpenCV não foi apenas desenvolvido para melhorar a experiência em questão de otimização das técnicas e dos algoritmos de processamento de imagem, mas também para fácil utilização da biblioteca pelos interessados.
Quando unimos isso ao Python temos um ambiente perfeito para explorar a criatividade utilizando imagens: biblioteca simples e linguagem de sintaxe simples!
Quer provas? Continua lendo este post!

Instalando o OpenCV na sua máquina

Para iniciar, precisaremos instalar o OpenCV na nossa máquina. Para isso, você pode instalar o pacote via pip com o comando abaixo:



pip install opencv-python



pip3 install opencv-python

Lembrando que é sempre bom considerar a criação de um ambiente virtual para seus projetos! Assim, caso você queira compartilhar e receber contribuições, irá ajudar bastante na configuração local do projeto na máquina do contribuidor, além de evitar que alguns erros se tornem incapazes de serem resolvidos. Caso não saiba como fazê-lo, consulte este link da documentação do Python para saber mais.

Mão na massa!

Com o OpenCV instalado na máquina podemos partir para o código! Crie um arquivo .py, abra o editor de sua preferência e vamos começar!

Antes de tudo, vamos importar a nossa biblioteca:



import cv2 as cv

Com o pacote devidamente importado, poderemos partir para a captura da imagem pela webcam do seu computador!

Abrindo a webcam com código!

Abrir a webcam com um script Python é mais fácil do que você imagina! Vamos utilizar OpenCV para capturar imagens em tempo real.

Passo 1:

O primeiro passo é instanciar um objeto VideoCapture. Essa classe do OpenCV é responsável por realizar a captura de frames em um vídeo, o qual passamos o caminho como parâmetro na criação do objeto. No caso da leitura da webcam, precisamos passar o seu ID de referência (se você usa um laptop, o ID da sua câmera primária é 0):



camera = cv.VideoCapture(0)

Passo 2:

Para iniciar o segundo passo, é importante que você entenda o que é um vídeo. De uma forma bem genérica, um vídeo é uma sucessão de imagens que imprimem uma sensação de movimento. A cada uma dessas imagens damos o nome de quadros (ou frames).

Fazendo o paralelo disso com lógica de programação, qual a estrututa que utilizamos para fazer uma repetição sucessiva de alguma coisa?

Se você respondeu laço, está mais que correto! Mas, qual laço escolher, for ou while?

Vamos pensar: estamos fazendo uma captura de vídeo em tempo real com a nossa webcam, então não sabemos quando a captura irá parar, desse modo enquanto estiver rodando nosso script eu capturo um frame novo. Matamos a charada e vamos de loop while!

Passando essa ideia para Python, temos algo do tipo:



rodando = True

while rodando:
    # Captura um frame
    pass

Passo 3:

Agora podemos partir para todo o código dentro do loop!

Para fazer a captura do frame da vez, usaremos o método read() no nosso objeto VideoCapture. Esse método retorna uma tupla com dois valores: um booleano referente ao status de captura e o próprio frame no formato de um array NumPy.

O valor do status é muito útil para quando estamos lendo um vídeo passado por um caminho, visto que, quando chegamos no último frame do mesmo, o próximo não poderá ser capturado, o retorno desse valor será False e poderemos parar a execução do loop sem o lançamento de uma exceção. Além disso, pode haver algum problema na captura da webcam e isso ser indicado por esse retorno, por isso, vamos utilizá-lo.

Já o frame é essencial, já que é o que mais nos interessa! A imagem retornada será o alvo dos processamentos feitos durante a iteração do loop e também será jogada na saída.

Faremos isso da seguinte forma, dissociando os valores retornados em duas variáveis:



#...
while rodando:
    status, frame = camera.read()

Passo 4:

Chegou o momento de falarmos das condições de parada.

Queremos parar a captura em dois casos:

Em casos de erro
Caso eu apenas queira parar de executar o script

Vamos unir essas duas condições de parada em apenas uma condição:



#...
    if not status or cv.waitKey(1) & 0xff == ord('q'):
        rodando = False

Parece estranho, mas não é difícil de entender. O que estamos querendo dizer é basicamente "se deu algo errado na captura da imagem ou o usuário apertou a tecla 'q', então pare o script!".

A função cv.waitKey(1) espera que um evento de tecla acionada aconteça e, caso ocorra, ela retorna o valor da tecla pressionada segundo o padrão UTF-8. Para comparar se a tecla pressionada foi a 'q', combinamos o retorno dessa função com a constante hexadecimal 0xff e utilizamos a função padrão de python ord('q'), que retorna o valor de uma string passada como parâmetro em UTF-8.

Caso ao menos uma dessas condições seja satisfeita, a nossa variável rodando passa a receber False e na próxima iteração há a parada do loop.

Passo 5:

Nesse estágio já temos o objeto que captura nossa imagem da webcam, a imagem capturada devidamente lida e também uma condição de parada do nosso loop. Só nos resta uma coisa: jogar essa imagem na saída!

Para isso utilizaremos a função cv.imshow() do OpenCV. Essa função cria recebe dois parâmetros: uma string referente ao nome da janela e o array que se refere a imagem que queremos mostrar. Temos tudo que precisamos!

Para finalmente enxergarmos a captura em tempo real, escrevemos a seguinte linha dentro do loop:



#...
    cv.imshow("Camera", frame)

Finalmente, o script!

Tudo isso resulta em um script de apenas 8 linhas!



import cv2 as cv 

camera = cv.VideoCapture(0)
rodando = True

while rodando:

    status, frame = camera.read()

    if not status or cv.waitKey(1) & 0xff == ord('q'):
        rodando = False

    cv.imshow("Camera", frame)

Com isso temos tudo que você precisa para capturar imagens em tempo real utilizando um script simples em Python junto com OpenCV!

E o que fazer com esse script?

Existem várias possibilidades de aproveitar essa base, que vão desde detectores até registros de imagens para alguma aplicação ou sistema feito em Python.

Muito obrigada por ter lido até o fim! Se esse post te inspirou a criar alguma coisa, não se esquece de postar nas tuas redes e me marcar, que eu quero ver ~e quem sabe eu volte aqui com mais coisas legais para fazer com OpenCV~!

Minhas redes:
LinkedIn: Maria Eduarda de Azevedo Silva
Twitter: @ddt_azevedo
GitHub: MariaEduardaDeAzevedo

Não corra. Pode doer.

Júlio Guedes — Mon, 12 Jul 2021 17:02:58 +0000

Nós temos um grande potencial dentro de cada um de nós, e muitas vezes escolhemos o curso superior tentando atingir o máximo que somos capazes, e também provar que somos. Experimentamos novas áreas, aprendemos coisas novas, nos dispomos como voluntários, pesquisamos, desenvolvemos e analisamos coisas.

É engraçado perceber que tudo isso acontece naquele minúsculo espaço, entre nós e o computador. Nós lemos, tentamos, assistimos aulas, perguntamos e, acima de tudo, nos esforçamos. Até conseguirmos. Quantas vezes não repetimos esse ciclo num único dia?

Durante a jornada da graduação, enfrentamos problemas, e começamos a buscar liberdades e alívios. Problemas financeiros, com a família, com amigos, de saúde, entre tantos outros. Alguns veem no estudo e no trabalho uma fuga, já que essa realidade não é confrontada no ambiente profissional ou universitário. Urge a necessidade de se formar, como primeiro passo pra libertação.

Mas para se formar bem, é preciso experiência, afinal, que empresa legal e que pode pagar um salário bacana iria contratar um recém-formado com currículo em branco? Ainda nos primeiros períodos do curso, surge a necessidade de preencher o currículo com monitorias, pesquisas, projetos e estágios. Mesmo que, a princípio, sejam voluntários. Tudo isso sem baixar as notas.

A cada dia que passa, enxergamos o quanto é difícil. Aos poucos se vai abdicando pequenas coisas: assistir um filme com a família, fazer as refeições no mesmo horário, encontrar com os amigos, conversar com eles sobre coisas além da universidade. Seus hobbies se transformam em estudos, já que você ainda não conseguiu o tão sonhado estágio que vai garantir algumas portas abertas depois. A cada mês ou semestre, novas coisas começam a deixadas de lado: dormir bem, praticar exercícios ou esportes, a relação com seus amigos, e até um relacionamento.

É claro que nessa jornada você conseguiu muita coisa, afinal, nenhum esforço grande assim passa despercebido pelo mundo, principalmente quando você quer ser notado. Você consegue oportunidades em estágios, projetos ou pesquisas, e é exemplar em cada um deles. Então, começa a se questionar porquê não é notado por aqueles que você queria. E aposta mais coisas nessa busca.

Não é mais um problema trabalhar e estudar à noite, nos finais de semana e feriados. É o que precisa ser feito. A carga é grande demais pra não fazê-lo. E, diminuindo a carga, você sabe que não chegará onde quer.

Cada vez é um fator a mais, um estresse a mais, que surge de uma oportunidade boa demais pra negar. E aceitamos a vida assim. Por um ou dois anos, vai valer a pena esse sacrifício. É um investimento no futuro.

As decepções começam a aparecer, suas expectativas de ser notado continuam não se cumprindo a cada dia, e essa carga de trabalho tão pesada se transforma no seu dia. Você acorda e dorme para cumprir o que acha que os outros esperam de você, adiando a esperança de que vai dar certo. Cada vez mais você acumula rejeições nos estágios dos sonhos. Não desiste de lutar. E meses se passam.

Até que você quebra.

Você está cansado. Olha para o lado e seus amigos, que antes se divertiam tanto juntos, não estão diariamente ao seu lado. Não estão ao seu lado há algum tempo, e você sequer tinha notado. Você não está satisfeito com seu corpo, sua aparência. Pensa em fazer outra coisa pra desestressar, mas o que fazer? Você deixou seus hobbies pra trás há muito tempo.

Estar no computador começa a causar dor, e aos poucos você começa a abdicar de algumas das obrigações. Mesmo sem ter alcançado nada do que imaginava ser possível. Sair de um projeto, não se inscrever em mais uma monitoria. Surge o medo de se formar e estar desempregado, seu pior pesadelo.

Mas existe a possibilidade de continuar na universidade, numa pós graduação, e extender esse tempo de se decidir. Com suas notas e seus esforços, deve ser possível. Mas foi pra isso que você lutou tanto? Pra continuar no mesmo lugar que você está? Sabendo que uma vez ouviu que "a pós-graduação é onde ficam aqueles que não conseguem um emprego"?

Você sabe que isso não é verdade. Mas você correu demais. Esqueceu de aproveitar a graduação. Viver o dia a dia de um projeto, de uma monitoria. Divertir-se com seus amigos, ao invés de tentar agarrar o mundo com seus braços. Esqueceu de cursar uma disciplina e conversar com o professor após a aula, sobre como aquele conteúdo se aplica num problema, mesmo que você não fosse fazê-lo. Sua curiosidade e seu interesse sumiram, pois não havia mais tempo para novas coisas.

Aos poucos, você foi murchando. E, só agora, percebeu que estava murcho.

Não é possível voltar no tempo e reparar tudo, você sabe muito bem. Mas sempre é possível reconsiderar o que está fazendo agora, ponderar melhor e entender suas prioridades. Saúde, tempo, amigos, rir, sorrir, brincar. Assistir um filme ruim só pra dizer que é ruim mesmo, e então rir com seus amigos por vocês terem escolhido passar por isso. Se reaproximar daqueles que importam, das coisas que te faziam sorrir.

A relação com o seu trabalho e seus estudos precisa ser saudável pra dar certo, afinal, você escolheu tudo isso por gostar. Mas sua vida não se resume a um emprego, um título, um trabalho. Escolher esse caminho pode te isolar. Pode doer.

Pare, pense, reflita.
Sempre.
Para só então saber como continuar.

Descomplicando a protoboard

Ricardo Adley da Silva Sena — Mon, 05 Jul 2021 16:57:56 +0000

Um bom cientista da computação não vive só de código, então que tal dominar o mundo dos componentes eletrônicos também? Nessa postagem eu vou te ajudar a entender como funciona a protoboard e como montar o seu primeiro circuito ~~simples~~.

Afinal o que é uma protoboard?

A protoboard nada mais é do que uma placa de ensaio, cheia de furos para conexões elétricas e de componentes, onde é possível testar os seus protótipos ou projetos em estado inicial.

O básico do básico

Vamos entender agora como funciona cada pedacinho da protoboard, essa linda que vocês podem ver na imagem abaixo.

Na imagem podemos ver duas seções em destaque: alimentação e área para conexão dos ~~todo o resto~~ componentes. Essas seções funcionam da seguinte forma:

Alimentação: Dividida entre positivo e negativo, ao conectar o fio em um dos pontos toda a linha horizontalmente vai possuir a mesma carga. Você pode notar o símbolo de - ou + e a pintura referente a linha que será ativada.
Área para conexão dos componentes: Aqui você está mais livre nas conexões ~~mas nem tanto~~, ao conectar o fio em um dos pontos toda a linha verticalmente vai funcionar como a mesma conexão então tenha cuidado para não conectar componentes no mesmo lugar afinal ninguém quer ~~queimar~~ ter problemas com nada.

Nos exemplos deste artigo estou utilizando a protoboard pequena, mas não se preocupe, ela funciona da mesma forma em todos os tamanhos.

Acendendo um LED!

Chega de pipipipopopo e vamos direto a prática pois nada melhor do que aprender fazendo!

Um dos melhores lugares para montar seus circuitos de testes usando uma protoboard é sem dúvidas o Tinkercad (é grátis), com ele você pode praticar sem medo de ~~queimar componentes~~ erros. Para facilitar a sua vida, abaixo você pode encontrar um exemplo de como seu circuito deve ficar, lembre-se de quando usar um LED também usar um resistor para o bixinho não explodir.

Se você olhou para esse circuito e não entendeu nada, tenha calma, abaixo eu ~~tento~~ explico o que está acontecendo.

Como você pode ver na imagem, cada linha (que possui conexão) da protoboard assume um valor! Como expliquei na seção o básico do básico. Com isso, é possível montar o "caminho" da corrente até o LED e montar o circuito com sucesso!

Com essa pequena introdução espero que você já consiga começar a se aventurar com a protoboard, pratique o circuito mostrado aqui, e outros também, usando o Tinkercad.

Obrigado por ter lido até aqui! Não se esqueça de dar uma olhada nos outros artigos de contribuidores da OpenDevUFCG no dev.to. Espero te ver mais vezes!

Você pode me encontrar falando ~~ou reclamando~~ de outros assuntos nas minhas redes:
Twitter, Linkedin e GitHub

Um olhar sobre a Computação

Íris Almeida — Mon, 28 Jun 2021 17:00:06 +0000

Olá, assim como você, estou iniciando na área de tecnologia.

Antecipo que tenho mais perguntas do que respostas, e, na minha perspectiva, essa é exatamente a beleza da nossa área. Estamos em formação para nos tornarmos Cientistas da Computação, certo?

Creio que a primeira coisa que associamos ao pensar em Computação é um computador. Todavia, nossa área não se resume a uma máquina.

”Ciência da Computação tem tanto a ver com o computador como a Astronomia com o telescópio, a Biologia com o microscópio, ou a Química com os tubos de ensaio. A Ciência não estuda ferramentas, mas o que fazemos e o que descobrimos com elas.”
– Edsger Dijkstra

Na realidade, o Computador é apenas um instrumento para o estudo de processos de informação(naturais e artificiais). Ou seja, é por meio dessa ferramenta que nós, Cientistas da Computação, iremos atuar.

Sob essa perspectiva, o que de fato nós aprendemos ao longo da graduação que nos destaca?

A priori, é lícito referenciar o conceito "Pensamento Computacional", em que a Cientista da Computação Jeannette Wing disserta acerca de técnicas da Ciência da Computação que podem ser aplicadas para a resolução de problemas (em diversas áreas do conhecimento).

Assim, ao longo do curso, aprendemos e desenvolvemos cada vez mais a capacidade de pensar estrategicamente, ou seja, interpretar problemas de maneira adequada, e, a partir disso, descobrir soluções algorítmicas viáveis.

Há inúmeras habilidades que são desenvolvidas por meio do Pensamento Computacional. Confira 4 delas:

Decomposição: Capacidade de dividir um problema em partes menores, com o fito de facilitar na elaboração da solução;
Abstração: Capacidade de planejar, identificando quais fatores tem maior relevância;
Reconhecimento de padrões: Capacidade de perceber itens em comum nos processos, baseados em eventos anteriores;
Algoritmos: Capacidade de elaborar passos lógicos finitos (como um conjunto de "regras" que serão seguidas para elucidar um problema);

E ai, quais fatores contribuíram para desenvolver as habilidades acima?

Ps:Recomendo essas três leituras, caso queira compreender mais acerca desse tema:

Is Computer Science Science?

The Great Principles of Computing

Computational thinking (Jeannette Wing)

Muito obrigada pela leitura!

Sou Íris Almeida, e, se quiser entrar em contato comigo, você pode me adicionar no LinkedIn ou enviar uma mensagem no Discord(Siri#1217).

Convido todes a seguirem o Mulheres de Voz na Tecnologia.

Mulheres de Voz na Tecnologia é um movimento que tem por missão promover maior visibilidade para inúmeras mulheres (cis ou trans) na área de Exatas, de forma que, cada vez mais, as pessoas associem Tecnologia também ao rosto de uma mulher.

Acompanhe a OpenDevUFCG no GitHub, Twitter e no Instagram.

Estamos de volta!

Iele Passos — Mon, 21 Jun 2021 17:00:02 +0000

É isso mesmo! Sentiram a nossa falta?

Não há nada melhor do que poder tirar um tempo para descansar e refletir a respeito do rumo que queremos tomar, né?
Como resultado dessa nossa "hibernação", definimos que teremos postagens constantes (1x por semana) com os mais variados temas feitas por membros e convidados da nossa comunidade.

Durante esse tempo que o blog esteve parado, nós não estávamos:

- Criamos o Andromedev!!🚀🚀🚀

Pensando em fortalecer a comunidade nesse período de pandemia, criamos o primeiro evento de mentoria organizado pela OpenDevUFCG com o intuito de incentivar a participação de estudantes em projetos open source!

O evento ocorreu em um período de nove semanas, onde estudantes colaboraram com projetos open source através de um sistema de mentoria. Cada projeto teve uma pessoa responsável, que tinha a missão de orientar a pessoa aprendiz durante o evento, ajudando a realizar as contribuições open source.

Na inscrição, foram disponibilizados diversos projetos que conseguimos através de parcerias com laboratórios da universidade, organizações e empresas que estejam dispostas a ensinar alunos. Dentre elas, contamos com empresas de renome internacional, como a RedHat e a VTEX.

Ao fim do evento, foi realizada uma apresentação dos resultados dos projetos participantes do evento, que está disponível em nosso canal do YouTube

Ao todo, na edição de 2020, foram 49 projetos, 145 inscritos para aprendiz e 22 organizações!

Amasse? https://andromedev.opendevufcg.org/

- Teve Hacktoberfest online!

O Hacktoberfest é um evento realizado ao longo de todo o mês de outubro, engajando estudantes e desenvolvedores em atividades e iniciativas voltadas ao open source ao redor do mundo todo.

Com toda a situação causada pelo COVID-19, tivemos que repensar totalmente a estrutura do evento para conseguirmos engajar e passar conhecimentos sobre programação e cultura open source ao mesmo tempo que respeitamos às recomendações de isolamento social.

Assim, fizemos o Hacktoberfest Home Edition!!
O evento durou o MÊS INTEIRO!! É isso mesmo que você leu, foram 4 semanas abordando vários temas distintos através de Palestras e Workshops com vários convidados e membros da OpenDevUFCG. Falamos de conceitos iniciais, open source, análise de dados, frontend, design e muito mais, e o melhor, TUDO DE GRAÇA!

Na edição online de 2020, tivemos o mês inteiro de programação, 10 palestras/minicursos, mais de 2.000 visualizações, mais de 900 minutos de conteúdo e parceria com a VTEX e a Ovni Design!

Quer saber mais? https://opendevufcg.org/hacktoberfest/#about

- Nossa comunidade cresceu!!

No nosso discord, temos mais de 370 membros, onde mais 14 pessoas entraram no CoreTeam;
No nosso Instagram, temos mais de 600 seguidores;
E em nosso Twitter temos mais de 300 seguidores!!

- Agora temos um perfil na Open Collective!!

A Open Collective é uma ferramenta open source que permite que você gerencie suas finanças para que todos possam ver de onde vem o dinheiro e aonde ele vai.

Ou seja, agora fica mais fácil patrocinar/apoiar/doar para a nossa comunidade e ver onde e como o dinheiro foi gasto!!

Confira nosso perfil!

Mas o que será que vem ai??

Além dos posts semanais por aqui, teremos eventos, minicursos, novos projetos...boatos que vai ser tuudo!
E para saber quando o quê vai acontecer é facinho facinho: Nos acompanhem em nossas redes!!
Twitter, Instagram e, claro, no GitHub.

Muito obrigada pela leitura!
Meu nome é Iele Passos e sou contribuidora e membro do Core Team da OpenDevUFCG. Se desejar entrar em contato comigo, é só me mandar uma mensagem no Discord (iele#7381) ou no LinkedIn e, se quiser ver um pouco do meu trabalho, dá uma olhada no meu GitHub.

Fiquem atentos: em breve, teremos novos artigos de contribuidores do OpenDevUFCG aqui no dev.to (inclusive meus hehehe)

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

Retrospectiva OpenDevUFCG 2019 com visualizações analógicas

Ivyna Santino — Tue, 31 Dec 2019 12:54:28 +0000

Olá! Chegou o final do ano, para muitos é tempo de férias, de se reunir com a família e de relembrar momentos do ano que está chegando ao fim. A OpenDevUFCG também não ia deixar passar em branco isso, então, que tal recapitular alguns acontecimentos de 2019 através de visualizações analógicas?

Antes de mostrar as visus, um questionamento: o que são visualizações analógicas?

São desenhos ou ilustrações, feitas à mão mesmo, sobre algum dado. A referência dessas visus é o trabalho Dear Data das designers Giorgia Lupi e Stefanie Posavec originado em 2015, quando decidiram criar visualizações sobre dados do dia a dia e enviá-las através de cartões postais como forma de comunicar uma à outra o que estava acontecendo em suas rotinas. Por exemplo:

As imagens acima foram tiradas do livro Dear Data e, ao final do post, indicarei algumas referências do trabalho delas.

Então, sabendo um pouco sobre visus analógicas, bora ver como os dados da OpenDevUFCG se comportaram ao longo do ano de 2019?

Em 2019, a OpenDevUFCG completou um ano e, como resultado, tivemos o crescimento da equipe e do número de projetos, como podemos observar na imagem a seguir.

Integrantes do Core

Tendo em vista que o time Core cresceu, também tivemos mais ideias de projetos surgindo. É o que você vai ver na próxima imagem:

Dados dos nossos projetos

É de grande satisfação ver o crescimento de nossos projetos e que nosso espírito de comunidade está impactando muitas pessoas, e como resultado, ver que nossa ideia está influenciando as pessoas a querer saber mais e participar de projetos open source.

Então, movidos por isso, pensamos em organizar o Hacktoberfest OpenDevUFCG, um evento para reunir boas ideias e pessoas legais para ajudar a comunidade através de atividades como palestras, minicursos, HackTime e abertura para sugestões. Agradecemos muito pelo apoio de todos, doadores e patrocinadores que compraram a ideia e deram apoio para o evento acontecer! Mas, deixando um pouco as palavras de lado, que tal ver os dados disso tudo?

Bem, tentei destacar os principais pontos da nossa organização esse ano. E, como prometido, links com mais detalhes sobre o projeto Dear Data:

Então, gente, é isto, de novo gostaria de agradecer a cada um que acredita em nossos projetos e na nossa comunidade! Foi um ano muito legal para nossa organização, de bastante crescimento e de aprendizado, e sempre saibam, estamos dispostos para ajudar. Obrigada pela leitura, até ano que vem!

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" }

Cloud e OpenStack: Uma breve introdução

Marta Laís — Sun, 22 Sep 2019 00:53:27 +0000

Cloud Computing

Computação em Nuvem, ou Cloud Computing, é uma tecnologia desenvolvida para flexibilizar os recursos que uma aplicação/sistema tem disponível. Nesse caso, quando falamos de recursos, estamos nos referindo a memória RAM, armazenamento, CPU e afins. Através da Cloud, é possível criar uma infraestrutura elástica e dinâmica, ou seja, o sistema pode crescer ou diminuir mais facilmente, uma vez que é possível utilizar os recursos sob demanda.

Por que Cloud Computing é tão importante para o futuro da computação? Vamos dar um exemplo prático: uma aplicação. O crescimento de uma aplicação, por exemplo, é algo inconstante. Podemos tentar estimar, com base em dados, o quanto uma aplicação tende a crescer ou diminuir, mas, mesmo assim, é uma previsão complexa. Teremos períodos onde usaremos uma demanda de recursos maior, pois o número de usuários será maior, assim como o contrário, períodos em que esses recursos (comprados pelos desenvolvedores da aplicação, por exemplo), ficarão ociosos. Isso não é nada bom, uma vez que queremos aproveitar todo o dinheiro aplicado na ideia. Com o uso da Cloud, o usuário controla seus recursos de forma dinâmica, levando em consideração a demanda do momento. Isso torna o sistema elástico, o que, consequentemente, economiza recursos e investimentos.

Existe um conceito importante dentro disso tudo, e que também é crucial para entender como essa administração de recursos funciona: provisão de recursos. Uma das definições de provisionamento é: “fornecer os recursos necessários para que o sistema de gestão possa funcionar adequadamente”. Distribuição dos recursos por demanda.

Para administrar os recursos da Cloud, existem diversas tecnologias, sendo uma das mais utilizadas o Openstack.
OpenStack pode ser definido como um gerenciador para componentes de múltiplas infraestruturas virtualizadas. Imagine o OpenStack como uma plataforma de componentes, uma espécie de sistema operacional para a Cloud. OpenStack utiliza recursos virtuais para executar uma combinação de ferramentas, seus componentes. Os componentes servem para criar um ambiente de cloud que atende aos cinco critérios do National Institute of Standards and Technology para a Cloud: rede, recursos agrupados, interface de usuário, provisionamento de funcionalidades e alocação/controle automático de recursos.

Openstack: Conceitos

Agora que você já tem uma ideia do que é Cloud Computing, da sua importância para a computação e foi introduzido ao OpenStack e seus componentes, existem alguns conceitos que são importantes entender ao lidar com esse tipo de sistema:

Instância

A instância nada mais é do que uma máquina virtual, já com sua imagem, grupos de seguranças e outras configurações, administrada pelo OpenStack.

Imagens

A imagem de uma instância é o sistema operacional utilizado pela mesma. Assim como temos o famoso formato .iso para imagens que usamos normalmente, o formato padrão mais utilizado para Cloud no OpenStack é o qcow2. Imagens com esse formato podem ser encontradas tanto nos sites da maioria das distribuições, quanto no próprio site do OpenStack.

Network

A função de Network do OpenStack é bastante completa. Como o próprio nome já antecipa, essa área é focada nas conexões de redes, permitindo a criação de redes virtuais para as instâncias. Essas redes podem ser tanto públicas, quanto privadas. Ainda na parte de Network, é possível criar roteadores virtuais para conexão de redes entre si, o que possibilita a criação de redes públicas, isto é, conectadas à internet.

Grupos de Segurança

Os grupos de segurança podem ser definidos como um conjunto de regras de firewall aplicadas a uma instância. Essas regras são definidas pelos usuários de acordo com as necessidades da instância. Caso o usuário não crie um grupo de segurança, o OpenStack define um grupo default que, por padrão, bloqueia tudo. Essa estratégia de bloquear tudo e, através dos grupos de segurança, ir liberando aos poucos o acesso, é de extrema importância para a segurança da instância e o controle de acesso total da mesma.

Volumes

Os volumes são discos virtuais que persistem os dados da instância. Imagine o volume como um HD instalado na sua máquina. É lá onde os dados ficam, mesmo que a instância seja reiniciada. Caso sua instância não seja inicializada com um volume, os dados não ficarão salvos.

Identity

Essa parte diz respeito ao controle de acesso ao seu OpenStack. Na interface do Horizon, é possível criar projetos, usuários, definir senhas e, assim, controlar o acesso e poderes de usuários.

Par de Chaves

Por padrão, para acesso via SSH na sua instância, normalmente é necessário cadastrar uma senha pública gerada pelo usuário no OpenStack. Depois de cadastrada, basta aplicá-la ao criar uma instância.

Flavors

Os flavors são um conjunto de configurações pré-determinadas que definem características da instância, como a memória e a capacidade de armazenamento. Podem ser entendidos também como “configurações de hardware” disponíveis para um servidor. Vários flavors podem ser criados e aplicados para diferentes instâncias.

OpenStack: Componentes

Uma vez que o OpenStack atua como um gerenciador de componentes, é importante entender um pouco da atuação de cada um deles: cada um com sua responsabilidade na gerência da infraestrutura da Cloud. Como existem muitos, não precisamos nos apegar aos detalhes cada componente, então, vamos dar uma visão geral sobre os utilizados com maior frequência:

OpenStack Compute (Nova)

Responsável pela estrutura de virtualização. É uma ferramenta de acesso e gerenciamento total para os recursos computacionais do OpenStack, incluindo programações, criações e exclusões.

É agnóstico ao hypervisor (camada de software entre o hardware e o sistema operacional), tendo compatibilidade com a maioria deles.

OpenStack Block Storage Cinder (Cinder)

Responsável pelo serviço de storage do OpenStack Nova.
Com o Cinder é possível gerenciar volumes através da interface do Horizon ou via CLI.

OpenStack Object Storage (Swift)

É um serviço altamente tolerante a falhas que armazena e recupera objetos de dados não estruturados. Enquanto o Cinder é responsável pelo volume, o Swift é responsável pelos objetos.

OpenStack Image Service (Glance)

Responsável pelos recursos de imagens de máquinas virtuais. Ele armazena e recupera imagens de disco de máquinas virtuais de uma variedade de locais.

OpenStack Networking (Neutron)

Responsável pelos recursos do serviço de rede para o OpenStack. Conecta redes a outros serviços do OpenStack.

OpenStack Identity (KeyStone)

Responsável pela autenticação e autorização, definindo regras para acesso aos recursos do OpenStack. Ele também é o catálogo de endpoints para todos os serviços.

OpenStack Dashboard (Horizon)

Provê uma interface web para acesso aos serviços do OpenStack.

Dependendo da necessidade do serviço de Cloud, o administrador da infraestrutura pode inserir outros componentes, a exemplo do OpenStack Monasca, que tem como função ser um sistema de monitoramento para as máquinas (para saber mais, acesse a página de componentes do OpenStack).

OpenStack: Primeiros Passos

É possível dar seus primeiros passos com OpenStack sem precisar ter uma infraestrutura de Cloud com diversos computadores, para isso existe uma solução: o OpenStack AIO (All-In-One).

Nele, é possível criar imagens, subir instâncias, definir grupos de segurança, integrar chaves públicas e outras funções, assim como no OpenStack; a diferença é que tudo funciona em uma máquina só, podendo ser utilizada uma máquina virtual, por exemplo. Por isso é considerado um laboratório para OpenStack. No site do OpenStack tem uma área dedicada para essa solução, com todo o passo a passo para sua instalação e configuração.

É importante dizer também que o OpenStack AIO é integrado ao Ansible, uma ferramenta de automatização criada para gerenciar múltiplas máquinas de uma vez. A parte mais importante para se entender agora sobre Ansible são os seus Playbooks. Os Playbooks são um conjunto de Plays (instruções) através das quais o Ansible consegue configurar o passo a passo de um processo de configuração — uma estrutura bem parecida com um shell script. São basicamente instruções de fácil leitura de como serão feitas as configurações que possibilitam a realização de atividades em máquinas remotas ou diferentes hosts.

Para administração e gerência do OpenStack, temos duas opções: a interface web já citada anteriormente, Horizon, ou o OpenStack-CLI (Client Line Interface). Na dashboard do Horizon existem diversas abas relacionadas aos conceitos já abordados neste material.

Para finalizar, quando pensamos no futuro da computação, é impossível não pensar em Cloud. Um dos fatores mais limitantes para nossa área são os recursos, por isso precisamos aproveitá-los da maneira mais inteligente e consciente. Ferramentas como OpenStack, em conjunto com toda a comunidade open source que move o projeto, nos dão uma visão que, no futuro, os limites serão apenas termos usados em cálculo.

Muito obrigada 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.

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.

Testes em JavaScript: Conceitos iniciais

Júlio Guedes — Sat, 07 Sep 2019 21:51:15 +0000

Diferentemente do que muitos pensam, o desenvolvimento de uma aplicação Web ou Mobile necessita de testes, seja para assegurar a qualidade do produto, o funcionamento, e até mesmo a aparência, durante a evolução do código.
Quando nosso software está bem consolidado em termos de testes, podemos estabelecer estratégias de integração e deploy contínuos (CI/CD). Esses métodos atuam para garantir que nossa aplicação não tenha sofrido efeitos colaterais com as adições, modificações e correções que estarão sendo enviadas à branch principal para deploy. Nesse post, serão introduzidos os conceitos de Spies e Stubs, e como eles são úteis durante o desenvolvimento de um conjunto de testes de unidade.

Teste de Unidade

Vamos supor o seguinte cenário: temos uma aplicação que requer o cadastro dos seus usuários com um username, que deve ter tamanho de pelo menos 3 caracteres. Para tal, podemos adicionar no código de cadastro uma verificação para o tamanho do username:

function cadastrar(username, senha) {
  if (username.length < 3) {
    throw new Error('O username necessita de pelo menos 3 caracteres');
  }
  // Continua o cadastro
};

Quando escrevemos testes para a função de cadastro, nossa intenção seria testar diferentes casos, escolhendo valores limite, para podermos testar a qualidade da nossa verificação e se estamos deixando passar algum cenário indesejado. Por enquanto, não vamos nos importar tanto com a sintaxe, mas na semântica:

describe('testes da função de cadastro', () => {
  it('testa um username válido', () => {
    expect(cadastrar('teste', 'teste')).to.not.throw();
    /* Nesse caso, espera-se que não seja lançado um erro,
     * visto que o username tem três ou mais caracteres
     */
  });
  it('testa um username invalido', () => {
    expect(cadastrar('te', 'teste')).to
      .throw('O username necessita de pelo menos 3 caracteres');
    /* Nesse outro caso, como o username tem menos de 3 caracteres,
     * espera-se que seja lançado um erro com a mensagem descrita
     */
  });
  // testes de senha, e outros fluxos do cadastro
});

Nesse caso, estamos testando apenas a função de cadastro, ou seja, um teste unitário que testa apenas uma "unidade básica" do sistema (entenda unidade básica como aquela unidade que não chama outras funções internamente). De agora em diante, a ideia é termos funções mais complicadas que isso, ou seja, funções que precisam chamar outras funções na sua execução, por envolverem lógicas mais complexas.

Spies

Imagine agora que, uma vez cadastrado, também seja possível alterar esse username. Temos, então, duas situações possíveis em que desejamos verificar se o que o usuário inseriu é válido. Para isso, podemos refatorar nosso código atual de maneira a reutilizar as linhas que verificam se o username está no padrão correto:

function verificaUsername(username) {
  if (username.length < 3) {
    throw new Error('O username necessita de pelo menos 3 caracteres');
  }
};

function cadastrar(username, senha) {
  verificaUsername(username);
  // Continua o cadastro
};

Com o código refatorado, é também preciso refatorar os testes, para que se adequem ao contexto real do código:

describe('testes da função de cadastro', () => {
  it('testa um username válido', () => {
    const spy = sinon.spy(verificaUsername);
    expect(cadastrar('teste', 'teste')).to.not.throw();
    expect(spy).to.have.been.called;
  });
  it('testa um username invalido', () => {
    const spy = sinon.spy(verificaUsername);
    expect(cadastrar('te', 'teste')).to
      .throw('O username necessita de pelo menos 3 caracteres');
    expect(spy).to.have.been.called;
  });
  // testes de senha, e outros fluxos do cadastro
});

Agora que já vimos como os spies são declarados e verificados, é mais fácil entender seu significado: um spy serve para verificar se uma função foi chamada ou não durante a execução de outra função. No nosso exemplo, pedimos para que o sinon (a biblioteca de testes que estamos usando) "espie" o método verificaUsername e, após a chamada para a execução de cadastrar, verificamos se verificaUsername foi chamada.

Entretanto, existe uma particularidade importante a se notar no nosso código: quando testamos um username inválido, a exceção ainda é lançada. Isso nos faz notar que nosso spy não modifica nada no código em execução, apenas verifica se as chamadas internas a uma função são realmente chamadas.

Stubs

Mudando um pouco a perspectiva dentro do sistema que estamos construindo, podemos pensar num sistema mais complexo e que funciona numa certa sequência de operações e, para executar a operação seguinte, a anterior precisa ter sido executada corretamente. Por exemplo:

function operacaoComplexa() {
  return operacaoMenor().then((resposta) => {
    if (resposta.param) {
      // ...
    } else {
      // ...
    }
    return x;
  }).catch((erro) => {
    throw new Error(erro);
  });
}

A função acima não parece ter uma lógica nem um motivo bem definidos, como é o caso da função de cadastro. Entretanto, não é esse o ponto em que precisamos focar: podemos ver que o retorno da operacaoMenor é importante para entendermos o que será retornado nessa função, seja em caso de sucesso ou em caso de erro. Consideremos então que, por exemplo, essa função menor faz uma requisição a um serviço externo, uma API por exemplo.

Na execução do nosso código, o código dessa função executará normalmente, fazendo a requisição necessária. Durante os testes, entretanto, não se deve fazer uma chamada à API, já que a API pode alterar dados reais da aplicação, deixar o banco de dados inconsistente e causar muitos outros problemas. Precisamos então de uma forma para testar a operação complexa sem realmente executar o código de operacaoMenor, e para isso servem os stubs.

Então, o que exatamente um Stub faz? Durante a execução dos nossos testes, um stub substitui uma função existente no código por uma função representativa, na qual é possível controlar o seu retorno. Através desse controle, o restante do código pode executar normalmente e é possível percorrer todos os cenários da execução do programa durante os testes, manipulando o retorno do stub conforme adequado. Vejamos como seria a aplicação de um stub no código dessa função:

describe('testa operacaoComplexa', () => {
  it('testa cenario 1 do then', async () => {
    const stub = sinon.stub(operacaoMenor)
      .resolves({ param: true });
    const retornoComplexo = await operacaoComplexa();
    expect(retornoComplexo).to.eql(/* retorno no caso 1 */);
    expect(stub).to.have.been.called;
  });
  it('testa cenario 2 do then', async () => {
    const stub = sinon.stub(operacaoMenor)
      .resolves({ param: false });
    const retornoComplexo = await operacaoComplexa();
    expect(retornoComplexo).to.eql(/* retorno no caso 2 */);
    expect(stub).to.have.been.called;
  });
  it('testa cenario catch', () => {
    const stub = sinon.stub(operacaoMenor)
      .rejects('mensagem de erro');
    operacaoComplexa()
      .then(() => {
        throw new Error('Operação não deveria ter dado certo');
      }).catch((erro) => {
        expect(erro).to.eql('mensagem de erro');
      });
    expect(stub).to.have.been.called;
  });
});

O teste acima verifica os três cenários que colocamos no código da nossa função. O teste parece ser grande, mas cobre apenas os três fluxos básicos na execução da operacaoComplexa. Explicando em alto nível a sintaxe:

no caso 1, estamos dizendo que a operacaoMenor deve ser um stub que resolve, no retorno da Promise, um objeto { param: true };
no caso 2, estamos dizendo que a operacaoMenor deve ser um stub que resolve, no retorno da Promise, um objeto { param: false };
no caso 3, de erro, estamos dizendo que a operacaoMenor deve ser um stub que rejeita, no retorno da Promise, sendo 'mensagem de erro' a string retornada no erro.

Nesse caso específico, nossa função complexa tinha uma chamada assíncrona (uma Promise) e, por isso, utilizamos resolves e rejects no nosso stub; caso fosse uma função síncrona, poderíamos ter utilizado returns normalmente.

Plus!

Existem diversas bibliotecas que podem ser utilizadas para testes em JavaScript. Algumas das mais famosas são Mocha, Sinon e Chai, que geralmente são utilizados em conjunto. Atualmente, uma das bibliotecas que está sendo bastante visada é o Jest. Se você está pensando em como começar a aplicar o que aprendeu aqui, te sugiro fazer alguns testes simples num dos sites que você hospeda no GitHub Pages — um portfolio, um pequeno projeto de disciplina, quem sabe? Qualquer um desses vai te dar um bom contato inicial :).

Chegamos ao fim desse post... :(

Mas não se preocupe, há muito mais conteúdo do OpenDevUFCG para ler aqui no dev.to, e em breve ainda mais posts saindo do forno.

Agradeço bastante pela leitura, e se quiser entrar em contato comigo, só mandar um Tweet! Se quiser ler mais textos meus, confere meu Medium que em breve mais posts vão sair.

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.