Playing with WhatsApp and SAP HANA Cloud Platform

Standard

Let’s do something fun with WhatsApp and SAP HANA Cloud Platform. We will build an app whereby you can take a picture from your smartphone and send it via WhatsApp, save it to HANA database and finally view the picture from the browser. I named it as “Whana” = WhatsApp and Hana

 

b10.jpg

Prerequisites

 

 

Diagram

 

Presentation1.jpg

 

Yowsup Installation & Configuration

 

After you have downloaded the Yowsup library, copy the folder yowsup-master to the Python folder (in my case is C:\Python34). You also need to download the python-dateutil and copy dateutil folder to C:\Python34\Lib.

 

Now go to https://coderus.openrepos.net/whitesoft/whatsapp_sms to get the WhatsApp code. Enter your dedicated mobile phone number and select SMS.

b3.jpg

If no error, you will get the SMS message and note down the number:

WhatsApp code 192-828

 

Under C:\Python34\yowsup-master\src, copy the config.example to yowsup-cli.config, and indicate the following:

cc=country code; for example: 65

phone=your phone number: for example: 651234567 (without +)

leave the id and password blank at the moment.

 

Execute the following command to register with WhatsApp:

python C:\Python34\yowsup-master\src\yowsup-cli –register 192-828 –config C:\Python34\yowsup-master\src\yowsup-cli.config

 

If no error, you will get the following message:

status: ok

kind: free

pw: S1nBGCvZhb6TBQrbm2sQCfSLkXM=

price: 0,89

price_expiration: 1362803446

currency: SGD

cost: 0.89

expiration: 1391344106

login: 651234567

type: new

 

Copy the password S1nBGCvZhb6TBQrbm2sQCfSLkXM= and paste into pw field in yowsup-cli.config. In the end your yowsup-cli.config will look like this:

 

cc=65

phone=651234567

id=

password=S1nBGCvZhb6TBQrbm2sQCfSLkXM=

 

Now let’s test to send a message to this phone number 6597312234. Execute the following command:

C:\Python34>python C:\Python34\yowsup-master\src\yowsup-cli –send 6597312234 “Test message” –config C:\Python34\yowsup-master\src\yowsup-cli.config

If no error, you will see the following result and the message will be sent to 6597312234:

Authed 651234567

Sent message

 

I have added the functions to save the image received from the WhatsApp to the local folder: C:\java\imageWA. Just overwrite the CmdClient.py in the  folder Example and downloader.py in folder Media.

 

 

 

Java Folder Monitoring

On this part, we will create the Java program to monitor the folder where the Yowsup stored the WhatsApp image (i.e., C:\java\imageWA) and check if there is any image file. If there is, the program will read the file and insert into the HANA database.

Below is the snippet of the java code:

 

  1. static final String IMGFolder = “C:\\java\\imageWA”;
  2. String INSERT_PICTURE = “INSERT INTO \”NEO_CG2SX3P5XHHQEO58DKM7BWU0V\”.\”p1940803061trial.fd2.data::mytable\” VALUES(?,?)”;
  3. public synchronized void insert(String fileName) throws Exception, IOException, SQLException{
  4.   FileInputStream fis = null;
  5.   PreparedStatement ps = null;
  6.   Date currentDate = new Date();
  7.   String s = Long.toString(currentDate.getTime() / 1000);
  8.   System.out.println(s);
  9.   try {
  10.   System.out.println(“filename: “ + fileName);
  11.   File file = new File(IMGFolder + “\\” + fileName);
  12.   fis = new FileInputStream(file);
  13.   ps = conn.prepareStatement(INSERT_PICTURE);
  14.   ps.setString(1, s);
  15.   ps.setBinaryStream(2, fis, (int) file.length());
  16.   int rowsInserted = ps.executeUpdate();
  17.   conn.commit();
  18.   if (rowsInserted > 0) {
  19.   System.out.println(“A new record was inserted successfully!”);
  20.   }
  21.   if(file.delete()){
  22.   System.out.println(file.getName() + ” is deleted!”);
  23.   }
  24.   else{
  25.     System.out.println(“Delete operation is failed.”);
  26.     }
  27.   } finally {
  28.   ps.close();
  29.   fis.close();
  30.   }
  31.   }

 

HANA Cloud Platform Setup

 

I will go through the key important files. You can find the complete source code on GitHub: https://github.com/ferrygun/Whana

b4.jpg

mytable.hdbtable

 

We need to create a table, mytable.hdbtable in SAP HANA database to store the image from the WhatsApp.

 

mytable.hdbtable
table.schemaName = “NEO_CG2SX3P5XHHQEO58DKM7BWU0V”;table.tableType = COLUMNSTORE;table.description = “My Table”;

table.columns = [

{name = “File_Name”; sqlType = NVARCHAR; nullable = true; length=20;},

{name = “File_Content”; sqlType = BLOB; nullable = true;}

];

 

b5.jpg

 

GetImage.xsjs

Create the GetImage.xsjs to retrieve the image binary stream from the HANA database:

  1.   var id = $.request.parameters.get(‘id’);
  2.     var conn = $.db.getConnection();
  3.     try {
  4.         var query = “Select \”File_Content\” From \”NEO_CG2SX3P5XHHQEO58DKM7BWU0V\”.\”p1940803061trial.fd2.data::mytable\” Where \”File_Name\” = “ + id;
  5.         var pstmt = conn.prepareStatement(query);
  6.         var rs = pstmt.executeQuery();
  7.         rs.next();
  8.         $.response.headers.set(“Content-Disposition”“Content-Disposition: attachment; filename=filename.jpg”);
  9.         $.response.contentType = ‘image/jpg’;
  10.         $.response.setBody(rs.getBlob(1));
  11.         $.response.status = $.net.http.OK;
  12.     } catch (e) {
  13.         $.response.setBody(“Error while downloading : “ + e);
  14.         $.response.status = 500;
  15.     }
  16.     conn.close();

 

GetFileName.xsjs

 

Create the GetFileName.xsjs to list down all the image file names so user can select  from the SAPUI5 table:

  1. var query = “Select \”File_Name\” From \”NEO_CG2SX3P5XHHQEO58DKM7BWU0V\”.\”p1940803061trial.fd2.data::mytable\” “;
  2. function close(closables) {
  3.     var closable;
  4.     var i;
  5.     for (i = 0; i < closables.length; i++) {
  6.         closable = closables[i];
  7.         if (closable) {
  8.             closable.close();
  9.         }
  10.     }
  11. }
  12. function getFileName() {
  13.     var FNameList = [];
  14.     var connection = $.db.getConnection();
  15.     var statement = null;
  16.     var resultSet = null;
  17.     try {
  18.         statement = connection.prepareStatement(query);
  19.         resultSet = statement.executeQuery();
  20.         while (resultSet.next()) {
  21.             var fname = {};
  22.             fname.file_name = resultSet.getString(1);
  23.             FNameList.push(fname);
  24.         }
  25.     } finally {
  26.         close([resultSet, statement, connection]);
  27.     }
  28.     return FNameList;
  29. }
  30. function doGetFileName() {
  31.     try {
  32.         $.response.contentType = “application/json”;
  33.         $.response.setBody(JSON.stringify(getFileName()));
  34.     } catch (err) {
  35.         $.response.contentType = “text/plain”;
  36.         $.response.setBody(“Error while executing query: [“ + err.message + “]”);
  37.         $.response.returnCode = 200;
  38.     }
  39. }
  40. doGetFileName();


Embed an Image in HTML Code

In order to view the image, we will call the function GetImage.xsjs and embed the picture into the HTML code with base64 encoding using the following tag:

  1. <img src=“data:{mime};base64,{data}” alt=“My picture”/>

where {Mime} is in ‘image/imagetype’ format (eg. ‘image/jpg’ or image/png) and {data} is the base64 encoded

 

Here is an example when I viewed the source code of the “WhatsApp” image in the Chrome browser:

 

b6.jpg

b7.jpg

 

The actSearch function in the view controller will call the GetImage.xsjs based on the given image ID (filename) and encode the content in the base64 format.

 

  1. actSearch: function(fname) {
  2.         var xmlHTTP = new XMLHttpRequest();
  3.         xmlHTTP.open(‘GET’‘../fd2/image/GetImage.xsjs?id=’ + fname, true);
  4.         xmlHTTP.responseType = ‘arraybuffer’;
  5.         xmlHTTP.onload = function(e) {
  6.             var arr = new Uint8Array(this.response);
  7.             var raw = String.fromCharCode.apply(null, arr);
  8.             var b64 = btoa(raw);
  9.             var dataURL = “data:image/jpeg;base64,” + b64;
  10.             document.getElementById(“image”).src = dataURL;
  11.         };
  12.         xmlHTTP.send();
  13.     }

Running the App

Firstly you need to open the tunnel to the SAP HANA Cloud Platform. Under folder neo-javaee6-wp-sdk, execute the following command:

neo open-db-tunnel -h “hanatrial.ondemand.com” -u “p1940803061” -a “p1940803061trial” –id “fd2”

 

Replace “p1940803061” with your HANA trial account ID and “fd2” with your HANA instance.

 

b8.jpg

If successfull, you will get the the password: Df2sxp5HH8H6BGv and user: DEV_5GKYRR9GKKT9NTV5RD7U0DGMG. Update the pwd and user value in the config.properties:

user=DEV_5GKYRR9GKKT9NTV5RD7U0DGMG

pwd=Df2sxp5HH8H6BGv

Run the Yowsup. Execute below command:

python C:\Python34\yowsup-master\src\yowsup-cli –interactive <phone_number> –wait –autoack –keepalive –config C:\Python34\yowsup-master\src\yowsup-cli.config

b9.jpg

And finally run the Java Folder Monitoring app:

java FolderMonitor

 

Demo Video

 

 

Summary

 

In other case, I have also built a CCTV home security and upload the video clip to the DropBox (or HANA). Here is the video:

 

Hope your are enjoy “Whana” and thank you for reading my blog. Please let me know if you have any question/comment.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s