© MOBILOUS INC, All rights reserved - Step by Step Guide.pdf · © MOBILOUS INC, All rights...


TEST

SKETCH CONCEPTUALISE

BUILD

ORGANISE

RELEASE SUBMIT

IDEA

8-step process to build an app

2


I want to create a Mobile App of my company which only shows my company information and the information of the company products.

3


The Mobilous AppExe Platform is completely DIY – no programming knowledge, no technical jargon! All you need to know is how to bring your Business to your audience via a Mobile App and step through our unique process to build and publish your App.

AppExe from Mobilous is a fully-automated platform for businesses to Design, build, test their enterprise mobile Apps on their own, and publish to any common Mobile Store – Android, Apple or on to the mobile browser.

NIL

NIL

Notes:

User can download the assets from the help file.

4


Create a project and define its global Settings. Global settings are the common settings for all pages. One can change/overwrite these settings while creating the page.

Step 1: Create a project. Enter the project name in the provided area. Project Name: “Company”

Step 2: Selecting the device type. Select the phone only device type and Click Next.

5


Step 3: Basic Settings of App Property. Enter the application title – “MyCompany” Select the Application type as Tab based and keep the version 1.0.

Step 4: Icon Settings of App Property. On this page application icon and Splash Image can be defined. For the purpose of this guide we are keeping it as default.


6


Step 5: Basic Settings of Pages. These are the global settings of the pages. Keep everything as default for now and click next.

Step 6: Application manager page. Application manager page helps in managing the application. Click on the pages to go to the page manager.


7


This step will guide us how to design a page.

Step 1: Drag and Drop the Free Layout Page.

Step 2: Double Click on the page Step 3: Enter the Page Name – “Home”

8



Step 4: Page Properties - Keep everything as default for now and click next.

Step 5: Navigation Bar settings - Keep everything as default for now and click next.

9



Step 6: Click the “Upload” button

6.2. Select the image

6.3. Apply the image

6.1. Click on the highlighted button to Upload the image

10


Step 7: Drag and Drop the Image UI part

7.1. Click on the highlighted button to Upload the image

7.2. Select the uploaded image and click Apply.

7.3. Click Done

Adjust the width, and, height of the image, according to the wireframe, by clicking on the, right corner box of the image.


11



Step 8: Drag and Drop the Text View UI part

8.1. Enter the content and check the transparent option.

8.2. Click done. Adjust the width, and, height of the textview, according to the wireframe, by clicking on the, right corner box of the image.

12


9.1. Enter the title – “Check Products”

9.2. Click Done

Step 9: Drag and Drop the Round Button UI part

Adjust the width, and, height of the round button, according to the wireframe, by clicking on the, right corner box of the image.


13


Step 11: Click Next.

Preview

Step 10: Check Preview.

This step will guide us how to design a page and also how to test it using Preview option.

14


Follow the same process to design the “Products” page.

Similarly design the second page.

15


Keep all the settings as it is and Click Next on all pages.

Now we have two pages: 1. Home: Parent page 2. Products: Child page.

To add an action – To go to the next page by clicking the a button on the first page we would have to go to the page editor of first

page.

16


Step 1: Double click on the button to add an action.

Step 2: To apply an action click the + button

Step 3: Double click on the “On tap event”

Add an action.

17


Step 4: Double click on the “Page Transition” action category.

Step 5: Double click on the “Go to child page” action.

Add an action.

18


Step 6: Select the “Products” page from the drop down menu.

Step 7: Click Ok.

Add an action.

19


Step 8: Click Done. Step 9: Click Preview.

Add an action.

20


Click on the Check Products button.

Navigate between pages

21


Online Help

Access help on the product:

- Via User Console through the Help Tab located on the Top Navigation Bar;

- Clicking the Help button located on the lower left corner of each screen;

- Or via the “?” icon on the top right corner of each pop up.

Or click here to contact us

22

https://mybusiness.singtel.com/contact-us

© MOBILOUS INC, All rights reserved - Step by Step Guide.pdf · © MOBILOUS INC, All rights...

Documents

Transcript of © MOBILOUS INC, All rights reserved - Step by Step Guide.pdf · © MOBILOUS INC, All rights...