An Alexa Skill that lets you create and customize a personal playlist of audio streams that can be easily managed through a web page. Simply say, Alexa, ask juke box to play some blues to listen. You can skip to the next track, or pause the audio at any time and the skill will keep progress of your streams.
To get started, you will need to set up Firebase, deploy the site on Vercel, and create the Alexa Skill. While these steps may sound complicated, they can easily be completed in about 5 minutes. Just follow the steps and click and copy as needed. Let's get started!
Step 1 - Setup Firebase
Firebase enables data storage and authentication, if needed for our website and their free tier is very generous. You'll need to create a project, add a web app and enable the database.
a. Create New Firebase Project
Create a new Firebase Project at console.firebase.com.
b. Create a Web app in your project
Next step is to create a web app. Click on </> icon to select the Web as the platform.
Click on Add App. You can name it anything you want, like MyWebsite
When you create a new Web app, Firebase will create credentials that you can use to access the app from your website. Note the API Key and Project ID, you'll need it when you deploy the website.
c. Create database
Next we need to initialize the Firestore database in our project. We will be storing all our data in Firebase and that requires you to create a database. You don't need to add any data, just initialize it so Firebase will provision it for you.
Click on Firestore Firebase and then click on Create database to enable it in your project.
When you create a new Web app, Firebase will create credentials that you can use to access the app from your website. Note the API Key and Project ID, you'll need it when you deploy the website.
Step 2 - Deploy Site On Vercel
Vercel is a great place to host the website as it is fast and enables deploying Nuxt 3 apps with zero configuration.
Just click on the button below to deploy the site on Vercel. Enter the Firebase Project ID and API Key as environment variables.
Note the Github repository you create. The Alexa Skill Code required for the next step is in the root of that repository.
Step 3 - Create Alexa Skill
Last step is to create the Alexa Skill. Go to Alexa Developer Console to create an Alexa skill.
Click Create skill and give your skill a name, like Juke Box. On the next screen, choose Other as the type of experience and Custom as model.
In the next screen, choose Start from Scratch as the template.
On the next screen, click Create Skill to create the Alexa Skill. We will add the code once the skill is created.
Once the skill is created, click on Code on the top menu.
When the code page opens, click on Import code.
The zip file is called AlexaSkillCode.zip and is in the root folder of the Github repository you created while deploying your site to Vercel. Download it and then upload the zip file to Alexa.
