This workshop is designed to demonstrate open protocols in action – and the interoperability between client applications they make possible.
Inside this repository are two separate client applications.
This project is a playlist maker that leverages Web5 and the Tidal API Beta to allow users to create playlists that they truly own.
For the purposes of this lab, this is also where we define and configure our open protocol.
This project is a playlist finder that leverages Web5 to allow users' playlists by DID. A user can enter any DID to see if that user has created a playlist under this open protocol.
- Node - Installation
- Npm - Installation
- Nvm (recommended) - Installation
- Clone this repository and
cdinto the project.
$ git clone https://github.com/kirahsapong/wwc-workshop.git
$ cd wwc-workshop
- At the end of this lab, you'll use the below commands to run
playlist-makerandplaylist-finderin your browser.
$ npx http-server playlist-maker -o -c-1
$ npx http-server playlist-finder -o -c-1
- The final deployed sites will be available at:
To get started with your own Tidal API token, create an account in Tidal's Developer Dashboard and then create a new app. You will want to make note of your Client ID and Client Secret. If you run into any issues, have any questions, or just want to say "Hi!", you can go to Tidal's Community Discussion Forum.
In your terminal, generate a base64 API key by replacing CLIENT_ID and CLIENT_SECRET in the following with the values from your Tidal app:
echo -n "CLIENT_ID:CLIENT_SECRET" | base64
(If you are using Windows, the steps to get this key encoded are described here).
Go to config.js in your playlist-maker folder and add your API base64 key:
export const API_KEY = "{YOUR_GENERATED_BASE64_KEY_GOES_HERE}"
Go back to your terminal and project directory to run:
git update-index --skip-worktree playlist-maker/config.js
This ensures you don't push this value to Github in the future.
To get started with Web5, visit the Web5 SDK Homepage and TBD Developer Docs. You can also find answers to common questions in TBD's Community Discord.
Follow along the lab to make modifications to your playlistProtocol.json. It will look like this to start:
{
"protocol": "",
"published": false,
"types": {},
"structure": {}
}
You can learn more about defining protocols through TBD Developer Docs - Learn Protocols.
To clear all local data associated with your Web5 test DID during development, you can write a short code snippet to clear your browser's IndexedDB or use your browser's developer tools. For example, in Chrome, you can open Chrome DevTools and navigate to the Application Tab. You can open the Storage panel on the left-hand side and click the Clear site data button.
Note that this action is irreversible and you will lose any association with the DID, as well as all data tied to that DID.
Congratulations! You completed the lab and now know how to build applications using the Tidal API Beta and open protocols with Web5.
Now for some further exploration: How else can your users make the most of the data you helped them create and store in their personal DWNs today? With full control over their data, what kind of products can help them use it to better streamline their lives? Any cool apps or websites that could fit right into their data ecosystem, based on what they've created today?
Brainstorm ideas and bounce them around with friends and family. Finally – and most importantly – have fun building it!
If you are using windows, write "CLIENT_ID:CLIENT_SECRET" to a file named data.txt and then run
certutil -encode data.txt encoded.txt
The API base64 key will be the value in encoded.txt between the first and last line (and you will want to take this value and make it one line).
For instance, if the file contains
-----BEGIN CERTIFICATE-----
TTlvYlQ4dHNtT3lScWlhQTpNUVJ3S3N2UWhRUGpyV24xZWRCbnBUZUxxTG5CRUhr
cU10UUFKZEw3Uk9JPQ==
-----END CERTIFICATE-----
then the encoded key is "TTlvYlQ4dHNtT3lScWlhQTpNUVJ3S3N2UWhRUGpyV24xZWRCbnBUZUxxTG5CRUhrcU10UUFKZEw3Uk9JPQ=="