01 Dec Getting Started with Zuznow on IBM Bluemix
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.
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.
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
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
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!
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:
Once a domain has been selected, the scripts for that domain are managed in the tabbed Editor
Rules that are applied to the website pages before Zuznow’s automatic responsive algorithm is applied, are managed in the Pre-Responsive tab.
The post-responsive rules (i.e., rules that are applied after the Zuznow automatic responsive algorithm) are managed in the Post-Responsive tab.
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.
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.
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”.
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:
Add the path “mobstatic/newpage.html”.
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.
In your Editor, you will find the following buttons. Here is a short description of each button’s functionality:
- Click the Save button to save the changes made in the various Editor tabs
- Click the Refresh button to discard all changes made in the Editor since the previous save.
- Click the Beautify button to automatically format your style to be consistent and easy to read
- Click the Export button to export scripts and sets to a file
- Click the Import button to import previously exported scripts and sets
- Click the Clear Cache button to clear the ZMS cache for the mobile app
- Click the Revisions button to view a time-stamped list of revisions
- Click the Publish button to make the mobilized application available to mobile users
- Click the Sets button to view a group of organized scripts
- Click the Add Rules Set button to add a new set
- Click on the Publish app to App store button to start configuring your iOS app
- Click on the Publish app to Google play button to start configuring your Android app
- Click the Smartphone icon to view your changes on smartphone
- Click the Tablet icon to view your changes on tablet
- Click the iOS/Android icon to view your changes on your hybrid apps
- 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).
During editing lines with syntactical errors will be noted, as shown on the right:
If the check box is selected (recommended), then previews will be interrupted by error messages such as the one shown below:
Copy your app credentials
From “My Apps” tab, open your new application, and copy the App ID and API Key
To the Bluemix console
Need help? Feel free to contact us our specialist will be happy to assist you with creating your first mobile site and mobile app.