How-tos

How to customize your mobilized website using Zuznow

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.Diagram showing Full functionality of Content UI/UX

This blog article is a guide and a tutorial for developers who are using the Editor to add rules and scripts to be used in conjunction with the Zuznow automatic responsive engine. This document assumes that the reader is already familiar with the Dashboard, as documented in the System Description. In addition, it assumes that the reader is familiar with JavaScript, as well as the jQuery JS Library API. 

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.

From the Bluemix Catalog, find and select the Zuznow  service (as shown below).Screen shot of Zuznow listed in the Bluemix Catalog

 Click “Register at Zuznow” to create your account.Zuznow service page in the Bluemix Catalog

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).Screen shot of Log in to Zuznow Dashboard

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.” 

New Site 

Select “New App” in the Dashboard side menu to access the wizard where you define a new mobile app.Zuznow Create New App window

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):

  1. Automatic Responsive Design: Choose “Enabled” to allow automatic responsive design. 
  2. Tablet support: Choose “Enabled” to allow customized tablet support for your app. 
  3. Cache: Choose “Personalized” or “Anonymous” depending on the original application.
  4. SSL Support: Choose “Enabled” for SSL encrypted communication.

Screen shot of Zuznow App Features window

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

Editor Overview 

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).Zuznow Editor

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, as in the image below.Zuznow 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 (see below).Zuznow 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.Zuznow Head tab

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.Zuznow Body tab

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. See the example screen shot below.Zuznow Custom page tab

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.Example of viewing the new Zuznow web page you created

 

Site Preview

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).Site Preview buttons

Editor Buttons

In the Editor, you will find the following buttons (shown below). Zuznow Editor buttons

And, here is a short description of each button’s functionality:

  1. The Save button saves the changes made in the various Editor tabs.
  2. Use the Refresh button to discard all changes made in the Editor since the previous save.
  3. The Beautify button formats your style automatically to be consistent and easy to read.
  4. The Export button exports scripts and sets to a file.
  5. Use 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. Use 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. Use the Sets button to view a group of organized scripts.
  10. Use 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. Use the Smartphone icon to view your changes on smartphone.
  14. The Tablet icon allows you to view your changes on the 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, 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).Zuznow Media tab - Build Android app

 

Error Tracking

During editing, lines with syntactical errors will be noted (as shown below):Lines with syntactical errors

If the Developer Mode checkbox is selected (recommended), then previews will be interrupted by error messages such as the one shown below:Post Rules error example

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:Zuznow API key and App ID

And add it to your Bluemix console, as shown:Screen shot of Zuznow service page on Bluemix console

 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!

More How-tos stories
April 11, 2019

How to Automate TLS Certificate Rotation to Avoid Outages

In this post, we'll share how you can make sure you have end-to-end protection for data in transit without running into any TLS certificate expiry issues.

Continue reading

April 5, 2019

Node.js 502 Bad Gateway Issues and How To Resolve Them

In December of 2018, many Node.js users noticed that their applications randomly returned an HTTP status code 502 "Bad Gateway" error. In this post, we'll show you how to resolve this issue if you have been affected.

Continue reading

April 3, 2019

Managing IBM Cloud Resources with a Service ID Through the Command Line Interface

We are excited to announce that you can now log into IBM Cloud with a service ID in v0.15.0 of the IBM Cloud CLI. This enables users to manage IBM Cloud resources with a service ID created within an account through the command line interface.

Continue reading