Crea un Modo DEMO para tu Aplicación - FACIL

▶

Te voy a mostrar los pasos que estoy siguiendo para crear un modo demo (o modo demostración) en una aplicación. Esto resulta útil si quieres presentar tu proyecto a un usuario final, ya sea un cliente o cualquier otra persona interesada.

Crea un modo demo de cualquier proyecto

La estructura que voy a explicar la puedes aplicar a cualquier tecnología.
En este caso estoy usando Laravel, pero lo mismo funcionaría en otros entornos.

Lo importante aquí es definir alguna variable de entorno personalizada:

• En Python, Node o PHP se puede hacer fácilmente.
• Incluso en Flutter se puede manejar con constantes.
• Variable de entorno APP_DEMO

.env

APP_DEMO=true

Crea una variable llamada APP_DEMO, que indica si la aplicación está en modo demo o no.

¿Para qué sirve un modo demostración?

Creo que la idea es clara: cuando tienes tu proyecto y quieres presentarlo a un usuario final.
En mi caso, ese usuario final eres tú. En la descripción del video te dejo enlaces a aplicaciones en modo demo que estoy subiendo para que las consultes.

En tu caso puede ser, por ejemplo, una tienda en línea que deseas mostrar a un cliente. En vez de enviarle imágenes o publicaciones, le das acceso a una demo real donde pueda probar la aplicación personalmente.

Si es público, como en mi caso, es necesario bloquear ciertas operaciones para evitar que eliminen registros o modifiquen cosas que no corresponden.

¿Qué diferencia a una aplicación normal de una de demo?

Básicamente que en la demo:

• Están bloqueadas ciertas operaciones, como crear, eliminar o modificar.
• Se evita que alguien suba información indebida o no autorizada.
• En mi caso, también bloqueo el registro de usuarios y el acceso al dashboard autenticado, dejando únicamente datos de prueba disponibles.
• Uso de la variable en toda la app.

La variable APP_DEMO la aplico en varias partes de la aplicación; por ejemplo:

function delete(Category $category)
{
    session()->flash('status', __("Delete successfully."));
    if (!env('APP_DEMO'))
        $category->delete();
    return $this->redirect(url()->previous());
}

Ejemplo: 

• En un controlador evito que se haga un upload.
• En el caso de los pagos, simplemente devuelvo un pago simulado.
• Así bloqueo operaciones sensibles sin afectar el resto del flujo.

Cuando la aplicación no está en modo demo, el sistema funciona normalmente.

En modo demo también aproveché para mostrar información adicional, como los datos del usuario autenticado:

layouts/master.blade.php

    @if (env('APP_DEMO'))
        @guest
            <div class=" max-w-96 m-4">

                <div class="mycard mx-auto">
                    <ul>
                        <li>User Test: </li>
                        <li>User: user@user.net</li>
                        <li>Password: password</li>
                    </ul>
                </div>
            </div>
        @endguest

        @auth
            <div class=" max-w-96 m-4">
                <div class="mycard mx-auto">
                    <ul>
                        <li><a href="/dashboard/category">Dashboard</a></li>
                    </ul>
                </div>
            </div>
        @endauth
    @endif

Por ejemplo, en el dashboard, aunque intentes modificar datos, los cambios no se guardarán gracias a la restricción.

Si quito el modo demo, la aplicación vuelve a funcionar con normalidad.

¿Por qué variable de entorno y no configuración?

Decidí usar una variable de entorno en lugar de una configuración. La ventaja es que:

• Si no está definida, el sistema sigue funcionando normalmente.
• Si está definida, activa automáticamente el modo demo.
• Es práctico y evita complicaciones extra.

Middleware como alternativa

En Laravel también se podría crear un middleware para bloquear directamente todas las operaciones de tipo POST o PUT.

El detalle es que en algunos casos Laravel maneja procesos internos que no trabajan directamente con esos métodos, por lo que preferí hacerlo manualmente en cada punto.

Aun así, sería una opción más limpia en ciertos escenarios.

Conclusión

El modo demo es básicamente un bloqueo de operaciones críticas mientras permites mostrar las funcionalidades principales de la aplicación.

Con pocos pasos podemos crear un modo demo en Django:

1. Configuración/variable de entorno.
2. Bloquear operaciones sensibles.
3. Mostrar información del usuario demo.

De esta forma puedes presentar tu proyecto sin correr riesgos de que alguien modifique datos reales.

Modo DEMO en Django

▶

Primer paso: Configuración

Todo comienza creando una variable de entorno o configuración.
En Django, a diferencia de otros frameworks como Flask o FastAPI, no siempre tenemos un archivo de entorno por defecto, pero podemos configurarlo fácilmente.

Lo importante es tener una variable que podamos consultar a lo largo de todo el proyecto.

settings.py

DEMO = True

Segundo paso: bloquear operaciones

Dependiendo del propósito de tu demo, tendrás que bloquear algunas operaciones:

• Crear
• Actualizar
• Eliminar

Una forma elegante de hacerlo es mediante un middleware, que intercepte peticiones POST o PUT. Por ejemplo, dejar pasar el login, pero bloquear el resto.

En mi caso, también lo he manejado con condicionales que verifican si estamos en modo demo, y de ser así, no permiten modificar nada.

Por ejemplo, en Django Admin, podemos configurar algo como:

admin.py

from django.contrib import admin

from django.contrib import messages

from .models import Element, Category, Type

# Register your models here.


from django.conf import settings


if settings.DEMO:
    class ReadOnlyAdmin(admin.ModelAdmin):
        """
        Admin que permite navegar, abrir formularios y mostrar botones,
        pero NO guarda, crea ni elimina nada en la base de datos.
        """
        def save_model(self, request, obj, form, change):
            messages.warning(
                request,
                "Este modelo es de solo lectura. Los cambios no se guardaron."
            )

        def delete_model(self, request, obj):
            messages.warning(
                request,
                "Este modelo es de solo lectura. La eliminación no se realizó."
            )

        def delete_queryset(self, request, queryset):
            messages.warning(
                request,
                "Este modelo es de solo lectura. No se eliminaron registros."
            )
    admin.site.register(Element, ReadOnlyAdmin)
    admin.site.register(Category, ReadOnlyAdmin)
    admin.site.register(Type, ReadOnlyAdmin)
else:
    admin.site.register(Element)
    admin.site.register(Category)
    admin.site.register(Type)

Tercer paso: presentar información al usuario

Otra parte importante es mostrar información del usuario de demo:

• Acceso a un usuario autenticado.
• Permitir compras de prueba.
• Mostrar dashboards o paneles con datos de ejemplo.

En el caso de Django Admin no lo veo tan necesario, ya que por defecto los usuarios normales no pueden entrar al panel, pero en un proyecto más personalizable (como una tienda), sí es recomendable.

Implementación en Django

En Django podemos manejar el modo demo en dos capas:

• En la vista (controladores):
  Consultamos la variable de entorno/configuración y bloqueamos operaciones según corresponda.

En los templates:

• Aquí tenemos dos opciones:
  • Crear una etiqueta personalizada.
  • Usar un context processor para definir variables globales.

Etiqueta personalizada

Creamos una etiqueta en el proyecto, registramos la configuración y retornamos un valor booleano.
En el template, casteamos ese valor en una variable (demo) y usamos condicionales para mostrar u ocultar bloques de información:

<APP>/templatetags/modo_demo.py

from django import template
from django.conf import settings

register = template.Library()

@register.simple_tag
def is_demo():
    """
    Verifica el valor de DEMO en settings y lo retorna.
    Devuelve False por defecto si no se encuentra.
    """

    return getattr(settings, 'DEMO', False)

En el template cargamos la etiqueta:

{% load modo_demo %}
{% demo as is_demo %}
{% if is_demo %}
  <div>
      Usuario demo: demo / demo123  
      <a href="{% url 'login' %}">Iniciar sesión</a>
  </div>
{% endif %}