In this article, Assad shows how we can handle the device built-in camera to take a picture and send it by email using Convertigo Mobility Platform.



 
First of all, we are going to make a very simple front user interface (UI) in our project. Then we will override some functions in custom.js, the convertigo mobile API using CTF (Convertigo Template Framework), in order to put our project specific logic. Finally, we will add a sequence to our project which will take in charge all the SMTP send process.
 

Front UI

Through Project Explorer view, we can access app.html file in our Display Objects folder. This file is the entry screen on our device, we will put some specific code for our project in order to have two input text fields (the address and the message of our email) and one image file representing a camera. Here is the sample code from our project:    
<body>
        <!-- Hello world page -->
		<div data-role="page" id="welcome" data-title="Welcome page">
			<!-- top bar -->
			<div data-role="header" data-position="fixed" data-tap-toggle="false">
				<h1>Welcome</h1>			
			</div>			 
			<!-- content -->
			<div data-role="content">
				<br>
				Email of your choice
				<br>
				<input type="text" id="address" value="name@company.com" />
				<br>
				Your message 
				<br>
				<input type="text" id="msg" value="my sample photo application"/>
				<br>
				Click the camera to take a picture
				<br>
				<input type="image" id="camera" src="img/camera.png" width="60" height="60" />				
			</div>
			
			<!-- footer -->
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<h1>© Convertigo</h1>			
			</div>
		</div>
	</body>
    Note: id fields are mandatory in order to access DOM elements in our JavaScript code.  

Using the C8O api

Now that we have our device presentation, we will include some specific logic, in order to be able to trigger the device camera and then use Convertigo to process the SMTP send process. We will use Phonegap API navigator.camera.getPicture in order to use our device built-in camera and the Phonegap API FileTransfer.upload in order to send via HTTP from the device to Convertigo the photo file.   11

In customs.js file, we will override C8O.addHook(“init_finished”) with this sample code. As in all Convertigo projects, use this hook to start your own business logic as you have here the guarantee that all frameworks (jQuery, jQuery Mobile, CTF, and Cordova) are initialized at this point:

 
C8O.addHook("init_finished", function (params) {
	 $("#camera").on('click', function() {		 
			navigator.camera.getPicture(
					function (photoUri) { // Sucess
						// what to do when sucess : Call Convertigo to send photo
									
						C8O.log.debug(photoUri);
						
						var win = function (r) {
						    C8O.log.debug("Code = " + r.responseCode);
						    C8O.log.debug("Response = " + r.response);
						    C8O.log.debug("Sent = " + r.bytesSent);
						}

						var fail = function (error) {
						    C8O.log.debug("upload error source " + error.source);
						    C8O.log.debug("upload error target " + error.target);
						}

						var options = new FileUploadOptions();
						options.fileKey = "file";
						options.fileName = photoUri.substr(photoUri.lastIndexOf('/') + 1);
						options.mimeType = "image/jpg";						

						var params = {
								"address":$("#address").val(),
								"msg":$("#msg").val(),
								"__sequence":"sendPhoto",
						};
						options.params = params;

						var ft = new FileTransfer();						
						ft.upload(photoUri, encodeURI(C8O.vars.endpoint_url + ".pxml"
), win, fail, options);						
					},
					function (error) { // fail
						C8O.log.debug("photo error");
						
					},
					{
							quality: 50,
							targetWidth:600
					}
		);
	 });
	 return true;
 });
In this code notice the var params object, defined with keys to call a specific Convertigo server Sequence: sendPhoto, and other parameters such as the email address and the mail content (msg). Each of these variables will match a corresponding sequence’s variable. Also the upload() method of Cordova’s FileTransfer object needs the destination url. To get this url we can use the C8O.vars. endpoint_url as this property is automatically set to the Convertigo’s server endpoint at build time. Note: C80.vars.endpoint_url can be statically assigned in Convertigo server endpoint property in Base properties of MobileApplication through the Projects view. If left blank, beware to not use while launching the test platform in the studio, the default localhost address, but instead in your browser, put your workstation’s IP address. For example : http://192.168.100.76:18080/convertigo/project.html#sample_photo_application?launch=webapp Instead of the default: http://localhost:18080/convertigo/project.html#sample_photo_application?launch=webapp Otherwise you won’t be able to test on your device the project.

Convertigo Server side

Our last part for this project is to create a sequence in Convertigo to send our picture via email. At the root of our project, select New->Sequence and we will call it sendPhoto. We need to define Steps for this Sequence (for more information about Sequence, see our reference documentation, http://www.convertigo.com/document/latest/reference-manual/convertigo-objects/sequencer/) We also need to define Variables, those are the parameters from our device. They refer to the parameters defined in our custom.js and uploaded via HTTP parameters by using Phonegap API FileTransfer.upload. Convertigo is designed to automatically do the matching but we have to use the exactly same names. Our first Step is to declare an Input Variables Step in order to be able to use the parameters as variables for Steps sources. Our second Step is a Move File Step in order to save the picture we received via HTTP from the temporary device folder. We do this because Convertigo Sequence, at the end of its process will delete the file. But the send mail service is not synchronous, and when we exit our Sequence, if there is no photo file, the attachment will be empty and the SMTP send will fail. In order to avoid this, we create a photos folder in our project. The source property for the Move File Step is file (our variable) and the destination property is “.//photos” (.// referring to the current project folder).

2 Our last and main step is the SMTP Send Step. In our project, we use the gmail SMTP. You will have to set your own SMTP server parameters. For our attachment, we need to put a little javascript because the file variable contains the whole path and we need just the filename, so here is the code:  
".//photos/" + file.substr(file.lastIndexOf('\') +1)
 

The recipient email addresses is our variable address. We need now to set the message of our mail. For this, we have to define the source property (in Expert mode). When selecting this property, a new window will open and we chose from our Input Variables Step the msg property (corresponding to our variable msg).

3

Finally, we define for our sample an XSL file in order to format our message. We create at the root of our project in Project Explorer view a xsl file and we name it email.xsl. The content of this xsl file in our sample is:

 

    We now need to assign the XSL file property as “.//email.xsl” and we are done. 4  

Conclusion

Convertigo technology boosts your development by giving you the front side flexibility with your device and the tool box you need to quickly and efficiently program server side operations such as File upload and SMTP process in our sample. You can download here sample_photo_application.car this sample project and import it your studio. Enjoy testing this sample and we hope to see you on the forum to share with us your feedbacks.

Leave a comment