Building an Audio Streaming App — Part 1

In this tutorial, we will be building a simple audio streaming app. Although not as robust and intricate, our project will mimic the basic features of the popular music sharing app SoundCloud. This is a good project to help us get familiar with CRUD, and will help you get a better understanding of how to use it to build more complicated projects in the future. Lets get started, shall we?

To view a video version, click below:

We are going to use standard tools & libraries on the front end such as Bootstrap, jQuery, Gulp, and of course, HTML/CSS. To save time from writing a full scale backend (with corresponding database, web framework, API, etc), we are going to use Turbo. Turbo is a great and easy way to store data and access it using conventional REST API protocols — the way the professionals do. This makes our practice app more realistic and better training for beginners.

You can sign up for an account to use Turbo by going to this page turbo360.co (it’s free).

Pre-Requisites:

Before we can dive in to the actual code, we need to install some tools. The first one is Gulp. To install gulp, enter the Terminal window and enter

$ sudo npm i -g gulp

followed by your password. Next, we need to install webpack. You can do that by entering the following code in your terminal window:

$ sudo npm i -g webpack 

Lastly, we need to install Turbo, we can do that by using typing:

$ sudo npm i -g turbo-cli 

Now, we should be ready to start.

Theme

If you go back to the Turbo website, you can download the necessary files to create the theme for the website. A link to download these files can be found here.

Project Time

Okay, now that we have everything we need to get started on the project, we can start working on making our site. First change your directory to your desktop using the terminal code:

$ cd desktop

and make a new Turbo project. You can make a new Turbo project through the command line by using the following command:

$ turbo new audio-stream

where audio-stream is the name of our project. Once its created change your directory into the new Turbo project by using the command:

$ cd audio-stream

Next, we need to install the dependencies this project will need. To do this, simply using the command

$ sudo npm install

The computer should do the rest. Now, while the computer is setting up our dependencies, head over to turbo360.co, so we can create the project there as well. Once you are logged in, you can click on the button that says “Create App”. It should pop up a little modal, which you can fill out with a title and description. Once your app is created, copy the App ID from the top left corner of the app overview page. Use the terminal to link your app by using the following command:

$ turbo app YOUR_APP_ID_HERE

Next, use the command

$ turbo devserver

to launch your server where our project will go. To check if everything has worked, go to localhost:3000 in your browser. If you see a page that looks like this:

You’ve done everything correctly so far.

Now, we are going install the theme. If we open up the audio-stream directory, we can see all the necessary base files the project uses. In order to install the theme, we must first move the unzipped theme folder into assets folder found in the audio-stream directory. Double click on the theme folder, and find the index.html file. Open that file with your browser, then navigate to the shopping cart page using the links on the nav-bar. We will be using this page as our homepage for the audio streaming project. It should look something like this:

Right now it doesn’t really look like a website designed to host music, but thats okay because we are going to change it up. Open up the shop-cart.html file in your favorite text editor to get started. Highlight the entire thing and copy it. Next, transfer the contents of that site you just copied into the index.html in the audio-stream directory, replacing the content that was there previously. Our goal here is to clone the shop-cart.html page onto the index.html page. However, we run into a problem here. There are files referenced in the html that are not currently in our assets folder, so we have to transfer the files from our theme assets folder into our audio-stream directory assets folder. To do this, simply duplicate the assets folder found in the theme directory, and move the css, and fonts folders into the audio-stream assets directory. Do the same thing with the img folder, except change its name to images before moving it over. With the js folder, simply take the files found in the theme directory and move it over to the js folder, that way we don’t remove any files we need later on. Once you’ve finished all that file moving, the correct files should correspond with the new html in the index file. To check you’ve done this successfully, run

$ turbo devserver

in the terminal, then check localhost:3000 in your browser. If your page looks similar to the shop-cart.html found in the theme files, you’ve done this step correctly. The only thing that is different is that we changed the name of the img folder to images, so we have to switch all the references to the img folder to its new name images. A quick way to do this is to hit command-option-f on your keyboard, which brings up the find and replace tool at the bottom of your text editor. Simply find all the instances where there is a reference to the /img/ folder, and replace them with /images/ instead. Once you’ve done that, you can reload the browser, and you should see all the images load. Now we have an exact copy of the shop-cart.html on our own server. Check the console to make sure we have no missing assets, and if the console is clean (No errors) You’re good to go.

Now, Turbo gives us a pre-configured gulp file that allows us to bundle our assets into a minimized package, so right now the theme has three css style sheets that we want to bundle into one. Head over to the gulpfile.js and find the css task which should look like this:

Now, we are going to add the three style sheets into the src that way we can minimize them into one. We can do that by updating the gulp css task with the following code:

Now our css task is ready, and we can delete the css links in our index.html page. If you run the server, it should look terrible now, because there is no styling. however, we can fix this by running the build script in the terminal using the following command:

$ npm run build

now we are going to use the style sheet found in the dist folder, so we can update our index.html with the correct style sheet using this piece of html:

<link href="/dist/css/style.min.css" rel="stylesheet" />

That should now restore our style sheets, so when we go back to the dev server, the styles are back. We just did this because it’s a more optimal and efficient way to code.

If you noticed, the glyph icons in the bottom right corner are missing, because we did not copy the fonts over to the dist folder. You can actually check the console, which will tell you they are missing. To fix this, we need to copy the fonts into the dist directory using a task in the gulp file. Underneath the copy-images task in the gulp file, we’ll create an identical task that will copy the fonts. It should look like this:

Everything is identical to the copy-images task, expect the references to the image folder is replaced with the font folder. After you’ve created the task, we need to add it to the global tasks at the bottom, so it will execute when we run the gulp file. simply just add ‘copy-fonts’ into the arrays at the bottom. Now the fonts should be copied over. If you stop your server, and run the build command in the terminal, you should see the gulp file is now running the copy-fonts task along with the other tasks. Similar to the css folder in the dist directory, the fonts folder now appears there as well. Run the devserver again, and you should now see the glyphs are there.

Next, we need to minify the javascript files. Similar to what we did to minify the css files, we need to update the gulp task that minifies the javascript. Go into your gulpfile.js, and update the task with the correct js file links found at the bottom of the index html page. Your new js gulp task should look something like this:

You can see we’ve added the js links to the task, that way they are optimized before we run the server. NOTE, the thesaas.js file is not the already minified version (thesaas.min.js), that way if we need to edit something in that file, we can do it in an easy, orderly way, rather than having to search through the minified version. Once you’ve updated the gulpfile, run the build command again.

$ npm run build

If you get an error that looks like this:

its because there is a broken font somewhere in one of the css files. To fix this, simply look for the imported font in one files from the css folder (Hint: its in thesaas.css) and simply delete the import from the file. It’s right at the top of the file, so it shouldn’t be hard to miss. Once removed, run the build again. If no errors occur, you’ve done everything correctly. We don’t want to lose the font, so we’ll add it in our index.html file. Add the link that looks like this:

Now the font is back in business. Okay, remember how we found and replaced the /img/ directory to the /image/ directory so that our images would show up correctly? We have to do that again. Becuase the server takes the images from the dist assets instead regular assets, we simply just have to find all the references to assets/image/ and replace them with /dist/images/. Run the build on more time, and then run the devserver again using

$ turbo devserver

Now make sure that everything looks good over on localhost:3000. Once everything looks good in the browser and your console is clean with no errors. We can connect our Turbo app online to our console using the command:

$ turbo app YOUR_APP_ID_HERE

and then deploy it using

$ turbo deploy

You can see it online from the staging url which shows up in your console. It should look something like this:

Once you’ve done this, you can check the link in your browser to see your project online. If everything runs correctly and there are no errors in the console, you’ve done everything up to this point correctly. If not, here is the code to the index.html:

and the gulp file:

Before we can start actually programming the code for audio streaming we’re just going to get rid of the banner at the top of the page. To do this, just delete the contents of the header tag in the index.html page. Then run the devserver again, and on localhost:3000, it should be gone.

Programming

In the last part, we set up the theme and the server and made sure everything was running error-free. Now, we are going to start actually adding the features that make this site an audio streaming service. To watch a video version of this part of the tutorial, click the link below.

The first problem we encounter is since we deleted the header, we can’t see the nav-bar at the top. It shows up only when we scroll down. So what we need to do is copy its class name (“body-scroleld”) and find the jQuery that is affecting it. Find thesaas.js file in the /assets/js/ folder, and find the function that looks like this:

To fix the problem thats occuring with the jQuery, simply comment out the whole function (If you don’t know how to do this, just put // in the beginning of each line). Run the devserver again, and the navbar shouldn’t be toggled by scrolling anymore. Go to localhost:3000 and check that the navbar stays at the top.

We’re going to get rid of the useless nav links from the theme as we only need the home link. To get rid of the rest, just delete the contents frmo the top-bar section of the html so that the div with the class “topbar-right” looks like this:

We’re going to add some more nav links, so just copy and paste the nav-item li element two times. Make one a contact link, and the other an about link. Just replace the href and the inside content of the tags with the corresponding links and info, so it should look like this:

Run the devserver again, and you should see the updated links in the nav.

Now for the fun part. We are going to create our own module. So head over to the app.js in the /assets/js/ folder in your text editor so we can start creating. Were going to create a function that executes immediately, that way we can write all of code inside. Our function should look like this:

By wrapping it inside the code, we can use whatever variable names we want without having to worry that they collide with any other variables in any other files.

To make sure it works, we are going to just run a simple console log to check that everything is working. We can do that by updating our file to look like file to look like this:

run the build again by using this command in the terminal:

$ npm run build

After it finishes running, we should see our new code in the app.min.js file in the dist folder. We want to go back to our index.html file, and import the app.min.js file so that it runs when we run the server. Just add the following script element to the bottom of the index.html page along with other js script.

run the build and the devserver, then check the console on localhost:3000. You should see the console log that we just implemented. Last but not least, we want to add the Turbo SDK into the index.html so that everything we do with Turbo works properly. To do this, look into the documentation file that comes with the audio-stream directory, Scroll down until you find the script tag that has the Turbo link, and copy and paste it into your index.html file at the bottom with the other js links. This gives us the connection to our Turbo project. Now we are good to go. The next thing we are going to is create the actual data. We are going to create a user sign up form on the page where the checkout box once was. We are first going to delete everything thats there already. Find the div in the index.html page that has the class “cart-price” and remove everything until it looks like this:

Now, lets add some inputs for the login info.

Lets connect these to our actual code. Head back to the app.js file, and connect to the Turbo. We can do this by referencing Turbo like this:

Next, we’re going to grab the first input field. We’re going to use jQuery to add a click handler to our #button-join to link our inputs with a visitor object that parses through each input field and assigns it to a variable. We’re also going to add some validation, that way no one can create a user without entering any inputs. Finally, we’ll link the user’s information to the Turbo database. We can do this all by using the following code:

The code at the bottom gives us a callback, that shows us that the user has been created, with the related info to that user. To run, and instead of having to run the build every time we make a change we can run the

$ gulp

command in the terminal that will automatically update any changes we make

Hit control c to turn off the devserver, because we’re going to create a new page now with the terminal. To do this, run the command:

$ turbo page admin

That will create a new page called admin.html. This is all created through the Turbo scaffold. In the next tutorial, we’ll create the new admin page and work on creating and uploading the audio tracks.