A good way to promote something on a website is to make it appear as a modal on several pages. It can appear after a few seconds or right after the user opens the site. It’s very handy when you can do that easily from the CMS, instead of relying on the development team to build it every time. Wagtail does not come with this feature by default, but it's not very difficult to imagine one. During my research, I found Codered's Modal Streamfield, which allows the user to define a popup directly on the page. It’s good, but it does not fit my needs since I have to create many of them if I want the same popup on many pages of my site. So I designed one according to the following needs:

• I should be able to create it once.

• I should be able to choose one or many pages where it will appear.

• I should be able to make it appear after a certain time.

• I should be able to create one but not display it.

• I should allow the user to close a modal, and it doesn’t appear anymore during their session.

• I should be able to edit its content using streamfields.

• Not allow many popups on the same page to display on top of each other.

Storing the modal data

To do all these, I need a model to store the content of a popup, then I need to display it in the admin panel. So I created a Snippet and added a Snippet view to control how it displays in the admin. The following code shows how to do that.

class PageModal(models.Model):
    DEPTH_CHOICES = [
        (1, _('Direct children only')),
        (2, _('Children and grandchildren')),
        (3, _('Up to 3 levels deep')),
        (-1, _('All descendants (unlimited depth)')),
    ]

    title = models.CharField(
        verbose_name=_('Title'),
        max_length=255
    )

    content = StreamField([
        ('heading', CharBlock(label=_('Heading'))),
        ('paragraph', RichTextBlock(label=_('Paragraph'))),
        ('link', URLBlock(label=_('Link'))),
    ], use_json_field=True, verbose_name=_('Content'))

    # Modal display settings
    display_delay = models.PositiveIntegerField(
        default=0,
        verbose_name=_('Display delay'),
        help_text=_("Delay in seconds before showing the modal")
    )

    cta_text = models.CharField(
        verbose_name=_('Call to action text'),
        max_length=50,
        blank=True
    )

    cta_page = models.ForeignKey(
        'wagtailcore.Page',
        verbose_name=_('Call to action page'),
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+',
    )

    cta_link = models.URLField(
        verbose_name=_('Call to action external link'),
        blank=True
    )

    # Page association
    pages = models.ManyToManyField(
        'wagtailcore.Page',
        verbose_name=_('Pages'),
        related_name='modals',
        help_text=_("Select pages where this modal should appear")
    )

    include_children = models.BooleanField(
        verbose_name=_('Include children'),
        default=False,
        help_text=_("Show on child pages of selected pages")
    )

    child_depth = models.IntegerField(
        verbose_name=_('Child depth'),
        choices=DEPTH_CHOICES,
        default=1,
        help_text=_("How many levels of child pages should this modal appear on?"),
    )

    is_displayed = models.BooleanField(
        verbose_name=_('Is visible'),
        default=True,
        help_text=_("If enabled, the modal will be visible")
    )

    use_session_storage = models.BooleanField(
        verbose_name=_('Use session storage'),
        default=False,
        help_text=_('If enabled, the modal will only show once per session')
    )
    panels = [
        MultiFieldPanel([
            FieldPanel('title'),
            FieldPanel('content'),
        ], heading="Modal Content"),
        MultiFieldPanel([
            FieldPanel('cta_text'),
            FieldRowPanel([
                FieldPanel('cta_page'),
                FieldPanel('cta_link'),
            ], heading="CTA Link (choose one)"),
        ], heading="Call To Action Settings"),

        MultiFieldPanel([
            FieldPanel('display_delay'),
            FieldRowPanel([
                FieldPanel('is_displayed'),
                FieldPanel('use_session_storage'),
            ], heading="Visibility Settings")
        ], heading="Display Settings"),
        MultiFieldPanel([
            FieldPanel('pages', widget=forms.CheckboxSelectMultiple),
            FieldRowPanel([
                FieldPanel('include_children'),
                FieldPanel('child_depth'),
            ], heading="Child Page Settings"),
        ], heading="Page Selection"),
    ]

    def __str__(self):
        return self.title

    def get_cta_url(self):
        if self.cta_page:
            return self.cta_page.url
        return self.cta_external_url or ''


class PageModalAdmin(SnippetViewSet):
    model = PageModal
    menu_label = 'Page Modals'
    menu_icon = 'placeholder'
    menu_order = 300
    add_to_settings_menu = True
    list_display = ('title', 'is_displayed', 'display_delay', 'include_children')

This gives me the base setup to start. Let’s see what this model allows us to do:

• Define the content of the popup using title and content attributes.

• Store the display settings (timeout, is it displayed, etc.).

• Store the page where I want it to be displayed.

• Store information to know if it should be displayed in children of the selected page or not.

• Store all the links and texts for the CTA (Call To Action) of the modal.

The admin page looks like this:

Sending the modals to the frontend

Loading the modals on each page

The PageModalAdmin Viewset helps display it properly on the admin page. I can define which columns to show in the list of modals (popups). The next step is to load each available popup into the site frontend. We will use a template tag to inject all the modals registered to the page being rendered. The following snippet does that:

# modal_tags.py
import json
from django import template
from django.core.serializers.json import DjangoJSONEncoder


register = template.Library()


@register.inclusion_tag('home/modals/page_modal.html', takes_context=True)
def page_modals(context):
    current_page = context.get('page')

    if not current_page:
        return {'modals': []}

    # Get modals directly assigned to this page
    modals = current_page.modals.filter(is_displayed=True)

    ancestors = current_page.get_ancestors()
    for ancestor in ancestors:
        # Get all modals that:
        # 1. Are assigned to this ancestor AND
        # 2. Have include_children enabled AND
        # 3. Meet the depth requirement
        ancestor_modals = ancestor.modals.filter(include_children=True, is_displayed=True)

        for modal in ancestor_modals:
            # Calculate the distance between the ancestor and current page
            distance = len(current_page.get_ancestors()) - len(ancestor.get_ancestors())

            # Check if this page is within the specified depth
            if modal.child_depth == -1 or distance <= modal.child_depth:
                modals = modals | ancestor_modals.filter(pk=modal.pk)

    modal_data = []
    for modal in modals:
        modal_data.append({
            'title': modal.title,
            'content': list(modal.content.raw_data),
            'display_delay': modal.display_delay,
            'cta_text': modal.cta_text,
            'cta_link': modal.cta_link,
            'cta_page': modal.cta_page.url,
            'use_session_storage': modal.use_session_storage,
        })
    return {
        'modals': json.dumps(modal_data, cls=DjangoJSONEncoder)
    }

And include the result in the base template this way.

{% load modal_tags %}
<head>
{% page_modals %}
</head>

Handling the modal’s display

We also need JS code that will process the available popups and decide whether to display them. In the previous template tag, I added a template named home/modals/page_modal.html. Here is the content:

{% if modals %}
<script>
    class ModalQueue {
        static queue = [];
        static currentlyShowing = false;

        static add(modal) {
            this.queue.push(modal);
            this.processQueue();
        }

        static processQueue() {
            if (this.currentlyShowing || this.queue.length === 0) return;

            const nextModal = this.queue[0];
            this.currentlyShowing = true;
            nextModal.display();
        }

        static modalClosed() {
            this.queue.shift();
            this.currentlyShowing = false;
            this.processQueue();
        }
    }

    class ModalHandler {
        constructor(modalData) {
            this.modal = modalData;
            this.shown = false;
            this.storageKey = `modal_${this.modal.title.replace(/\s+/g, '_').toLowerCase()}`;
            this.init();
        }

        init() {
            // Only check session storage if the feature is enabled
            if (this.modal.use_session_storage && this.hasBeenShown()) {
                return;
            }

            setTimeout(() => {
                ModalQueue.add(this);
            }, this.modal.display_delay * 1000);
        }

        hasBeenShown() {
            return sessionStorage.getItem(this.storageKey) === 'shown';
        }

        markAsShown() {
            if (this.modal.use_session_storage) {
                sessionStorage.setItem(this.storageKey, 'shown');
            }
        }

        display() {
            if (this.shown) return;

            const modalHtml = `
                <div class="fixed inset-0 z-50 flex items-center justify-center modal-container">
                    <!-- Backdrop -->
                    <div class="absolute inset-0 bg-black opacity-80"></div>

                    <!-- Modal content -->
                    <div class="relative z-10 bg-white rounded-lg max-w-lg w-2/3 mx-auto p-6">
                        <h2 class="text-2xl font-bold mb-4">${this.modal.title}</h2>
                        <div class="modal-content mb-6">
                            ${this.renderContent()}
                        </div>
                        ${this.renderCTA()}
                        <button class="close-modal absolute top-4 right-4 text-gray-500 hover:text-gray-700">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            `;

            document.body.insertAdjacentHTML('beforeend', modalHtml);
            this.shown = true;
            this.markAsShown();

            const modalElement = document.querySelector('.modal-container');
            const closeButton = modalElement.querySelector('.close-modal');

            const closeModal = () => {
                modalElement.classList.add('opacity-0');
                setTimeout(() => {
                    modalElement.remove();
                    ModalQueue.modalClosed();
                }, 200);
            };

            closeButton.addEventListener('click', closeModal);
            modalElement.addEventListener('click', (e) => {
                if (e.target === modalElement) closeModal();
            });
        }

        renderContent() {
            return this.modal.content.map(block => {
                switch (block.type) {
                    case 'heading':
                        return `<h3 class="text-xl font-bold mb-2">${block.value}</h3>`;
                    case 'paragraph':
                        return `<div class="prose max-w-none mb-4">${block.value}</div>`;
                    case 'link':
                        return `<a href="${block.value}" class="text-primary-600 hover:underline block mb-2">${block.value}</a>`;
                    default:
                        return '';
                }
            }).join('');
        }

        renderCTA() {
            if (!this.modal.cta_text) return '';

            const url = this.modal.cta_page || this.modal.cta_url;
            const target = this.modal.cta_url ? 'target="_blank" rel="noopener noreferrer"' : '';


            return `
                <a href="${url}" ${target}
                   class="inline-block bg-primary-600 text-white px-6 py-2 rounded hover:bg-primary-700 transition-colors duration-200">
                    ${this.modal.cta_text}
                </a>
            `;
        }
    }
    document.addEventListener('DOMContentLoaded', function() {
        const modals = {{ modals|safe }};
        modals.forEach(modalData => {
            new ModalHandler(modalData);
        });
    });
</script>
{% endif %}

The modal handler

The ModalHandler class is called as many times as there are modals to display on the page. Everything starts here:

document.addEventListener('DOMContentLoaded', function() {
        const modals = {{ modals|safe }};
        modals.forEach(modalData => {
            new ModalHandler(modalData);
        });
    });

It loads the JSON representation of a popup using {{modals|safe}} into an instance of the ModalHandler class. Let’s break down what it does.

constructor(modalData) {
            this.modal = modalData;
            this.shown = false;
            this.storageKey = `modal_${this.modal.title.replace(/\s+/g, '_').toLowerCase()}`;
            this.init();
        }

Store all the data in the instance, and it also creates a storageKey, which is important for later. It finishes by calling the .init() method.

init() {
    // Only check session storage if the feature is enabled
    if (this.modal.use_session_storage && this.hasBeenShown()) {
        return;
    }

    setTimeout(() => {
      ModalQueue.add(this);
    }, this.modal.display_delay * 1000);
}

This method checks if the popup should be displayed only once per session by verifying if it can use_session_storage and if it has already been shown. The method (hasBeenShown()) does this by checking the browser’s sessionStorage. The init() method uses setTimeout to schedule the display of the modal by adding it to a ModalQueue and setting the timeout to the number of seconds specified by the user. This is important because, due to the nature of this system, the same page might need to display many popups at the same time, but we don’t want to display all of them at once. So, we enqueue them while considering the number of seconds after which they should appear.

Many modals, so let's enqueue them !

From this point on, the class ModalQueue handles the lifecycle of a modal. Let’s study it.

static add(modal) {
            this.queue.push(modal);
            this.processQueue();
        }

        static processQueue() {
            if (this.currentlyShowing || this.queue.length === 0) return;

            const nextModal = this.queue[0];
            this.currentlyShowing = true;
            nextModal.display();
        }

        static modalClosed() {
            this.queue.shift();
            this.currentlyShowing = false;
            this.processQueue();
        }

The .add() method inserts a popup into the queue and calls processQueue(), which will check if there is a modal currently being displayed or if there is no popup in the queue. If not, it will get the nextModal from the queue and call its .display() method (remember this is in the ModalHandler class). This method is responsible for displaying the actual modal on the page. The modalClosed is called when a modal is closed so it can trigger the queue processing to check if there is a popup to display.

Let’s study the display() method from the ModalHandler. It contains the actual HTML code that renders the modal. It does this by calling the methods renderContent and renderCTA, whose job is to load the various parts of the modal. After displaying, it sets up the necessary actions for when the user closes it. Here is the code block.

const modalElement = document.querySelector('.modal-container');
const closeButton = modalElement.querySelector('.close-modal');
const closeModal = () => {
     modalElement.classList.add('opacity-0');
     setTimeout(() => {
        modalElement.remove();
        ModalQueue.modalClosed();
     }, 200);
};
closeButton.addEventListener('click', closeModal);
modalElement.addEventListener('click', (e) => {
    if (e.target === modalElement) closeModal();
});

It basically adds an event listener to the click event and links it to both the closeButton and the modalElement. Notice how the closeModal() function works: it removes the modalElement (which is the modal itself) and calls ModalQueue.modalClosed(). This last method is part of the queue handler.

static modalClosed() {
    this.queue.shift();
    this.currentlyShowing = false;
    this.processQueue();
}

It removes the last modal from the queue and marks that there is no modal being displayed, and then it calls processQueue() to verify if there is another popup to be displayed.

The end result

And the result look like this on the frontend of the site.

Note this code is compatible with TailwindCss and not bootstrap, you may need to adapt if you wan to use for your own site.

Conclusion

There are still many possible improvements, like allowing different styles of modals, setting the background color, or adjusting the width from the back office page, among other things. As a Wagtail developer, I prefer to make most features editable by my clients through the admin panel. This approach significantly reduces ongoing work for simple tasks that users might request while serving visitors on the site.

I am Adonis SIMO, and I build web applications and websites with Django and Wagtail. Feel free to contact me if you want to discuss a project. I would be happy to help.

The immediate solution is to use something like Celery or Django RQ to send the email in the background. In this flow, you will probably write a task that takes some arguments such as the destination email, subject, message, and other things, and this task will then import send_mail to do the job. It’s great, but it has some limitations. First of all, this won’t really be possible if you are using some package that has the ability to send emails by themselves, for example, django-allauth when a user signs up or requests a password reset, and it’s far-fetched to decide to re-implement all that process yourself. At this point, the solution is to use an email backend that is designed to process email in the background by default. This way, you continue to write normal Django and everything works in the background, like django-celery-email or something else. This leads to another possible problem: it assumes I am always using an SMTP-based backend. I might be using a Postmark server token or SES API key or something else that is not native SMTP.

The solution is to write my own email backend that will get the email to be sent and call my own email backend the way it should be and send the mail asynchronously. This way, I don’t need to change the code already written. It can look something along these lines:

import logging
from postmarker.django import EmailBackend
from home.tasks import send_emails # << this task will send the mail in background
from home.utils import email_to_dict


logger = logging.getLogger(__name__)


class BackgroundEmailBackend(EmailBackend):
    """
    Load Postmark Email backend via a job and send mails in background
    """

    def __init__(self, fail_silently=False, **kwargs):
        super(BackgroundEmailBackend, self).__init__(fail_silently)
        self.init_kwargs = kwargs

    def send_messages(self, email_messages):
        logger.info("Sending email via RQ")
        send_emails.delay([email_to_dict(msg) for i, msg in enumerate(email_messages)], **self.init_kwargs)
        logger.info("Sending email Scheduled")

The content of home.utils.py

import logging
from django_rq import job
from django.conf import settings
from django.core.mail import get_connection
from home.utils import dict_to_email


logger = logging.getLogger(__name__)


@job
def send_emails(messages, **kwargs):
    # backward compat: handle **kwargs and missing backend_kwargs

    conn = get_connection(backend='postmarker.django.EmailBackend', **kwargs)
    try:
        conn.open()
    except Exception:
        logger.exception("Cannot reach POSTMARK_EMAIL_BACKEND %s", settings.CELERY_EMAIL_BACKEND)
    conn.send_messages([dict_to_email(msg_dict) for msg_dict in messages])
    conn.close()
    logger.info(f"Send {len(messages)} mails.")
    return messages

In this example, I am using Postmark to send emails, and I have installed the Django email backend for Postmark. This code is fairly customized yet simple and easy to change. You can even inherit from the regular Django email backend. I’ve taken inspiration from the django-celery library to write this, and I extracted a few methods from it, namely dict_to_email and email_to_dict. Their code is:

import copy
import base64
import time
from django.conf import settings
from django.template.loader import render_to_string
from django.utils.timezone import datetime, make_aware
from email.mime.base import MIMEBase
from django.core.mail import EmailMultiAlternatives, EmailMessage


def email_to_dict(message):
    if isinstance(message, dict):
        return message

    message_dict = {'subject': message.subject,
                    'body': message.body,
                    'from_email': message.from_email,
                    'to': message.to,
                    'bcc': message.bcc,
                    # ignore connection
                    'attachments': [],
                    'headers': message.extra_headers,
                    'cc': message.cc,
                    'reply_to': message.reply_to}

    if hasattr(message, 'alternatives'):
        message_dict['alternatives'] = message.alternatives
    if message.content_subtype != EmailMessage.content_subtype:
        message_dict["content_subtype"] = message.content_subtype
    if message.mixed_subtype != EmailMessage.mixed_subtype:
        message_dict["mixed_subtype"] = message.mixed_subtype

    attachments = message.attachments
    for attachment in attachments:
        if isinstance(attachment, MIMEBase):
            filename = attachment.get_filename('')
            binary_contents = attachment.get_payload(decode=True)
            mimetype = attachment.get_content_type()
        else:
            filename, binary_contents, mimetype = attachment
            # For a mimetype starting with text/, content is expected to be a string.
            if isinstance(binary_contents, str):
                binary_contents = binary_contents.encode()
        contents = base64.b64encode(binary_contents).decode('ascii')
        message_dict['attachments'].append((filename, contents, mimetype))


    return message_dict


def dict_to_email(messagedict):
    message_kwargs = copy.deepcopy(messagedict)  # prevents missing items on retry

    # remove items from message_kwargs until only valid EmailMessage/EmailMultiAlternatives kwargs are left
    # and save the removed items to be used as EmailMessage/EmailMultiAlternatives attributes later
    message_attributes = ['content_subtype', 'mixed_subtype']
    attributes_to_copy = {}
    for attr in message_attributes:
        if attr in message_kwargs:
            attributes_to_copy[attr] = message_kwargs.pop(attr)

    # remove attachments from message_kwargs then reinsert after base64 decoding
    attachments = message_kwargs.pop('attachments')
    message_kwargs['attachments'] = []
    for attachment in attachments:
        filename, contents, mimetype = attachment
        contents = base64.b64decode(contents.encode('ascii'))

        # For a mimetype starting with text/, content is expected to be a string.
        if mimetype and mimetype.startswith('text/'):
            contents = contents.decode()

        message_kwargs['attachments'].append((filename, contents, mimetype))

    if 'alternatives' in message_kwargs:
        message = EmailMultiAlternatives(**message_kwargs)
    else:
        message = EmailMessage(**message_kwargs)

    # set attributes on message with items removed from message_kwargs earlier
    for attr, val in attributes_to_copy.items():
        setattr(message, attr, val)

    return message

These functions are important because most of the time when you send an object to a background processing tool, you need to serialize it and deserialize it when reading it from the workers (the process that runs in the background to send the actual emails). It’s better to send native Python objects. In our case, we are sending an EmailMessage instance, so we use email_to_dict when sending the email to the background job and dict_to_mail when reading it from the queue in the background worker. You can learn more about the original version here from the django-celery-email package: https://github.com/pmclanahan/django-celery-email/blob/d47da19c09e29eea90684692e8dfa059e026c046/djcelery_email/utils.py#L26. I had to perform some small tweaks and remove some code since I am using django-rq to handle background tasks. But this method is valid regardless of the background processing you are using.

While writing this article, I discovered the package django-mailer, which does this but better because it actually lets you specify whatever email backend you want to use. Hence, you have the same outcome with more flexibility: check its usage guide here https://github.com/pinax/django-mailer/blob/master/docs/usage.rst#usage.

I build projects using Django and Wagtail CMS. If you're planning to start your next tech venture, feel free to reach out. I can help you make the right decisions, even if we don't end up working together. Just message me on X (Twitter) @adonis__simo.

When creating a website, you include things like Google Analytics to track visits and view some insights later, but that’s called tracking, and it’s important to let the visitor know about it. In the EU, there are laws requiring website owners to add a notice that tells the user about any kind of tracking or cookie usage since those cookies are saved in their browser and are used for tracking them.

I’ve built a website recently using Wagtail CMS, and I wanted to track visits and visualize user actions using Microsoft Clarity. I signed up for those two services and grabbed the integration code. I also wanted to include a banner for cookie consent approval. It's quite simple to build, but there is a catch: when the user decides not to be tracked, I should not trigger Google Analytics or Clarity dynamically. This article is about how I did it on my Wagtail site.

How to do it?

I created a Snippet that contains the code that can be injected into all the pages, for example, the Google Analytics code, and it has an is_active field. The purpose of this model is to store all the codes I want to inject into my webpage. Here is what the code looks like; I called it ThirdPartyIntegration.

# youapp.models.py

@register_snippet
class ThirdPartyIntegration(models.Model):
    name = models.CharField(
        max_length=255,
        help_text="A descriptive name for this integration (e.g., 'Google Analytics', 'Hotjar')"
    )
    html_code = models.TextField(
        help_text="The HTML/JavaScript code to be inserted in the template"
    )
    is_active = models.BooleanField(
        default=True,
        help_text="Only active integrations will be included in the template"
    )
    position = models.CharField(
        max_length=20,
        choices=[
            ('head_start', 'Beginning of HEAD'),
            ('head_end', 'End of HEAD'),
            ('body_start', 'Beginning of BODY'),
            ('body_end', 'End of BODY'),
        ],
        default='head_end',
        help_text="Where in the template this code should be inserted"
    )
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    panels = [
        FieldPanel('name'),
        FieldPanel('html_code'),
        FieldPanel('is_active'),
        FieldPanel('position'),
    ]

    class Meta:
        verbose_name = "Third Party Integration"
        verbose_name_plural = "Third Party Integrations"
        ordering = ['name']

    def __str__(self):
        return f"{self.name} ({'Active' if self.is_active else 'Inactive'})"

It also contains a position to specify exactly where I can include it on the webpage. There are four possible positions.

To render each integration on all pages, I created a Django template tag to load them, but only the active ones.

from django import template
from django.utils.safestring import mark_safe
from yourapp.models import ThirdPartyIntegration 

register = template.Library()


@register.simple_tag
def render_integrations(position):
    """
    Renders all active third-party integrations for a specific position.
    Usage: {% render_integrations 'head_end' %}
    """
    integrations = ThirdPartyIntegration.objects.filter(
        is_active=True,
        position=position
    )
    return mark_safe('\n'.join(integration.html_code for integration in integrations))

This will output a simple set of HTML code that will be injected directly into the template at render time.

Organize across the base template

Next, to inject them into the webpage, I modified the base.html file to call this tag at the four different positions like this:

<!DOCTYPE html>
<html lang="en">
    <head>
    {% render_integrations 'head_start' %}

    <!--- some stuff here -->

    {% render_integrations 'head_end' %}
    </head>

    <body>
    {% render_integrations 'body_start' %}

    <!-- the content here -->
    {% render_integrations 'body_end' %}
    </body>
</html>

Obviously, I removed all the default stuff Wagtail provides in the base template for demo purposes. Now, we have called the template tag to load any third-party scripts dynamically. This is technically enough to not worry anymore about integrating these scripts manually. In my Wagtail admin, I have something that looks like this:

The fun part: integrating cookie consent properly

The banner

The consent banner is the most important part here because, depending on what the user chooses, it will let the other scripts run or not, so it has to be written accordingly. Here is its content:

<!-- Cookie Consent Banner -->
<style>
.cookie-consent-banner {
    display: none; /* Hidden by default, shown via JS */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #1e293b;
    color: white;
    padding: 1rem;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}
.cookie-consent-banner.visible {
    display: block;
}
</style>

<div id="cookie-consent-banner" class="cookie-consent-banner border-t border-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0 mb-4 md:mb-0">
                <p class="text-sm">
                    THE CONSENT TEXT HERE
                </p>
            </div>
            <div class="flex-shrink-0 flex space-x-4">
                <button id="reject-cookies" 
                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Refuse All
                </button>
                <button id="accept-cookies" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-secondary bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" style="margin-left: 5px">
                    Accept All
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    function initializeCookieConsent() {
        const banner = document.getElementById('cookie-consent-banner');

        // If user already made a choice, don't show the banner
        if (localStorage.getItem('cookieConsentChoice')) {
            return;
        }
        // Show the banner
        if (banner) {
            banner.classList.add('visible');
        }

        // Handle accept button click
        document.getElementById('accept-cookies')?.addEventListener('click', function() {
            acceptCookies();
            hideBanner();
        });

        // Handle reject button click
        document.getElementById('reject-cookies')?.addEventListener('click', function() {
            rejectCookies();
            hideBanner();
        });
    }

    function acceptCookies() {
        localStorage.setItem('cookieConsentChoice', 'accepted');
        // Dispatch custom event that other scripts can listen for
        document.dispatchEvent(new CustomEvent('cookieConsentAccepted'));
    }

    function rejectCookies() {
        localStorage.setItem('cookieConsentChoice', 'rejected');
        // Dispatch custom event that other scripts can listen for
        document.dispatchEvent(new CustomEvent('cookieConsentRejected'));
        // Disable tracking cookies if possible
        disableTracking();
    }

    function hideBanner() {
        const banner = document.getElementById('cookie-consent-banner');
        if (banner) {
            banner.classList.remove('visible');
        }
    }

    function disableTracking() {
        // Add your GA_ID or other tracking IDs here
        const GA_ID = 'G-XXXXXXXXXXX'; // Replace with your actual GA ID
        if (window[`ga-disable-${GA_ID}`]) {
            window[`ga-disable-${GA_ID}`] = true;
        }
        // Clear existing cookies
        document.cookie.split(";").forEach(function(c) { 
            document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
        });
    }

    // Create cookie consent manager object
    window.CookieConsentManager = {
        hasConsent: function() {
            return localStorage.getItem('cookieConsentChoice') === 'accepted';
        },
        getChoice: function() {
            return localStorage.getItem('cookieConsentChoice');
        },
        reset: function() {
            localStorage.removeItem('cookieConsentChoice');
            initializeCookieConsent();
        }
    };

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeCookieConsent);
    } else {
        initializeCookieConsent();
    }
})();
</script>

This code assumes that you will include Google Analytics, which is why the function that runs when the user rejects consent is written this way:

function disableTracking() {
        // Add your GA_ID or other tracking IDs here
        const GA_ID = 'G-XXXXXXXXXXX'; // Replace with your actual GA ID
        if (window[`ga-disable-${GA_ID}`]) {
            window[`ga-disable-${GA_ID}`] = true;
        }
        // Clear existing cookies
        document.cookie.split(";").forEach(function(c) { 
            document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
        });
    }

These scripts will simply check if the user has accepted or rejected the consent and enable the other scripts accordingly. They store the acceptance in a cookie and check it every time the page loads. The HTML code is written with the assumption that you use Tailwind CSS in your project, so you should modify it accordingly..

Google Analytics

The following code will start the GA integration script or not, depending on the user’s consent.

<!-- Google Analytics with Consent Check -->
<script>
(function() {
    // Function to initialize Google Analytics
    function initializeGA() {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXX');
    }

    // Function to load GA script
    function loadGAScript() {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
        document.head.appendChild(script);
        script.onload = initializeGA;
    }

    // Check if user has already consented
    if (window.CookieConsentManager && window.CookieConsentManager.hasConsent()) {
        loadGAScript();
    }

    // Listen for future consent
    document.addEventListener('cookieConsentAccepted', function() {
        loadGAScript();
    });

    // Listen for consent rejection
    document.addEventListener('cookieConsentRejected', function() {
        // Disable GA if it was previously loaded
        if (window['ga-disable-G-XXXXXXXXXX']) {
            window['ga-disable-G-XXXXXXXXXX'] = true;
        }
    });
})();
</script>

It does the following:

• Listens to the cookieConsentRejected event and disables GA if it was previously enabled.

• Listens to the cookieConsentAccepted event and enables GA if it was disabled.

The loadGAScript function is the one actually attaching GA to the DOM, and initializeGA will start the tracking process of GA. If you have already included GA integration code, you might be familiar with these two specific code blocks.

Microsoft Clarity

The following code shows how the integration of Clarity was done by following the two previous patterns for checking consent first.

<!-- Microsoft Clarity with Consent Check -->
<script>
(function() {
    const CLARITY_ID = 'xxxxxxxx'; // Replace with your actual Clarity project ID

    // Function to initialize Clarity
    function initializeClarity() {
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", CLARITY_ID);
    }

    // Function to disable Clarity
    function disableClarity() {
        // Remove Clarity cookies if they exist
        document.cookie = `_clarity=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        document.cookie = `_clsk=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        document.cookie = `_clck=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;

        // Stop any existing Clarity sessions
        if (window.clarity) {
            window.clarity("stop");
        }
    }

    // Check if user has already consented
    if (window.CookieConsentManager && window.CookieConsentManager.hasConsent()) {
        initializeClarity();
    }

    // Listen for future consent
    document.addEventListener('cookieConsentAccepted', function() {
        initializeClarity();
    });

    // Listen for consent rejection
    document.addEventListener('cookieConsentRejected', function() {
        disableClarity();
    });
})();
</script>

If you are familiar with Clarity integration, the function initializeClarity will be a reminder. This code simply listens to events related to consent status and disables or enables Clarity tracking.

I positioned them differently on the page:

• Clarity and GA scripts are positioned at the head_end.

• Cookie consent is at the body_end.

Conclusion

Implementing GDPR-compliant analytics in Wagtail CMS demonstrates the platform's exceptional flexibility and extensibility. This approach to cookie consent and analytics tracking has proven robust and reusable across multiple projects, making it a valuable addition to any Wagtail website. The combination of Wagtail's structured architecture with Django's powerful framework provides an ideal foundation for building scalable, privacy-conscious web applications.

As a seasoned Django/Wagtail developer with years of experience building professional websites and applications, I'm available to help you implement similar solutions or develop your next web project. Whether you need assistance with analytics implementation, custom Wagtail development, or a complete website build, feel free to reach out.

Canva is a graphic design platform that provides tools for creating social media graphics, according to Wikipedia. In this article, I will share my thought process for deciding on the tech stack I would choose to build (or clone) it. Let's analyze this from one part of the stack to another (frontend to database), I will also share a bit of how I decided what tools to use in order to build my own SaaS (Martha AI).

Frontend

Canva is a media manipulation project where most of the work happens on the frontend. But there is also a lot going on in the backend, so I need to choose something not too low-level like jQuery, Turbo, or HTMX. I also want it to be performant with not too much overhead. I would choose to build the frontend with Svelte because it has a whole compilation step where the code I write is copiled and optimized into a simple and light JavaScript bundle. I don’t have to learn a new syntax like JSX, and it provides much more tooling to control how I render the UI (conditions, loops, etc.). It also offers very good reactive programming tools and state management out of the box.

Backend

Talking about the backend, I would choose something like Django, Laravel, Ruby, NestJs, or AdonisJs. On that side, various activities are happening at the same time, such as:

• emails being sent

• media being processed (analysis for viruses, compression, etc.)

• multiple users interacting (co-editing a design)

• searching and indexing data (search images by inputting text)

• account management (auth)

• plugin systems

• teams (groups of users sharing the same resources)

• scheduling for end-users

• payments integration (Stripe, PayPal, or whatever)

• notifications

• a lot of analytics

• A lot more stuff

I can certainly build something that integrates all this with SvelteKit, Next.js, or Remix.js (I personally prefer Remix over Next ), but it will quickly become VERY expensive (human, technical, and financial resources). Now, I can choose from the list of frameworks provided earlier (Laravel, Django, etc.). One important point to consider is what language I am proficient in and what about the team I have. If it's Python, then use Django; if PHP, then use Laravel, etc. I am personally good with Python and Django. But from the standpoint of the features all these frameworks offer and their ecosystems, using Laravel will be a good match. It offers a rich set of packages when it comes to stuff related to real-time communications, background processing, auth, payment infrastructure, notifications, and most of these come out of the box (job scheduling, notifications, auth & permissions).

Database

I would choose PostgreSQL. It’s very good at handling a lot of data and performing FTS (Full Text Search). It offers a wide range of capabilities for data indexing, searching, and typing (INT, Char, JSON, JSONB, Vector, etc.) in a vast amount of data while being very simple to operate and expand. For example, the whole Notion and Sentry platforms are running on PostgreSQL.

Hosting

I could host the whole thing on AWS, but I would need knowledge to handle that. If I don’t have enough knowledge, I would start on something like Digital Ocean and use S3 + CloudFront (CDN) to store files and serve them at scale and low cost. Personally, I have enough experience to host this on AWS while staying cost-effective (but that is another discussion).

A practical and personal example

I have personally built a complete SaaS (marthaia.com) with Sveltekit in the B2C world, and I used a similar thought process. It's an AI-enabled platform that generates long-form documents using OpenAI models. I wanted users to be able to leave the platform while it is generating content, so I needed the ability to run code as a background process and also store data. I didn't need much more, and most of the coding was on the frontend side (building the AI Editor, displaying text while it's being generated by the AI as a stream, etc.). I chose Sveltekit and added BullMQ to handle the background processing. Since I wanted users to be able to see text as it's generated, I needed a real-time protocol between the browser and the server. I could have chosen WebSocket, but because the direction of the text is mostly from server to client (98% of the time), I chose SSE (server-sent events). I wanted to move quickly, and I knew user data would be changing a lot, so I decided to store everything in Redis (acting as my database) and went live with the whole thing. Now it's running and generating revenue. The whole thing is hosted on a VPS and automatically deployed using a script I wrote and set up via GitHub Actions. You can learn more in this article I wrote months back.

At the same time, I work in a company where I lead a team of many developers. We have built a B2B SaaS platform and chose SvelteKit for the frontend and Nest, Django, and AdonisJS for our various backend services.

Let's prepare the server

The very first thing to perform some one-time config on the server, the goal is to prepare it for the next steps. For this purpose, we have to consider the following topics:

Docker Compose to run the application and its dependencies

Docker Compose is a tool that runs many Docker applications as services and lets them communicate with each other, as well as other features like volumes for file storage. Let's first install Docker and Docker Compose on the server; you can follow the official installation guide here: https://docs.docker.com/engine/install/ubuntu/. After this, it's important to run it as a non-root user; here is what the official documentation says: https://docs.docker.com/engine/security/rootless/.

Set up an AWS ECR & CLI credentials.

Do note that you can achieve the same goal with another registry if you want, I am just using AWS here because it's more simple for me.

Since we are using Docker, the images will have to be stored and retrieved from somewhere. For this purpose, I am using AWS ECR (Amazon Web Services Elastic Container Registry). It's a Docker registry within an AWS account. It's very cheap to use and easy to set up. You can also use Docker Hub to create a private repository for your images. It all starts by creating an ECR private registry in the AWS account. You will click on "Create Repository" and fill in the name of the repository.

After creating a repository you can copy the repository URI and keep it for later. It has the following format AWS_ACCOUNT_ID.dkr.ecr.AWS_REGION.amazonaws.com/REPOSITORY_NAME .

You will also need to set up AWS IAM credentials that have the right to pull/push from/to this repository. Let's head to the IAM service, click on new user and attach the following policy to him: AmazonEC2ContainerRegistryFullAccess , you don't need to enable access to the AWS console for him. At the end of this process, you receive 2 keys from AWS, a secret key and a secret key id, keep them aside we will need them for the upcoming work.

Back on our server, we need to install AWS CLI. The official way of installing it is available here. https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions. After this you can test the installation by running aws --version the command. At this step, you will have to execute the command aws configure and respond to questions by providing the previous keys generated on aws, the secret key , and the secret key id . You will also be prompted to choose an output format, simple just JSON, and provide a default region, it's better to choose the region where you created the ECR registry earlier.

Set up the application runner script.

In my workflow I have written a little shell script that performs certain actions, it's the key part of this process, it login to the registry, downloads the image, and restarts the corresponding docker service, I just call it redeploy.sh and save it under a folder from where I want to run my app, here is the content:

#!/bin/bash

# Retrieve AWS ECR login command
aws ecr get-login-password --region [SWS_REGION] | docker login --username AWS --password-stdin [AWS_REGION].dkr.ecr.us-west-2.amazonaws.com

# Associating repositories with identifiers
declare -A repositories=(
    ["web"]="[REGISTRY_NAME]:latest"
)

# Check if service identifier is provided as a command line argument
if [ -z "$1" ]; then
    echo "Please provide a service identifier as a command line argument."
    exit 1
fi

service_identifier=$1

# Check if the provided service identifier exists in the repositories array
if [ -z "${repositories[$service_identifier]}" ]; then
    echo "Invalid service identifier. Available identifiers: ${!repositories[@]}"
    exit 1
fi

# pull the new image from the registry
repository=${repositories[$service_identifier]}
echo "Pulling [AWS_ACCOUNT_ID].dkr.ecr.[AWS_REGION].amazonaws.com/$repository"
docker pull "[AWS_ACCOUNT_ID].dkr.ecr.[AWS_REGION].amazonaws.com/$repository"

# Change directory to [APP_FOLDER] 
cd /home/ubuntu/[APP_FOLDER] || {
    echo "Failed to change directory to /home/ubuntu/[APP_FOLDER]"
    exit 1
}

# stop and restart the service, this wil force docker compose to redownload the lates image
echo "Re-running service $service_identifier"
docker compose stop "$service_identifier"
docker compose up --no-deps "$service_identifier" -d

# Remove old and un-used docker images
echo "Removing unused Docker images"
docker image prune -fa
echo "Removed Dangling Images"

The first step of this script consists of logging into the AWS account with AWS CLI to get a token that docker will use when retrieving the docker image, remember the registry is private, we can't just pull it without being authenticated.

Then we declare a repository list and associate them with some identifier, the specified identifier will be used as a command line arg, more on this later. After this we verify if the user has provided an argument that corresponds to an existing service identifier, we want him to type something like ./redeploy web for example, the script will associate the argument web to the repository web as in the second step.

After having the service identifier we create the repository URL dynamically and perform a docker pull with it. This ensures the docker image is getting downloaded to our system.

The script will now cd into the application folder, /home/ubuntu/[APP_FOLDER] this assumes you are running everything under the user ubuntu and the his HOME folder is named ubuntu , APP_FOLDER contain the whole setup.

The next step consists of stopping and starting the service after which we simply remove old and unused images with the command docker image prune -fa you can learn more here: https://docs.docker.com/reference/cli/docker/system/prune/.

The Docker compose file

Compose is the utility that runs our whole system, it needs a file named docker-compose.yml where you will define everything, let's assume our app needs a redis and a postgres service to run, here is what it will look like:

version: '3.9'
services:
  web:
    image: "[AWS_ACCOUNT_ID].dkr.ecr.[AWS_REGION].amazonaws.com/myapp:latest"
    ports:
        - 8080:8080
    depends_on:
        - redis
        - db
    env_file:
        - .env

  redis:
    image: 'redis:alpine'
    ports:
      - '6379:6379'
  db:    
    image: 'postgres:14'
    restart: always
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
      PGDATA: /var/lib/postgresql/data/pgdata
    healthcheck:
      test: [ "CMD", "pg_isready", "-q", "-d", "postgres", "-U", "postgres" ]
      timeout: 45s
      interval: 10s
      retries: 10
    ports: 
      - '5437:5432'
    volumes:
      - ./opt/postgres/data:/var/lib/postgresql/data

You volume ./opt/postgres/data:/var/lib/postgresql/data will map the content of the Postgres server to the local disk so it can't get lost when the docker container stops running. Learn more about running Postgres with docker-compose here https://medium.com/@agusmahari/docker-how-to-install-postgresql-using-docker-compose-d646c793f216. I've used a directive name env_file this allows docker-compose to read a file a load its content into the docker container at runtime, i did this because usually, the docker-compose file is committed to a VCS there I don't want to keep the environment variable into it directly via the environment directive in the service. Note that our service is named web here, earlier we wrote a file redeploy.sh and we intend to run it like this:

 ./redeploy.sh web

The web argument is linked to the name of our service, that file is simply mapping the argument to a service name in the docker file.

Setup a Linux service to keep everything running

At this step, we have to create a Linux service that will make sure to start the application every time the server starts or our application stops. The following script will help you do that:

[Unit]
Description=[APP_NAME] service executed by docker compose
PartOf=docker.service
After=docker.service
After=network.target

[Service]
Type=oneshot
RemainAfterExit=true
WorkingDirectory=/home/ubuntu/[APP_FOLDER]
ExecStart=/usr/bin/docker compose up -d --remove-orphans
ExecStop=/usr/bin/docker compose down

[Install]
WantedBy=multi-user.target

Let's analyze it !!!

• The Unit section describes our service and specifies what service our unit is part of, in this case, it's the docker service, this will make sure our service always runs when the docker service is running as well.

• The Service section describes how to run our service, the interesting parts are WorkingDirectory , ExecStart and ExecStop command, they will be used according to what their name means, for example, if the service is named myapp when you type the command systemctl start myapp the command ExecStart will be executed. You can learn more about Linux service here https://www.redhat.com/sysadmin/systemd-oneshot-service. Learn more on how to run the docker service with systemd here: https://bootvar.com/systemd-service-for-docker-compose/

This service needs to be installed in a way the system will run it when needed, you will have to save it in a file with a name for example: myapp.service

touch myapp.service
# open it
nano myapp.service
# paste the previous scrip in it
cp myapp.service /etc/systemd/system/myapp.serivce

At this point it's recognized as a Linux service, you can run systemctl start myapp to start it. The following required command is

systemctl enable myapp.service

This will make sure the service is automatically executed by the server on each reboot. You can learn more here: https://medium.com/@benmorel/creating-a-linux-service-with-systemd-611b5c8b91d6

The web server

I used Nginx for this task, it's small and powerful, it's widely used, and can act as a load balancer, a static file server, a reverse proxy, and much more. The first thing to do is to install it.

sudo apt-get install nginx

At this step the docker image is supposedly running, let's suppose it contains an app running on the port 8080 , and that port is bound to the server via the docker-compose file. We need to set up a reverse proxy configuration between Nginx and our port. Here is the configuration needed :

upstream app_backend {
  server localhost:8080; # the appliction port
}

server {
  listen 80;
  server_name [DOMAIN_NAME];

  location / {
    proxy_pass http://app_backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
  }
}

let's call this config myapp.conf and save it under a directory where nginx will find it, that folder amongst others is named /etc/nginx/conf.d/.

sudo touch /etc/nginx/conf.d/myapp.conf
sudo nano /etc/nginx/conf.d/myapp.conf
# paste the content there

Now all we need is to test it and restart the NGINX service with the following commands

sudo nginx -t # test if the config is valid 
sudo nginx -s reload # reload the nginx service so it will consider it

This configuration will instruct nginx to listen to the traffic on the port 80 and with the domain name [DOMAIN_NAME] and send it to your app server on the port 8080 via the directive proxy_pass , the line location / { simply mean capture all the requests starting with / and perform the actions written under the location block. Learn more here https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/How-to-setup-Nginx-reverse-proxy-servers-by-example.

The Build Pipeline

After having configured the server, we have to set up the build pipeline now, it mainly consists of 1 step, write a Github Action pipeline file and add it to the project, let's go.

GitHub Actions Setup

GitHub action will be used to build the docker image from our source code and pushed to the registry from where the image is pulled and executed on the server. I will take a sample Dockerfile for this example, but in practice, you will have to write your own Dockerfile. For an express.js application, the docker file would be like this:

# Fetching the minified node image on apline linux
FROM node:slim

# Declaring env
ENV NODE_ENV production

# Setting up the work directory
WORKDIR /express-docker

# Copying all the files in our project
COPY . .

# Installing dependencies
RUN npm install

# Installing pm2 globally
RUN npm install pm2 -g

# Exposing server port
EXPOSE 8080

# Starting our application
CMD pm2 start process.yml && tail -f /dev/null

Building and running this docker file will start our application on port 8000, but in our setup, we will have to run it with docker-compose.

The next thing is to set up the GitHub actions pipeline. For that simply create a folder .github/workflows in the project root and create a file named docker-build.yml, we will write our pipeline into it.

name: Build, Push to ECS and Deploy to Server

on:
  push:
    branches: ['deploy/main']

jobs:
  build:
    name: Build Web Image
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: [AWS_REGION]

      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1

      - name: Build, tag, and push image to Amazon ECR
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: [REPOSITORY_NAME]
          IMAGE_TAG: latest
        run: |
          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG . 
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG

      - name: Restart the service via SSH
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: /home/ubntu/[APP_DIRECTORY]/redeploy.sh web

There are several steps to look into here:

• Configure AWS credentials: here the system will load the previous aws key you created earlier, you will have to register them into your GitHub account's secrets

• Build, tag, and push image to Amazon ECR : this step will run the command docker build and docker push to create the docker image

• Restart the service via SSH this step will connect to the server and restart the whole application at once.

This pipeline will run every time there is a pull request merged against the deploy/main branch.

on:
  push:
    branches: ['deploy/main']

At this point the whole system is in place and tied up, now it's possible to edit and apply it to your specific case. In a future article, I will share the process of building the application itself for production and running in a docker file.

Conclusion

This article attempts to describe the process I use to set up a VPS for automation when it comes to deployment. it describes how to set the process of application execution inside the server and the process of building the application, each part can be done with another tool, for example, you can swap nginx with Treafik if you want, and you can replace the systemd service with a program in supervisor and more. This process does not cover additional stuff like backing up the server or closing default ports on the servers, those will be explained in future articles. Feel free to ask a question if you want to adapt this to your flow. In another article I will focus on how to set up an application to be production-ready in terms of deployment, that's the part of the process that comes before the build of the Docker Image.

I hope you enjoyed the read.

I'm here to assist you in implementing this within your company or team, allowing you to concentrate on your core tasks and save money before tapping into the vast potential of Mastodon.

Typically a mobile money payment happens in 3 steps, the initialization, the payment itself, and the verification. Let's dive into this using this blueprint.

The payment initialization

This is what happens when the user chooses what to pay and how much to pay, in my case it is a subscription(billing plan) the user might need to pay a weekly subscription valued at 600 FCFA (XAF) or a monthly subscription at 2000 FCFA (XAF). At this step, I would create a payment on NotchPay platform like this

const endpointUrl = "https://api.notchpay.co/payments/initialize";
const cb_url = process.env.BOT_REDIRECT_URL; // url where the user is redirected

const paymentRequest = {
      email: userEmail,
      amount: paymentAmount,
      currency: "XAF", // Replace with the appropriate currency code
      description: "Payment for Subscription a subscription", 
      reference: transactionId,
      callback: `${cb_url}?tid=${transactionId}`, // a callback url
      customer_meta: meta,
    };

    let response;

    // Send a POST request to the NotchPay API using Axios
    try {
      response = await axios.post(endpointUrl, paymentRequest, {
        headers: {
          Authorization: `${apiKey}`,
          "Content-Type": "application/json",
        },
      });
    } catch (error: any) {
      if (error.response) {

        console.log("HTTP ERROR");
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {

        console.log("REQUEST ERROR");
        console.log(error.request);
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log("UNKNOWN ERROR");
        console.log("Error", error.message);
      }

      console.log("[ERROR_CAUTH]");
      return null;
    }

if (response.status >= 200 && response.status < 300) {

      const paymentLink = response.data.transaction.reference;
      if (paymentLink) {
        // Return the payment link
        return `https://pay.notchpay.co/${paymentLink}`;
      } else {
        console.error(
          `[PAYMENT] - error while initiating the transaction on [NOTCHPAY] - 1 ${response.data}`
        );
        return null;
      }
    } else {
      console.error(
        `[PAYMENT] - error while initiating the transaction on [NOTCHPAY] - 2 ${response.status}`
      );
      return null;
    }

At this point, I need to show the paymentLink to the user, after clicking he will end up on a checkout page branded by notchpay, where the user has to choose a payment method and input his number. Do note this line

...
callback: `${cb_url}?tid=${transactionId}`, 
...

This is the link where the user is redirected after a payment, you should set a page on your site informing the user that the payment in been successfully processed (not done, since it might still occur an issue). Here is a screenshot of how the bot will display it

As you can see, the user have choosed a subscription and the bot displayed the payment link.

The payment itself

The payment happend on the next screen shows what the user see upon click the link

As NotchPay user we don't have much to do here, all happen on their platform, the client will input his phone number or credit card information after choosing the country where he belongs and click on "pay X F.CFA", if it's a mobile money transaction the user will receive a prompt on his phone requesting to validate a payment on his mobile wallet, otherwise an error will be displayed on NotchPay page itself. After this, if the payment is successful the user is redirected to the callback URL (the one you specified while creating the payment link), note that payment will usually take under 5 minutes to be confirmed by the client.

The verification

When a payment is made on NotchPay, your platform will receive a notification via what is called a webhook, it will contain information about a specific payment that has been updated, What you have to do here is to verify the state of said payment, you should never update your database right away with the information contained into the webhook (it might have been created and sent to you by a third party other than NotchPay), you should only retrieve the transaction reference and do the following:

• Check for the notch pay signature

• Check if the payment exists in your database (via his reference)

• Check the status: if it is still ACTIVE or PENDING COMPLETED etc.

If these checks are done and successful you have to call the verification API on NotchPay to retrieve the status of this specific payment on their platform before updating yours. Here is how I did it.

I used a little express server that exposes a route in POST, where the webhook is sent, like this.

async function verifyPaymentStatus(
  transactionId: string
): Promise<{ status: any; transaction?: any }> {
  try {
    const notchPayApiUrl = "https://api.notchpay.co";
    const endpoint = `/payments/${transactionId}`;
    let response;
    try {
      response = await axios.get(`${notchPayApiUrl}${endpoint}`, {
        headers: {
          Authorization: `${apiKey}`,
        },
      });
    } catch (apiError: any) {
      if (apiError.response) {
        console.log("HTTP ERROR");
        console.log(apiError.response.data);
        console.log(apiError.response.status);
      } else if (apiError.request) {
        console.log("REQUEST ERROR");
        console.log(apiError.request);
      } else {
        console.log("UNKNOWN ERROR");
        console.log("Error", apiError.message);
      }
      console.log("[ERROR_CAUTH]");
      return { status: null, transaction: apiError.response.data };
    }
    if (response.status >= 200 && response.status < 300) {
      return { status: true, transaction: response.data };
    } else {
      console.error(
        "NotchPay API request failed with status:",
        response.status
      );
      return { status: null };
    }
  } catch (error) {
    console.error("Error verifying payment status:", error);
    return { status: null };
  }
}

app.get("/[MY_CALLBACK_URL]", async (req: Request, res: Response) => {
  const hash = crypto
    .createHmac("sha256", apiKey)
    .update(JSON.stringify(req.body))
    .digest("hex");

  if (hash != req.headers["x-notch-signature"]) {
    return res.status(403);
  }
  try {
    // Extract data from the request 
    const { tid, reference } = req.query as {
      tid: number;
      reference: string;
    };

    // extracting the transation from my database (supabase)
    let { data: payment_transaction, error } = await supabase
      .from("payment_transaction")
      .select("*")
      .eq("transaction_id", tid)

    if (error) {
      console.error("Error retrieving transaction:", error.message);
      res.status(400).send(JSON.stringify(error));
    }

    if (payment_transaction === null) {
      res.status(404).send(JSON.stringify({ error: "Transaction Not Found" }));
      return;
    }
    if (
      payment_transaction[0].status === "complete" ||
      payment_transaction[0].status === "canceled" ||
      payment_transaction[0].status === "failed"
    ) {
      res.status(200).send("Webhook received and processed successfully");
      return;
    }
    // actively verify the payment status on notchpay platform
    let paymentObject = await verifyPaymentStatus(reference);

    if (paymentObject.status == null) {
      res.status(503).send(
        JSON.stringify({
          error: "Provider server not available",
          data: paymentObject.transaction,
        })
      );
      return;
    }

    const transaction = paymentObject.transaction.transaction;
    const { error: tError } = await supabase
      .from("payment_transaction")
      .update({
        status: transaction["status"],
        api_response: [...payment_transaction[0].api_response, transaction],
      })
      .eq("transaction_id", tid)
      .select();
    if (tError) {
      console.log(`[webhook] An error occurred: ${tError.message}`);
      console.table(error);
      res.status(500).send("Internal Server Error");
    }


    // ... update the billing plan and the subscription code
    // diable existing subscription and enabling others
    res.redirect(`https://t.me/${BOT_TELEGRAM_USERNAME}`);
  } catch (error) {
    console.error("Error handling webhook:", error);
    res.status(500).send("Internal Server Error");
  }
});

The section that verifies the NotchPay signature is this one, this ensures that the webhook is coming from NotchPay and is related to your account.

const hash = crypto
    .createHmac("sha256", apiKey)
    .update(JSON.stringify(req.body))
    .digest("hex");

  if (hash != req.headers["x-notch-signature"]) {
    return res.status(403);
  }

In this section, I retrieve the payment transaction from my database and check his current known status, NotchPay will recall this URL and send the webhook if the response is different than HTTP 200 OK, the reason being the fact that it doesn't know the state of your system, it might be unavailable or an error or processing has happened, this is why you should keep a real logic while returning a response from the request.

let { data: payment_transaction, error } = await supabase
      .from("payment_transaction")
      .select("*")
      .eq("transaction_id", tid)

    if (error) {
      console.error("Error retrieving transaction:", error.message);
      res.status(400).send(JSON.stringify(error));
    }

    if (payment_transaction === null) {
      res.status(404).send(JSON.stringify({ error: "Transaction Not Found" }));
      return;
    }
    if (
      payment_transaction[0].status === "complete" ||
      payment_transaction[0].status === "canceled" ||
      payment_transaction[0].status === "failed"
    ) {
      res.status(200).send("Webhook received and processed successfully");
      return;
    }

In this section it will get the payment object on NotchPay and update the transaction status in the database, it will also save the complete JSON object received from NotchPay, I always do this in order to make sure I can audit this information later if I need to know what happened during the lifetime of a transaction. it's saved on the field api_response as an array (kind of history)

let paymentObject = await verifyPaymentStatus(reference);

    if (paymentObject.status == null) {
      res.status(503).send(
        JSON.stringify({
          error: "Provider server not available",
          data: paymentObject.transaction,
        })
      );
      return;
    }
    const transaction = paymentObject.transaction.transaction;
    const { error: tError } = await supabase
      .from("payment_transaction")
      .update({
        status: transaction["status"],
        api_response: [...payment_transaction[0].api_response, transaction],
      })
      .eq("transaction_id", tid)
      .select();
    if (tError) {
      console.log(`[webhook] An error occurred: ${tError.message}`);
      console.table(error);
      res.status(500).send("Internal Server Error");
    }

After this I can resume the actions that need to be taken after a payment happens, namely disabling existing subscriptions and enabling new one that corresponds to what the user paid for. In the end, I will just redirect the user to the bot URL

res.redirect(`https://t.me/${BOT_TELEGRAM_USERNAME}`);

This is because my system is a Telegram Chatbot, so it's necessary to resend him back to the chat UI.

Conclusion

I shared with you how I used NotchPay to accept payment (mobile money) for my telegram Chatbot, this happens via 3 steps Initiating the payment, the payment itself by the user, and the verification of the transaction. In this article I didn't cover our the subscription plan logic is made on the chatbot, it will be done in another piece of content itself, the process explained here can be used on a chatbot or website or anywhere to process a payment, it's doesn't need to be a subscription like here. Not that this process is roughly the same even for a payment with Paypal or stripe and most of the payment gateway out there.

A while back with my team when working on a project we needed to add some audit features on the platform to be able to trace what happened in the app and show it to the end users and use it also for customer support requests, we were receiving at that time a lot of requests requiring us to know what change has happened on various objects in the database, so we need a system to help us achieve that. And we knew that when building a web application, especially when it has some business value it's important to provide the ability for the end user to know who did what action, or the changes that occurred on a specific object in the database and who did that change.

For example, if an invoice has been created, processed and validated, and later on we need to display all the history of changes on it, we need to build an audit trail, a system of record that can hold the history of changes like logs; this is called maintaining an audit trail.

The basic Principle

regardless of what framework you are using the principle remains the same, you need to find a way to listen to everything that happens in the application and log those somewhere, it could be a file, a database table or anything else, as long as it can keep all the data you send to it.

With Django Framework the simple way to do that is by connecting to various signals like post_save or m2m_changed on all the models at once (it's possible) and process the signal's data to save them somewhere as events, this should ideally be done in a dedicated thread or asynchronously to avoid slowing the application.

Therefore it will be possible as well to choose what type of event should be logged or what models should be tracked, you got the idea ;).

The available solutions in Django packages

There are several packages to achieve this but will showcase only 2 of them here because is actually used them both and they work differently internally.

The django-easy-audit package

https://github.com/soynatan/django-easy-audit

This package is installed via the command pip install django-easy-audit and added to the project's settings like this:

INSTALLED_APPS = [
    #...
    'easyaudit',
]

MIDDLEWARE = (
    #...
    'easyaudit.middleware.easyaudit.EasyAuditMiddleware',
)

It provides the ability to watch a lot of events such as login , crud, HTTP request in the project and save them into a dedicated set of database tables (models): CRUDEvent , LoginEvent and RequestEvent .

There is a set of settings to change how it works or what models it tracks. such as:

• DJANGO_EASY_AUDIT_WATCH_MODEL_EVENTS

• DJANGO_EASY_AUDIT_WATCH_AUTH_EVENTS

• DJANGO_EASY_AUDIT_WATCH_REQUEST_EVENTS

These settings are used to disable/enable the specific type of event tracking.

The django-simple-history package

This package provides the same result but it behaves slightly differently, It mirrors all the table in the database and store each object changes in the mirror table related to the model. And provide an attribute that you can add to each model to access each instance's history. To add this package to the project you need to run : pip install django-simple-history and set it up in the project like this:

INSTALLED_APPS = [
    # ...
    'simple_history',
]
MIDDLEWARE = [
    # ...
    'simple_history.middleware.HistoryRequestMiddleware',
]

And add the history attribute to all the models you need to track

from simple_history.models import HistoricalRecords
class SomeModel(models.Model):
    history = HistoricalRecords()

And create a migration before running it.

python manage.py makemigrations
python manage.py migrate

It will add the history attribute to the SomeModel class and create a app_historicalsomemodel , the table where all the changes happening on the model will appear. It's well explained here: https://django-simple-history.readthedocs.io/en/latest/quick_start.html#what-is-django-simple-history-doing-behind-the-scenes.

This means the number of tables in the database will probably get multiplied by 2, at least all the models you wrote if you desire to track them all. To access the history (audit trail) of a specific model's instance it's done by using someModel.history.all(), It returns a QuerySet of SomeModel with the various version of the object over time (since his creation) and you can use queryset filters to get whatever version you want.

Summary, what to remember

We did test these two and choose django-easy-audit for some reason, I will give you some pros and cons of the 2 libs.

django-easy-audit

Pros:

• Very simple to install in the project

• Add only 3 tables to the database

• Requires no changes to the models or the project

Cons:

• It saves all the model's data in the same table, which make the number of rows grow fast (according to the number of the model being monitored)

• Provide no functions or utility to browse an object's history easily

• Provide a really simple admin integration, just a regular list of events containing JSON objects that need to be processed by the person using the admin

django-simple-history

Pros:

• Provide a simple API to navigate the model's history via .history.all()

• Avoid storing too much data in the same table

• Provide a good admin integration to navigate the object's history

Cons

• Create a copy of each table, which can almost duplicate the number of tables if you track all the data

• In some cases migrations were not applied or well applied, the package seems to be the cause since it stopped happening when we removed it from the project.

What I think

I don't like the idea of having too many tables in a database, so I will go most of the time with django-easy-audit, but I also think audits (model's history) don't need to be stored in the database, since they are anyway not used too much most of the time, it makes more sense to me to store them in another system, file, object storage, stream processing system etc. Just like you would do with logs and logs files.

An improvement I think could be done on these packages is to send the generated data into an external system like a stream of data and avoid putting too much data into the database and retrieving them on demand.

Edit: after a comment by Tom Dyson, it turns out there is a way to achieve this in django-easy-audit , simply by using the DJANGO_EASY_AUDIT_LOGGING_BACKEND setting s and implementing a method to send the data into another logging system as in the example:

  import logging

  class PythonLoggerBackend:
      logging.basicConfig()
      logger = logging.getLogger('your-kibana-logger')
      logger.setLevel(logging.DEBUG)

      def request(self, request_info):
          return request_info # if you don't need it

      def login(self, login_info):
          self.logger.info(msg='your message', extra=login_info)
          return login_info

      def crud(self, crud_info):
          self.logger.info(msg='your message', extra=crud_info)
          return crud_info

learn more here: https://github.com/soynatan/django-easy-audit#settings

Resources

https://github.com/soynatan/django-easy-audit

https://django-simple-history.readthedocs.io/en/latest/index.html

A few years ago while I was still running my Django Consultancy Agency, We worked with a client who built a website over the years with a Content Management System (CMS) named Joomla and he was facing some issues such as adding new features, many hassles with managing the content, editing the various webpages and more importantly receiving payments in local currency (XAF, XOF) via local payment processors (Mobile Money) in addition to Paypal. The whole installation was a huge set of plugins and many patches here and there made over the years with all the incompatibility coming with it, all running on MySQL server, everything was installed within a VPS where all the uploaded files were hosted.

The website is an educational platform where visitors could create their account and download content (Books, Software, Watch Videos, etc), now the owner wanted it to have more features such as Audio Listening of PDF books, an improved Full-Text Search engine capable of indexing the content of each PDF book uploaded to the platform and monthly subscription to access the content and various other features. We did follow some steps to properly build a new Back-end with Django and migrate the data (database and files) in it. We also choose to host it using Amazon Web Service. There was a separate team working on a React Based Frontend, so we also had to produce many REST endpoints to be consumed.

Designing and Building the Django Back-end.

The first step for us was to design a system with Django that could accept the old data from Joomla and enable us to develop more features easily. We decided to do a design around some OOP concept such as inheritance, so we had many models (video, document, etc) which inherited from a main model (which hold most of the attributes shared by all the content available on the site), and then we added more models according to the new features (bookmarks, likes, billing plan, subscription, payments transactions, etc).

class Resource(models.Model):
    # common attribute
    pass

class Video(Resource):
    # Custom attributes and method
    pass

class Document(Resource):
    # Custom attributes and method
    pass

class Software(Resource):
    # Custom attributes and method
    pass

#... more models

We also exported the data into a CSV form to identify all the currently existing attributes per resource available on the platform and we designed our models based on those, we used them as the base for our work.

After all this, we made heavy usage of the Django Admin UI to avoid rebuilding a new UI from scratch, so we wrote some ModelAdmin Classes using a lot of inheritance and some optimized Queryset to fetch data from within the admin UI.

The PDF document was related to a model and it needed to be indexed for the full-text search engine, we chose Elasticsearch and used the post_create signals to process each uploaded PDF and extract all the text from it using PyPDF lib, once done the text is sent to Elasticsearch alongside the object serialized as a simple elastic search Document.

Database Data migration

After having designed how the data were saved in the database and indexed it was time to put in place some tools to migrate data from the old system and make sure they fit easily, since we were able to extract data in CSV form we used django-import-export in the admin UI to import each model's data from the CSV file and also we wrote some Django commands to make sure everything was properly in sync with our settings such as the static URLs configuration; For example, some paths were absolute so we needed some script to normalize them, some other CSV file where not straightforwardly usable, so we had to write some command to make sure they are transformed into a proper object and all the relationship were rebuilt, We also need to import the users, we had made the user import process to work via Django command that will load the CSV, create the user and set an unusable password, so the users were prompted to change their password on new login.

Uploaded File Migration to AWS S3

At this point we had the data available in the database as well as their file path, we had to copy data from the VPS to an S3 bucket following a few steps:

1. We installed the AWS CLI on the server

2. Start a copy process with aws s3 cp command to upload from the server to S3

3. Update the missing file path in the S3 bucket or the database.

Once the data are available on S3 we could do whatever we wanted and we even added a CloudFront distribution to serve the data efficiently.

From a security standpoint, all the files are private so we added some functions to get a pre-signed URL when a file was requested.

Links & Resources

Here is a little set of links to the various tools we used in the process.

Optimizing Django Admin Queries

How to transfert data from a server to S3

Use Elastic Search with Django

Django Import Export Documentation

Thank You for reading ;)

The trends have not changed since that time. We are trying an attempt with my team, to provide a proper community-building platform for companies.
The ideas are to enable companies to drive engagement between employees with the usage of purposeful communities, for example, communities around photography, climbing and much more fun stuff.

A community should be a whole universe by itself.

I used the expression "Community Building Platform" because it allows not to create of one huge community like it's done on slack, but to create many dedicated communities and enables various features in each of them.

A list of initial features is:

• Feed system

• Live Streaming

• Events

• Video Conference (Webinar tool more like Zoom)

• Forums

• Content moderation capabilities

• Company (or organization-wide) announcement board

We plan on adding more to the platform as:

• Audio chat room

• Text Chat

• Groups within communities

• Community Goals (Leader-board)

• Fun Games Platform (Word, number, and more fun games)

Unlike most of existing or widely used tools (Slack, Discord, etc.) which are primarily communication tools, our community platform is more a Community as a service platform where an organization has the possibility to create as many communities as needed and each community is a whole universe by himself.

Check us out at: https://www.workbud.com

Please feel free to comment, I am available to respond any question on the topic or the platform.
A feedback would be appreciated as well, thank you.

Note: I published this article here the first time: https://www.indiehackers.com/post/slack-isnt-a-great-tool-to-create-communities-it-seems-to-be-a-fact-how-should-be-the-perfect-one-4b817d7353

Do it just for fun

A Few years ago in 2015 (~2016) I had built a really small project during the summer, a web application to allow a car driving school to track and manage all the trainees, it was simple enough to be useful, since I was working on it with an owner of a driving school (my mother had bought a new car and she was re-learning to drive). He was pretty happy with it, i learned a lot with that little experience (how to deploy in a small company, speaking with end user, etc), back in school the next year we had a project contest in school and the goal was to show something working, useful and sellable, I was in a enginering school where one of the things we learned was to present our project as entrepreneurs or marketer, so one of the requirements was to present it in the way it could be sold to someone. At the first glance i didn’t wanted to be a part of that, but my friend convinced me to go and present my project, since he knew it and i said yes. I made the presentation for about 10 minutes. I was mainly showing the project and it’s features, at the end the judge asked me:

“is it all ? How can you make money with this ?”

I felt empty at that moment, i had no idea of how to do it, where to start, i was just thinking about my friend who convinced me in the beginning to be a part of this. I hangry at him for that bad moment i was having infront of everyone.

Mind refractoring

After that he gave me a lot of insights, he explained me a whole process of how I could reshape the product and search for stakeholders to make it more sellable. And I liked what he said, it stayed in my empty mind and it was like a reference example when I was planning to write a monetization plan for something else (even now i still think with that approach). I didn’t know what was coming with this knowledge. Then I started all my projects (even smallest one) with a plan of monetization, I always had that in mind, more important, in our school we could ended up in a project contest at any moment without planning ahead, so we always had to have projects ready to be pitched during an improvised contest (even student in networking class had to stay prepared with projects in their fields).

Mindset shift

That habit took slowly a great pleace in all my mental process to choose, design and realise projects, even personnal projects. With a real lack of business knowledge, I mostly ended up doing nothing most of the time. The I shifted from the mindset of a “doer” to the one of a “thinker”. I was always planning stuff ahead and trying to see at least one way of monetization. My goal was now to have at least one monetization channel, so I could happily show it to someone who may be ready to take the project to a further step(investing, startup incubation, etc.).

Let’s be clear, it’s not a bad idea to think like that, but it can be a pain point at some point, especially if you are an engineer. I was in a mindset of stopping to imagine great think just because I was not able to figure out how to make money out of it at some point in the future (even potentially). This is what I think is bad at all this, I am trying to remove that mindset and start doing things just for the sake if doing them, and this come with a lot of procrastination.

It haven’t been that bad for me since i am working as a Tech Product manager in a early stage tech startup in HR Tech (Workerly) and most of my work is to figure out the feautres to build and make a lot of planning ahead. Now i am trying to regain my “doer” mindset.

Thank for reading, I just wanted to write this down like a personnal therapy.

What is available ?

A quick tour here shows us a list of them. We have :

• wagtail-metadata
• wagtail-metadata-mixin
• wagtail-schema.org
• wagtail-opengraph-image-generator
• wagtail-redirect-importer

How to install ?

In this post we will focus on wagtail-metadata which is quite easy to install (like every others wagtail plugin);

pip install wagtail-metadata

Add the application to INSTALLED_APPS in django settings.

INSTALLED_APPS = [
    ...
    'wagtailmetadata',
]

and it's done. No migrations to apply (at this level at least).

How does it work ?

To properly add SEO support on a web page you should follow a set of rules and add some meta tags to the HTML document, these are named Opengraph meta tag, in the <head> tag. These tags are basically:

• Meta content type

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  

• Meta title

  <meta name="title" content="page title here">
  

• Meta description

  <meta name="description" content="some description goes here">
  

• Meta author

  <meta name="author" content="name of person who wrote the content">
  

It's more explained here on https://moz.com/.

Our goal is to easily add and update those tags and their values on the site's pages and it's the goal of that lib. To do that as in wagtail every page is based on a type defined in models we will need to extends MetadataPageMixin from from wagtailmetadata.models import MetadataPageMixin and we will have a code looking like this :

from wagtail.core.models import Page
from wagtailmetadata.models import MetadataPageMixin

class HomePage(MetadataPageMixin, Page):
    pass

class AboutPage(MetadataPageMixin, Page):
    pass

Because of our inheritance works in python and this lib implementation MetadataPageMixin should be put before Page class. At this point you can makemigrations on you apps and go to the site admin and try to create or update a page to see some changes.

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Now we have more fields on the page admin where we can edit SEO related field under the promotion panel, now let write some tag into the template to display those informations at the right place. As it need to appear on all the site's pages we will have to put it into the base template of the site, by default is named base.html and is found in you main project folder, if your project is named mysite you will find it out inside mysite/templates/base.html. The point is now to write useful Django tag to return this into the head element like in this snippet:

{% load wagtailmetadata_tags %}
<html>

<head>
{% meta_tags %}
</head>
<body>
</body>
</html>

This is enough for a basic SEO support, it will handle the meta field generation process and will output meta tag for social media (facebook meta, Twitter meta, etc). At this point you can checkout the rendered HTML and see the result.

As you see, by default this provide meta tags for twitter and OpenGraph (which is more common), it also provide simple meta description content for HTML itself.

To test the render you can open a OpenGraph checker like twitter card validator to see how links to you pages will be interpreted and displayed on twitter. Here is the result of validation on one website i've build using Wagtail CMS. There is a lot of other tools out there to do this kind of tests.

There is a lot more stuff achievable with this lib, the purpose of this post was to introduce it and the concept. You can do more by checking it documentation which is well written with a lot of examples.

Thank you for reading, you can hit me up on twitter if you want to know more.

What tool am i building now ?

My first tool is a URL shortener service like bitly. It is small enough to allow me to add new features at every working session and avoid discouragement and stop working.

Current tech stack:

• Frontend: React.js (JavaScript)
• Backend: Flask (Python)
• Database: Redis & PostgreSQL (or another one)

What am i expecting to learn ?

• React's hooks
• React's new dev practice (it's been a long time i didn't touch that)
• Flask, yes it feel like a shame to be a python backend dev without experience in Flask, but it's never too late to learn it.
• Some basics UX design principles to build a usable UI
• AWS cache service.
• Small app deployment service with AWS (will need advices here)

How will i progress ?

As my plan is to work every night on one feature, i will have to made a small blog post about the feature in this series to show my progress and explain what i've learned, where i was stuck and what to do next.

What i can expect from you

Am open to new ideas about the project and even advices about everything you thing is necessary (from hosting service to project design).

Thank you, hope we will discover great things.

Quand on dit commerce électronique on vois directement les géants comme Amazon, Ebay, Alibaba etc, ils sont tous different sur plusieurs point mais il y'a des standard qui les caractérisent et qui sont des points communs pour eux tous, je citerais : le processus d'achat (checking out process) le processus de vente (le système de panier etc) le système de commande et de livraison, il en existe plusieurs autres éléments qui sont recurrent a ces plateformes. Le fait est que en Afrique les plateformes de commerce électronique ne dérogent pas vraiment a cette manière de fonctionner et c'est peut-être à ce niveau qu'elles pèchent, vu qu'il ne semble pas réellement décoller le domaine du commerce électronique sur notre continent.

Attendez pourquoi je dis qu'il peine a décoller ?

Deja a titre personnel je n'ai jamais fait un achat en ligne (je ne compte pas l'achat des services tel que les espaces d'hébergement, nom de domain, etc) et ce n'est pas l'envie qui me manque mais le fait de voir certain catalogues pas très fournies (pas beaucoup de choix a mon gout ou a mon niveau) et surtout les prix qui me m'arrangent pas toujours. Ceux de mon entourage qui en font payent généralement a la livraison, et c'est le plus souvent a cause d'un manque de confiance par rapport au site de vente. Les délais de livraison souvent très long et ce malgré le fait de livrer dans la meme ville.

Les standards existant.

Ceci dit, quand je regarde les sites de commerce électronique dans l'écosystème africain ils reprennent tous (ou pour la plupart ) les standards venue d'ailleurs( Europe, USA, Asie, etc) et jusqu'ici, sa stagne, alors que le besoin est présent. Si on regarde bien, ce style de commerce est tout sauf Africain car en Afrique :

• On ne paye presque pas les produits avec des cartes de credit
• On aime marchander (discuter) les prix des articles avant de prendre
• On aime le contact physique (meme seulement vocale) avec le vendeur, on préfère le contact humain chaud plutôt que le contact digital froid a travers les écrans de telephones et autre périphériques digitaux.
• On deviens "asso'o" avec le vendeur
• On demande conseille a une connaissance qui a deja consommer un produit et on achète de préférence la ou ce dernier a acheter et éventuellement au meme prix (ou moins chère)

Ceci résume un peu l'ADN du commerce en Afrique, son originalité, ses spécificités, si elle étaient traduite sur un site de commerce électronique veritable avec tout ces codes alors je pense qu'on parlerais réellement de "commerce électronique Africain"(quelques aspects du commerce électronique en Afrique ici ). Sa caractéristique principale serait donc son coté "social" car comme Rebecca Enonchong le disait dans ce tweet :"I believe that social e-commerce is what will work in Africa. Not shopping cart e-commerce" (Je crois que le commerce électronique social est ce qui fonctionnera en Afrique. Pas le e-commerce de panier). En fait si on suis le raisonnement qu'elle décrit on vois rapidement la différence entre le commerce en Afrique et ailleurs, en Europe par exemple les gens:

• Vont dans une boutique (super-marche ou autre)
• Parcourent les rayons
• Ajoutent les articles dans leur panier.

• Passent a la caisse avec leur carte de credit (ou des especes)

  https://twitter.com/adonis__simo/status/1139820199090249728

Le processus est alors terminer, On se rend très vite compte que les sites de commerce électronique occidentaux suivent ce processus a la lettre, en fait il a simplement été digitalisé, mais en Afrique sa n'a rien a voir, on préfère:

• Allez au marché avec une liste de course (souvent)
• Parcourir les différents comptoirs et voir ceux qui proposent ce que nous voulons
• "Discuter" (marchander) les prix avec plusieurs vendeurs à la fois pour le meme article (ma mère est très forte a sa), éventuellement devenir "asso'o" avec le vendeur qui nous propose un "bon" prix
• Mettre le tout dans un "pousse" qui va nous aider a transporter les marchandises hors du marcher ou meme jusqu'a la maison (la partie logistique)

Le processus est alors terminer, voila je pense ce qui résume l'essence du commerce en Afrique, si on réussissais a digitaliser sa ce serais un très grand pas.

Qui s'approche le plus du standard Africain ?

En regardant donc le commerce électronique sous cet angle, le seul endroit sur internet à ma connaissance qui suivent ces codes c'est Facebook (et les autres réseaux sociaux), a travers la fonctionnalité de "groupe de vente", en effet dans ces groupes les utilisateurs ont la possibilité de:

• Lister des articles a vendre dans plusieurs groupe a la fois
• Au lieu d'ajouter au panier, les utilisateurs (acheteurs) vont simplement "discuter" avec le vendeur
• Apres que le deal sois conclu les protagonistes s'échangent leurs contacts et se donnent rendez-vous physiquement pour le paiement et l'échange de l'article, quelques fois ils feront appel à des services de livraison comme Coursier express si ils ne sont pas disponible dans sur le champ

C'est vrai ce processus ne garantie pas la qualité du produit mais au moins le vendeur et l'acheteur peuvent se rencontrer et discuter face a face, remarquez aussi que les boutiques physique (dans les marchés en général) créent leur compte sur Facebook pour faire la meme chose tel que décrit plus haut. Notons que le contact humain est si important pour nous Africain que quand je pense au fait que Ingrid NGOUNE( CEO de DFIT Delivery) m'a dit tout récemment que malgré le fait que ses articles soient lister dans un site de commerce électronique les visiteurs préfèrent l'appeler avant de passer a l'achat et les raisons sont diverses, je pense que sa montre ce cote social a suffisance.

Le fait que Facebook sois plus utiliser en matière de commerce électronique que n'importe quel autre site de vente en Afrique et au Cameroun en particulier (vu que c'est de la que je suis) montre a suffisance que ce modèle peu réussir en Afrique, alors la on parlerais de "commerce électronique Africain", bon si on regarde encore le fait que Facebook lance une monnaie électronique sur sa plateforme (et celle ci semble cibler l'Afrique ) sa ouvre un autre débat, mais celui ci fera eut-être le sujet d'un autre article.

En guise de conclusion Comme vous l'avez surement compris depuis le debut cet article est très inspirer des analyses et commentaires de Rébecca ENONCHONG et d'autres personnes via twitter et LinkedIn, je me suis juste contenter de faire quelques recherches pour comprendre un peu plus le sujet et compiler sous la forme de cet article, bah je dirais donc que pour faire un produit en Afrique il est très important (voire meme vitale) de comprendre la psychologie des Africains, leurs habitudes etc. Une fois de plus merci infiniment d'avoir pris quelques minutes de votre précieux temps pour lire ceci, j'espères avoir votre avis dans les commentaires et discuter avec vous sur le sujet. Twitter : @adonis__simo

Ingénieur de travaux informatique en génie logiciel, je suis sur le marché du travail son fait bientôt 3 ans, je me suis spécialisé dans les applications web et les applications de gestion d'entreprises, quelques fois je touche aux sites web et applications mobiles. J'ai déjà eu à bosser dans 2 entreprises (entre autres) au même poste, celui de développeur d'applications web destinées à un usage en entreprise, et ça m'est très souvent arrivé de travailler avec l'ERP Odoo et me retrouver quelques fois dans la peau d'un commercial (ou technico-commercial) pour les rencontres client et les démos.

Mon expérience

Au fil des mes aventures le constat a été relativement le même, malgré le fait que les cibles et le discours était relativement différent. Grosso modo il a presque toujours été question de fournir une solution logiciel de gestion totalement en ligne pour les entreprises de petite et moyenne taille, avec un système de facturation mensuelle. Le processus a été en général le même quand il s'agit de faire découvrir le logiciel au client jusqu’à son usage (ou pas) dudit logiciel, ce processus se résume en général comme suit :

• Discuter avec le client pour faire connaitre l'offre, les avantages etc. (faites en général par un agent commercial)
• Présenter une démonstration de la solution (par le commercial et un technicien)
• Installation et formation et suivis du client (si achat celui-ci fut intéressé par la solution)

Ces étapes sont un résumer du processus et varient selon l'entreprise, l'approche et bien d'autres éléments. Bah C'est à ce niveau que sa devient intéressant par ce que les résultats sont relativement les mêmes peu importe ou j'ai été.

Mes constats

À l'étape de l'adoption de la solution informatique par une entreprise il a généralement été question de discuter avec les membres de l'entreprise en question et plus précisément le(s) chargé de la cellule informatique et le(s) comptable(s) s'il y'en a. Les comportements observés ont été relativement les mêmes. Essayons de voir les potentiels points de "blocage" au sein du processus de vente d'une solution informatique.

Les informaticiens

Et bien à ce niveau se trouve le premier blocage, cela dépend en fait de deux éventualités. Sois le responsable est OK pour vous laisser une chance de présenter votre application et l'adopter si tout est fonctionnelle ou alors il décide de vous mettre les bâtons dans les roues. Le deuxième cas est le plus récurrent. Malheureusement, il s'est avéré que les IT de par leurs positions ont un total contrôle sur l'entreprise et certains ont carrément de gros avantages et ne veulent pas être dérangés par l'intervention d'un tiers. Les méthodes pour outrepasser ce souci sont variées et dépendent souvent de l'agent commercial, sa peut aller du "lobbying" (pas politique cette fois ;) ) a un système de pourcentage de commission entre les IT et l'entreprise qui propose le logiciel (nous en l'occurrence), et même jusque-là ça n'est pas forcément assurer que le deal va être conclu. À mes débuts je me demandais comment un informaticien (comme moi) pouvais refuser d'utiliser des solutions informatiques innovantes pour son entreprise mais au fil du temps j'ai compris que c'est surtout une question d’intérêt et d'habitudes (pour la petite histoire, un ami a moi qui est certifié CEH et maintenant boulanger est très réticent quand je lui propose une application pour gérer ses boulangeries, il sait de quoi il est question pourtant). Après le département informatique, on est souvent amené à discuter avec le département de la compta (le nerf de la guerre).

Les comptables.

Ceux-ci représentent le nerf de la guerre dans notre cas parce qu'ils ont un très gros pouvoir décisionnel dans l'entreprise, en effet on ne pourrait parler de gestion d'entreprise sans parler des comptables. Donc même si les IT ont déjà validé l'usage du logiciel en entreprise ceux-ci peuvent simplement invalider cette décision. En fait il se pose généralement plusieurs soucis, de manière générale les comptables ont leurs vieilles habitudes et automatismes, pour ce qui est des comptables expérimentés (pour éviter de dire "vieux") certains ont déjà en leur possession des outils comme des feuilles de calcul Excel monstre contenant carrément toutes les formules de calcul (de vrai mini ERP) et ne sont pas souvent déçus de celles-ci, vu qu'ils en sont les auteurs en général et par conséquent capables dès les changer à volonté, OK. A côté de ceci il faut aussi noter que les comptables sont toujours formés à l'usage d'application comme SAGE à l’école et par conséquent sont souvent réticent à l'usage de nouvelles solutions en matière de comptabilités ou de gestion, mais le constat général est que si vous montrez à un comptable comment générer ses bilans avec votre solution ou encore comment ressortit ses balances de comptes et autres rapports, pour ne citer que ceux-ci, ils peuvent être prêt à adopter votre solution, en fait ceci c'est dans les meilleurs des cas, au pire si le comptable n'est pas vraiment pour la transparence dans la gestion que votre application va offrir et préféré gérer la comptabilité comme une "boîte noir" sa sera encore plus compliqué. Bon une solution à ce problème est de rendre la solution informatique totalement modulable et la proposer en supprimant le module comptabilité que vous offrez et enfin permettre l'export complet de données sous un format Excel (par exemple) ainsi le comptable utilise ces données avec ses outils et tout le monde est content, bon c'est un constat que j'ai fait a ce niveau.

Les directeurs généraux, les fameux "CEO"

À ce niveau la difficulté dépend de l'approche de l'entreprise par le commercial, en fait j'ai eu à voir 2 types d'approche, disons l'approche montante et l'approche descendante(je pense que ceux qui ont fait marketing connaîtrons son mieux que moi):

• L'approche montante:

Ici le commercial a rencontré l'entreprise en venant aux portes de celle-ci en commençant par l’accueil et q présenter son offre pour obtenir un rendez-vous avec une personne qui aurait un pouvoir décisionnel, selon l'entreprise il peut s'agir d'un comptable, un informaticien, le DG lui-même ou autres personnes. Dans cette approche les choses vont souvent lentement parce que ce n'est pas tous ceux que la commerciale rencontre qui veulent la solution (s'ils la comprennent) et par conséquent vont freiner l'avancer du commercial dans l'entreprise.

• L'approche descendante

Ici le commercial est entré en contact avec l'entreprise directement en communiquant avec le directeur général (CEO), là les choses vont généralement plus vite, surtout quand celui-ci a compris de quoi il est question et comment sa peu l'aider. Vous l'aurez compris n'est pas vraiment accru, en fait elle dépend du niveau de compréhension du CEO de l'offre que le commercial lui fait, en outre sa dépend alors de la capacité à convaincre du commercial. Mais en général plus le directeur général est jeune mieux on a de change de présenter notre solution et de se faire entendre, voire même espérer avoir son entreprise comme cliente.

Vous l'aurez compris le schéma général à ce niveau j'espère (sinon les commentaires sont attendus avec toute question), je ne suis pas commercial, donc je suppose que ceux qui ont fait des études dans ce domaine en savent bien mieux que moi sur ces deux approches que j'ai décris ci-haut (uniquement de mon observation) je ne sais même pas s'il s'agit du nom exact de ces approches.

Les employés (les utilisateurs finaux)

Les blocages ne sont pas seulement observés dans le processus de vente ou d’intégration de la solution mais aussi dans l'usage au quotidien, le but de l'application est de permettre aux employés (les utilisateurs) de rester productif dans leurs travaux quotidiens, mais si ceux-ci sont ralentis par votre solution il est normal que l'entreprise annule le contrat. Le souci ici est le fait qu'en général dans les entreprises si les employés se font des bénéfices sur l'activité opaque et non suivie de l'entreprise alors ils seront réticents et même souvent contre l'usage de telles solutions (ça leur coupe le "gombo"), ceci a très souvent été observer dans le cadre des entreprises de commerce de produits (boulangeries, etc.) où il arrive que les vendeurs se fassent des bénéfices extra sur les ventes au détriment du chiffre d'affaires de l'entreprise. alors à la moindre défaillance ils vont signaler le fait que le logiciel "ne marche pas" et doit être impérativement annulé pour revenir aux anciennes méthodes, gestion avec la paperasse en général.

Ce que j'en dis (ou que j'en pense)

À mon humble avis toutes ces situations sont généralement issues du fait que:

• Le Cameroun et l’Afrique en général sont encore vierge et ce n'est pas idéalement dans nos mœurs d'utiliser l'informatique pour autre chose que le fun (réseaux sociaux, ordinateur, etc.)

• Il est important de faire vendre ce genre de solution pour le moment en utilisant l'effet de réseaux et ne pas attendre des gains faramineux d'un seul coup (ce qui était le but des dirigeants des entreprises dans lesquelles j'ai bossé sur ce genre de projet). Je parle de réseau ici dans la mesure où il est question de recommandation, beaucoup d'entreprises sont prêtes à utiliser une solution informatique si elles voient d'autres les utiliser, on va alors se retrouver avec du "bouche-à-oreille" et des recommandations de la part de personnes ou d'entreprises satisfaites. Un facteur non négligeable en ressort ici alors, la confiance (a travers une bonne relation humaine), il est d'autant plus facile de vendre quelque chose quand l'acheteur est confiant et voit en vous pas seulement un type (ou une entreprise) qui veut lui faire dépenser mais quelqu'un qui vient l'aider à grandir, à résoudre ses problèmes, et cette dimension-là est très négligé dans les stratégies de ventes et acquisition de clients.

• Le marketing n'a pas forcement été bien fait, de manière générale le paysage numérique est vierge, par conséquent un petit investit dans une stratégie de marketing de contenus, de la promotion sur les réseaux sociaux, un excellent ciblage, une bonne segmentation des clients, un peu de dépense en matière de prospection sur le terrain (incontournable ici) et un peu d'investissement sûr de la publicité en ligne pourrait bien fonctionner. J'ai remarqué (et je pense que c'est vrai) que c'est plus facile de faire comprendre à une personne lambda que votre application est conçue pour les restaurants plutôt que lui dire que votre application est conçue pour "toutes les entreprises", même si c'est possible, genre all-in-one.

• La hiérarchie interne de l'entreprise qui produit et vend la solution de gestion, en fait quand une entreprise a une grosse hiérarchie, sa allonge le temps de prise de décision et le transfert de l'information entre les acteurs de l'entreprise est relativement biaisé (elle est éventuellement modifiée au cours de son chemin) et par conséquent tout le monde n'a pas forcément la même information au même moment. Je parlerais aussi et surtout de vision, en effet pour vendre des solutions informatiques "innovantes" sur un terrain par forcément éduquer et vierge comme le Cameroun, il est important que tous les acteurs aient la même vision, que l'objectif soit clair ainsi tout le monde serais capable de comprendre les actions des autres et de prendre des risques et même de faire des sacrifices à un moment ou un autre sans être inquiété. En fait j'ai souvent observé que les promoteurs des entreprises ont juste une vision grandeur nature de ce qu'ils veulent, et en général il s'agit de pâles copies de ce qu'ils ont vu en Occident, et ils refusent souvent de confier certaines tâches (comme le marketing) aux personnes qui s'y connaissent.

Mes propositions

• Une formation professionnelle de commercial axée sur la vente de solution informatique. La plupart sont juste formés au marketing opérationnel traditionnel avec des programmes qui existent depuis des années (de ce que j'ai pu observer).

• Vendre des solutions informatiques spécialisée et même unique, je prendrai l'exemple de l’intégrateur ERP, Abdou Nasser qui offre une solution unique dédier à l’édition de DSF au Cameroun via son entreprise Proxima Technologie , ainsi que des conseils et actualités de ce domaine-là, voyez par vous-même sur twitter : https://twitter.com/proxima_cm . Là c'est facile de connaitre qui est la cible du produit et la cible elle-même peut savoir très rapidement si oui ou non elle est intéressée par la solution.

• Il ne faut pas seulement vendre une solution informatique mais une expérience, un écosystème dans lequel le client se sent en confiance et écouté, a la manière d'Apple Inc.

Conclusion

Dans cet article j'ai essayé de vous montrer mon aventure et l’état des lieux de ce commerce d'un nouveau genre dans notre environnement, ceci est très généralisé, les articles suivants traiteront d’éléments beaucoup plus précis, comme la vente de solution informatique dans de très petites entreprises a l'instar des quincailleries, commerce générale etc. J'espère que vous avez aimé mon histoire, je suis ouvert aux interrogations, appréciations et critiques.

Si vous trouvez cet article intéressant ou utile veuillez s'il vos plats laisser une like ou un commentaire, ça pourra aider à son référencement et aider quelqu'un d'autre. Merci

Shuup

Ready for use ecommerce solution, it is built to be used in a case of multi/single-vendor ecommerce platform, you can create the next amazon or the next shopify with shuup. It is open source (of course) and there is 2 main way to use it, cloud version or self-hosted version. As you guest you will pay for the cloud version and it allow you to do whatever shuup allow you to do without worrying about server uptime and others, the second version is easy to set up on you own servers like a normal django project, in this case you are responsible of keeping servers up and running with maintainance cost it include etc...

Personnally i would compare it to a platform like Magento in term of what can get done with that. (from what i have seen about the two platform)

Checklist

• Project website & repo :https://shuup.com/ & https://github.com/shuup/shuup

• Github stars : 890

• Multi-vendor : YES
• CMS : Yes

• Default website HTML template : It is shipped with a modern HTML 5 template yep complete and good looking. Sufficient to demonstrate all the default features of the thing.

• Customizability: It came with a documentation to allow you design and develop your ecommerce website.

• Plugins: They (creators) have created a plugin system (addons) easy to use, you can define them within the django project or upload them within the admin UI

• Themes : There is a way to create themes for the platform, they are created as django apps and it use Jinja templating system, which is more advance than the default django's one.
• Community : N/A
• Cloud version : Yes
• Commercial support : Yes
• REST API : yes
• Activity reports : Yes
• Payment and Shipping's solution integrations capabilities : Yes
• Dashboard : Advanced

Saleor

Claimming to be "A GRAPHQL-FIRST ECOMMERCE PLATFORM FOR PERFECTIONISTS", this is a really advanced ecommerce platform in this ecosystem in terms of shipped technologies. It storefront is build as a PWA with React.js and the whole system work on GraphQL.

Checklist

• Project website & repo: https://getsaleor.com & https://github.com/mirumee/saleor
• Github stars : 4050
• Multi-vendor : NO
• CMS : Yes
• Default website HTML template : The default storefront is a PWA built with react.js
• Customizability: Easy to customize.
• Plugins: Plugins are built following some specs well defined within the documentation
• Themes : Can be easilly create following the documentation
• Community : N/A
• Cloud version : No
• Commercial support : NO
• REST API : yes
• Activity reports : No
• Payment and Shipping's solution integrations capabilities : Yes
• Dashboard : Low

Oscar

A domain driven e-commerce solution. Oscar have been created to be modified as the developer want, it easily allow you to add your business logic into the e-commerce workflow. It is separated into several apps with a dashboard to handle products, reviews, inventory etc.

Checklist:

• Project website & repo : http://oscarcommerce.com/ & https://github.com/django-oscar/django-oscar
• Github stars : 3601
• Multi-vendor : NO
• Default website HTML template : It come with a simple bootstrap template used to showcase default features. The most of work will be to override it (change it) a part from changing business logic of the store.
• Customizability: 100 % it has been build to be customize, the code provide a lot of generic code and a lot of class designed to be inherited and overriden. AbstractProduct for example inherited by Product. It even provide a command to fork and override its apps. Plugins: There is some plug in for different purpose availble out there, from payments gateway to REST api enabler.
• Community : https://slack.oscarcommerce.com/
• Cloud version : No
• Commercial support : yes
• API : yes
• Activity reports : Yes
• Payment and Shipping's solution integrations capabilities : Yes
• Dashboard : Medium Those are not the only e-commerce solutions within this ecosystem but those are the most complete ones (from what i've see) and there is still a lot of good solutions out there depending on what you are going to build or your budget, here is the Django package grid for the e-commerce : Django Packages

Thanks for reading this, I am a Django Developer and a writing enthusiast (starting out), if you found any error in this article or anything that deserve a review, pleas leave it in comments; Have a great times.

Each of them provide really different way of managing content and the developer are all of them, i mean they really do it. The development is not driven by the behavior of plugin and especially themes.

Django CMS

Maybe the first one, it has been done to fit the development process of Django itself so it is also easy to get started with, especially with his WYSIWYG feature.

Checklist

• Github star : 6569
• Release date : ‎may 2007
• Main maintainer : Divio, https://www.divio.com/
• Plugins : yes, a plugin marketplace
• Content Management Method : WYSIWYG with Drag-n-Drop on the front end
• Administration : Yes, customised version of Django admin Easy to handle, it work like a normal Django application with a WYSIWYG feature.
• Publication workflow : No

Wagtail CMS

Recent but powerful, a lot of folks out there are saying that it does well some things Django CMS wasn't, i personally agree with that; for example there is a possibility to manage a CMS's page context, just magic. Can be use as a headless CMS. Note that it is data driven. (like Odoo ERP)

Checklist

• Github star : 6772
• Release date : February 2014
• Main maintainer : Torchbox, https://wagtail.io/
• Plugins : yes, there is a list of awesome list of plugins on Github Content Management Method : Each page is define as a Django model and each instance of the page class represent a page in the site. Content are defined within the administration.
• Administration: Yes, A totally new one build from scratch to meet some requirements.
• Publication workflow : Yes, there is a logic of Editor, Moderators and publication review between them embed directly into the CMS.
• Slack channel : https://wagtailcms.slack.com Can be used as a Headless CMS since it provide a full REST API to access page and content.

Mezzanine

Not a lot of thing to say, i didn't work a lot with that but i know that it is very integrated to the Django admin.

Cheklist

• Github star: 3718
• Release date : 2012
• Maintainer : Stephen McDonald (@stephenmcd, Github)
• Theme : There is a Theme marketplace https://mezzathe.me/
• Administration : Django Admin
• Content Editing Method : Directly into the Django admin UI

django-widgy

Checklist

• Github star : 310
• Release date : n/a
• Maintainer: fusionbax, https://wid.gy/
• Content Management Method : WYSIWYG within the Django administration
• Administration : Django admin
• Theming : normal Django template system

Actually there is a lot of CMS solutions out there in this Django's world, some are more mature than other, so the usage of one depend also on the developer strength. For the story Wagtail CMS has been build by Torchbox to replace Drupal in their work.

You can view the Django Package grid related to CMS here : https://djangopackages.org/grids/g/cms/

Thank for reading this, you can .leave a comment to add a CMS to the list and even a thought about it, we could find a new unicorn.

Actually i am a Python developer at Normalis Consulting, i accepted to work there just because of the fact they use python for a lot of things and they actually work with Odoo ERP, since it was on my roadmap of technologies to learn as python developer, i was so excited because i was about to learn about creating modules, apps and other stuff on it, in the other hand the CTO is very good on it, so i knew that i had found a mentor.

What happened

The company actually serve Odoo for multiple clients as SaaS and when there is a new client we just configure the software to fit the client's enterprise needs and even create new modules if needed, this week we was doing that for a financial institution, and our accountant is in the process of configuring the application, he was working on the Payroll module's configuration, and he was stuck at defining some rules in the salaries calculations ( talking here about, salary rules, categories, salaries structures, etc) so he called me ( i am the technical guy), my work was to write small python codes ( but advanced for an accountant) to do some calculations, i was happy to do it but there is a thing : i am a developer, not accountant so i had to learn those concepts. What i does ? (because by the end of day i had some knowledge on this)

How i did

From the time he told me was going to work on Payroll and he actually came to my desk i googled stuff like : what is used to calculate salary ?, what is a salary rule ? etc.. i started to read a lot of articles and book about this concept, i learn about allocations, indemnities, base salary, how taxes are applied to the salary and a lot of things...

To know what i had to learn was not so difficult, i just had to navigate through the app (in Odoo) and googled labels i was seeing on menus, eg: Salary rules on google i typed : what is a salary rules ? etc...

By the end i had a clear ideas of those stuff and the accountant came and explain them to me more and we was ready to start, i did the jobs he wanted me to do and its worked fine. I was very proud of me.

What i have learn

I had never made this kind of business oriented software development, i had some friend who talked a lot about that, and in CS school we had learn some basic stuff about accountant and enterprise management but i didn't gone far into those stuff, but now i am ready to re-open my old books.

I've discovered that as a developer, my ability to find something on google, learn and integrate it was very developed. Every time we, developers, learn by googling things and reading documentation, even totally new technologies, it could actually be a skill.

Now i know how a salary is calculate in detail and what constitute it.

In the future

Now i am ready to learn new part of enterprise management, but i think it will be a kind of learn by doing or learn while being in the core of process... I have faced another problems but i calm, will overcome them without problems (my CTO is there ;) ).

Ok let’s start, the principle.

Actually from my small experience talking about SaaS application design and infrastructure involve talking about data management, I mean questions like how to store data in the database? how to access them? What kind of Database should be used? How to send an incoming request to the right application version? and so on. Globally the concept is to allow the existence of many versions of the same application, each instance, should only show his data and manage only his clients.

1. So, How are data actually saved into the DB, what about accessing them?

In SaaS application each instance of the application is called a tenant, so the deal here is to choose a data separation technique, properly:

A way to store tenant’s data by ensuring that they are saved without being mixed.

Ok, actually this can be done directly into the database, usually there are 3 main ways to separate stored data, they can be called data isolation level within the database. So we have: Low isolation, semi-isolation and high isolation. Let dive into them before start coding.

• Low isolation of data The principle here is to store tenant’s data within the same database and same tables. So you are in a case where each table has a column name for example, as tenant_uuid this column hold a unique identifier for a tenant, and there is a table in your database named for example as: tenants, it should store each tenant’s information like: name, uuid, registration_date, status, pricing_plan_id etc… In this case for all queries to the database, you will have to add a statement to ensure that you are retrieving right tenant’s data like:

SELECT * FROM 'table_name' WHERE tenant_uuid = 5

or with the Django's ORM

TableName.objects.filter(tenant_uuid=5)

• Semi-isolation of data

The principle here is to save data within the same database, same table BUT different schemas. A schemas can be seen as a database into a database, it holds tables from as a normal database and you can create many schemas as you DBMS allow you, for those who use PostgreSQL, they use to work in the default schema named: public and SQL queries to table look sometimes like

SELECT * from public.table_name

With that said, semi isolation method consists in creating new schema for new tenants (your clients, the people who use your SaaS application), and all the created schemas contain the same tables. In this case the users’ data are not saved in the same place. They are technically in a separated table (or databases). So retrieving data with ORM is like:

TableName.objects.all()
# We assume that there is a tool ( a db router ) which is a charge of selecting the right schema to execute the query

we assume that there is a database router which is in charge to select the right schemas for the query’s execution. We’ll set it up in the next part of this article’s serie.

• High data isolation level

The principle here is to save tenant’s data within different databases. In this case when you have a new client you will just create a new empty database to store data. This is why we talk about high isolation, database can be even destroyed, but only one client will be affected, but it can be very heavy in terms of resource consumption. Accessing data with Django ORM can be done like:

TableName.objects.all().using('DB_NAME')
tableNameOject.save(using='DB_NAME')

the using() method (or parameter) is directly available in Django, by default its value is ‘default’; where to find it ? In the settings.py file, at the database information credentials :

DATABASES = {
    'default': {},
    'users': {
        'NAME': 'user_data',
        'ENGINE': 'django.db.backends.mysql',
        'USER': 'mysql_user',
        'PASSWORD': 'superS3cret'
    },
    'customers': {
        'NAME': 'customer_data',
        'ENGINE': 'django.db.backends.mysql',
        'USER': 'mysql_cust',
        'PASSWORD': 'veryPriv@ate'
    }
}

In the example above, there are 3 databases actually registered by their aliases :default, users, customers, so by default ( if you don’t specify using()) Django will choose default.

2. How to know which tenant is required for a specific incoming request ?

Incoming request represents here a user of your application who is connected via the browser and is about to use the application. The point here is to define what is called a tenant detection strategy;

It is a proper way to know how to interact with data stored in the database, it is not really related to the isolation level you have implemented in your application, the result of this operation is the name of the schema (in case of mid-isolation level) or the tenant uuid (in case of low isolation level) or database (in case of high isolation level) to use for data retrieval.

Usually to do that, developers use URL, by adding some indications within it, one of the most simplest and elegant way to do that IMO is by defining a sub-domain for each tenant; Let's assume that you application is a blog engine named www.bloghost.com each client will have a sub-domain and a url pointing directly to his blog like: client1.bloghost.com, another way is by defining url parameter as follow: www.bloghost.com/85DE5148WFE848 and this token can be a hash used to identify the schema | tenant’s uuid | database related to the actual client’s data. This will totally depend on you. Now when you have identified which tenant is aimed by a request you will just need to use the appropriate query to the database. You can even achieve this by using cookies.

I won’t go too far in this article about that because the Django package we are going to use will handle this process for us, so I just tried to explain the concept.

Thank for reading this first part, it was just about knowing how it works and general terms used in this world. The next article will be more practical.