Welcome back in another chapter of our work for “DeskSculpt Inc.” office rental application. Let’s continue our work from the previous tutorial. If for some reason you haven’t completed the previous tutorials we encourage you to do so. If however you want to start with this tutorial, no problem you can easily get the resulting application of the previous tutorial from “The Hub” by installing “NoCode-Xcelerate #5”.
This is where the real work start. In this tutorial we will start creating our backoffice features for our office rental platform. The features include: Creating/Updating offices and managing reservations for those offices. We will start by making sure only authenticated users can access these functionalities.
Time for action!
First thing to do is to create a page that will allow users to create office data. Of course we will leverage the Hierarchy system within NoCode-X and create a child for our ROOT template.
- Head over to the “Root” template and use the hierarchy view to create a new child
- Name the new template “Create new office”
- Set the path of this new template to “offices/create”
- Enable “authentication” within the “Authorization” section of the “Tool pane”.
{
"api_key": "{{REPLACE WITH YOUR OWN API KEY}}",
"secret_key": "{{REPLACE WITH YOUR OWN SECRET}}"
}These are secrets, and thus demand the necessary caution when storing them. Generally storing secrets in plaintext in a database is a very bad idea. If one were to do so it leaves a door wide open to hackers. Luckily NoCode-X makes it extremely easy to store secrets and other confidential data in a secure manner. Lets take a look at how our mailjet configuration is secured:
- Head over to the “Data-format” overview and find “Mailjet configuration”
- Open up the “Format” tab and open up “api_key”
- As you can see, there is a field “Data classification” and it is set at “secret“.
This data classification causes NoCode-X to automatically encrypt the data stored in this field. Moreover it is encrypted at application level, meaning that if hackers ever gain access to your database they only have the encrypted values, without the possibility to decrypt. In effect your secrets are safely stored. If you wish to know more read our article on “automatic encryption of data at rest within NoCode-X“
Encryption is not the only thing that NoCode-X takes care of. It is a security best practice and sometimes even legally required to keep an audit trail of access to sensitive data. Every read/write access to data flagged as confidential / medical or secret will be logged in the built-in audit log of NoCode-X. This can be accessed by using the “Logs” link in the side navigation.
Note that audit logs are being kept when data is accessed/changed by using the NoCode-X editor or by means of an application built with the NoCode-X platform. So no access/change is being forgotten.
That’s all there is to configuring your application to send mails via Mailjet. All you have to do now is send the mail at the correct moment. In our case we want to send a mail when a user creates a reservation. In tutorial #4 we created a form which users can use to create a reservation. One posibility would be to send the mail in the processing logic of this form. That would definitely work but it might not be the best solution. While creating applications that should remain as maintainable as possible we might want to decouple the logic of creating a reservation with whatever should happen as a result of this event. This is often referred to “Loose coupling” which is already a best practice in traditional development and now finds its way to no-code development with NoCode-X.
Every Data-format has 3 triggers for which we can link actions;
- After creation of data
- After update of data
- After removal data
By the names of these triggers it is clear when these triggers will be triggered and thus execute the logic of the actions linked to them. For our usecase we will need to link an action to the “After creation of data” trigger of the “Reservation” data-format.
- Head over to the “Data-format” overview and open up the “Reservation” data-format
- Open the “Actions” tab and open the “After creation of data” section
- Add an action to this section by clicking the “+” button and click the “pencil” button to edit.
- Give your new action a descriptive name “Send reservation mail“.
- Open up the “Functions” section in the “Tool pane” and find the “Execute action” function.
- Drag and drop this into your action and hook it up with the start block
- Make sure you’ve selected the “Execute action” block and open up the “Invocation configuration” in the “Tool pane“.
- As Action, search and select “Send HTML mail“
All we have to do, to send our mail is to provide this action with the necessary values for its parameters. Now within NoCode-X every action that is called as a result of a create/update/remove of data (meaning an action that is linked to these triggers) will be able to receive the data in question as a parameter. The only thing we have to do is create a parameter with the name “data” and of course the correct type and data-format.
- Open up the “Action parameters” in the “Tool pane“
- Add a parameter called “data“
- Choose “Data” as type
- Choose “Reservation” as “Data-format“
Okay all that’s left is to pass the correct parameters with the “Send HTML mail” action.
- Select the “Execute action” block and make sure that the “Invocation configuration” is open
- Set value of “FROM” to the mailadres you are allowed to sent emails from in mailjet (or else they will be blocked)
- Set value of “FROM_NAME” to “DeskSculpt Inc.”
- For the parameter “TO”, switch to the “Variable scope selector” and set the value to “data.body.email”.
- For the parameter “TO_NAME“, switch to the “Variable scope selector” and set the value to “data.body.firstname”.
- Set value of “SUBJECT” to “Reservation saved successfully”
- Set value of “TEXT_PART” to “We have received your reservation successfully. We are processing your request and you will here from us soon.”
- Set value of “HTML_PART” to the HTML below
<p>We have received your <strong>reservation successfully</strong>.
We are processing your request and you will here from
us <strong>soon</strong>.</p>All there is left for us todo is test out if the integration has worked. Add an reservation using the DescSculpt Inc application and check your mailbox!
And just like that we have a nice integration with Mailjet! Our users now receive feedback by mail on their reservations.
If for some reason your mail does not arive it could be that you’ve missed something in your no code, your credentials are incorrect or some other reason. You can always troubleshoot by checking your application logs. They can be found by using the left navigation Logs > Application logs.
These logs can give you an insight on what might be going wrong with your application. By clicking the lightning icon next to each message you are redirected to the action that generated the log message. If for debugging reasons you want to write some text to this log file yourself you can always use the function “Write to application log“.
Our application is starting to look and behave nicely, and we are only at tutorial 5! Care for more action? Check out: NoCode-Xcelerate: Creating a backoffice for our office rental application.
Did you notice that all plugins used within this tutorial were built by using NoCode-X? That’s right no code was used to build these plugins want to learn how to build plugins check out these tutorials: