Music streaming app with Django + vuejs + Django rest framework + jwt

Posted by Adarshreddy Adelli

Saturday, August 6, 2022

This post will help you to build a music API that serves the music. I will be choosing the Django rest framework because it is easy to build a Rest API and well-suited for Django. By the end of this tutorial, you will be having a music API with user management (login, registration) and JSON Web Tokens (JWT) to improve security. If you are barely new to API development I  would suggest you read this post. 

Let's get started :

For this project, I am using Python 3.6.9 and Django version 3.0.8.
Let's create a virtual environment.

 python3 -m venv env 

Then activate the virtual environment.

source env/bin/activate

Now Install  Django, DRF (Django Rest Framework)

pip install Django==3.0.8
pip install djangorestframework

Let's create a project.

django-admin startproject api

We will be using different apps for music files and Authentication. This helps us to develop the projects faster and also helps in implementing new features, without affecting the rest.

django-admin startapp music && django-admin startapp users

Now add these to INSTALLED APPS in api/settings.py file

rest_framework,
rest_framework.authtoken,
music,
users

Let's add music app URLs to api with versioning.

Music API:

Navigate to the Music app and add music models.

Register the same models for admin.py

Next, we have to serialize these models. Serializers allow complex data and model Instances to python data types that can be easily transmitted through JSON or XML. Serializers also provide great control to manipulate our output responses.


The views are processed using this serializer (read about serializers and its types here). Open the views.py file and add get and post request views.

Here queryset takes all the objects present in the Songs model and process to list view. Search fields add searching capability to the view. here we search the songs using song title. I commented on Permission classes that restrict the songs view for logged-in users only, which will be uncommented after implementing authentication.
Now let's add URLs to these views

Let's create a default folder for media (songs, user avatars ). Add these to api/settings.py.

MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(BASE_DIR, "media_root")

This makes media_root as the base directory for every media element.
Now let's create a superuser.

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

After creating a superuser, run our app using

python manage.py runserver

Now add some sample songs using django admin (127.0.0.1:8000/admin/music/songs/)
After adding navigate to songs endpoint to view the songs
http://127.0.0.1:8000/api/v1/songs/

In the next post, we will add authentication and security using jwt. Stay connected ...  
 PART-2 

Keep loving bugs! Have a good day

Adarshreddy Adelli Saturday, August 6, 2022 Django Nodejs python vuejs web development