Mobincube User s Guide V.01 December User s Guide

Transcription

1 Mobincube User s Guide V.01 December 2013 User s Guide

2 NDEX Introduction What is Mobincube and what can it achieve 4-5 Getting Started 6-8 Products and Options 9-10 Work Enviroment The Mobincube enviroment The Cloud enviroment 16 Creation Process The App Creation Screen Types Tool Bar & Managers Testing App Publishing Process Publishing Generalities Publishing process Monetize 52 User s Guide Index 2

3 INTRODUCTION

4 INTRODUCTION WHAT IS MOBINCUBE AND WHAT CAN IT ACHIEVE What is Mobincube Mobincube is a tool developed by Mobimento Mobile that allows anyone to build advanced apps without any technical knowledge, for mobile phones, smartphones and tablets. Thanks to a visual interface which helps to design those apps in a very simple and intuitive way. Anyone with an internet connection can create a Mobincube user account and use it for free. Users can also generate income, monetizing their apps. Type of apps that can be built with Mobincube With Mobincube you can build any kind of app. Guides, catalogues, e-commerce, portfolios, personal pages, tests, etc. You name it, you build it! Mobincube has several types of screens with which a great variety of items can be included. Texts, images (local, remote or dynamic), RSS Feed, forms, maps, routes, click-to-call, send s or SMS, local or remote data base, embedded websites, splash screens, agenda, geolocation, etc. Introduction What is Mobincube and what can it achieve 4

5 Mobile platforms compatible with Mobincube At the moment you can build native apps for ios (iphone, ipad, ipod), Android(smartphones & tablets), Windows Phone and HTML5. In which countries does Mobincube work? Mobincube works anywhere as long as an internet connection is available. That s right, if you have a computer with internet connection you can create apps from anywhere in the world and even publish them on the best app stores available online. Introduction What is Mobincube and what can it achieve 5

6 GETTING STARTED How to create a Mobincube user account It s free to create a Mobincube user account. Go to to the Register option, at the upper right side of the screen. You can also go directly to Then, write a username, a password and an . Click send. After this, you ll receive a confirmation . In it, there will be a link which you must click on in order to confirm your account. Keep the because it s where you have your access information. From this moment you can access Mobincube and start creating apps. How to change my user information & language To edit your account information you have to go to log in and go to the settings button on the navigation bar and press My account. From this bar you can change the interface language as well. From My account you will be able to edit the following sections: User information: This block holds your password and associated to your Mobincube account. Editor settings: This section allows you to change the style you visualize your App s parts or pages. Personal information: Here you can change information such as name, address, phone, etc. Billing information: Doesn t have to be the same than the personal information. This section allows you to determine billing information different from the users information. Introduction Getting Started 6

7 How to delete my Mobincube user account If you don t want to use Mobincube anymore, you can request to have your account permanently deleted. Please, keep in mind that if you delete your Mobincube user account, all your applications will disappear and you won t be able to access them again. Once you know this, if you really want to delete your account, please click here or send us an with DELETE ACCOUNT as subject to support@mobincube.com. Keep in mind that we ll check that your Mobincube associated address and the address from where your request has been sent match. What can I do if I don t receive an confirming my account? If you don t get a confirmation , it might be for several reasons: You might have received it as spam, so check the folder and get it back. Maybe the is not correct. There might have been problems with connection when you were registering. Usually the confirmation is received in a couple of minutes. If not, contact us at support@mobincube.com and we ll activate your account. What is a native app Native applications are installed on mobile devices and are developed using the programming language that is compatible with these devices. Mobincube allows you to create native mobile applications for ios (iphone, ipad, ipod), A n d r o i d, Windows Phone and HTML5. When an App is generated, Mobincube will generate a mobile application which is compatible with each family of devices. This means that you don t have to worry about the size of your images or other parameters, as Mobincube will adapt them to every mobile device. Introduction Getting Started 7

8 Differences between an App and a mobile website? Once the application has been downloaded and installed in the mobile, you do not need to install it again, but with a web page you have to go back and download it again every time you want to see it. An application can be seen regardless of the network coverage, while a web page can only be seen when you have internet connection available. An application uses less data traffic. When you download information from the internet (for example by RSS Feed) you only receive this information. The distribution of an application can be via online app stores (App Store or Google Play for example), which can t be done with a web page. A mobile application receives a better response and user experience than an adapted web page. For example, the content continues downloading on an application, so going from one content to another is immediate. It is not like this with a web site, where the content has to be redownloaded. Introduction Getting Started 8

9 PRODUCTS & OPTIONS What does the FREE version of Mobincube include? Using Mobincube is totally FREE. The only thing you have to do is to sign up and start developing your apps. You can create applications with all the functions that Mobincube offers: logo screens, information screens, forms, integration with google maps, updated remote contents, SMS, click to call function, navigation menus, interactive graphics, etc. The applications will be compatible with: ios (iphone, ipad, ipod), Android, HTML5 and Windows Phone. The Mobincube free version includes: Creating and Publishing all the applications with adverts for free Editing Mobincube applications App monetization Statistics module incorporated Online simulation of your app Download demos of your app to your device How can I hire Mobincube Premium Services Premium services are hired per App and per year. Go to your Apps section once you have logged in and double clicked on the App you want to add features to. From here you can upgrade to a Mobincube Plan or hire individual services: Introduction Products & options 9

10 Mobincube Premium Services & Plans We have three different plans in offer to cover your needs. Take advantage of our discounts through the Home and Pro development plans: If you prefer to hire individual services we have these available for you. The following prices are per App and per year: Check out all our services and prices from the following directions on our website: Introduction Products & options 10

11 WORK ENVIRONMENT

12 WORK ENVIRONMENT THE MOBINCUBE ENVIRONMENT Account area Once you re logged in you will be on the user account page. From this page you can choose to create new Apps or edit existing ones. You can also change the language Mobincube is displayed in or modify your user information as described in the first introduction chapter. If you access an existing App or create a new one and then access it, by double clicking it, you will be directed to the Information page for that App. You will notice a black navigation bar appearing on the upper part of the page, from this bar you will be able to access the remaining sections of Mobincube s areas: Work environment The Mobincube environment 12

13 Edition area From the edition area is were you can define the actual look and functionality of your App. It s from this section were you create the different sections or pages of your App. Mobincube shows a customized edition workspace according to what type of screen or functionality you are implementing. This way, with each type of screen you work with, you will be able to work on certain elements or others. You also have a tool bar which allows you to organize and define the appereance of your App. It allows you to define parameters which will affect a certain page/section of your App or all of them. The tool bar has also a built in online simulator which allows you to test the App in both phone and tablet format without having to generate the final App. Work environment The Mobincube environment 13

14 Preview area From this area you can preview your App on your device (Android or ios) in order to test the functionality and looks of your App. This you do from the preview option on the main navigation bar of the developing space: All you have to do is click on the request button and wait for the QR icon to load. Capture the image with your device and the App will be ready to download through your device Publish area In this area of Mobincube you will be able to request the publishing of your App after you have allready executed a successful preview in your device. You will be able to publish under Mobincube s license in the main App distribution markets like Marketplace(Windows), Play Store(Android) or Play Store(iOS). If you prefer you can even create your own developer account and publish under your own license. Work environment The Mobincube environment 14

15 Tool area From Tools you can access different services that will allow you to have more control over your App. You will be able to get valuable information about your App statistics, edit the content of your App, notify your users or even monetize the publicity of your App. The available tools are: Statistics: they allow you to view the downloads of an App per date, per geographical location or per type of device. Cloud(CMS): it allows you to store all the App content(texts, images, databases, etc.) and access it for editing. This way you can commit changes which will be apreciated by the user without having to redownload. Push notifications: the notification system allows you to send all the users of your App notifications with any text content you wish. Monetize: you can earn money monetizing the publicity of your App. Work environment The Mobincube environment 15

16 THE CLOUD ENVIRONMENT What is the Cloud and how can I hire it? The Cloud is a system which allows you to manage your Apps in a more efficient way. It allows you to interact with the users of your Apps in a more efficient way just as redefining content of the App without the need to re publish the App. The Cloud is broken down in the following sections: Images: for administrating remote images. Texts: for remote text blocks. Databases for remote databases. Coupons: for creating coupon campaigns. Notifications: in order to push notifications to the users of your App. Users administration: to define administrators of your App s Cloud. CMS: from the CMS you will be able to generate and modify forms and RSS feeds. In order to access the Cloud the service must be hired. You obtain Cloud privileges by hiring the Home or Pro package for an App or hire the Cloud service exclusively from the Tools section of Mobincube. Work environment The Cloud environment 16

17 CREATION PROCESS

18 CREATION PROCESS THE APP CREATION How to create an App In order to create a new App all you have to do is login to your account from Each time you create a new App, it will be shown and be available for you to edit from My Apps section on which you land after login: Just click the Create App icon, enter a name for the App and click on the Create App section of the icon: Creation process The App creation 18

19 Each time you create a new App, you are asked if you want to build it from scratch or if you prefer choosing a template and work from a predesigned App layout: How to change my App s information There is basic information you can define for each App in order to describe it. From My Apps by clicking on any of your Apps you will be directed to the information page for that App. On the information page of an App you can define the following information: Name: App s name. Description: Add a description to your App. Remember that if it will be published on App Store or Google Play, this will be the information to be sent to them. It is important to specify what s the app s content, what s it for, its features, basically what users will find when they download it. This is important to position you on the store. Category: Select the category that fits your App s content. Language: This is the language you indicate the content is written in. Version notes: Here you can add some comments about your App s version. Icon: Here you can insert an icon for your App or change it. The format must be squared and with the following size 512x512px or 1024x1024px. Use jpg or png files. Creation process The App creation 19

20 SCREEN TYPES Methodology The work process that Mobincube s system invites you to follow is based on Screen Types. There are 10 different types of screen you can use to put your Apps together. Each type of screen covers certain type of functionality allowing the user to work with a limited amount of elements and associated functionalities on each screen. The following image shows the available screens to work with: Creation process Screen types 20

21 Option list screen This type of screen allows you to generate pages which contain a list of buttons which you can apply different actions to. Each option button has an action associated to it. Depending on the type of action you link to a button you will have to give one parameter or another. For example, if you would define an action of a button as Call, its destination parameter would be a phonenumber, if it would be a link to a different page the destination parameter would be the destination page name: From the Tool bar on the right side of the screen you can affect the visual style of the option list. You can define the visual style for the option list of the entire App and have alternative designs on certain pages. You contoll this by defining the design from the option list design of App properties or from the option list design of Screen properties on the tool bar: Creation process Screen types 21

22 Action image screen The action image screen allows you to define interactive images on which you can define areas as links. You can as well draw routs on the images by changing the edition mode from areas to routs. You can define areas as points of the route. This way you can apply clickable areas on the route points just like with the areas. By double clicking on the defined areas and route points you can define its properties: Creation process Screen types 22

23 RSS screen With the RSS screen you can include an App section which feeds RSS articles which are constantly updating. All you need to do is to create an RSS type of screen and pass only one parameter which would be the source of the articles, an URL. This source can be a third party remote source or an remote Cloud RSS source. Just as with other types of screens from the properties bar you can affect the style and looks of the RSS feeds. You can customize each RSS screen in a different way from screen properties or create a general aspect for all RSS screens from the App properties link on the properties bar: Creation process Screen types 23

24 Map screen A very usefull feature is the Map screen which allows you to define a screen centered around a certain geographical location on page load. On each map you can define as many location which will be represented by pins. By pressing a pin a customized tag can be displayed including text and image. You can even apply an action to a tag, like go to a certain screen. The map screen has two edition modes, the locations or place addition mode and the route mode. The route addition mode allows you to draw routes which can be drawn in between locations. You can customize the look of both dots and lines of your routes. Creation process Screen types 24

25 Calendar screen With the calendar screen we can show a calendar on which we can add dates and link them to different kinds of information or pages which can contain detailed information relevant to the marked date. With the calendar design we can edit the colors of the whole calendar area, from the background of the calendar to the link of the defined dates. As with most of the screens the calendar design can be the same for each calendar screen of an App or customized for each one of them by changing the style parameters from the properties bar(app or screen properties). Creation process Screen types 25

26 Web screen You can embed any website inside of your App. If you want to extend without any limit your App s functionality or simply include a site built outside of Mobincube, you can. The web screen needs to be given only one parameter, the web URL. Even though you are loading an external site on the web screen you can iclude on the very same screen your App s header and/or navigation bar in order to maintain the general Apps look while displaying external sites which may or may not have been created by yourself. Creation process Screen types 26

27 Splash screen With the Splash screen we can display images for a certain time, usually seconds. After displaying the image, the app executes a Go to action where we select the screen to be displayed after the splash. This screen could be another splash screen or any other screen of the App. The image you load can be customized in size and layout. You will also be able to determine the delay time from when the splash screen loads until it executes the Go to action. Creation process Screen types 27

28 Detail screen The Detail screen is one of the most versatile type of screen there is to work with. It allows you to create complex layouts in any possible visual way you can imagine. All with an easy drag and drop movement from the element box to the device screen: The available elements are: images, texts, input fields, separators, tables and online text. You also have available in the image manager any remote image you have loaded on the Cloud. All the elements have certain set of properties you can edit. Typically we will be able to adjust width, size, colour, background colour, alignment among others. Most of the properties are common for all the elements. Creation process Screen types 28

29 Once you have placed an element on the screen, you can put the focus on that element by clicking on it. This allows you to access the editable properties for that element right under the element box. As mentioned before, properties will vary from one type of element to another. On the following image you will notice a two cell table with the focus on it and on the right under the element box all the table properties to edit: Creation process Screen types 29

30 Besides the properties all the text, field, image and table elements can have an associated action to them. The available actions to asign to the elements are the following: Go to screen: allows to redirect to another section/page of the App on click Call: the device executes a call to the selected number Back: redirects to the previous screen(defined as anchorpoint) Exit: closes the App Open URL: opens the device browser leaving the App Do nothing: element behaves as button but doesn t execute any action Submit form: this action is only available if field elements have been placed on the screen All the actions have certain parameters to define. This parameter is called destination. Depending on the action, the destination options will be one or others: Go to Destination: would be the name of the screen to go to. Call Destination: needs to be given a phone number. Back, Exit and Do nothing have no destination parameter. Open URL Destination: would be the URL of the landing web. Submit has properties instead of destination and it allows you to determine where the form is sent and if the direction and content is inserted by the user or is default. Creation process Screen types 30

31 Data view screen The Data View screen allows us to create and include databases in our App. We can display the data in different ways, in the form of views. Before we talk about the views and how they work and are related one with the other we will talk about creating the database. On the Data view screen you start with choosing or creating the database that holds the data you want to use on your page layout. As easy as: Choosing existing or new database: your database can be stored locally or remotely Name and type of fields: a field can be an image, text, date, number or map coordinates. Remember that the data included can be as well remote or local just as the database. Once created its structure simply fill in as many registers you want. Remember you can conect your database to the Cloud in order to change its content once the App has been published: Creation process Screen types 31

32 Once you have created your database and inserted some data you are ready to work with the different types of Views and theire design. The available type of Views are the following: List View: shows a list of registers Detail View: shows a detailed view of each item of the list view Calendar View: shows a calendar with all the dates referenced in a database Gallery View: shows images of a database as image gallery Map View: displays all the coordinates referenced in a database You can apply filters to the diplayed results. This way you can limit the data you show on each view and create as many views as you want. For example if you had car database you could have a table with different car models and on one view only show one brand of cars or only cars of a certain color. Creation process Screen types 32

33 Once you have defined the database, the data it holds and filtered the view, you are ready to organize visually the data on the screen. You do this in the same way than on the Detail screen. You have available the same elements than on the Detail screen, texts, images, separators, tables etc. But you as well have all the data(columns) you have defined in your database and this data you use the same way, by dragging it to the screen and affecting its properties. Static data like on the Detail screen is shown in grey and the dynamic database elements are shown in purple: If you are working with a List View, the layout you design for it, will be repeated as a list, with as many items as your filtered database has. If you work with a Detail View only one database row will be shown at the same time on the screen. The calendar view shows all the defined dates on a calendar. When a date is selected all the rows listed in the database with that dates are displayed on the layour designed for the calendar view. Same thing happens with the Map screen, but instead of displaying all the dates on a calendar, all the locations are displayed on a map. By clicking on a location, a tag is shown with your designed layout for the map view. In case of the Gallery View you simply select the column that holds the images and these are displayed as image gallery you can slide through. You can place links on all the views to be able to jump from one type of view to another. This is done with the Go to screen functionality which allows to redirect to a different screen (Data View) or different View(list, detail, map) of the same Data view screen you are on. Creation process Screen types 33

34 Shop screen Three easy steps and you are able to sell your merchandise through your App. In the first Step you simply have to input your PayPal account information. If you don t have one, we facilitate testing data in order to get your store working before creating your PayPal account. The information required in this step is: API username API password API signature Next step requires to fill in the database that holds each item or product of your store. This database holds the following data for each inserted item: Name Reference(unique ID) Description Price Image Creation process Screen types 34

35 On the last step you define the different types of views of your store. The different views you will be able to design are: Cataloge: Its the screen which displays all your products in a list view. Product info: Would be the detail view for each product. Cart: Shows a list of all products added by a user to his shopping cart. Transaction OK: Screen displayed when purchase is completed Transaction KO: Its the screen shown in case of the transaction not going through. Each of these views can be customized just as the Detail screen, allowing to layout the design by draging both static elements as the field elemts of your store database: Creation process Screen types 35

36 TOOL BAR & MANAGERS Tool bar The tool bar allows you to have an easier workflow. It holds different sections that allow you to move easier in between your App s sections, delete them or create new ones. It as well allows you to control the visual design of each type of screen. The tool bar allows you to access both, the image manager and the bar manager which makes it easy to organize the images being used or create reusable navigation menus. The tool bar has as well a built in simulator which allows you to emulate your App s behaviour in both tablet and phone format. The different sections of the tool bar are: The Screen tree: the screen tree allows you to visualize your App s sitemap. It shows all your screens and types. It allows you to jump from one section to another, create, clone, rename or delete screens. Creation process Tool bar & managers 36

37 The App properties: This section of the tool bar allows you to define the design and properties that will affect all the App. You can access design properties for: header image, background, databases, font, command buttons, option list, calendar and RSS. You can as well access the Image manager. Creation process Tool bar & managers 37

38 The Screen properties: The screen properties section allows you to customize design and properties but only affecting the screen you are on at that moment, this way you could define some general properties and look for all the App and customize any of the screens individualy. From this section of the bar you can access design and properties for: header, background, font, command buttons, delay action, anchor point. It allows you as well to access the Bar manager. Creation process Tool bar & managers 38

39 The View properties: From here you can both access the Bar manager and the search bar in case you want to have a search bar for a data view screen. Creation process Tool bar & managers 39

40 The Simulator: this built in tool allows you to emulate the behaviour of your screen in both phone and tablet format. If you launch it from your main screen you can navigate in between sections from the simulator. If you do not launch from the main screen you will only be able to test the screen you launch it from: Creation process Tool bar & managers 40

41 Image manager The image manager is a tool which allows you to work with all the images of your App. Each time you insert an image element on to a screen or load the image manager you will be able to: Import images from your computer Import images from google images Visualize remote images added through the Cloud Delete images Rename images Edit the quality of an image Asign an image to an image element used on any screen of your App Creation process Tool bar & managers 41

42 Bar manager The bar manager is basicaly a tool which allows you to design a Menu Bar as you would be working on a Detail screen. You create the button system with a simple drag & drop gesture. Once you have your bar ready you can clone it or use it on any screen by accessing the bar manager from the screen or view properties and drag it on to it. You can choose if you want the bar to be added on the top or the bottom of the screen and you can include more than one bar to a screen: Creation process Tool bar & managers 42

43 TESTING APP Different devices There are different ways to test your App before publishing. Depending on the type of device you want to test it on, you will have different options. Testing ios In order to test an App on an ios device you have to download an App called Mobincube which you ll find in the App Store. This App allows you to login with your Mobincube account user data and test all your available Apps. All you need to to is: Download the Mobincube App from App store and install it Login to your account from the Mobincube App Test the Apps you wish Creation process Testing App 43

44 Testing Android Testing your App on an android device could not be easier. All you need to do is access the App you want to test and go to the Preview section of Mobincube. From this section you can request your Demo. Once requested, a QR image will load. Simply snap it with your Android device of choice and accept the installation. Now you have the App downloaded on your device just as any other. Creation process Testing App 44

45 PUBLISHING PROCESS

46 PUBLISHING PROCESS PUBLISHING GENERALITIES What means to publish To publish an App is to make it available for users. Usually the term publish is applied to the process of making the application available to other people through any market like App Store, Play Store, or any other. You can reach more people via any website, forum, blog or any form of broadcasted publicity using the following options like QR images or links that redirect the user to the direct download of your App. You can publish your App under your own developper account or under Mobincube s. Property Rights And Responsibility The owner of the application created with Mobincube is the customer who developed the App. Customers are the only responsible for the content displayed on apps. If the customer uses Mobincube to develop apps and then sells them to their customers, the final customers will be the owners of the application. In no circumstances the app will be property of Mobincube. Mobincube will not be responsible for the contents published. Publishing process Publishing generalities 46

47 Where to publish The main channels available for publishing Apps are the following: Marketplace Play Store App Store Keep in mind that there are dozens of ways which can help you reach more people. You can also make your Apps available through QR snap images and ordinary URL links for download. Remember that the advertisement can be done outside the digital world, for example with a poster in a cafe or on a business card. Publishing options Before publishing an App you have to make decisions around the following matters: What devices do I want my App to be available for? iphone, ipad, Android, HTML5, etc. In what markets do I want to publish my App? App Store, Marketplace, Play Store, etc. Under which developer license do I want to publish? Own developer license. Mobincube s license. Do I want to have ads in my App? You can hire the additional service of removing any ads inserted through Mobincube. Do I want to monetize my App? You can add your Admob code to monetize the ads in your app. You will earn 70% of all the money the app produces while Mobincube will get the other 30% Publishing process Publishing generalities 47

48 PUBLISHING PROCESS Publishing on Mobincube In order to publish on the main App channels first you have to publish your App on Mobincube. So log into your account, access the App you want to publish and gor to the Publish. Once on there click on the Mobincube tab and Publish: Once ready you will be able to download the App using the QR capture system or simply going to the given URL with your device. This publishing process does not require any developer license. Creation process Publishing process 48

49 Publishing on Play Store Play Store is the main App channel for Android devices. You can only publich on Play Store under your own developer license. You can obtain your own developer license on publish/. Once you have created your developer account you can login to your account on Mobincube, access the App you wish to publish and go to the Preview section. Once on the Preview section click on the Android tab and choose if you wish to hire a one time App download service or the unlimited App downloads service. Once you have chosen the service which fits your needs simply click on download and your App (.apk file) will be downloaded. All that is left to do is go to Google Play and login to your developers account and follow their steps in order to upload the App on their channel. Creation process Publishing process 49

50 Publishing on Marketplace Marketplace is the main available channel for Windows Apps. The only available option is to publish under Mobincube s developing account. As in other publishing processes, login to your Mobincube account and access the App you want to publish. Go to the Preview section and click on the Windows Marketplace tab. Once there, simply hire the Publish on Marketplace service. You will have to fill in the information form for the App you are uploading and that is all, click Publish and you are done. Creation process Publishing process 50

51 Publishing on App Store On the App store you can have your Apps published both under your own developer license or Mobincube s. In any case you will have to login to your account on Mobincube, access the App you want to publish, go to the Publish section and click on the App Store tab. In order to publish under Mobincube s license just fill the first form marked as Publication form. All you have to do is fill the form and click on Publish and your part is done. If you prefer publishing your App directly on the App Store under your own developer license you have to ignore the first form. You will have to work with the one just under the Download IPA section. You will have to: Buy a developer license from itunes Connect Create your certificates ( file.p12 and provisioning profile) Complete the Download IPA process shown above(to download IPA) Register the App on itunes Connect Upload your App to itunes Connect (upload IPA) Creation process Publishing process 51

52 Monetize How to earn money my Apps There are more ways to win money around the App industry than just designing and selling Apps. One is through Ads. This means that in the App, Ads from google will be shown. The more traffic goes through your App and the more interaction users have with the Ads, the more money you will earn. With Mobincube you can build totally free apps, without any cost. These Apps have Ad banners that come from Google Admob. Every time a user clicks on the Ad, you will be getting money. This means that by using Mobincube for free, you can get incomes. From the 100% of the advertising incomes, you will receive 70%. All you need to do is login to your account, access your App and go to the Tool section where you can activate the service: All that is left is to create an AdMob account and link the given code to your App on Mobincube. You are ready to earn money and even follow the statistics of your App. Creation process Monetize 52

53