Building an interface for your app

Modern digital products really need attractive and easy-to-use interfaces. With Directual, you have several options for building your own app’s front-end. Whether you’re a seasoned professional developer, or a business-user who’s new to making apps, there’s always an option that’s right for you.

Option 1. Develop a front-end from scratch

Plenty of people are familiar with HTML and CSS these days. They’re making beautiful, interactive application with React, Angular, Vue.js and other web-frameworks. Directual fits into that traditional approach perfectly. Already having a platform, developers can forget the headache of setting up the back-end infrastructure. Use the API-builder to configure all the methods you need in just a few minutes. The back-end logic is then executed right there, in Directual scenarios.

Traditional front-end building methods give you absolute flexibility. If you want to develop, for example, a new Facebook, combining Directual with React is a perfect choice. Our engineering team has prepared a boilerplate-code specially for React to get you up and running quickly. You’ll find a link to it on the integrations page and in the documentation.

Option 2. Setting up the Directual portal

Often, there is no need to develop a complex interface. Directual provides you with a customisable, mobile-friendly web-portal that can be configured in a couple of minutes! Let’s go through the set-up process!

In the ‘Web pages’ tab, we can see the various parts of our portal. We come here to add a new page. We set up the name and the path, and decide whether or not we want the new page in the portal.

The portal settings contain the title and the link to the logo picture. This is where we can turn on authentication and registration for the whole site. If we add the login-option, all pages are closed to unauthorised users. But then, if we want to, we can also redefine that setting for each individual page. Like this…

So, Let’s build a page!

Here on the right we see the components and we drag and drop the ones we want into our page. For example, the ‘Rich text’ component allow us to add structured text. Some components need to be configured. If we add a ‘form’ to the page, we have to choose the API-endpoint to post objects from it. And the ‘cards view’ option needs an endpoint so it can ‘get’ objects. Components display the endpoint settings, that means, if we choose three writing fields in the API-endpoint, the form will contain those exact three fields.

You’ll find the link to your web-portal in the top right corner.

Option 3. Combing Directual and other ‘no-code’ tools

The no-code ecosystem is growing rapidly! There are lots of powerful platforms for visual web-development: Webflow, Squarespace, Tilda, and many others. You can build your web-app interface on any one of them and then embed Directual components right into your app.

Like this!

We choose the Directual page to insert, then click ‘embed page’, copy the code and paste it in the ‘embed block’ on your favourite website-builder.

On top of that, you can also add special Directual script to your site. By doing this, you’ll turn on role-based access to your web-pages and to specific content within them.  

A few words about app users

All three options include setting up role-based access to your app. The users of your app are objects from the structure called, that’s right! ‘App users’! There it is - the object and its properties (note that passwords are encrypted). These properties provide the basis for the access rules and you can configure them in the API-layer—you’ll find all the details you need on setting it up in the ‘API-builder’ tutorial.

‍