Browsable API interface in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable the browsable API interface in Django REST Framework settings.

Django

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': [
        'rest_framework.renderers.JSONRenderer',
        [1]
    ]
}

Drag options to blanks, or click blank then click option'

A'rest_framework.renderers.AdminRenderer'

B'rest_framework.renderers.XMLRenderer'

C'rest_framework.renderers.BrowsableAPIRenderer'

D'rest_framework.renderers.TemplateHTMLRenderer'

Attempts:

3 left

💡 Hint

Common Mistakes

Using JSONRenderer only disables the browsable interface.

Choosing XMLRenderer or AdminRenderer does not enable the browsable API.

To enable the browsable API interface, you add 'rest_framework.renderers.BrowsableAPIRenderer' to the DEFAULT_RENDERER_CLASSES list in your settings.

2fill in blank

medium

Complete the code to import the browsable API renderer in your Django REST Framework views.

Django

from rest_framework.renderers import [1]

Drag options to blanks, or click blank then click option'

AJSONRenderer

BBrowsableAPIRenderer

CTemplateHTMLRenderer

DXMLRenderer

Attempts:

3 left

💡 Hint

Common Mistakes

Importing JSONRenderer only provides JSON output, no browsable interface.

TemplateHTMLRenderer is for HTML templates, not the browsable API.

You import BrowsableAPIRenderer from rest_framework.renderers to use it in your views or settings.

3fill in blank

hard

Fix the error in the view to enable the browsable API renderer.

Django

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.renderers import JSONRenderer, [1]

class HelloView(APIView):
    renderer_classes = [JSONRenderer, BrowsableAPIRenderer]

    def get(self, request):
        return Response({'message': 'Hello, world!'})

Drag options to blanks, or click blank then click option'

AAdminRenderer

BTemplateHTMLRenderer

CXMLRenderer

DBrowsableAPIRenderer

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import BrowsableAPIRenderer causes a NameError.

Importing the wrong renderer class disables the browsable interface.

The view must import BrowsableAPIRenderer to use it in renderer_classes. This enables the browsable API interface for this view.

4fill in blank

hard

Fill both blanks to set the default renderer classes including the browsable API in Django settings.

Django

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': [
        [1],
        [2]
    ]
}

Drag options to blanks, or click blank then click option'

A'rest_framework.renderers.JSONRenderer'

B'rest_framework.renderers.TemplateHTMLRenderer'

C'rest_framework.renderers.BrowsableAPIRenderer'

D'rest_framework.renderers.XMLRenderer'

Attempts:

3 left

💡 Hint

Common Mistakes

Using TemplateHTMLRenderer or XMLRenderer instead of BrowsableAPIRenderer.

Forgetting to include JSONRenderer disables JSON responses.

The default renderer classes should include JSONRenderer for JSON output and BrowsableAPIRenderer for the browsable API interface.

5fill in blank

hard

Fill all three blanks to customize a view to support JSON and browsable API renderers with a simple GET response.

Django

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.renderers import [1], [2]

class CustomView(APIView):
    renderer_classes = [[3]]

    def get(self, request):
        return Response({'status': 'success'})

Drag options to blanks, or click blank then click option'

AJSONRenderer

BBrowsableAPIRenderer

CJSONRenderer, BrowsableAPIRenderer

DTemplateHTMLRenderer

Attempts:

3 left

💡 Hint

Common Mistakes

Importing both renderers as one string causes syntax errors.

Setting renderer_classes to only one renderer disables the other output format.

You import both JSONRenderer and BrowsableAPIRenderer and set renderer_classes to include both so the view supports JSON and browsable API output.

Practice

1. What is the main purpose of the Browsable API interface in Django REST Framework?

easy

A. To secure the API with authentication

B. To replace the need for writing API views

C. To provide a web page to explore and test API endpoints easily

D. To automatically generate database tables

Solution

1. Step 1: Understand the browsable API feature

   The browsable API is a web interface that lets users explore and test API endpoints without extra tools.

2. Step 2: Identify its main use

   It helps developers and beginners interact with the API easily through a browser, making testing and debugging simpler.

3. Final Answer:

   To provide a web page to explore and test API endpoints easily -> Option C

4. Quick Check:

   Browsable API = Web interface for API testing [OK]

Hint: Browsable API means web page for API testing [OK]

Common Mistakes:

• Thinking it replaces API views
• Confusing it with database management
• Assuming it handles security automatically

2. Which of the following is required to enable the browsable API interface in a Django REST Framework project?

easy

A. Write custom HTML templates for API views

B. Add rest_framework to INSTALLED_APPS

C. Install a separate package for browsable API

D. Disable authentication classes

Solution

1. Step 1: Check default setup for browsable API

   The browsable API is enabled by default when rest_framework is added to INSTALLED_APPS.

2. Step 2: Understand what is not needed

   You do not need custom templates or extra packages; authentication can remain enabled.

3. Final Answer:

   Add rest_framework to INSTALLED_APPS -> Option B

4. Quick Check:

   Enable browsable API = Add rest_framework app [OK]

Hint: Browsable API works by adding rest_framework app [OK]

Common Mistakes:

• Thinking custom templates are needed
• Assuming a separate package is required
• Disabling authentication to enable browsable API

3. Given this Django REST Framework view code, what will you see when you visit the URL in a browser?

from rest_framework.views import APIView
from rest_framework.response import Response

class HelloView(APIView):
    def get(self, request):
        return Response({"message": "Hello, world!"})

medium

A. A JSON response with {"message": "Hello, world!"} and a browsable API interface

B. A plain HTML page with no JSON data

C. A 404 Not Found error

D. A server error due to missing template

Solution

1. Step 1: Analyze the APIView behavior

   The view returns a JSON response with the message "Hello, world!" on GET requests.

2. Step 2: Understand browsable API output

   Because Django REST Framework is used with APIView, the browsable API interface will show JSON data plus a web interface for testing.

3. Final Answer:

   A JSON response with {"message": "Hello, world!"} and a browsable API interface -> Option A

4. Quick Check:

   APIView + DRF = JSON + browsable API [OK]

Hint: APIView returns JSON plus browsable API page [OK]

Common Mistakes:

• Expecting plain HTML instead of JSON
• Assuming missing template causes error
• Confusing 404 error with missing URL

4. You added a custom APIView but the browsable API interface shows a blank page with no JSON or form. What is the likely cause?

medium

A. You used render() instead of Response() in the view

B. You did not add rest_framework to INSTALLED_APPS

C. You disabled the browsable API in settings

D. You forgot to return a Response object from the view method

Solution

1. Step 1: Check the view method return type

   The browsable API requires the view to return a Response object from rest_framework.response to render data properly.

2. Step 2: Understand impact of missing Response

   If the view returns nothing or a wrong type, the browsable API cannot display JSON or forms, resulting in a blank page.

3. Final Answer:

   You forgot to return a Response object from the view method -> Option D

4. Quick Check:

   Missing Response return = blank browsable API [OK]

Hint: Always return Response() in APIView methods [OK]

Common Mistakes:

• Using Django's render() instead of DRF Response()
• Not adding rest_framework app (causes different error)
• Disabling browsable API without realizing

5. You want to customize the browsable API interface to add a new header and change the form layout for a POST endpoint. Which approach is correct?

hard

A. Override the renderer_classes in your view to use a custom renderer subclassing BrowsableAPIRenderer

B. Modify the Django settings.py to add new HTML templates for the browsable API

C. Change the urls.py to point to a custom HTML page instead of the API view

D. Add JavaScript in the API response to modify the browsable API page

Solution

1. Step 1: Understand how browsable API customization works

   The browsable API uses renderer classes to generate its HTML interface. Customizing it requires subclassing BrowsableAPIRenderer.

2. Step 2: Apply customization in the view

   Override renderer_classes in your API view to use your custom renderer that adds headers or changes form layout.

3. Final Answer:

   Override the renderer_classes in your view to use a custom renderer subclassing BrowsableAPIRenderer -> Option A

4. Quick Check:

   Customize browsable API = custom renderer class [OK]

Hint: Customize browsable API via renderer_classes override [OK]

Common Mistakes:

• Trying to change settings.py templates (not supported)
• Replacing URLs with HTML pages (breaks API)
• Injecting JavaScript in API response (ineffective)