Developers' Collaborative Playlist
Tags: actionshackathon21, github, spotify, opensource
Published: 2021-12-07 23:28:31

## Table of Contents
1. [My Workflow](#my-workflow)
    - [What inspired me](#what-inspired-me)
    - [How I created the workflow?](#how-i-created-the-workflow)
        - [Dealing with Spotify API](#solution-workflow-for-problem-1-dealing-with-spotify-api)
        - [Issue Handling](#solution-workflow-for-problem-2-issues-issues)
        - [Random Gifs](#solution-workflow-for-problem-3-random-wacky-gifs)
        - [Updating Contributors](#solution-workflow-for-problem-4-contributors)
        - [Error Handling](#solution-workflow-for-problem-5-error-handling)
2. [Submission Category](#submission-category)
3. [Additional Resources/Info](#additional-resources-info)
4. [Song Request](#its-the-song-request-time)


---

<center>**_A drop of musical taste from every contributor..._**</center>
<center>**_Welcome to the developer's collaborative playlist._**</center>

---


## My Workflow
### What inspired me?

I spend most of my free time with coding and I need fairy of inspiration during these times of intense thinking.

Focusing on the same issue for a long time can be very tiring sometimes. Especially if the target problem doesn't have a single solution.

Every time I feel burnout, I want to take my mind on different adventures. And often the easiest way to start such an adventure is with a 'Shuffle Play' button.

![need_vacation](https://media4.giphy.com/media/lJEGgG5ajs4zC/giphy.gif?cid=ecf05e47xi4jrxg1pzq9g0ta4txnrhvf0rh0vxtj2rypwwep&rid=giphy.gif&ct=g)
 
The same algorithm can be written differently by each developer. The developer's code style becomes their signature.

So the question in my mind was:
> Coding is an art, so what do artists listen to while performing this art?

![code_n_music](https://media0.giphy.com/media/RbDKaczqWovIugyJmW/giphy.gif?cid=790b76117fcb52c86762d981a8ef2cfa4b396358982ef5fe&rid=giphy.gif&ct=g)

I thought it might be a pretty fun and elegant way to answer: creating a [**developers' collaborative playlist**](https://github.com/oz9un/Developers-Playlist), all automated using **GitHub Actions**.

---

### How I created the workflow?

If I could, I would like to automate everything in this life. I may never be able to automate dealing with people, but this project has been a good medicine for my automatization addiction. 

![addiction](https://media1.giphy.com/media/f5YrGliGs8sn0Mjh2e/giphy.gif?cid=ecf05e47f2eqvvemztoilqpjj3d36olw0ja4t0nq34km1r7n&rid=giphy.gif&ct=g)

First I had to overcome some problems before reaching my final goal:

1. Communication with [Spotify API](https://developer.spotify.com/documentation/web-api/), refreshing OAuth tokens, searching for songs and adding a track to the target playlist...
2. Evaluating the issues opened by the users and returning an appropriate result. Answering and closing issues.
3. To make things a little wackier, picking random gifs from various categories and using them.
4. The name of the developer who opened the issue and their favorite song should be stored as a contributor and written in the README. 
5. Errors, errors and errors.

---

#### Solution workflow for problem 1: dealing with Spotify API

Let's be honest, Spotify has pretty good API documentation. But things can get complicated as you get involved.

I didn't want to have a lot of code in this repository I created for GitHub Actions Hackathon and make the situation even more complicated. For this reason, I created a different [**public repository**](https://github.com/oz9un/Spotify-API-Apps) and kept all the tools I wrote to communicate with the Spotify API in there. Thus, I would be able to effectively use GitHub actions' ability to communicate with a different repository.

My two different repository will communicate like:
![communicate](https://media3.giphy.com/media/WySK0nQiJKLy25HLhp/giphy.gif?cid=ecf05e474utlbpznzvyxlspp0cklmizc9q8fbn7srlcdj29s&rid=giphy.gif&ct=g)

The constantly talking kid on the left would represent the repository where I used GitHub Actions and submitted for this Hackathon, while the kid on the right that would just listen and execute the commands would represent the repository where I kept my auxiliary Spotify API functions.

In this scenario, the string itself would of course be **GitHub Actions**. 

---

#### Solution workflow for problem 2: issues, issues...

In order for the developers to make a song request, they should open an issue with the title 'song request' and the body of the issue should have a text in <artist>-<song> format.

![song_request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd4t9qfu81o3ozqwtokb.GIF)

Thus, it was necessary to correctly evaluate the issues opened by the users and to produce the necessary actions accordingly.

In this process, I explored the unlimited features of GitHub Actions and had to use many features from if-checks to environment variables. 

---

#### Solution workflow for problem 3: random wacky gifs

Generating random gifs was very useful in two ways:
- Responses to issues opened by developers would be more fun and varied.
- There couldn't have been a better opportunity for me to learn about environment variables and cross-jobs data sharing.

Therefore I did it. do i regret it? No. Was that wacky? Maybe.

![wacky](https://media1.giphy.com/media/p4yyZS2G7tlA2tr5X0/giphy.gif?cid=ecf05e478jscdosip452h60vl0hyqtqtpj9jh96ry0sh4t6w&rid=giphy.gif&ct=g)

---

#### Solution workflow for problem 4: contributors

It was a good idea to view the songs added by each user. Until you try to code it. 

GitHub Actions does not keep any persistent data by nature. So I had to overcome this nature and keep contributors' information:

![contributors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uofuxnfbwl2c91t263zo.png)
 

I created files for every single contributor. Each time a new song was added, these files and the README_template would be concatenated and a new README file would be created. At this point, I used the code push feature to the target repository, which is readily available in the GitHub Actions marketplace.

---

#### Solution workflow for problem 5: error handling

If the input of the developed tool is controlled by the users, errors are inevitable.  

![error](https://media1.giphy.com/media/l46Czzp0KEHSO7OdG/giphy.gif?cid=ecf05e47hwwd5eq7zlyund83tzouff2exeku09psrhsh3t5r&rid=giphy.gif&ct=g)

In this scenario, developers are expected to adhere to certain formats when requesting songs. For this reason, all wrong entries need to be handled properly. 

For example, in case of a wrong issue title or when the searched song is not found, an appropriate answer should be returned and the developer should be informed. 

I will continue to improve this part after the contest ends. For example, now the same song can be added to the playlist multiple times. While I initially thought this was logical because popular songs were included more, I think it should be fixed in the future. I'm also considering making a custom super cool website reserved for my lovely contributors 🤩

I can say that most of the time of the project I developed was spent managing the inputs. I think user experience is very important at this point. Also a big kudos to everyone who has added their favorite songs on the GitHub repository and gave a feedback to me, thus contributing to an open source project!

![thanks](https://media1.giphy.com/media/xULW8v7LtZrgcaGvC0/giphy.gif?cid=ecf05e47o60s0u67ok16hoo3kcco0p4lypc0azzxvsfnwap6&rid=giphy.gif&ct=g)

---

Frankly, without **GitHub Actions**, this project would not have been easy to realize and popularize among developers. 

In this process, I also had the opportunity to explore and use many ready-made works in the GitHub Actions market:
- actions/checkout@v2 💖
- actions/download-artifact@v1 💖
- actions/github-script@v5 💖
- peter-evans/close-issue@v1 💖
- actions/upload-artifact@v1 💖
- actions/setup-python@v2 💖
- ad-m/github-push-action@master 💖

---

## Submission Category: 

Wacky Wildcards

![wackyw](https://media3.giphy.com/media/jRen3r5KuFwur3EuJf/giphy.gif?cid=ecf05e47ynsj8t8xocd4n5ip4zpkkktx04ob647x6gxvaw3k&rid=giphy.gif&ct=g)

---

### Yaml File or Link to Code

Here is the repository:

{% github oz9un/Developers-Playlist %}

You can also view the YAML file: [devs_playlist_action.yaml](https://github.com/oz9un/Developers-Playlist/blob/main/.github/workflows/devs_playlist_action.yaml)

---

## Additional Resources / Info

GitHub Actions Workflow:
![github_workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfvj3snja5nalcgd4xij.png)


Developers:
1- [oz9un](github.com/oz9un)
{% user oz9un %}
2- 1
3- 2
![devs](https://media0.giphy.com/media/cIqXqJeGVSfkpDUu1f/giphy.gif?cid=ecf05e47ky4hsnpud18s0d1wvdrhf0ykovpxsc3rtrm0q6xp&rid=giphy.gif&ct=g)

---

**About the cover image**:
Cover image is created with AI. Only using the text: "Developers Playlist"

---

## It's the song request time!

Let's open an [issue](https://github.com/oz9un/Developers-Playlist/issues/new) with your favorite song and enjoy the **Developers' Favorite Playlist!**

![hey](https://media2.giphy.com/media/3KC2jD2QcBOSc/giphy.gif?cid=ecf05e47wkabcrc0xnbb6d1fk8xwku3oeq7122nfcauin3z3&rid=giphy.gif&ct=g)

<center>Playlist: [Spotify Link](https://open.spotify.com/playlist/5iI16F6SXezeIcxFFTsXWb)</center>