How To

How To

24 Nov, 2013 |
How To

Step 1: Adding Content to the App in the Control Panel via http://build.myappbuilder.com

 

App Overview


Apps

 

When you create an App it can later be found under the “Apps” section of the control Panel

Apps Control Panel

  • Title: Title of the App. You can Modify this under the App Settings
  • Author: Apps can have an author name similar to a Book type of Author or Copyright
  • Editors: Users that can work on the app

ControlPanel

App Control Panel

 

 

AppActions

 

App Actions (from Left to Right)

  • Preview (Yellow App): Quickly check out HTML version of the App. Alternatively you can test out the App by using App Test Flight which you can download from iTunes App Store and Android Play App Store – please see App Test Flight in the Manual.
  • Publish App (Purple App): Be able to host the app directly hosted within our cloud service. Published App will generate a unique url you can direct users to or point your host record to.
  • Duplicate (Blue Button): Have the ability to duplicate an app. This allows you to change and modify the app or backup the app as needed
  • Edit (Green Button): Goes directly to the App and allows users to edit the app.
  • Delete App (Red Button): Deletes the App. Please use with caution, can not be undone.

 

Create New App

NewApps

Create a New App. Basic Settings to Creating New App.

 

Price Table: If you have signed up with Free Account the Price Table shows up. You can  choose a different plan at this time if you choose to.

AppPlans

App Plans

Step 1:

  • App Title: Put the Title of your App. e.g. iPhone Tips and Tricks
  • App Price: This is for internal reference.

Step 2:

  • App Description: App description is used in About Section or will display under the “I” icon in an application. This allows you to inform users about your application and your purpose.

 

AppDetails App Details

Setup App

SetUpNewApp

Basic information for configuring the Application.

  • Title: Same field you set up with New App. Allows you to change the App Title.
  • Splash Image: When an app first loads up you can display a Splash Image which gives the app user a feel for what the app is about and allows you to bring in branding.
  • Application Icons: Icons are used when you submit the app to the App Store. App Stores require usually a 1024×1024 image or a 512×512 image of your Application Icon.
    • 114×114: Smaller size which is stored and can be displayed in your about section and other area’s you want to show your app branding.
    • 512×512: App Icon: Used for your Storage and Reference for later use  need to use the Icon.
    • Portrait Background Image: You can specify a Portrait Background image.  This is similar to Wallpaper or HTML Background. This will depending on Template you choose if they support this feature.
    • Landscape Background Image: You can specify a Portrait Background image.  This is similar to Wallpaper or HTML Background. This will depending on Template you choose if they support this feature.

Edit Your App

Your App will have it’s App Title with Icon of an Open Folder. For example this is what our app: “iPhone Tips and Tricks”  looks like:

iPhoneTipsTricks

 

 

Once you select your app you can go directly to the Edit section for that app.

Adding Content to the App:  App content is organized with Buttons and modules. To start creating content you must first create a “New Button”. Once you have created a button you can start adding content to the app by creating a “New Element” under that button. Elements are specialized modules for a specific purpose.

AppButtonsExample

How Buttons Look in the App

 

Buttons

NewButtonBox

NewButton

 

  • New Button:
    • Button Name: Enter the Name of the Button that will be displayed under the Button Image.
    • Upload Image: Here you have 3 Choices
      • Upload: Upload your own 57×57 Icon
      • Choose: From our library of Icons
      • Link: Bring in Icon from another URL or server

Creating a New Button

CreateNewButton

 

 You can edit a category by clicking on the “Edit” icon EditButtonnext to category name

  • Button Order: You can change the order in which buttons or in or priority of the buttons.  With mouse hold the button row and move it up or down in priority  of the position that you want.

 

ButtonOrder

How to Change Button Order

 


Deleting a Category:
You can delete a category by clicking on the “Delete Icon”  DeleteCategory next to the category Name.

This Action can not be undone!

Elements

Under buttons you can add different type of Elements. Depending on the Element

 Elements

Adding a New Element Under a Button

Filling in the Element Details

Typically each element consist of Title, Text (Body) and Supportive Media. Element details will change slightly. However with most elements you can add Text and Images directly into the WYSIWYG Editor.

ElementExample

 

Elements

  • BLOGS/RSS FEEDS: Easily integrate Blogs and RSS feeds into your application! In Control Panel Add Blog Description optional Image and the URL to the RSS Feed!
  • LIVE WEB PAGE: Easily integrate a live web page into your app. Similar to an iFrame, App Fizz acts as a wrapper around a live web page. Simply add url and optional description and photo in the Control Panel.
  • TASK: Bring in Simple Task List. You can create custom Task list that helps keeps users organized and will track completed items. Also you can bring in ability for users to do their own Task List!
  • Audio: Bring in and Stream Audio directly into your pre-existing app. Audio is delivered and streamed through our Cloud Server!
  • RICH TEXT: Rich Text: HTML, Audio, Video maps and other elements all in one element. Similar to blogging or web design.
  • VIDEO: Add Video into your pre-existing application. Video is streamed from our Cloud Server.
  • Contact Page: Easily create a Contact page and Form. Form Entries are emailed to the email address you provide.
  • Map & Location: Implement Maps and Locations into the App by supplying address and info.

 

AppElementExample

This is list of Elements under Keyboard & Writing Tips Button

 

Editing Elements

  • You can edit an Element by clicking on the “Edit” Icon EditElementIcon
  • Element Order: You can change the order in which Elements priority or appear in the app.   With mouse hold the button row and move it up or down in priority of the position that you want.

ElementOrder

 

Deleting an Element: You can delete an Element  by clicking on the “Delete Icon”  DeleteElement next to the Element Name.

Warning: This Action can not be undone!

App Wall

Example of App Wall in Android or iPhone App

AppWall

Similar to Comment Board or Forum allows application users to post messages about the app in the app. Wall has several settings and can be customized.

WallSettings

  • User Settings
    • Upload Videos: Allow users to post and upload videos within the application.
    • Upload Images: Allow users to upload app images .
  • Walls
    • Buttons: Each Button Can Have it’s own App Wall if you choose this option. For example if you create a Button called “Foo” . Now you can have app wall postings directly organized and displayed under the “Foo” Button.
    • Elements: Each Element Can have it’s own App Wall under the button that it is created.  For example if you create a Button called “Foo”  and create an Element under “Foo” Called “Bar” now you can have a App Wall Under “Foo” >  “Bar”

Delete App Wall Post: As admin you can delete wall post done by users by clicking on “Delete Button” Delete
Warning: This Action can not be undone!

I am text block. Click edit button to change this text.

Step 2: Test Flight Your App

Add APP API Key

 

TestFlightAppKey

Note: Get the API Key From MyAppBuilder Backend: http://build.myappbuilder.com

-Under the App Details Page get the API Key for the App you want to test.)

 

TestFlight-ApiKey

Test App Out In Device

Please Note: App Template and custom features can continue to be built on by you or you can work with us to have these features and template added on. Check support site to download xCode Project.

 http://build.myappbuilder.com

Step 3a: Configure Your App for iOS with xCode

 

Edit App Key

 

In the Root Directory of the App expand www and right click key.txt

 

iOSKey

 

 

Click open with “TextEditor” Application

 

OpenTextEditor

 

 

Replace App key with the app you would like to use. Save the app key in text editor by clicking “Save” under File > Save.

Edit-iOS-Key

Step 3b: Configure Your App for Android Development

 

Edit App Key

 

In the Root Directory of the App expand assets > www and right click key.txt

 

Android-App-Key-File

 

 

Click open with “TextEditor” Application

 

AndroidOpenWithTextEditor

 

 

Replace App key with the app you would like to use. Save the app key in text editor by clicking “Save” under File > Save.

AndroidEditKey