Crear una aplicación de contador de palabras usando Django

En este artículo, vamos a crear una herramienta simple que cuente una cantidad de palabras en un texto usando Django . Antes de sumergirse en este tema, debe tener algunos conocimientos básicos de Django.

Consulte el siguiente artículo para conocer los conceptos básicos de Django.

• Fundamentos de Django
• ¿Cómo crear un proyecto básico usando MVT en Django?

Ahora avanzando para hacer nuestro contador de palabras, primero, necesitamos crear una función donde podamos escribir la lógica para contar palabras. 

vistas.py

from django.shortcuts import render
  
  
# defining function for wordcounter
def counter(request):
    # checking if method is POST or not
    if request.method == 'POST':
  
        # taking text input
        text = request.POST['texttocount']
  
        # checking weather text is empty
        # or not
        if text != '':
  
            # splitting the text and taking length
            # of that
            word = len(text.split())
  
            # defining boolean so that we can keep
            # track of process later
            i = True
  
            # returning HTML page with data, if calculated
            # successfully
            return render(request, 'counter.html',
                          {'word': word, 'text': text, 'i': i, 'on': 'active'})
  
        else:
            # returning HTML page without data, if any
            # error occurs
            return render(request, 'counter.html', {'on': 'active'})
  
    else:
        # returning HTML page if request.method is not POST
        return render(request, 'counter.html', {'on': 'active'})

 Explicación:

Primero, creamos una función de contador que recibirá la entrada de texto desde la interfaz. Después de eso, comprobará si el texto está vacío o no. Luego dividirá las palabras del texto y medirá su longitud. Además, almacene esa longitud en una variable llamada «palabra». También hemos creado un booleano que se usará para realizar un seguimiento del proceso más adelante. Si este proceso se completa con éxito, devolverá una página HTML con datos almacenados en Word & Text. Y si el proceso no se puede completar con éxito, devolverá la misma página HTML sin ningún dato.

Después de crear la función, necesitamos definir una URL para eso. Usaremos http://localhost:8000/counter aquí. Para eso abre tu carpeta urls.py y escribe el siguiente código.

from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
  
urlpatterns = [
    path('counter',views.counter, name='counter'),
]

  Después de esto, necesitamos crear una página HTML para eso. Aquí puede usar sus habilidades de diseño y preparar su propio diseño y nombrarlo counter.html. Aquí le mostraremos la lógica que puede utilizar como frontend. 

En primer lugar, comprobaremos que Boolean es verdadero o falso para saber si el proceso se completó con éxito o no. Si eso es cierto, entonces podemos seguir adelante. Más adelante, usaremos la palabra variable para imprimir la salida con la ayuda del formato Jinja. Luego crearemos un formulario para tomar datos del usuario que se enviarán dentro de nuestra función de contador. Como estamos usando el método POST para manejar las requests, tenemos que darle {% csrf_token %} a eso.

contador.HTML

{% if i %}
<div class="mb-2" style="border-style: groove;border-radius: 10px;">
  <div class="card-header">
    <p class="m-0" style="font-size: 20px;">{{word}} Word's in that text</p>
  
  
  </div>
</div>
{% endif %}
  
<div class="col-12 pb-3" style="background-color:  #c2d6d6; border: 2px; border-style: groove; border-radius: 10px;">
  <form action="counter" method="POST"> {% csrf_token %}
    <div class="form-group">
      <label for="text1">Paste you're text</label>
      <textarea class="form-control" placeholder="Paste you're text here to count word and character" 
                name="texttocount" id="text1" rows="8" style="background-color: #f0f5f5;">{{text}}</textarea>
    </div>
      
    <!-- ads section start-->
    <div class="text-center">
      ads
    </div>
      
    <!-- ads section end -->
    <div class="form-group text-center">
      <button type="submit" class="btn btn-primary w-25" >Run Counter</button>
    </div>
  </form>
</div>

Producción: