ExchangeR - A Currency Converter Mobile Web App

Introduction

This sample demonstrates a currency converter mobile web app, which can be used in any mobile device. You can convert most of the foreign exchange currencies used around the world by selecting them from a drop down list. You can find the source code of the calculator app in <APPM-HOME>/samples/mobileapps/ExchangeR/Source/ directory. 

Prerequisites

• Download WSO2 EMM, WSO2 MDM or any other MDM, and start the server with a port offset of one. 

  To set a port offset of 1 in WSO2 EMM or WSO2 MDM, change the value of the <Offset> element in <CDM_HOME>/repository/conf/carbon.xml file as follows: <Offset>1</Offset>

• Download WSO2 AppM, and start the server. 

• Start the Web server. (E.g. Apache Tomcat)

Building the sample

Follow the steps below to build the sample.

Hosting the app on a Web server

Before executing the sample, follow the steps below to host the ExchageR Web app in a Web server.

1. Download the source and build the product from source. 

2. Copy the <PRODUCT_HOME>/webapps/mobileapps/ExchangeR/Source/ directory to the document root folder of the Web server.

   <PRODUCT_HOME> refers to the directory of the product which you built from source.

3. Run the hosted app from your Web browser, and get the URL. For example: http://10.100.6.8/ExchangeR

Executing the sample

Follow the steps below to execute the sample.

Creating ExchangeR mobile application

You need to create a new mobile app to use the ExchangeR app as a mobile Web application.

Uploading the application

Follow the steps below to upload the app.

1. Log in to App Manager publisher console using admin/admin as username and password.

2. Click Mobile Applications in the top menu.

3. Click Add New Mobile Application.

4. Enter Web App for Platform and enter the URL of the hosted app for Web App URL as shown below.

   When entering the Web App URL, use the IP address of the host URL instead of using localhost since the Web app should be accessible from mobile devices.

   

5. Click Next.

Entering the application details

Follow the steps below to enter the details of the app.

1. Enter ExchangeR for Title, and a preferred description about the app for Description.
2. Enter the version number for Version.

3. Download the banner.png image, and upload it for Banner.

   If you have the source of the product downloaded, use the <PRODUCT_HOME>/webapps/mobileapps/ExchangeR/Resources/banner.png image for the banner.

4. Download the screen1.png, and screen2.png images, and upload them for Screen Shots.

   If you have the source of the product downloaded, use the following images for the screenshots.

   • <PRODUCT_HOME>/webapps/mobileapps/ExchangeR/Resources/screen1.png 

   • <PRODUCT_HOME>/webapps/mobileapps/ExchangeR/Resources/screen2.png

5. Download the icon.png image, and upload them for Icon file.

   If you have the source of the product downloaded, use the<PRODUCT_HOME>/webapps/mobileapps/ExchangeR/Resources/icon.png image for the banner.

   When you complete entering the details you see the screen as shown below.
   

6. Click Submit.
   When the ExchangeR app is created in App Manager, you see it in the list as shown below.
   

7. Click Submit for Review, click Approve, and then click Publish.

Using ExchangeR mobile application

By default, App Manager store is not connected to CDM. Therefore, it acts as a catalog. Follow the steps below to view it.

1. Access the App Manager store using the following URL: https://localhost:9443/store/
2. Log in to the store with admin/admin as username and password.
3. Click on the published app to view it.

Integrating with a Mobile Device Manager (MDM)

Follow the steps below to integrate WSO2 App Manager with a MDM.

1. Integrate a mobile device manager with WSO2 AppM. For instructions, see Integrating a Mobile Device Manager.

2. Restart WSO2 App Manager.

Installing the mobile app

Follow the steps below to install the ExchangeR app on your mobile device.

1. Access the App Manager store using the following URL:https://localhost:9443/store/

2. Click on the app. You view the app as shown below.
   

3. Click Install.

4. Select the device from the displayed list as shown below.
   

 Now, the ExchangeR app is provisioned to the selected mobile device, a link to access it appears on the home screen of the device.