_{Workshop banner by Palak Verma}

Overview ✈️

This is the source code for a workshop hosted by the UVic Web Development Club, originally prepared by Juan Carlos Gallegos (@okjuan).

At a high-level, our app is composed of a Python server and a JS/HTML/CSS client. The workshop is divided into several parts that build on each other incrementally; throughout, we make use the Spotify and Dialogflow APIs to develop our app's functionality.

• Part 1: We search Spotify via an API call to find music based on user input.
• Part 2: We query an existing Dialogflow agent via an API call for processing a user's natural language input.
• Part 3: We create our own Dialogflow agent.
• Part 4: We configure our new Dialogflow agent to talk to our own Python server to retrieve info for responding to the user.

Each part has its own folder and own README file containing details on how to complete the given exercise.

---

Part 1

Your starting point:

• A minimal web client containing a Spotify widget and a minimal Python server.
  • The given server is meant to run (locally) and serves a Spotify bearer token
  • The client fetches the bearer token from the server, which it needs to make requests to the Spotify Web API

💡 Your task: 💡

• From the webclient, make an HTTP GET request to the Spotify Web API to get the Spotify URI based on the query entered by the user.

---

Part 2

Your starting point:

• A minimal web client containing a Spotify widget and a Dialogflow chat agent widget.
  • The agent recognizes two types of messages: greetings and questions about an artist's top song. Unfortunately, it's music knowledge is quite limited -- we fix that in part 4.

💡 Your task: 💡

• Replace the Dialogflow widget with a simple input box and call the Dialogflow API yourself.

---

Part 3

💡 Your task: 💡

• Create your own Dialogflow agent.
• Adapt your solution from part 2 to talk to your new agent, instead of the provided agent.

---

Part 4

Your starting point:

• We use our client code from part 3, but we add the Python server back in.
  • The server is similar to the one in part1, but is meant to talk to our Dialogflow agent from part3.

💡 Your task: 💡

• Create a new endpoint in our Python server to answer our Dialogflow agent's question about an artist's top songs.
  • We use a minimal Spotify client on the server-side to get information about artists.

Acknowledgements 🙏

While putting this workshop together, I used a bunch of online resources including:

• W3 Schools
• Mozilla MDN Docs
• Stack Overflow
• Dialogflow Docs
• Spotify Developer Docs
• Flask Assistant Docs

And specific tutorials including:

• Dialogflow V1 API tutorial by Patrick Catanzariti
• Adding iframe with jQuery