How To Build Apps Android & iOS Without Coding

You need to have sync enabled for the App Share page in the Resource Manager to be able to add thecorresponding links once the application will be live on the Store.This is all, good luck! 4/5

© 2016 　 Copyright | Tecstar Group 5/5

3.3 How to add the Audio Stream creatusapps.net/blog/how-to-add-the-audio-stream/By JorgeAudio Stream Page TutorialIn this tutorial I will show you how to use the Audio Stream Page type.In order to add a new Audio Stream Page to your app, go to Edit Pages menu then click the \"+\" (Add New Page)button. From the list of the page types available select Audio Stream and click the \"Create\" button. Once the page is added, you are able to proceed with editing it.1) Here you can set a cover image. The cover image can be any size (PNG or JPEG)2) The stream title will appear on the bottom of the page. You can set any title. 1/3

3) Here you can set an Audio Stream link. The Audio Stream link can be any mp4 or mp3 file. Anexample of a streaming link is http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a.Note that for iOS you can use also Radio Streaming links and direct links to media files uploadedin the Resource Manager of the App. So if you uploaded a media file in the Resource Manager(see the next screen image) you can set only the name of the file in this field.You may upload media files up to 25 MB size each.If you want to stream a media file on Android platform from the Resource Manager, you will haveto use this link format:http://creatusapps.net/myapplications/Username/AppID/Media_File_Name .This link format will work also for iOS platform.Note that on Android platform the Audio Stream page will always work in background mode evenif you exited the app using the \"back\" button.Now let's see how the page looks on a device: iOS Android 2/3

The minimal Android version supported is 4.0 The minimal iOS version supported is 6.0© 2016 　 Copyright | Tecstar Group 3/3

3.4 How to add the Barcode Scanner creatusapps.net/blog/how-to-add-the-barcode-scanner/By JavierNowadays a barcode can be found everywhere. That's why CreaTusApps developers created a new page type:Barcode Scanner. With this feature in your application, people can scan any desired barcode and find the information about scanned product from an international barcode database. To insert the scanner in the app, you can just select the “Barcode Scanner” page type from Page Type Resource Manager. **NOTE: No further action required for QR Scanner page. 1/2

Features: Barcode Scanner uses Phone or Multimedia Device primary camera as scanner. It works without any problems on low resolution camera devices, such as iPod. Tap SCAN button to begin the scan. Just look to fit the Barcode into your screen and scanner will automatically find the code. Tap CLEAR button to clear the list of scanned codes.© 2016 　 Copyright | Tecstar Group 2/2

3.5 How to add the BMI Calculator creatusapps.net/blog/how-to-add-the-bmi-calculator/By JorgeBody Mass Index (BMI) – screening tool to identify possible weight problemsBMI is a number calculated from person's weight and height.Body Mass Index provides a reliable indicator of body fatness for most people and is used to screen for weightcategories that may lead to health problems.Easily you may integrate this page type with application related to the sport or healthy food. 1. Find the BMI page from \"Page Types\" and add it into your application you are working on. Click in ADD PAGE and add BMI Calculator function page type to your application. 1/3

2. Once you've created the page you mayedit it.3. You may alter Result Properties for every BMI Condition. For that choose one of the formulafrom Conditions and edit it in Result Properties. 2/3

3.1. Image Name: Here you may insert an image which will be shown in the square. 3.2. Message: Message will appear to serve with the information about the Body Mass Index. 3.3. Page Name: Once you click on the message you may link to a page that describes current BMI and advices about healthy life style. It is up to you what page you link with and what will be shown in it. 4. Test BMI page type to see if everything is working as expected. Moreover, on the previewer you will see 2 alternatives to calculate the BMI: metric version(kg; cm) and english version(ft+in; lbs). 5. Enjoy editing this stunning feature for your application. *Note: This function is available for both platforms: iOS and Android.© 2016 　 Copyright | Tecstar Group 3/3

3.6 How to add the Button Menu creatusapps.net/blog/how-to-add-the-button-menu/By JavierButton Menu page type is a page that contains a classic list of buttons, and each of the menu items can belinked to a separate page. In order to add a Button Menu page to your app, go to your app's Dashboard and click on \"Edit Pages\" link. When re-directed to the app's editor click \"+\" (Add New Pages) button to call up the list of the available page types.In the list select Button Menu page and click \"Create\" button to actually add it.Now you may start editing it. For that, click on \"Edit\" button next to the newly added page.On the Button Menu page editor you may change the header image by selecting different imagesfrom the resource manager (Note: you need to upload the header image to the ResourceManager first).Now, adding new menu items (buttons) – click \"+\" toadd a new button or \"–\" to delete the currentlyselected one.Once a button is added, you may re-name it, changethe button background image and finally link it to another page from your app accordingly. 1/2

You may also change the design of the page by accessing the PAGE STYLE section. Now, remember to click \"Save\" button when you are done with editing the page to have the changes applied.© 2016 　 Copyright | Tecstar Group 2/2

3.7 How to add the Calculator creatusapps.net/blog/how-to-add-the-calculator/By JavierOur team is happy to present you a new page type called Calculator. The Calculator page type is designed inorder to help you and indeed the users of your app to solve predefined mathematical problems. There are manysituations when you might want to use a predefined formula calculator. Some of the most popular are body fatpercentage calculation, ingredient amount calculation for recipes, etc. So, get started by adding a Calculator page to the list of all pages of your app. Go to app’s Dashboard → Edit Pages → + Add New Page. In the menu of all our page types select Calculator and click Create. A page looking like this will appear: Calculator page type stands out from the list of our other page types because it has the strongest emphasis on editing the code. To take most out of calculator page type you will have to have at least basic HTML skills, but don't worry – the default template source code is designed and formatted to be easily understood and edited. By default Calculator page type has three input fields values of which are summed when you tap Calculate button. If your formula has more (or less) parameters than three go into HTML editor by clicking HTML to add more of them. Locate the following entry: <input id=\"p1\" type=\"number\" style=\"text-align:right; width:60%; font-family:monospace; font-size:100%; font-weight:bold;\"> This is a code for one input field of your formula. Copy and paste it as many times as many parameters you have. Please note that each input field has a different ID — the first attribute of the element. The IDs are assigned to the input fields sequentially. Edit each id attribute so that its value would represent a p followed by its number in the list of the input fields. Numeration of input fields is done in natural numbers and starts from one (1). After you have created all the input fields for formula parameters you have, it’s time to go into editing the JavaScript function that does the calculation. Locate the following entry: 1/2

var param1=parseFloat(document.getElementById(\"p1\").value); This is a JavaScript code that assigns value of input field p1 to param1 variable. Copy and paste this code as many times as many input fields you have changing the numeration respectively. Now its time to go into the formula itself. Locate the following entry: var result = param1 + param2 + param3; This is another JavaScript assignment. You should only take an interest in the part right to the equality sign (=). Here are all the mathematics done. Use plus sign (+), asterisk (*), hyphen (-) and forward slash (/) for adding, multiplying, subtracting and dividing parameters. You can also introduce coefficients to the parameters in case you need them. This is it, Calculator page type needs no further editing. In case of a wrong input the Calculator will come up with the invalid input result. Please feel free to create a support ticked or a forum post in case you need some help with our Calculator page type.© 2016 　 Copyright | Tecstar Group 2/2

3.8 How to add the Agenda Calendar creatusapps.net/blog/how-to-add-the-agenda-calendar/By JorgeCalendar Page TypeCalendar page type is a native page that can be used to organize and keep track of events from your dailyagenda.In the Edit Mode of the page you will find that there are some fields that can be customized. Specifically, you canadd your own Event Categories and Event Category Colors. If you leave these two fields empty, the defaultlistings will be shown within the page. 1.Default Listings- Leave the fields empty for default listings 2.Custom Listings- add your own categories and colors; separate the values by a comma (,) 1/4

Also, you can add your custom events directly from the Editor. Use \"+\" Add and \"-\" Remove buttons to create new events and delete the existing ones. In the Event Properties you have to set a Title for the event, set a category for it, add Location, Start/End date/time of the event, mark as All Day event or an active event(active option allows to either show or hide the event). Moreover, you can add a description to the event, it can be customized by editing a blank HTML or link to an existing page from the application's resources. Here is how the event is displayed on the device.Month ProspectiveDay ProspectiveList Prospective Directly from the device you can also add your own events. These events can be deleted from the device, but the ones which are created on the website cannot be deleted nor changed. On the device there are the same fields for events creation as on the website. You have to introduce the event's title, category, location, start/end time or mark the event as an All Day Event.© 2016 　 Copyright | Tecstar Group 2/4

3/4

4/4

3.9 How to add the Camera Cover creatusapps.net/blog/how-to-add-the-camera-cover/By JavierCover Camera Page is an awesome feature to help your friends, family members and beloved pets become amagazine cover model. You can take a new photo and insert it into a cover template and then email it or shareon Facebook, send an e-mail or save it to Photo Library. In order to add a new Camera Cover Page to your app, go to Edit Pages menu then click the \"+\" (Add New Page) button. From the CreaTusApps Marketplace find Camera Cover page type. Click on it to add to your application. Once the page is added, you are able to proceed with editing mode. 1/4

On the right side there are 3 fields that should be edited to get a fully customizable and functionalCamera Cove Page . Specifically, you will find 2 major fields: Camera Cover Resources andCover Properties. In Camera Cover Resources you have to set up the e-mail address to whichthe users will send their covers(the e-mail address can be changed from the device). Below youhave to add the number of covers you want to use for Camera Cover Page; press \"+\" button toadd covers or \"–\" to remove the existing. 2/4

Let's see how it works on the device We can see three buttons. Click on the top-right to take a photo. After you have taken a photo, you will be able to apply the covers you have set in the edit mode on the website. The images taken using Camera Cover Page can be send to an e-mail, shared on Facebook or saved in the Photo Library of your device. Moreover, you can draw on it or rename the image. All of this is available on the cover's dashboard. There is also a possibility to delete all the covers that have been made. Press on the \"Clear\" button to delete the covers. *NOTE: This page can be tested ONLY using CreaTusApps's AppPreviewer application.© 2016 　 Copyright | Tecstar Group 3/4

4/4

3.10 How to add the Map function creatusapps.net/blog/how-to-add-the-map-function/By CreaTusAppsThe Map type page allows to display the Google map with multiple locations. Locations are determined bylatitude/longitude coordinates and are marked by pins on the map. It is possible to provide each location with abrief description and a link to a target URL of a page containing detailed description of the location. The page should be tested on CreaTusApps Previewer App (The image in the web simulator has no clickable areas). Editing is done in Edit Map Page. 1/7

Page displayed on the device: 2/7

The Map Title is editableMap type, select view map or satellite. 3/7

Locations can be added (+button) or removed (-button) from “Locations:” table.In the table “Location details” you can specifyname of the place and its coordinates (latitude/longitude).Additionally you can enter a brief description anda link (Target URL) to a page within your app ora web page containing detailed description of theplace.Page displayed on the device (upon taping on location pin) 4/7

Locations can also be entered directly in the app.xml file.In the app's Dashboard find the link Edit \"app.xml\" fileA Resource Manager window will open with the xml file. 5/7

Scroll down until you find the following code:1 <location>2 <name>Location 1</name>3 <latitude>53.408708 </latitude>4 <longitude>-2.157344 </longitude>5 <imageurl> </imageurl>6 <ldescription>About Location 1 </ldescription>7 <ltarget>Location1.html </ltarget>8 </location> These xml tags contain the data for each location you input. Copy/paste the tags … for as many locations you want to add and simply replace the valued between <>…tags.1 <name>Location1</name> Contain the name of location (Location1 can be replaced with a real name of the place) Also enter for each location 6/7

1 <latitude>... </latitude> 2 <longitude>... </longitude> 3 <ldescription>... </ldescription> 4 <ltarget>… </ltarget> Enter either link to a page in your app, either URL to a page about “Location1” place.© 2016 　 Copyright | Tecstar Group 7/7

3.11 How to add the Login Page Function creatusapps.net/blog/how-to-add-the-login-page-function/By JavierCreaTusApps allows its customers to have user accounts in their apps. This has become possible since wehave designed a Login Page type. To add a Login page to the resources of your app you can do the following: go to your app's Dashboard → Edit Pages → + Add New Page. In the menu of all our page types select Login and click Create. Login page editing options are available only to the designers of an app. So if you decide that users should be able to register their own accounts in your app, you will have to provide them their credentials, namely login and password. To add a new user account to your app click on the \"+\" at the bottom of the list of all users. In the window just below provide login and password for the user as well as a target page of your app to which he or she will be redirected after successful logging in. For example the picture above represents credentials of the user \"User1\" who's password is \"user1pass\". He will be redirected to a page called tab1.html which other users might not have a right to access.© 2016 　 Copyright | Tecstar Group 1/1

3.12 How to add the Menu Page Function creatusapps.net/blog/how-to-add-the-menu-page-function-android-ios/By JavierIn order to add a \"Menu\" page type you need to access your Application's Dashboard and go to \"Edit pages\"section. Click on Add New Page button, the \"+\" button below the list of the currently available pages. Once added you may go to Edit the page. Here, you may add as many menu items as you need, just make sure that all of those have other pages linked to each of the item from the list. 1/3

In Edit mode for that page you may change the Header image. You may choose an image already existing in Resource Manager or upload a new one. In the \"Menu Items\" section, you may click on \"+\" button to add more menu items and \"–\" to delete the existing one. With the controllers you can switch items among them. Below you may find the Items Proprieties section. Here, you may change the title, image and the Link-To page of the item selected in \"Menu Items\" section. Sample \"Menu page\" on the device© 2016 　 Copyright | Tecstar Group 2/3

3/3

3.14 How it works EPUB Reader creatusapps.net/blog/how-it-works-epub-reader-for-android-ios/By JavierBecause Apple iPhone, iPod Touch and iPad have become major platforms on which to read eBooks,CreaTusApps developers designed a new ePub reader page type with which we want to give similar experiencein users reading process as modern eReader devices. Now, it's very easy to add an eBook in your Android & iOS application. Add a new page and choose from Page Type Resource Manager the “ePub Reader” function page type. Upload your eBook to Resource Manager (In-app resources) The last step is to choose from Resource Manager your eBook. 1/4

NOTE: Only .epub file type accepted. And now you can check using CreaTusApps App on your mobile device how it looks.Features: CreaTusApps ePub Reader page type transforms your application into a book, with all properties of a modern eBook Reader dedicated device. You can choose the chapter Resume Reading Swipe pages by tapping on the left/right part of the screen Swipe pages by sliding Landscape and Portrait mode supported.© 2016 　 Copyright | Tecstar Group 2/4

3/4

4/4

3.15 How to add the Coupon Discount Function Android & iOS creatusapps.net/blog/how-to-add-the-coupon-discount-function/By CreaTusAppsThe Coupon Function Page Type allows to include a coupon image in your app which the end user will be ableto use (namely show it to the vendor) in order to benefit of a discount, etc.The coupon image becomes unlocked (displayed on the screen of the device) after end user scans a certainamount of times the QR code printed on your product, or displayed on the screen in your points of sale, etc. The coupon type page allows to include a coupon image in your app which the end user will be able to use (namely show it to the vendor) in order to benefit of a discount, etc. The coupon image becomes unlocked (displayed on the screen of the device) after end user scans a certain amount of times the QR code printed on your product, or displayed on the screen in your points of sale, etc. NOTE: Coupon page type can only be viewed on a device. Editor mode simulator is for demonstration purposes only. In Edit mode, it is possible to customize the multiple options: 1/8

1. Coupon name: Your coupon name2. Coupon image: Your coupon imageSample in App Resources: 2/8

3. Start date: Coupon will be available starting with this date4. End date: Coupon will be available until this date5. QR code data: Data (text, etc) contained in the QR code 3/8

6. Check-in target amount: Number of timesrequired to scan QR code in order to unlock thecoupon image in the app7. Hours before next check-in: Hours to pass untilnext scanning is possible8. Can be used again: The coupon can be usedagain after being used once9. Coupon description: Set description for couponThe coupon is \"locked\" until QR code is scanned the required amount of times.User can read instructions tapping on \"How to Unlock\" or proceed to scanning by tapping on\"Scan\" button. 4/8

Coupon successful scanning the Checkin target amount will be automatically incremented by 1(for instance 1 of 4) and the following message will pop up:When Checkin amount target is reached (for instance 4 of 4) coupon image is unlocked anduser prompted to show the coupon to the vendor:After vendor taps on \"Use this coupon\" the coupon image becomes locked and Check-in targetamount is nulled (0 of 4) 5/8

Unlocking the coupon will require scanning the QR code from the beginning.FAILURE In case of failure to scan the following messages will pop-up: 6/8

Scan the QR code againCoupon is not valid until Start date (availability period is set in the page) 7/8

Coupon is not valid any longer (date is set in the page).Great!, already have a discount coupon on your app!© 2016 　 Copyright | Tecstar Group 8/8

4.1 Bookstore Template creatusapps.net/blog/bookstore-template-for-android-and-iphone/By CreaTusAppsHow to build your application using BookStore templateThe reason for using this template is to offer the possibility for publishers and authors to put inselling your books into an iPhone application. To build your own bookstore application there is nonecessary to be an iPhone developer expert, you can use BookStore template.The following steps will help you create your BookStore application: Select BookStore template from Templates page Choose \"Use This Template\" and get the name for your application Now you can start to edit the content of your bookstore:1. First tab (Book Store) is an IMG MENU page with the list of books in your bookstore. Each itempoints to a book cover page with detailed information about the book's content and price (using InApp Purchase link or inAppPurchase subscription).2. Cover page has a brief description of the book. On this page we have 2 buttons: \"GO TO 1/3

BOOKMARK\" and \"OPEN BOOK\". Each button opens book content page:Simple link:\"OPEN BOOK\"<a href=\"http://Content_b1.html\" </a>\"GO TO BOOKMARK\"<a href=\"http://Content_b1.html?gotobookmark=1&\" </a>In App Purchase link:\"OPEN BOOK\"<a href=\"buy://46312:Content_b1.html\" </a>\"GO TO BOOKMARK\"<a href=\"buy://46312:Content_b1.html?gotobookmark=1&\" </a>NOTE: If the book from bookstore is free for visualization we will use Simple link (http://)otherwise we will put in selling the book via In App Purchase link (buy://).NOTE: In the sample below 46312 is a sample product number issued by Apple. To get your ownproduct number you need to submit a product application on itunesconnect.apple.com, whereyou'll specify the price amount and the billing cycles.3. Book's content pages can be a collection of interlinked HTML pages or an HTML page withtype EPUB (CreaTusApps special page type) with attached file of type *.epub (electronicpublication).a) If we are using a collection of interlinked HTML pages to show the contents of the book wehave additional options on each page:\"BOOKMARK\"<a href=\"bookmark://book=Content_b1.html&page=Page1_b1.html/anothercontent\">\"bookmark://\" schema have two parameters:book – the name of the book you're applying bookmarkpage – the name of page you're applying bookmark\"INDEX\"<a href=\"Content_b1.html\">Return to content page of the book (first page).NOTE: \"bookmark://\" schema allows users to save bookmarks for different pages in your book 2/3

store application. Transitions between pages can be set (slide, curl) in design mode. b) When we are using HTML page with type EPUB (CreaTusApps page types) with attached file of type *.epub ( electronic publication ) bookmark mechanism automatically will save last navigation page. Transition between pages is activating on double-click event on the page or with navigation buttons (Forward, Revers) from header of the document.© 2016 　 Copyright | Tecstar Group 3/3

4.2 Mobile Shop App Template creatusapps.net/blog/mobile-shop-app-template-android-iphone-or-ipad/By CreaTusAppsIntroductionIf you're reading this guide you probably need a new mobile app for your store. The first step in this process is touse CreaTusApps App Builder with the mobile ordering features from our \"Add new page\" section to create aworking app that can be previewed and tested using our Previewer Applications (Download Android App Here–Download iOS App Here).A checklist for building your first app Step 1. We advise all our customers to write on a paper the basic app requirements. Having this will help you design your app much faster. I have already compiled a list of requirements for my Mobile Store app so I'll share these with you: –NO TABS Buttons for: Categories, Win a Prize, About, Our Locations, Facebook page and Share the app. Categories: Fashion, Jewelry, Electronics, Sports. etcStep 2. Pick a template from our Available Templates page or start with a Blank Template. As first page (index.html) I'll use the Button Menu and will add some custom design to it. Categories: Product Order page type. 1/5

Win a prize: Slot Machine page type. About: About Us page type. Find us: Map page. Facebook: Mobile page type. Share the app: App Share page type. Order page type for processing the order. ** I'll pick a Blank Template; however, the app that I'm designing now will be added as a template, and you may pick it from our templates page: MobileShopBuilding your Mobile Store app Step 1. Since I have already written down all of the app requirements and the needed features (page types), I'll simply add all the needed pages in my app. Step 2. In the navigation settings I've chosen the \"No Tabs\" option because I don't need tab buttons in my app. However, feel free to pick Native or Custom tabs if you need them, this is up to you. Now I'll start to customize the \"Landing page\" of my app which is index.html . Using the Button Menu page is really easy (TUTORIAL). However, I'll design 2 custom buttons in it with our Layout Editor – One will be for the Product Order page and the second one for the Order page type.Final result: 2/5