Getting Started with Zuznow on IBM Bluemix

Getting Started with Zuznow on IBM Bluemix

From the Bluemix Dashboard, find and select the Zuznow service.

From the Bluemix Dashboard, find and select the Zuznow service.

Click “Register at Zuznow” to create your Zuznow user and your first mobile app.

Click “Register at Zuznow” to create your Zuznow user and your first mobile app.

Register at Zuznow

Enter your Dashboard username and password and click Log in. If you don’t have a user, you can create a new one or log in using your Google account.

Register at Zuznow

 

Forgot your password?

To request a new password, click on the Forgot your Password. enter your e-mail address, and click E-mail new password. You will receive a link that provides you with a one-time login to the Dashboard, where you can change your password. Wish to change the password? After you log in, click on your username box at the top right corner and then click on change password. Fill in the new parameters and click on Save.

New Site

Select New App in the Dashboard side menu to access the wizard where you define a new mobile app.

Select New App in the Dashboard side menu to access the wizard where you define a new mobile app.

Define the following parameters for the new mobile site:

First Step: App Parameters

First Step: App Parameters:

Define the following parameters for the new mobile app: App Name: Enter your App project name. This can be any text Domain: The URL of the application domain to be mobilized. Click the Next button to define the App Features

Second Step: App Features

App Features

Automatic Responsive Design: choose Enabled to allow automatic responsive design

Tablet support: choose Enabled to allow customized Tablet support for your app

Cache: choose personalized or anonymous depending on the original application

SSL Support: choose Enabled for SSL encrypted communication

Click Create to automatically build your mobile app. Congratulations – your app is ready!

Editor Overview

Select Editor in the Dashboard side menu to access the Dashboard section where the web developer views and edits the rules and scripts for a selected app. If you moved directly after creating your app, you will be automatically transferred to the relevant app. If not, you can select the domain to be edited from the list of staging sites:

Editor Overview

Once a domain has been selected, the scripts for that domain are managed in the tabbed Editor

Responsive

Rules that are applied to the website pages before Zuznow’s automatic responsive algorithm is applied, are managed in the Pre-Responsive tab.

Responsive

The post-responsive rules (i.e., rules that are applied after the Zuznow automatic responsive algorithm) are managed in the Post-Responsive tab.

The post-responsive rules

Head and Body

The code entered in the Head tab will appear in the HTML header of the mobilized website. It is in the Head tab, for example, that you reference external scripts to be used by the mobilized website.

Head rules

All code in the Body tab will appear at the end of the mobilized HTML body. It is in the Body tab, for example, that you implement functions made available through the external scripts referenced in the Head tab.

Body rules

Custom pages

Select this tab to create and customize pages that are not available in the original web application. The path to your new page should end with “.html”.

Custom pages

The page you created can be customized according to your needs. Save the changes when you finish editing. To view the new page in your website use the ending mobstatic/path (the selected path).

For example for the website:

“http://stg-47467994.mob.zuznow.com/”

Add the path “mobstatic/newpage.html”.

Custome pages example

Site Preview

Apart from using the simulator to view your app in real time, you can – at any time – preview various views of the mobile app – you can choose to view the Tablet, Smartphone or iOS/ Android apps view.

Website preview

Editor Buttons

In your Editor, you will find the following buttons. Here is a short description of each button’s functionality:

Editor Buttons

  1. Click the Save button to save the changes made in the various Editor tabs
  2. Click the Refresh button to discard all changes made in the Editor since the previous save.
  3. Click the Beautify button to automatically format your style to be consistent and easy to read
  4. Click the Export button to export scripts and sets to a file
  5. Click the Import button to import previously exported scripts and sets
  6. Click the Clear Cache button to clear the ZMS cache for the mobile app
  7. Click the Revisions button to view a time-stamped list of revisions
  8. Click the Publish button to make the mobilized application available to mobile users
  9. Click the Sets button to view a group of organized scripts
  10. Click the Add Rules Set button to add a new set
  11. Click on the Publish app to App store button to start configuring your iOS app
  12. Click on the Publish app to Google play button to start configuring your Android app
  13. Click the Smartphone icon to view your changes on smartphone
  14. Click the Tablet icon to view your changes on tablet
  15. Click the iOS/Android icon to view your changes on your hybrid apps
  16. Click the Website icon to view the original application

Hybrid App Wizard

The Publish app to App Store and Publish app to Google Play buttons open the Hybrid app wizard.

The wizard allows you to configure the following hybrid application parameters: app name and id, devices it will run on (for iOS),

application icon and splash screen images, and native features. After you finish configuring the app, click the “Build” button and then Download Project (for iOS) or APK file (for Android).

Hybrid app wizard

Error Tracking

During editing lines with syntactical errors will be noted, as shown on the right:

syntactical errors

If the check box is selected (recommended), then previews will be interrupted by error messages such as the one shown below:

Developer Mode

Copy your app credentials

From “My Apps” tab, open your new application, and copy the App ID and API Key

Copy app credentials

To the Bluemix console

Bluemix dashboard

Need help? Feel free to contact us our specialist will be happy to assist you with creating your first mobile site and mobile app.