© MOBILOUS INC, All rights reserved - Step by Step Guide.pdf · © MOBILOUS INC, All rights...
Transcript of © MOBILOUS INC, All rights reserved - Step by Step Guide.pdf · © MOBILOUS INC, All rights...
© MOBILOUS INC, All rights reserved
© MOBILOUS INC, All rights reserved
TEST
SKETCH CONCEPTUALISE
BUILD
ORGANISE
RELEASE SUBMIT
IDEA
8-step process to build an app
2
© MOBILOUS INC, All rights reserved
I want to create a Mobile App of my company which only shows my company information and the information of the company products.
3
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
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.
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.
6
© MOBILOUS INC, All rights reserved
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.
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.
7
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
This step will guide us how to design a page.
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
© MOBILOUS INC, All rights reserved
This step will guide us how to design a page.
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
© MOBILOUS INC, All rights reserved
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.
This step will guide us how to design a page.
11
© MOBILOUS INC, All rights reserved
This step will guide us how to design a page.
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
© MOBILOUS INC, All rights reserved
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.
This step will guide us how to design a page.
13
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
Follow the same process to design the “Products” page.
Similarly design the second page.
15
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
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
© MOBILOUS INC, All rights reserved
Step 6: Select the “Products” page from the drop down menu.
Step 7: Click Ok.
Add an action.
19
© MOBILOUS INC, All rights reserved
Step 8: Click Done. Step 9: Click Preview.
Add an action.
20
© MOBILOUS INC, All rights reserved
Click on the Check Products button.
Navigate between pages
21
© MOBILOUS INC, All rights reserved
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