DEV Community

Cover image for How to design your Laravel models fast in 2022 with Fluidbm
Franz Nkemaka
Franz Nkemaka

Posted on

How to design your Laravel models fast in 2022 with Fluidbm

In this tutorial, I will show you how to design your Laravel Models fast using Fluidbm.

πŸ‘¨β€πŸ’» ⚑ Fluidbm is a free Laravel schema designer that syncs your online model designs to your project using a cli. No download and copy-pasting files anymore. Just run "fluidbm pull" and the job is done.

😊 Let's get started:
This tutorial is splitted in two main parts: Designing the models and importing them to your Laravel project.

🎨 Design models with Fluidbm

Foremost, you need to signup or login on Fluidbm: https://fluidbm.com

Press on Create new schema to start a new project

Using the editor, you can rename your Schema. In this case I will name mine "DemoBlog"

New project on Fluidbm

✍️ Creating models

Press on Add Model to create add a new model

You can add as many models as you wish, as well as columns.

To add columns to add Model, simply double-click the model.

It should like this after:
Model showcase in Fluidbm

Using the Model Editor sidebar, one can add Laravel Database Factories, data dummies to fill up your models so you can use for testing.

For our DemoBlog, I will add another Model called Post, with some additional factories, It looks as follows:

Showcase models in Fluidbm

πŸ”— Adding relationships

To link Users ** with **Posts, click on the User model then drag the relation pin and drop on the model you want to connect.
In our case User -> Post.
Then click on the connection line to define the type of Relationship.

Showcase Relationship in Fluidbm

😊 A code preview is also generated to give you some sense of the output later.

⛏️ Importing to Laravel (in milliseconds)

First create a new Laravel project, or open an existing one:

composer create-project laravel/laravel my-blog
Enter fullscreen mode Exit fullscreen mode

πŸ‘¨β€πŸ’» ⚑ Fluidbm CLI

It interacts with the Fluidbm API to generate your Laravel schema schemas, factories and database seeder.

The source code can be found here: https://github.com/franznkemaka/fluidbm-cli

Use it directly with npx

npx fluidbm
Enter fullscreen mode Exit fullscreen mode

or Install it via npm or yarn

npm install -g fluidbm-cli

or 

yarn global add fluidbm-cli
Enter fullscreen mode Exit fullscreen mode

In this tutorial, we will use npx as it requires no previous installation.

πŸ—οΈ Authenticate with Fluidbm

npx fluidbm auth
Enter fullscreen mode Exit fullscreen mode

To link your Fluidbm project to your Laravel project, you have to clone it. Copy the url or the schema id only 61d97a9185de6a5b30ab72e3 and paste it this way
!make sure 61d97a9185de6a5b30ab72e3 to replace it with your own

npx fluidbm clone https://fluidbm.com/schema/61d97a9185de6a5b30ab72e3
Enter fullscreen mode Exit fullscreen mode

It's time to import all our code to Laravel with a single command:

npx fluidbm pull
Enter fullscreen mode Exit fullscreen mode

After 140 milliseconds it is done

All models and factories were successfully generated. A default seeder was also automatically implemented.

Fludibm magic

πŸŽ‰After just 0.14s it is done βœ…

Go back to Fluidbm and perform changes, to resync, just hit npx fluidbm pull and it is done πŸ‘

Now let's migrate our DB and see the changes in a real DB

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Generate mock data using the automatically generated seeder:

php artisan db:seed
Enter fullscreen mode Exit fullscreen mode

Generated Data in MySQL
✨ Boom! I think the result speaks for itself.

To view DemoBlog on Fluidbm use this link, but you can't delete it instead you can Fork it and create your own mutable copy: https://fluidbm.com/s/zfy1opbnJdIW

Give Fluidbm a try!

It’s free and available on https://fluidbm.com
Feedback is highly appreciated fluidbm@rigle.co
Cheers πŸ₯‚!
Franz
Enter fullscreen mode Exit fullscreen mode

Discussion (0)