Learn to develop your first project with IdeasCloud

A basic guide to start with IdeasCloud environment

IdeasCloud Project Setup

Make settings to start your project. You will be able to implement tools according to your requirements, and make the adjustments that you deem appropriate.

A project is a work plan that involves the mixture of ideas, initiatives, proposals that you can undoubtedly work on on the IdeasCloud platform.

You will find solutions that help manage a specific or general process of your company in order to improve technical and collaborative processes.

IdeasCloud is based on the processing of JSON files to create your entire project.

We are going to build a little Todos project during this tutorial. The techniques that you will learn in the tutorial are essential to build any IdeasCloud project.

You can check the final result of this tutorial here.

CREATING YOUR FIRST PROJECT

  1. Register on our platform and log in.
  2. In the projects panel create one with the name “TodosTutorial”.
  3. Register your project data such as name, domain and database addresses.

If you do not link any database, you will not be able to use all the functions and actions that IdeasCloud offers you. You can use an external database or create a free tier in mongo Atlas

Models

Panel to interact with the models within your project.

Models allow you to generate a list of attributes for the entities required within a project. You customize the criteria of each entity to your liking according to your objective to achieve. A model resembles a table in an SQL database.

The ideascloud panel allows you to modify the schema in an embedded online editor, there are more comfortable ways to edit the files of your project through our extension “Ideas Cloud Setup Editor” in Visual Studio Code.

In this tutorial we will create a model called “Todo” that only contains 2 properties of which only 1 is mandatory, you can see the implementation in the following JSON file.

Each model is based on JSON schema, you can get more information in https://json-schema.org/

Functions

Perform automated processes through custom settings for your role. The IdeasCloud also provides several core functions that are used on a recurring basis. All functions are stored and used in your web applications, services, and daemons. A function consists of a key, a schema and a pipeline

This topic will be covered in depth in another tutorial. let’s take a quick look at it for now

In the pipeline of a function it executes a list of actions, in this case the function allows to send emails. “|&|…” and “&.func….” are handlers, we’ll talk about them in a moment.

Services

Panel to interact with the services within your project.

Tool that allows to implement different types of logic. Set of activities that must be configured to meet the needs of the project.

Services used to interact with the database and other back-end functions, available through the HTTP POST method.

The services consist of a key, a schema, and a pipeline. The key is only the identifier of a service, the scheme will be addressed in a more advanced tutorial. The pipeline is the most important section of a service since this is where the logic we want is implemented.

Continuing with the tutorial we will create 4services to have a crud (create, read, update, delete) of our “Todo” model.

Before continuing, what are “handlers”?

Throughout the tutorial you will see different syntax in the properties of the JSON configuration files. These special syntaxes are called “handlers” and the ones that exist are the following:

The ampersand (&) handler tells the internal IdeasCloud engine not to interpret the property’s value as a “string”, but to dynamically process it and get the data value. For example the object “& .clientParams” refers to the parameters received in the JSON body by a REST client, while “& .todayDate” will show the current date. “& .clientCookies” is the object that saves the cookies received at the time of consulting the service. “& .outputsMap” is an object capable of storing any value, be it an object, string, array, etc.

The dollar ($) handler tells the internal engine not to interpret the property’s value as a string, but as an executable function, where we will indicate the “fnKey” properties, which is the function key and its parameters through “params”.

- CreateTodo

The action “registerElement” is included in the base functions that are used constantly in the engine.

To create “Todo” records in our database we will use the “registerElement” action that receives as parameters the “modelKey” which is the model identifier and the “mappingSetup” which is the data input that we receive either from a web page. or from a POST request that sends us in the body a JSON object with the corresponding data.

You can see all the functions and actions available in the side menu on the right.

We can do a test through a REST client such as Postman or directly on our platform:

The address to test your services must have the following nomenclature: https://t{projectId}.projects.ideascloud.io/services/{serviceName}/execute . The services only work with POST requests

- GetTodos

We can obtain all the list of our “Todo” by means of the action “elementsAggragation”, where by parameters we indicate the model key (modelKey) and a filter (aggregationPipeline).

As aggregationPipeline is found as an empty list there will be no filter and all the data of the “all” model will be displayed

We can do a test through a REST client such as Postman or directly on our platform:

- DeleteTodo

We can remove any todo by means of its identifier (_id). For them we use the action “removeElementById” and obtain the id received from the JSON body.

Remember that “clientParams” refers to the parameters that we receive from the JSON that the REST client sends us.

We can do a test through a REST client such as Postman or directly on our platform:

The answer indicates that an element was deleted from the list of “all”, if this seems confusing remember that you can implement additional logic to show you a more concise message.

- UpdateTodo

To update a whole we will use the action “updateElementById” which receives as parameters the identifier of the model (modelKey), the Id of the item to update (itemId) and the fields that will be updated (updateData).

We can do a test through a REST client such as Postman or directly on our platform:

Web Application

Set of web pages you link to each other to meet a goal through the internet. You can configure several web applications according to preference, which will allow you to visually enhance and disseminate your project.

Choose the topics you want to discuss, configure the pages according to a personalized template that you can adapt in IdeasCloud or implement your own project through us.

Web templates usually have different configuration schemes depending on the developer who created them, but the general structure is as follows:

The configuration file of a web app is extensive so I recommend you to see it directly at this link:

https://gist.github.com/franka107ic/04bcaf55e3d373339424f9e2308db3f2

The “title”, “favicon” properties set the icon and page title settings.

The “stylingSetup” property sets all the styling settings for the user interface. Among them you can choose the color of each element, size, etc.

The property “onInitActions” allows to execute actions at the moment the page is rendered, “globalDataStores” allows to persist the data information globally, both sections will be explained in depth in another tutorial.

The “leftItems” property refers to the left sidebar of this template where you can place options to navigate your page as well as your icon.

The “layoutSetup” property refers to the application’s header configuration.

The “states” property is the most important. This property is a list that contains the different sections that your project will contain, by default the first state of the “states” list will be rendered, in this example we need to incorporate 3 views: To dos List, Create new to do, edit to do.

  • To dos List

Create a state in your web application to list the to do,
You can find all the source code of the webapp here. The following image shows the structure that should have this state.

The type of block of this state is “data-table” which allows rendering a table with a list of data, in the image you will see all the configurable options so that you can test them in your project!

  • Create New Todo

Create a state in your web application to list the to dos,
You can find all the source code of the webapp here. The following image shows the structure that should have this state.

  • Edit Todo

The block type of this state is “form” which allows rendering a form with a list of configurable fields that is adaptable to the model you have created. You can see the options in the following example code.

Daemons

Allows you to create a timed task to implement in the plan you are working on. You can schedule any activity such as sending an email, task reminder, course completion, membership, etc.

This topic will be covered in depth in another tutorial. let’s take a quick look at it for now

Photo by Artem Maltsev on Unsplash

Remember to visit our site www.ideascloud.io