Demo 1: App Creation: Rental Company

Firs thing is to have prepared all your artwork or images you will be needing for each section of your App, remember that one of the keys to a good design is uniformity:



Navigation bar buttons(active/inactive):

    For the About section

    For the Fleet section

    For the Branch section

    For the Hire section



Header bar:

 Back button

 Main section button



Database menu bar search buttons:

 Trucks

 Refrigerated trucks

 Vans

 Refrigerated vans

 Minivans

 Refrigerated minivans

 Order by cargo weight

 Order by cargo m3



Database list icon for each type of vehicle:

 Trucks

 Refrigerated trucks

 Vans

 Refrigerated vans

 Minivans

 Refrigerated minivans



Detail image for each category of vehicle on detail view:

 Minivans

 Vans

 Trucks



Description icons for vehicle specifications :

 Vehicle length

 Vehicle width

 Vehicle height

 Cargo width

 Cargo height

 Cargo length

 Cargo max weight

 Cargo m3

 Cargo refrigeration

 Vehicle type of fuel 

 Vehicle license requirements

 Vehicle daily price



Other images used in this App:

  Image used on both Main and About page

  Image used inside of tags on Branch screen

  Image used on Hire page as form submit




Once you have your artwork ready and organized we are ready to start building the App step by step. It is good to have a simple scheme to follow in order to have a better vision of the structure of the pages you have to put together. Our application has the following site map:





Login and create a new App:

Go to www.mobincube.com and login to your account. From "My Apps" section create a new App. In our case we have named it "RENTAL APP":

 

First thing you are asked is if you want to create the App from a blank file(from scratch) or from a pre-designed template. In this case we will work with a blank app file, so click on "Blank App":




Once you click on "Blank App" you will be redirected to the information place for that App. You can define basic information for you App from here. Description, language, category, version and App icon are defined from here:




Notice in the "Selected Services" that there are none selected. In this tutorial we also explain how to create a Coupon section and how to store and update content remotely from the Cloud. In order to use these services you will have to hire our "Home" or "Pro" packages which include Cloud usage. Once you upgrade your App plan you will notice that your App displays the selected services:





Now we can start building the actual sections/pages of our App, so click on "Edit" on the navigation bar and lets begin. You will be redirected to the "Edition" area of Mobincube.

Because we still haven't created any sections we are asked which type of screen we want to create. Because we will start with the "Main Screen" we will choose the "Detail Screen" option which fits our needs for this screen:


 

 

 

First thing is to open the Bar Manager from the "Page properties" of the Properties Bar:

 

 

 

Click on the "+" button in order to add a new bar, you can name it "Header". Once added you access it in order to design it. To access the created bar click on its option button and than on the access icon:

 

 

 

From the bar design space first we drag a table element to the screen and make the left cell have 40% width and the right table cell 60%. Give the table a black background colour:

 

 

 

Next thing is to drag an image into each cell and assign a functionality to each of the images. In the artwork at the beginning of this tutorial you will find the images used in the header bar.

 

On the left table cell we will use the "Back button" image with the "Back" functionality. On the right table cell we will insert the company logo with the "Go to screen" functionality:

 

Once you have dragged an image on to the screen you can define its "Action" parameter. As we said before for the Back image we will use the "Back" functionality and for the company logo we will apply the "Go to screen" function. On this later one we will link the action to a new screen which is "Main screen":

 

 

 

Now you will have to load each of the images you have to use(Back and Logo images). You do this by selecting the image from the screen and than clicking on select. This opens the image manager were you can store all the images used in an App:

 

 

 

Once you are done click on the "x" button in order to save the bar design:

 

 

 

On close the Bar manager will open and all that is left is to drag the created bar on to the screen. In this case we want it in the upper section:

 

 

 

Now we will follow the exact same steps but this time in order to create the navigation menu bar which will be placed on the bottom of the screen. The steps involve:

• Open the Bar manager
• Create a new bar and access it
• Drag to the screen the elements of the bar(table, images)
• Define the elements properties(colour, background, width, action)
• Drag the created bar to the bottom section of the mainscreen

Create a navigation menu bar with Mobincube

 

Now we it's time to define the content of the Main Screen. This page will contain an image and two links, one that enables a phone call to the company and another that takes the user to the Coupon page.

The result of this first section should be close to the following image:

  

The About Screen

Now we will continue with the About Screen. This is a very simple page which will contain the header bar and the menu bar just as the Main Screen. As content this page will only have a short paragraph and an image. Notice that as we asigned the "Go to screen" actions on the menu bar buttons the pages the buttons direct to were automatically created. You can see them from the screen tree and access them by double clicking on them. 

These new pages were created but they haven't got any type of screen assigned. For our About Screen we will choose the "Detail" screen type:

 

 

The result should be something like this:

Create the About screen for your App

 

The Branch Screen

This screen will be built from a Map Screen. We will basically have one location tag for each branch we want to reference for our business.

So we will define the Branch Screen as Map screen and place in this case three different branches with the contact info and logo inside the map tag.

 Create the map screen for your App

 

The Hire Screen

 

This section allows the user to hire a vehicle. As we will see further on we define a total of six categories of vehicles in or database so the Hire form will have to adapt to this condition.

We will build this screen from a Detail type of screen which is the type of screen which allows to send a form(with as many fields as you want) through SMS, to a script of your choice or to a email address using the Cloud.

You will see that for each field we define in our form we have to define a unique reference name. Make sure you write these down cause they will be used later.

We will start creating the content of the page. This will be built using text, table and separator elements as well as one image as submitting button.

Create a Hire screen for your App

Create a Hire screen for your App

Now as on former screens we insert the Header and Menu bars after a little modification for the pointer(mark of page you are on)

Create a hire screen for your app

Now that the form screen is ready we can decide were we want to send our reservation messages. We have the following options:

• Cloud: Form section
• A phone
• Personal script 

Lets begin with the Cloud option. Remember that the reference name we have used in our for are the following:

• name
• surname
• phone
• age
• pickUpD
• pickUpT
• deliveyDate
• deliveryTime
• type

 

Now we will see how to link to a SMS or a SCRIPT. These steps are very fast and easy to execute. 

 

The Coupon Screen

In this section we will describe how to include a Coupon system to your App. If you are not interested in learning how to do this you can simply skip this part of the tutorial and go to The Fleet Screen part.

In order to use the coupon system it has to be enabled. You can have this done by contacting our support centre. The Coupon offers are linked to Mobincube through a HTTP type of screen by the URL generated on the Clouds Coupon section which allows you to define the offer.

The Cloud allows you to change the coupon offer reflecting the change on the App without the need of re publishing it.

Lets start by going to the Cloud And creating our coupon offer and then link it to our Coupon section of our App through Mobincube:

Create a Coupon screen for your App

 

 
The Fleet Screen

Ok, we have done all our screens now except the database related ones. These screens are the ones that display the products/inventory/information we want to store and be able to edit.

We will have to different types of views of our database content. One will be the List View and another one will be the Detail View.

The List view will display a list of items(cars in this case) thet fit the category or terms of search. The Detail view will show detailed information about a certain vehicle.

We will have a total of 9 List Views:

• List View of all vehicles ordered by prize
• List View of all vehicles ordered by load capacity
• List View of all vehicles ordered by load size
• List View of all vehicles which are of the type Mini Van
• List View of all vehicles which are of the type Refrigerated Mini Van
• List View of all vehicles which are of the type Van
• List View of all vehicles which are of the type Refrigerated Van
• List View of all vehicles which are of the type Truck
• List View of all vehicles which are of the type Refrigerated Truck

There will be no difference in any of the Detail Views independently of from which List View screens you accessed it.

All these Views will use the same source of data, so we only have one database. The first thing we have to do is set up this database. We will set it up on mobincube and link it to the Cloud to be able of updating it remotely without the need to re publish it.

This database has the following fields or columns:

• widthCar-->number
• heightCa-->numberr
• lengthCar-->number

• widthLoad-->number
• heightLoad-->number
• lengthLoad-->number

• maxLoadKg-->number
• maxLoadCubicM-->number

• refrigerated-->text
• license-->text
• fuel-->text
• passengers-->number
• priceDay-->number

• catText-->text
• catImage-->image
• model-->text
• detailImage-->image

The first thing we have to do is go to the Fleet page which we have already created and define it as a Data View type of screen. Then we define the structure of the database and link it to the Cloud:

Create a fleet screen database

Next thing is to fill the created table with our data. In this case i will be registering 2 cars per each category. That will be a total of 12 cars listed:

• 2  mini vans
• 2 vans
• 2 trucks
• 2 refrigerated vans
• 2 refrigerated mini vans
• 2 refrigerated trucks 

Before we start doing this we will upload the remote images we will use to the Cloud. We have two fields in our database/table that use remote images.

• Detail images: 3 images
• View category images: 8 images

So lets get to it and upload the remote images to the image section of the Cloud:

Create a Fleet screen cloud remote images

 

Now we can input all the data into our database which will hold our list of available vehicles:

Van Rental App. Fleet screen fill table

 

Our data has now been inserted in our database. We are now ready to design our first List View(all ordered by prize):

 

Now that we have the first List View created lets design the Detail View. The icons we will use in this view will be stored locally on the App using the image manager:

Create a Fleet screen- Detail View

 

We have now created the first set of List View with its detail screen. Lets link our List View to our Detail View and after that we will duplicate the FLEET page/section.

Link views

The FLEET section contains the List and Detail Views. We can reuse them in order to set our remaining Views up: 

• List View of all vehicles ordered by load capacity
• List View of all vehicles ordered by load size
• List View of all vehicles which are of the type Mini Van
• List View of all vehicles which are of the type Refrigerated Mini Van
• List View of all vehicles which are of the type Van
• List View of all vehicles which are of the type Refrigerated Van
• List View of all vehicles which are of the type Truck
• List View of all vehicles which are of the type Refrigerated Truck

So we will create 8 duplicates of the FLEET screen and name each of them in a descriptive way(byLoad, bySize, byMini, etc). We will only change the filtering of the List View. Te detail view stays the same:

Duplicate views

Now that we have all our fleet pages we can create the fleet navegation bar and added to all our fleet pages. Remember that for now the main fleet link of our menu bar only links to fleet list with all vehicles ordered by prize. We also want in our secondary fleet menu bar links to:

• List View of all vehicles ordered by load capacity
• List View of all vehicles ordered by load size
• List View of all vehicles which are of the type Mini Van
• List View of all vehicles which are of the type Refrigerated Mini Van
• List View of all vehicles which are of the type Van
• List View of all vehicles which are of the type Refrigerated Van
• List View of all vehicles which are of the type Truck
• List View of all vehicles which are of the type Refrigerated Truck

So lets create our database navigation bar that will link to each of our list views.

Database navigation bar

Lets add the following bars to all our fleet section/pages. Rememener that the menu bar with the position pointer hasnt been created for the fleet page like we did for branch, hire and about.

Insert bars

Lets generate a preview for all our App couse guess what we are ready to start the publishing process of our choice:

Preview app