Digimon API With Call With Python
Mini project application to fetch data from Digimon API, making dynamic and incorporating events so that the user can interact with the DOM. To consume data from API used the Fetch function in JavaScript, and also with the construction of Python query. Go to API page
- To realize requests with API Digimon used the "requests" library, to read more you should read the documentation: https://pypi.org/project/requests
- To display the data used paginator
Show Code
Method "index" to retrieve data from API with "requests" library, and display data using django.core.paginator, in views.py application directory.
from django.shortcuts import render, get_object_or_404
from .models import Digimon
from django.http import JsonResponse, HttpResponse
import requests
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
from .paginations import CustomPagination
import json
import os
from django.views.decorators.csrf import csrf_exempt
from pygments import highlight
from pygments.lexers import PythonLexer
from pygments.formatters import HtmlFormatter
# Create your views here.
def index(request):
digimons = Digimon.objects.all()
response = requests.get('https://digimon-api.vercel.app/api/digimon')
data_api = response.json()
paginator = Paginator(data_api, 12)
page = request.GET.get('page')
try:
data_list = paginator.page(page)
except PageNotAnInteger:
data_list = paginator.page(1)
except EmptyPage:
data_list = paginator.page(paginator.num_pages)
return render(request, "digidesk/index.html", {'page': page, 'digimons': digimons,
'data_api': data_list})
def javascript_calls(request):
with open('./mparraf/static/js/digidesk.js', 'r') as file:
content = file.read()
context = {'javascript_code': content }
return render(request, "digidesk/javascript_calls.html", context)
def python_calls(request):
module_dir = os.path.dirname(__file__)
parent_directory = os.path.dirname(module_dir)
with open(os.path.join(module_dir, 'views.py'), 'r') as file:
content = file.read()
with open(os.path.join(parent_directory, 'portfolio/templates/digidesk/index.html'), 'r') as file:
content2 = file.read()
views = content
template = content2
context = {'views': views, 'template': template }
return render(request, "digidesk/python_calls.html", context)
@csrf_exempt
def save_digimon(request):
params = request.POST
digi = Digimon()
digi.name = params["name"]
digi.level = params["level"]
digi.image = params["image"]
try:
digi.save()
except Exception as err:
print(err)
print("Error to try save digimon in database")
return HttpResponse(status=200)
{% extends 'base.html' %}
{% load bootstrap5 %}
{% load static %}
{% bootstrap_css %}
{% block content %}
<br>
<br>
<section class="container-section mb-4">
<div class="container-fluid">
<div class="row g-0">
<div class="portfolio-box-caption">
<div class="row">
<h1>Digidesk</h1>
</div>
</div>
</div>
<hr>
<div class="container">
<p>
Mini project application to fetch data from Digimon API, making dynamic and incorporating events so that the user can interact with the DOM.
To consume data from API used the Fetch function in JavaScript, and also with the construction of Python query.
<a href="https://digimon-api.vercel.app/">Go to API page</a>
</p>
</div>
</div>
</section>
<section class="container-section mb-4">
<div class="container-fluid">
<div class="row g-0">
<div class="portfolio-box-caption">
<div class="row">
<h2>Retrieve Data From API With Views Django</h2>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row mt-3">
{% for item in data_api %}
<div class="col col-sm-6 col-md-3 ">
<div class="card text-dark bg-light mb-3" style="max-height: 100vh; overflow:auto;">
<div class="card-header">
<h3 class="card-title">{{ item.name }}</h3>
</div>
<div class="body">
<img class="card-img-top img-fluid rounded mx-auto d-block" style="max-height:300px;max-width:300px" src="{{ item.img }}">
<p class="card-subtitle mb-2 text-muted">Level: {{ item.level }}</p>
<button data-id="{{ item.name }}" class="sync btn btn-secondary dblock mt-3">Sincronizar with Database</button>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row d-flex mb-1">
{% if data_api.has_previous %}
<buttom type="button" class="btn btn-outline-secondary"><a href="?page={{ data_api.previous_page_number }}#digimons-list">« PREV </a></buttom>
{% endif %}
</div>
<div class="row d-flex mb-4">
{% if data_api.has_next %}
<button class="btn btn-outline-secondary"><a href="?page={{ data_api.next_page_number }}#digimons_list"> NEXT »</a></button>
{% endif %}
</div>
</div>
</div>
</section>
<section class="container-section mb-4">
<div class="container-fluid">
<div class="row g-0">
<div class="portfolio-box-caption">
<div class="row">
<h2>Display Data With Fetch JavaScript Funcion</h2>
</div>
</div>
</div>
<hr>
<div class="container mt-6">
<div class="container" id="contenido-by-name">
</div>
<div class="row justify-content-center">
<div class="col-8">
<div class="card text-center" id="digimon_detail">
</div>
</div>
</div>
</div>
</section>
<section class="container-section mb-4">
<div class="container-fluid">
<div class="row g-0">
<div class="portfolio-box-caption">
<div class="row">
<h2>Display Digimons Save in DataBase</h2>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row mt-3">
{% for item in digimons %}
<div class="col col-sm-6 col-md-3">
<div class="card text-dark bg-light mb-3" style="max-height: 100vh; overflow:auto;">
<div class="card-header">
<h3 class="card-title">{{ item.name }}</h3>
</div>
<div class="body">
<img class="card-img-top img-fluid rounded mx-auto d-block" style="max-height:300px;max-width:300px" src="{{ item.image }}">
<p class="card-subtitle mb-2 text-muted">Level: {{ item.level }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<section class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'js_digimons' %}">API Calls with JavaScript</a></li>
<li class="breadcrumb-item"><a href="{% url 'py_digimons' %}">API Calls with Python</a></li>
<li class="breadcrumb-item"><a href="#"></a>API Calls connect with Python</li>
</ol>
</nav>
</section>
{% endblock %}
{% block js %}
<script src="{% static 'js/digidesk.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock %}