Build a Conversations System with Laravel and Lucid Architecture Pt 1

Our mission today is a head-first dive into some Laravel fun. We'll cover Conversation Systems and building them. We'll explore our subject in depth, learn and hopefully have fun in the process!

We'll build a Conversations System that looks like the shots below.

ConvieX Conversation View

ConvieX Conversations List

Briefing

In this installment, we'll design our database schema, setup our installation and run migrations.

Table of Content

1. What are Conversation Systems
2. How Do Conversation Systems Work?
3. How Do We Build Conversation Systems?
4. How Do We Get Started?
5. Designing Our Database Schema
6. Setting Up Our Lucid Laravel Installation

1. What are Conversation Systems ?

Conversations are a part of our everyday lives. We are constantly surrounded by them. Not surprisingly, an online conversations system is important for both fun and business.

We'll be building a conversations system with Laravel. It will be built using Lucid Architecture.

2. How Do Conversations Systems Work?

Every conversation must have people talking and making replies. We can identify three important parts of a conversation.

1. Conversers:
   These are persons taking part in a conversation.

2. Messages:
   These are either new thoughts or replies to previous thoughts.

3. Conversation
   These are interactions between conversers and messages.

3. How Do We Build Conversation Systems?

To build any type of software, we first need to take a look at our requirements and then carefully plan out steps that would help us meet our requirements.

Our Conversations System has the following requirements:

1. It must grant our users the ability to send and receive messages within our app.
2. It should make the conversation experience as smooth as possible within our tech boundaries.
3. It must scale—that means it must perform as well for a thousand users as well as it would for two users.

Our limitations:

1. We must make the experience accessible to all browser regardless of their level of support for Javascript and (or) WebSockets.

2. We must ensure our Conversations System is well optimized for high performance.

We also have to ensure our users get the very best experience possible within our limitations.

4. How Do We Get Started?

The very first thing we must do to get started building out our Conversations System is design. User Interface (UI), User Experience (UX) and Interaction (IxD) design are usually explored. However, to keep our tutorial simple, we'll stick to just program design and database design.

We must design the database schema to reflect our requirements and limitations. Since we want efficiency and speed, we should design our schema to enable us reduce the number of queries issued to the database.

5. Designing Our Database Schema

To design our schema, we must first pick out the most important stuff in the database. We already understand that a Conversations System is made up of Conversers, and their Messages within the Conversation.

Also, we must understand the relationships at play here.

• A Message belongs to a User and also a Conversation
• A Converser belongs to a Conversation and a User
• A Conversation belongs to a User

Let's examine each of their attributes and fields.

Message

MessageID: The auto-incrementing ID for each message.

Body: The message in text form. It should be able to accomodate large texts so we'll use the text type.

UserID: We'll store the ID of the user that created the message.

ConversationID: We'll store the ID of the conversation that this message belongs to.

Converser

ConverserID: The auto-incrementing ID for each conserver.

UserID: Every converser is a User.

ConversationID: We'll store the ID of the conversation that this converser was in.

LastReadAt: We'll update this datetime field whenever a converser posts a message.

Design

We need a table to represent each entity and how they relate with each other. We can use pen and paper for the design but for convenience we'll use QuickDBD (Quick Database Diagrams). QuickDBD is an online database schema design app that can help us share our schema designs quickly with friends. Simply head over to https://app.quickdatabasediagrams.com and you'll see an example schema for you to modify to your taste.

This is the screen that greets you upon a visit to QuickDBD. You may take the tour if you're curious. Simply click the exit button to skip the tour.

Moving on, simply click File>Clear for a fresh diagram.
Then paste this code in the text area to the left of the screen.

# Modify the code to update the DB schema diagram.
# To reset the sample schema, replace everything with
# two dots ('..' - without quotes).

Messages
-
MessageID PK int
Body text
UserID int FK >- User.UserID
ConversationID int FK >- Conversations.ConversationID
CreatedAt datetime

Conversations
-
ConversationID PK int
CreatedAt datetime

Conversers
-
ConverserID PK int
UserID int FK >- User.UserID
ConversationID int FK >- Conversations.ConversationID
LastReadAt datetime
CreatedAt datetime

ConversationConverser
-
ConversationID PK int
ConverserID PK int
CreatedAt datetime

User
-
UserID int PK
Username varchar
Email varchar
Password varchar
CreatedAt datetime

You should see a diagram similar to what I have below. Feel free to play with the entities and explore.

Now we have our schema design, let's setup our Lucid installation.

##6. Setting Up Our Lucid Laravel Installation

If you have composer installed, simply open a command prompt terminal in your PHP installation's development folder. For my windows installation, I use C:\xampp\htdocs>.

With that done, if you want the most recent version of Laravel, simply run this command. We'll call this project Conviex

composer create-project lucid-arch/laravel conviex

I prefer developing on Laravel v5.3.x as I find it easier to work with, so I'll instead run:

composer create-project lucid-arch/laravel=5.3.x conviex

You should have a directory called conviex in your development folder.

Open the conviex folder and you should see this

Great! Next we need to setup our .env file. Simply open the .env file and edit it to your taste. Here's my .env file below

# Env file code

APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:q63PVcqNRhO8bbU27gDG8rIThkBoAyYObn0jHbWNhOU=

DB_HOST=localhost
DB_DATABASE=conviex
DB_USERNAME=root
DB_PASSWORD=

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

Save and close the .env file.

Our env file specifies conviex as our database name but at the moment that database does not exist yet...Let's fix that! Using your favorite database management tool, create a database named conviex.

If you use XAMPP on windows, visit http://127.0.0.1/phpmyadmin to access the phpmyadmin panel. Click the new link in the left sidebar to access the database creation form. Next, fill in conviex as the database name and create the database.

Next, we must setup our config/app.php file. Simply set the app_name parameter to Conviex.

With that done let's setup migrations and models. Simply hop into the terminal and run these commands

php artisan make:migration create_conversations_table --create=conversations

php artisan make:migration create_conversers_table --create=conversers

php artisan make:migration create_messages_table --create=messages

These commands will create migrations for all our tables.

Next, edit the migration files (the file names may differ, so don't let that bother you) available at the database/migrations directory and add the below snippets up method.

2018_01_02_115123_create_conversations_table.php

    Schema::create('conversations', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('author_id');
        $table->boolean('access')->default(0);
        $table->timestamps();
        $table->softDeletes();
    });

2018_01_02_115059_create_conversers_table.php

    Schema::create('conversers', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('user_id');
        $table->integer('conversation_id');
        $table->datetime('last_read_at');
        $table->timestamps();
        $table->softDeletes();
    });

2018_01_09_165209_create_conversation_converser_table.php

Schema::create('conversation_converser', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('conversation_id');
    $table->integer('converser_id');
    $table->timestamps();
});

2018_01_02_115008_create_messages_table.php

    Schema::create('messages', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('user_id');
        $table->integer('conversation_id');
        $table->text('body');
        $table->timestamps();
        $table->softDeletes();
    });

2014_10_12_000000_create_users_table.php

    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('username')->unique();
        $table->string('email')->unique();
        $table->string('password')->nullable();
        $table->rememberToken();
        $table->timestamps();
    });

Great! All we now need to do is to run this command

php artisan migrate

Check the conviex database using your favorite admin tool and you should see the following tables:

conversations, conversers, converser_converser and messages

Conclusion

In this installment, we examined conversation systems and how they work. We outlined core entities of a basic conversation and constructed a schema around them.

Also, we set up our Lucid Laravel installation, configured our env file, created and ran migrations to create our database structure.

In our next installment, we will set up Eloquent models, create our first Lucid services, features and jobs. We will create repositories and decouple them from rigid implementations.

Stay tuned for the second installment in this series! Have an awesome day!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---