In this section we're going to guide you to the process of the app creation. This process consists of a several steps and all the steps are interconnected with each other and fulfil each other for the best experience. Since all of the sections are interconnected, it's really tricky to understand which section would the best for you to start with. But this particular one will give you a brief idea on what you should start with.
On the screenshot below you can see several buttons and sections, but for now we'll just need the Create New Application buttons. Both buttons highlighted on the screenshot are equally the same and will launch the same task -no matter which one is pressed.
NAMING YOUR WORK
The next step is naming in your work. This will include several fields and we gonna describe each of them in details.
- Enter your application name: Please give a name that makes immediate sense to users on what your application does. This name is used in many places together with an “App Icon” from the section below. So if you already have your name on the logo, then it would be better to just add what the app does – for example, Tenant Service or Employee Book or Water Delivery. If your logo contains only a drawing, then it is better to just write a name of your company here – “CreekGables estate” or “Crystal Water” or “Best Inc HR" or just “Indever”.
- Enter short description: You can use this field to make notes on how your application acts as a note to yourself. Add intricacies, which you have designed to make sure no time is wasted later on trying to remember how it works. This info is only visible to you on this one step.
- Select App Icon: select the Icon that you want to show on the Home Screen of the AppUser, if they decide to save it there. This Icon would be also used in the Bot.
- Enter name for icon on Home Screen: enter the name that you want to appear on the Home Screen of the AppUser and that would be used as the name for the Bot.
- Top and bottom panels in iOS/Safari: Select if you want the top and bottom Browser bars to be shown in Safari. When turned off you PWA app would look exactly like a native app.
- Color of the browser panels: if you decide to open the PWA App in the browser, it would be shown like a browser tab, and here you can customize the color of the browser navigation panels.
- Splash screen background color: choose the background color of the App when it would be first time opened, in the process of loading (usually takes about 2 secs)
Click Next when you are done.
The next step is Constructor.
The Constructor is the part of the system where the visual and logical view of the App is created. The Constructor contains several most common HTML elements by drag-and-dropping which you would create your App.
CREATING "HELLO WORLD" APP
To get familiar with the Constructor and the logic behind it let's create a simple App, that would show the Hello World Text.
Steps to be done to complete this step:
- Drag-and-drop the elements needed - That would be a couple of Text elements and the Button.
- Change the text of the elements
- Adjust the styling
The video below shows how you can do that:
The next step of our Hello World App would be adding Logic to the App. To make it more dynamic, let's add some logic to the Text element and the Button, so the Text would be hidden by default and become unhidden, when the Button is clicked.
The steps to be done in order to complete this:
- Add the Variable "var" to the Button element. Set it to be 1, this means that when the Button would be clicked var would become 1, but as of now it's not.
- Make the Text element with the "Hello, World" text hidden, let's add the show condition when Variable var = 1.
- Test the App in both iOS and Android
Take a look at the video below to learn how to do it: