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 #
Start the Dashboard. If you followed the installation guide you should find a shortcut on the desktop with the icon in the picture.
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:
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:
- 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.
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.
A class in the Database is a blue box consisting of three sections:
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.
In the center is the attribute list of the class;
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.
Repeat the process for
String as the type again for the first two and
Date for the last. The resulting class should look like in the figure.
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
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
date_of_birth, and leave
phone_number as non-mandatory.
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
date_of_birth at the same time, right click on one of these three and select
Make unique from the Attribute menu.
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.
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
Save 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_.
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
Close 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
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
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: allows you to customize the login screen panes (seen above) with text and images;
- Password security settings: allows you to impose constraints on passwords that are recorded by members;
- Edit css: allows you to customize application style sheets;
- 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 #
Application by clicking on its icon . 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.
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);
Reloadbutton(), 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:
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 to open the interactive selector; alternatively, you can type the date as a string.
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 (
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.
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.
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.
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.
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.
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 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.
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:
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.