Django 5: Applications and sites (Building a Multiplayer Tic Tac Toe with Python, Docker, and AI)

Hi everyone!

Once the stack is completed, with a database server, an application server, and a web server that serves static content and acts as a gateway to our application server, we can then build the Tic Tac Toe client itself. To do that, we'll first learn how the Django Framework organizes complex web applications with subapplications.

Let's get started!

Create frontend application

Until now, we have just created a Django app, that is more like a "project". Now, we need to define the internal apps of our project. For our super-mega-cool version of Tic Tac Toe (with dragons), for now we just need a single app. We can call it "game".

Django provides a tool for create these internal sites, using manage.py:

Now, we have another folder in the root of the Django app source code:

Inside the subapp folder we have the models and views files, among other useful files. We will explain them later. For now, define a sample view writing in game/views.py this:

Then, define the URLs of the game subapp editing game/urls.py:

At last, define the URL of the new view editing the general URLs file at ticmagicalline/urls.py. We want our new “game” app to be the root application, so map it to ““ (empty).

Now, rebuild the docker-compose cluster to include the new changes. We can build just one module, the app module actually:

And restart containers:

Then, open the URL to our new subapp at:

http://localhost:8080/

If all is OK, we will see a glorious "Hello world!". Yeah!

Templates and views

To separate logic and visualization, each view may have an associated template. Django has his own template language, you can read everything for it here:

https://docs.djangoproject.com/en/5.0/ref/templates/language/

To add a template to our sample view, define a sample view named index.html in a templates directory under the subapp directory (game/templates):

Then, associate to the view in game/views.py this:

The context dictionary is used to associate data to the request. This data can later be rendered using the Django Template Language directives. In our example, we render the content of "message" using {{ message }} placeholder.

Rebuild the app module again:

And restart containers:

Then, open the local URL again:

http://localhost:8080/

Our Hello World message is now under a proper HTML structure. Great! With this base, we can develop now our full Tic Tac Toe HTML client.

Configure the new app in global settings file

Don't forget to register the new created app in Django app global registry, located in the main settings.py file. Search for the INSTALLED_APPS variable and add the new subapp game, like this:

Also, register the main templates directory in variable, like this:

NOTE: Leave as-is the [...] parts of the existent code blocks.

About the list

Among the Python and Docker posts, I will also write about other related topics (always tech and programming topics, I promise... with the fingers crossed), like:

• Software architecture
• Programming environments
• Linux operating system
• Etc.

If you found some interesting technology, programming language or whatever, please, let me know! I'm always open to learning something new!

About the author

I'm Andrés, a full-stack software developer based in Palma, on a personal journey to improve my coding skills. I'm also a self-published fantasy writer with four published novels to my name. Feel free to ask me anything!