If you have reached this article through Google or a social network, what you will find here is a tutorial or step-by-step guide to creating an application from macros (Mac) or Linux without knowing how to program or write source code.
We recently published an article on how software can be developed without the need to program code. Still, more than a practical guide, as this is intended to be, it approximates what we mean by this type of development and the possibilities, tools, and platforms available for it. One of the platforms mentioned within the category of low-code platforms is RetroCube, our application development platform. And it is on which we are going to base this guide.
In this guide, we are going to learn how to:
- Register at RetroCube.
- Download the editing tools necessary for our purpose.
- Create a free cloud server. o Instance a software developed in RetroCube, to start from a template and not need to do it from scratch.
- Intimate a software developed in RetroCube, to start from a template and not need to do it from scratch
- Make simple modifications without having to touch source code in the development tool.
- And finally, make public that program that we have customized with our modifications so that anyone can access it.
Step 1: Register at RetroCube
This step is not too mysterious, as it is common to register on any other website, network, or Internet service. However, it is essential to have our account, which will allow us to download the necessary tools and have our cloud server, as we will see in the next step.
We must go to the RetroCube registration page. And register, either using our Google / Gmail account or by manually registering with the email account we want.
Specific directions for registrations not using the Google / Gmail button In my case, I will register with an alias of my account since my Gmail account is already associated with my current RetroCube user.
Specifically, I am going to register the user «guiapasoapaso» exclusively for this tutorial 🙂 We must mark the check that we agree with the privacy policies of the website, as well as the review of the captcha of “I am not a robot” to be able to proceed.
Once we have clicked on the registration button, a page will appear indicating that we must check our email (with which we have registered) to validate it. Well, we go to the inbox or inbox of our email in question, and we will have received an email from RetroCube with the subject “Activation and access data to RetroCube”: The email consists of two parts; on the one hand, a button «Activate the account» on which we must click to activate our account:
By clicking on it, you will inform us that our account has been activated and automatically take us to the Login page.
On this page, we must enter our «Username» or our «Email» with which we have registered, as well as our password. If you are wondering what password, this is automatically generated in the registry and was indicated in the email of “Activation and access data to RetroCube,” after the button “Activate the account,” we find this:
So these are the data that we must enter to log into RetroCube from the Login page.
Step 2: Download the necessary tools to create our application
If everything has gone as it should, click on the “LOG IN” button will take you to our Welcome and download page and identify yourself from it to proceed with the tool’s download.
If we have registered with our Google / Gmail account, we will arrive here directly, without having to perform the previous steps:
In this step, we will only have to indicate our name and telephone number, as well as the technology in which you currently program; if you program in any, it is not a requirement (there is the option “I have never programmed”), and then the button will be enabled. Download:
Note: This button downloads the components for Windows 64 bits. Suppose you need the components for OS X or Linux.
OS X and Linux users: On the download page, there are many components for OS X or Linux. Do I have to download all of them? It is not necessary; if you download the RetroCube client, RetroCube develop, and RetroCube varmint, that is, the first three, it is enough.
Once we have downloaded the components, we will proceed to install them on our computer. And once we have installed them, we will create our free cloud service to connect to it from the tools that we have just installed.
Step 3: Create our cloud server for RetroCube for free
Either by clicking on this link or from RetroCube by clicking on our username at the top right of the web and click on the server Cloud Control Panel option. On that page, we will only have to click on the “CREATE VSERVER” button and wait for the process (Creating server) to finish; when it does, we will see the following.
It is done! We already have our cloud server created, started, and operational to get to work, so let’s go.
Note that will help us for the next step: we will have received a new email from «RetroCube Cloud» in which our credentials of the cloud server that we have just created will be indicated.
Step 4: Intimate a software developed in RetroCube, to start from a template and not need to do it from scratch
We already have the necessary software installed on our computer (client, develop, and varmint), so our cloud server has been created to continue to the next step, which is none other than opening the editor (produce) and starting with the wizard. First steps, which will make our lives much more comfortable. To do this, we have to open development, and in the main panel on the left, under the heading create, we will see that the second option is “First steps assistant.” We will click on that option and open a window, offering us to consult the guide to create our first application, which is like this one, but more concise. We will only have to click on the “Start” button.
On the next screen, it will ask us to enter the access data for our cloud server (the one we just created in the previous point), so we will do that and click on the “Connect” button.
On the next screen, we will be offered the possibility of selecting an application to start, as we said at the beginning of this point. In this way, we will instantiate that we will create a copy of one of those applications on our server that is easy. We have three applications:
- Management: Basic application to know RetroCube, based on the course, my first application that you can find published on YouTube in the previous link.
- Contacts: Basic contact management application with 140,000 records.
- Tutor: Application with examples of different functionalities of the RetroCube platform.
In our case, we will opt for the «contacts» option, so we select it and click on the «Install» button.
Next, an installation wizard of the application that we have selected will open, in this case, contacts. We must click on the button «Next>,» then on «I accept» if you agree with the policies shown, then we must select the data directory for contacts; for this, we click on the folder icon that will open a new window where we can choose the default directory “data” (or create our customized one), in our case, we will select “data,” we will click on “Accept” and then on the “Install” button. When doing so, a new window will be displayed that will install contacts on our server, and this screen will appear:
By clicking on the «Finish» button, we will have finished the installation, and the application will appear installed and ready to run on our server!
Can’t you believe it? Seems too easy and straightforward? Well, to clear up any doubts, we invite you to click on the fifth icon (the fourth enabled) of the application (develop) is the button that allows you to run the current solution (application) and has the shape of a play button surrounded by a circle, East:
Clicking on it will run the application we just copied to our server; it’s that easy!
You can use the application: create new contacts (with the data Name, Group, Date, Telephone, Email, Observations, Photo), consult the list of references (it has sample data already loaded), and search for any of existing contacts.
And we are nearing the end of this step-by-step tutorial to learn how to create our applications without having to program, do not worry that there is tiny left.
Step 5: Make simple modifications without having to touch source code in the development tool.
We have already created our account, our server, we have installed the necessary applications, connected to our own cloud server, and instantiated an application, in this case, contacts on our server. And now comes the real interest of all this; we will make some simple modifications in this program to see how easy it will be for us to customize it according to our needs and all this without writing source code.
To do this, the first thing we are going to do is close the window that has the “contacts” application running, thus returning to the editor (develop), where we can see two icons, one orange corresponding to the iPhone app developers for hire and the other blue corresponding to the project of data.
Now let’s say that the first thing we want to change is the name of the application that is shown in the window; when executing it, as well as the word shown in the tab that loads the application, we refer to these names:
To do this, we will double click on the application project (orange icon):
Which will open a new tab in the editor with the name “vContactos_app 1.0” that will show four rows:
To modify the name of the application (main window), we only have to click on the first row (AUTOEXEC), which will show us a set of properties of said object (of type “Frame” in this case), such as Identifier, Name, Styles, etc. Well, there we have it, if we modify the value of «Name,» we will be changing the first text that we want to customize. So we select the “Name” property in the right panel and write the text that we want to appear in the application; in this case, I will put “Contacts application step by step.”
If now again in the left panel, we select the object in the second row, for example, “VCONTACTOS_MENU,” we will be shown new properties corresponding to this object in the right panel. Here we can see how the “Name” property of this new object (of type “Form” on this occasion), which corresponds to the tab where our application is executed (second “contacts” of the capture indicated with red circles), also uses the name contacts, so we place ourselves on it and change it, for example, to «My contacts application.» Still, we are going to go one step further. In that same property panel, we can find another property called “Background color” with a code in it: “#FFFFFF,” this corresponds to the white color in hexadecimal, which defines the background color of this tab, but we want the background of it to be yellow. We have to click on that white square in the property, and a color palette will automatically open, where we can select the color we want to use. So we can easily select a yellow color with our mouse and click on accept. The editor is in charge of translating our color’s choice to the corresponding hexadecimal code (in my case, I have chosen the yellow corresponding to the # ffffc0 code).
Well, we have already made our first two modifications to our application, now we only have to save the changes by clicking on the fourth main icon of the develop editor, in the shape of a floppy disk: and clicking again on the icon to run our application, to see the changes we just made life :
As we can see in the new execution, we have changed the name that appears in the application window (Contacts application step by step). This name appears in the tab where the application runs (My contacts application), and the background color of the same, from the previous white to the yellow that we have selected. We have already started to customize our application. We have done all this with our mouse and writing standard text with our keyboard, without needing to program anything or write absolutely nothing of source code; promise the possibilities, right?
As you will see, the potential of developing your software or application customized and adapted to your tastes and needs, from OS X or Linux (also Windows, of course), without needing to know how to program, is very high and very simple.
A twist with many potentials, beyond texts or colors, we will customize the fields when creating a new contact and displaying it.
To do this, after closing the running application and without leaving where we are in development, we will display the «Contacts» folder that will show us seven new objectives. We are going to select the first «CONTACT» (also of the «Form» type), but this time, we are going to double click on it, and we will see how a new tab opens, where we can see the form visually. We see the same condition when, running the application, we click on the option «New contact.»
Well, from this window, we are going to select an area with our mouse, precisely the one corresponding to the label «Observations,» the field of the same name, as well as the buttons «Delete,» «Accept,» and «Cancel.» We will select the “Add photo” control, no problem. Once these four controls have been selected, we will move them down with the mouse itself to make room for a new field that we are going to include below. Don’t worry; you can see how to do it very quickly in this mini video that I just created.
Now we have space in our form to include new fields. To not complicate our lives, we will continue with our copy and paste methodology, easy. 🙂
As we did in the previous step, we will select the label «Telephone» and the field # TELEPHONE. We will execute the combination of keys corresponding to «Copy and Paste» (Command + C, Command + V in OS X, Control + C, Control + V in Linux and Windows). We will see that the label and the field that we have selected have been duplicated and the copies are chosen automatically. Well, directly with the mouse, we will place this label and duplicate lots in the space that we had previously left free.
And now we are going to customize them, to distinguish them easily. We need to create the new “Mobile” field that we intend to make for this. To do this, first of all, we must return to the «contacts» tab of our developers and double click on the data project icon (blue icon):
This will open a new tab, “vContactos_dat 1.0”, where three new rows will appear. We will select the first one, «CONTACTS,» and in the right panel of properties, at the bottom where the «Fields» are listed, we will be able to select the «TELEPHONE» field and execute «Copy and Paste» with our keyboard. This will create a new field, “TELEPHONE1”, which we will customize from the top of the right panel, changing its identifier to “MOBILE” and its name to “Mobile.”
We select the label «Telephone» that we have just duplicated and located. In the right panel of «Properties,» we change its «Identifier» and its «Name,» for example, by «NF_MOVIL» and «Mobile.»
Now that we have the new field created, we can return to where we were (“contacts” tab, double click on the yellow icon, and select the “CONTACT” tab).
Well, now we only need to select our duplicate label “Telephone,” and in the right panel of properties, in the “Field” property, select the “MOBILE” field that we have just created. That label will automatically show the “Mobile” content that we defined previously. Next, we select the area «# TELEPHONE1,» and we will also modify its properties «Identifier» to «ED_MOVIL,» «Name» to «Mobile» and «Content» to «#MOVIL,» keeping the form as follows:
We save the changes we have applied, and if we run our application and click on “New Contact,” hey voila! Our form has a new field: “Mobile,” where we can include a mobile phone for that contact:
We can enter the desired data in a new contact, click on “OK,” and that’s it! We will already have our further contact saved, with the new field data that we have created. If we go to the contact list of our application by clicking on the «Contacts» option and we look for the counted «Step by step guide» and click on it, we will see that indeed, the mobile phone that we have created in our new field, Has been saved! It looks like magic, but it’s RetroCube:
Would you like the “Mobile” field that we just created to be visible directly in the list (grid) above? We invite you to try it yourself; it is straightforward: you have to locate the grid object in the application project and drag the new field to it. Try it, and if you need help, do not hesitate to ask us through the comments of this article or the forums.
Step 6: make public this program that we have just customized with our modifications so that anyone can access it.
This step is also much more comfortable than it sounds! For anyone we want to be able to access this program, they will only need two things: download and install the client and know the access data to the application (server, user, and password); in our case, not having modified them, they are the following same that we received in the email from «New server.»
So we download and install the client, run it and enter the data and click the “Connect” button, which will open a new window where we can select our application “vContactos_app” and double-click on it, or after selecting it, click Click on “Accept,” our custom application will open:
And so far, our step-by-step guide/tutorial (for dummies halakha) on how to register at RetroCube, download and install the necessary applications, create our free cloud server, copy or install an example application on our new server, customize said application (texts, colors and even fields!) and make it accessible to other people (or to ourselves remotely). And all this without the need to know how to program because we have not needed to write a single line of source code for it.
And now that you’ve seen for yourself that it can be relatively easy to create or customize your app, what are you waiting for to dive into this exciting world?
This is just the beginning, and from here, you can go much deeper into the development of management applications, both from Mac (OS X), as from Linux or Windows. Here we leave you with a list of resources, both free and paid, with which you can continue to deepen the knowledge and characteristics of RetroCube as a development platform: