August 22, 2017 | Written by: Chen Levkovich
Categorized: How-tos | What's New
Share this post:
Zuznow provides an automatic mobile adaptation platform that adapts even the most complex Web applications to mobile apps. Using the Zuznow platform, one can fully preserve the original application’s user experience, content, functionality, and business logic.
Zuznow is composed of an automatic responsive engine which runs CSS and style changes on-the-fly and in real-time on the entire application, creating a mobile app in an instant. It also has an adaptive engine which offers a full-featured customization dashboard (the Editor) that Web developers can use to customize the automatic result, using simple CSS, HTML and jQuery commands.
Using the Zuznow service in IBM Bluemix
First, you will need to register for a Bluemix account, if you do not already have one. Use the button below to register.
Sign up for Bluemix. It’s free!
From the Bluemix Catalog, find and select the Zuznow service (as shown below).
Click “Register at Zuznow” to create your account.
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 login using your Google account (as shown below).
To request a new password, click on “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 “Save.”
Select “New App” in the Dashboard side menu to access the wizard where you define a new mobile app.
In the window above, you’ll need to define the following parameters for the new mobile app: App Name and Domain. Enter your App project name. Next, enter the URL of the application domain to be mobilized. Click the “Next” button to define the app features.
To define app features, do the following (see the screen shot below):
- 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 build your mobile app automatically. Congratulations – your app is ready!
Select “Editor” in the Dashboard side menu to access the Dashboard section where you view and edit 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 (see below).
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, as in the image below.
The post-responsive rules (i.e., rules that are applied after the Zuznow automatic responsive algorithm) are managed in the Post-Responsive tab (see below).
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. See the example screen shot below.
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 that is http://stg-47467994.mob.zuznow.com/ add the path mobstatic/newpage.html, like in the example below.
Apart from using the simulator to view your app on 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 (as shown below).
In the Editor, you will find the following buttons (shown below).
And, here is a short description of each button’s functionality:
- The Save button saves the changes made in the various Editor tabs.
- Use the Refresh button to discard all changes made in the Editor since the previous save.
- The Beautify button formats your style automatically to be consistent and easy to read.
- The Export button exports scripts and sets to a file.
- Use the Import button to import previously exported scripts and sets.
- Click the Clear Cache button to clear the ZMS cache for the mobile app.
- Use the Revisions button to view a time-stamped list of revisions.
- Click the Publish button to make the mobilized application available to mobile users.
- Use the Sets button to view a group of organized scripts.
- Use 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.
- Use the Smartphone icon to view your changes on smartphone.
- The Tablet icon allows you to view your changes on the 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, ID, devices it will run on (for iOS), application icon, 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 below):
If the Developer Mode checkbox 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, like in the example below:
And add it to your Bluemix console, as shown:
Now you’re ready to start using Zuznow in your Bluemix app! If you have questions, feel free to post your comments to this blog article in the Comments section below. Also, be sure and follow Zuznow on Twitter -> @Zuznow. We want to hear about what you build with Zuznow!