Directual no-code for Web3

Pavel Ershov — Mon, 11 Jul 2022 17:19:56 +0000

Hey folks!

Seven years of work, and now this moment has come! We’ve launched on Product Hunt! If you’re not familiar with our platform, here’s what Directual is all about

What is Directual

It’s a full-stack no-code platform, the first one out there for full development of web3-products. You can create any kind of app, and you don’t need programming experience to do that (although it’s certainly helpful to have).

Directual has really strong backend capabilities: cloud database setup, API configuration, easy creation of backend logic, and integration. Frontend is easy to create with Directual just as well.

Web3

A crypto wallet? You can build that. A crypto exchange? Be our guest. Do we have documentation on how to do that? Yes. Did we build our billing section on our own platform? Also yes. Long story short, Directual has quite a number of web3.0 integrations in place, so it’s quite easy to build your own crypto products, including NFT-related.

Wanna build some stuff?

Try Directual yourself, it’s completely free to get started. Be sure to check out our documentation as well, and our templates! If you like it, we’ll really appreciate if you share what you think about it, here or on our Product Hunt page.

Thank you for reading, update on how it went coming in soon.

Feedback for the new Low-code platform is needed

Pavel Ershov — Thu, 02 Jul 2020 10:52:16 +0000

Hi all!

Recently we've went public with a low-code platform Directual. This is a cloud tool where you can setup:

Database;
Role-based access model and Authentication;
REST-interface for your app (secure APIs);
Backend logic, including scheduled and real-time scenarios.

Low-code market is skyrocketing today, but there is one significant issue—one can hardly go beyond MVP with low-code. So, we tried to create a tool which was suitable for building and running sophisticated apps, not only MVPs.

We are looking for the product-market-fit at the moment. So, I would love to ask you to have a look and give me some feedback on the value proposition, product, on-boarding etc.

Thank you!

React + Low-code backend. The way to skip infrastructure messing up

Pavel Ershov — Sat, 30 May 2020 13:45:50 +0000

Hey all! Almost any web app needs both a frontend and a backend parts. React seems to be the best choice for building a user interface. It's clean, flexible and fast. From my experience, development often gets stuck due to the backend part. It takes too long to setup a database, update API-methods, configure RBAC and mess up with an infrastructure.

There is a way how to make it simpler. I'd like to show you the process of developing a React app with backend based on Directual—the visual backend constructor. First, I'll give the general approach overview. Then, you'll find the full live-demo of development (I've built this example app: MyMovieList in 2h 53m). The video may also be considered as a tutorial for beginners.

General overview

User Interface

Feel free to develop your UI as you like–with hooks, classes, etc. Having connected Directual backend you can use the following patterns:

import Directual from 'directual-api';
import { useAuth } from '../auth' // we will look at auth.js further in post
//...
const api = new Directual({ apiHost: '/' })
const auth = useAuth();
//...
const dataStructure = '' // todo: insert here Sysname of your data structure
const endpoint = '' // todo: insert here Method name of your API-endpoint
//...
// Auth context:
auth.user // returns user ID
auth.sessionID // returns user session ID
auth.isAutorised() // returns true if user is authorised
auth.hasRole('role') // returns true if user.role == 'role' (see user management further)
//...
// GET request:
function getData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // GET request + query params (sessionID)
      .getData(endpoint, { sessionID: auth.sessionID})
      // other possible query params: page, pageSize, sort and any custom parameter for Filtering
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...
// POST-request:
let payload = {} // Request payload
function postData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // POST request + payload + query params
      .setData(endpoint, payload, { sessionID: auth.sessionID })
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...

Low-code cloud backend

Let's figure out how we can setup database, backend logic and APIs on Directual. You can use the platform for free. There are limits on the load produced by an app in free plan (10k requests per month).

Database
Here it is—a UI for managing database. Folders and tables (data structures):

This is the page for configuring a table (data structure):

Also, there is a system structure – App users (system name WebUser). Its objects are users. These objects from WebUser have the following properties: id (username), password(encrypted) and role:

API-builder
Go to section API, and here you can configure API-endpoint:

Setting up an API method we can add user-based security, filters and sorting. Also we can indicate which fields will be available for GET- and POST-requesting.

Backend logic (scenarios)
There are workflows (Directual scenarios) for processing the data (both in real-time and in scheduled manner). Basic scenario steps are just actions under objects, so these steps are quite universal.

Directual React module

There are two useful files from Directual React Boilerplate:
auth.js provides methods: .user, .sessionID, .isAutorised(), .hasRole().
setupProxy.js creates middleware proxy to directual-api, for resolving the problem linked with CORS. We need to install http-proxy-middleware.

Also you need to edit the .env file for connecting with Directual app:
APP_ID=_YOUR_APP_ID_

You can find (or create) your App ID in API section:

Live-demo

The idea of the example app

I wanted my friends to be able to recommend me movies. So, the app solved that problem. There are 'watched' and 'to watch' movie lists and the form for submitting a recommendation (signing in is required). The result is here MyMovieList, find its code on GitHub.

We'll cover:

Bootstrapping React app based on Directual boilerplate-code;
Using React hooks for handling state;
Building authentication and private routing;
Configuring database and required APIs in Directual;
Getting/Posting data from/to the database;
Connecting a third-party API for enriching data;
Building and packing our product into Docker container.

I've recorded the whole development process. It took 2 hours 53 minutes, without any fuzz. Have a look! I tried to compose it as a tutorial for beginners. I didn't cut anything. If you are an experienced frontend-dev, you may consider watching all the details a bit boring, so, use the timestamps on Youtube. :)

What's next

If you, guys, like such a live-tutorial, I can compose more—this simple site may be be developed into movies-related social network with profiles, individual lists, likes, shares, etc. It will be a good exercise. I suppose, it'll take a couple of hours more.

DEV Community: Pavel Ershov