skip to main content

Creating your first application

We use the Designer and Dashboard to model, generate and launch a Cloudlet. After that, we interact with the generated application.

It’s time to create our first model. For now, we’ll take care of managing the company’s employee registry as described in the Example Scenario.

Model the application #

1. Open the Dashboard #

Dashboard desktop icon Start the Dashboard. If you followed the installation guide you should find a shortcut on the desktop with the icon in the picture.

Screenshot dashboard

Once logged in, the Dashboard looks like in the picture, divided into the following tabs:

  • Engine Library: a collection of archived engines that can be extended and reused at any time;
  • Cloudlets: a list of all the Cloudlets created in your account.

We’ll go over the other features of the Dashboard later; for now, our focus is on creating and launching a working Cloudlet.

2. Create a Cloudlet #

First, click on the New cloudlet button at the bottom of the Cloudlets tab. Observe the light blue box that just appeared:

Screenshot empty cloudlet

  • at the top there is a name , in this case Livebase has assigned the default name NewCloudlet1 'and a URL address; the latter depends on the hosting server where the Cloudlet was deployed, your username and the name of the Cloudlet. For example, if your username is johndoe, the Cloudlet will have address https://hs3.fhoster.com/johndoe/NewCloudlet1. For this reason, each Cloudlet you create must have a unique name;

  • in the middle there are three icons: list of members, engine and database;

  • a message at the bottom indicates the status of the Cloudlet. At the moment we can’t start it because we haven’t installed a model on it yet: Cannot start (missing engine).

Let’s rename the Cloudlet: double-click on its name and type Workforce (or click on the menu at the bottom right and select rename ). Note how this action also causes the Cloudlet URL to be updated.

3. Create a model #

We need to create a model for Workforce: to do that, click on the New engine button from the Engine library box: a new empty model will appear, named NewModel1; to install it on the Cloudlet, drag it onto it. Rename the model by double-clicking on its name and type TutorialEngine. Notice how the Cloudlet state has changed and the Start button has appeared. However, it makes little sense to start the Cloudlet with an empty template: if we try to do so, in fact, Livebase will prevent us from doing so and invite us to open the Designer to define it. To do so, click on its .

The Designer opens in a separate window from the Dashboard, presenting itself as in the screenshot:

Screenshot designer

  • On the left are two tabs: Schemas and Classes. The former collects the model views, while the latter lists the classes;
  • On the right is the canvas, with a tab for each diagram and a special tab for notes. As we will see later, it is possible to create multiple-diagrams to split a complex model into several parts and simplify its understanding.

4. Define the class Employee #

at the moment we focus on the Database Schema , the view selected by default. At this level we will define the data model, that is, the classes and relationships that form the logical structure of the database.

Cursor icon class Let’s create a class to represent the employees of the company.

Click on the icon Create a new class in the toolbar (Palette) next to the diagram, and click on a blank space. A new class will appear, whose name (Class1) is already selected, so that it can be renamed immediately: rename it Employee and press Enter.

Empty Employee class

A class in the Database is a blue box consisting of three sections:

  1. At the top, the header shows a unique name that identifies the class. Immediately above, the circle and arrow pointing to the class represent the default class role of the class.

  2. In the center is the attribute list of the class;

  3. At the bottom, the footer shows additional information, such as the number of objects currently in the database. This information is only available if we are viewing an engine installed on a Cloudlet.

Let’s add the first attributes: for each employee we want to store first name, surname, phone number and birthdate. To do this, right-click on the Employee header to open its Class menu, click on new attribute and select the String data type; then, type first_name as the attribute name.

Employee context menu new attribute

Repeat the process for last_name, phone_number, and date_of_birth, selecting String as the type again for the first two and Date for the last. The resulting class should look like in the figure.

Designer employee partial

We refine the Employee class by imposing constraints on the values that can be taken by its attributes:

First, we want to prevent users from being able to create empty objects, i.e. without first and last names; we therefore need to impose an integrity constraint to enforce that all values of some attributes are not null. To do this, right-click on the first_name attribute to open its Attribute menu and check Required.

Designer employee context menu attribute required

Notice how the attribute has changed: the name is now highlighted in blue and there is an exclamation mark next to it. Repeat the same process for last_name and date_of_birth, and leave phone_number as non-mandatory.

Designer employee partial required

We want to prevent the insertion of duplicate objects, for example two employees with the same first name, last name and date of birth. To do this we can add a uniqueness constraint: while holding down the Ctrl key, select first_name, last_name and date_of_birth at the same time, right click on one of these three and select Make unique from the Attribute menu.

Designer employee context menu attribute make unique

After this operation, an icon () will appear at the bottom of the class to indicate that a uniqueness constraint has been imposed on the class; by clicking on it, the attributes involved in the constraint are highlighted.

Designer employee partial unique

In this case, the constraint prevents two objects of Employee from having the same first name, last name, and date of birth, but does not prevent them from having the same value for one or two attributes of the three involved (e.g., same first name and last name but different date of birth, or same first name but different last names and date of birth).

At this point we have a good starting model for our application. Save it by selecting FileSave or by pressing Ctrl+S. Observe the class changes: first_name is shown in grass, indicating that this attribute has been designated as the object title for the class_Employee_.

Designer employee partial title

The object title is the name by which ‘as we’ll see shortly’ the object of a class being examined is identified in the application; this name is represented by the value of a single attribute.

If no specific attribute is given as object title for a class, the Designer will by default choose when saving changes that add a new class the attribute at the top of the list of the class, exactly as happened in this case with first_name.

The warning we mentioned earlier has also disappeared.

Close the Designer by selecting FileClose or by pressing Ctrl+Q, or by simply closing the window.

5. Launch the Cloudlet #

Back to the Dashboard. The status of Workforce is Stopped (missing Database): the last step to start it is to create a database with the necessary structure to support the engine; click on the empty database icon () to have Livebase generate it. After that, click on Start and wait a few seconds while Livebase translates the engine into source code, generates the corresponding application and starts it on the cloud server. At the end of the process the Cloudlet switches to Running state, while the Start button is replaced by Stop.

Cloudlet new sample running 1

A Cloudlet can be started and stopped at any time by its owner, i.e. the user who created it. When it is not running, its homepage is still accessible but does not allow you to login.

Enter data into the generated application #

Now that Workforce is running, let’s take the opportunity to take a tour of the generated application, namely the back-office interface: click on its URL to open the homepage in a new browser window.

1. Access the homepage #

This page contains the login form and default boxes: Description, Warnings And News and Terms And Conditions; they are empty for now.

Log in as default member: so type in your Livebase account credentials and click Login.

Gui login sample

Gui homepage
Once logged in, the Homepage presents itself divided into three panels:

  • Applications, on the left: lists the application views available for our profile. At the moment there is only one (Application), because it is the only one defined by the model;
  • Members, on the right: lists the members of Workforce. For now, there is only you;
  • Administration, at the bottom, brings up several icons:
    • Home page configuration Home page configuration: allows you to customize the login screen panes (seen above) with text and images;
    • Password security settings Password security settings: allows you to impose constraints on passwords that are recorded by members;
    • Icon edit css Edit css: allows you to customize application style sheets;
    • Icon show log Show log: shows a textual log of recent activity of Cloudlet components. It also allows you to download it as a .log file.

2. Open the Livetable #

Access Application by clicking on its icon Icon application. A new screen opens with two panels: on the left there is a list of classes that Application can access; at the moment there is only Employee. Clicking on it, in the right panel is shown the Livetable (the class manager) related to the Employee class.

Employee livetable empty

The Livetable provides a tabular view of the instances (the objects) of the classes in the model, and allows their management (insertion, modification and removal). It also allows you to perform more complex operations typical of business intelligence, such as multi-level grouping, calculated columns, expression-based filtering, statistics, etc. In a few lessons we’ll delve into the use of Livetable, while for now we’ll just manage a few simple objects.

Let’s examine the table:

  • at the top you can see the breadcrumb, which shows your position in the Livetable. In this case you are looking at the list of Employee instances (Employees: Overall list);
  • the Reload button(Reload icon), immediately below the breadcrumb, allows you to reload data from the database into the table, useful in case more members are using the application at the same time;
  • for this table there are four columns, corresponding to the four attributes we added to the Employee class.

3. Enter data #

Let’s add a record to the table: click the Create button on the right to open the data entry form (the instance manager) of the Employee class:

Gui employee form

The breadcrumb shows Employees: Overall list > Employee: new object, thus indicating that we are creating a new object in the Livetable, while below are the four fields for first name, last name, phone number, and date of birth.

Fill out the form however you like: for example, you can enter employee John Doe, born on 26 October 1977 with phone number +39 333 0011222.

To fill in a field of type Date (such as Date of birth), click on the calendar icon Calendar icon to open the interactive selector; alternatively, you can type the date as a string.

Click Save Gui icon save to confirm the entry and click Back to return to the Livetable; alternatively you can click directly on Save & Close, or Save & New to open the entry form again for another record.

In the model we have imposed that the attributes name, surname and date of birth are not null: you can notice as the corresponding fields of the form are marked with (required).

Try entering another record, but this time without filling in one of these fields (e.g. Date of birth); once you press Save you will see the message Data validation warnings found, which specifies that a value is required for that field.

Warning empty field

In addition, the field you left blank will appear highlighted in red; hovering over the warning icon will display a tooltip with the same feedback about the error just shown.

Employee form error

In the model, we also imposed a uniqueness constraint on the same three attributes. Let’s verify this:

Try entering another duplicate record, containing the same data as John Doe; pressing Save will again display a warning informing us that another employee has the identical values of the first name, last name, and date of birth attributes.

Warning duplicate fields

4. View, edit and delete data #

After entering a few records, the Livetable appears as in the figure, and the total number of records is shown at the bottom.

Employee livetable

From the Livetable, you can return to the view for an individual record by double-clicking on it or selecting it and clicking the Open button on the right. In the view, the breadcrumb will show the object title of the current record; for example, having designated the first_name attribute as the object title, for John Doe the breadcrumb will show Employees: Overall list > Employee: John.

Employee form instance

Let’s edit an existing record: for example, let’s add a phone number for Devin Wincott. Open the instance of his record and click the Edit Icons edit button to return to the form. Enter any value and click Save & Close to return to the Livetable.

Let’s delete a record: for example, select Chariot Kirley and click the Delete button. The object will be deleted by lowering the number of records by one.

Conclusions #

As you can see, with a minimum of effort you have been able to create a working application with a graphical interface that allows for quick and effective database management. This is just the beginning! As we will see in future articles, Livebase allows you to do much more.

Click on the button to download the template we made in this lesson:

TutorialEngine_getting_started.xml

In the next lesson… #

We will extend Employee by modifying some existing attributes to make them more specific; we will also introduce derived attributes and some aspects of the Application Schema: Extending your application.