The Final Post

Sorry people, been a long time since the previous post. The reason being I was busy coding up the plugins and things, so never got much time to concentrate on posting side. Never mind, we are back with a whole wrap up post for all of you. Also made videos to demonstrate the concept.Hope you find it interesting.

Its been months of hard work and thought process. Days full with coding and exploring things in and out. Must say it has been a great experience working for Sugarlabs as a part of Google Summer of Code. My mentor , Lionel Laské , has a great share to that, he has been very supportive in all the adventures and trusted upon me which infact boost my motivation to work for the project. I have seen mentors forcing their students to accept their methodology and do the way they want , but the best thing I liked about this was the exploration part, where we were free to dive into the different parts of code, swim through them till we got our treasure ;-) During this exploration we faced many issues, but thanks to the support of Gonzalo and Walter who used to help us whenever we required.I use to trouble Gonzalo a lot when it came to the native part of plugins, asking him how that could be done or why it didnt work as expected. Thanks Gonzalo for your support and time without which I guess the project wouldn't have been where it is.

Things still remain, but I hope to work on it after gsoc too :-) gsoc has been just a medium to be introduced to such a lovely community and I would like to thank Google for that , for introducing such a wonderful programme which brings together the developers and students to make some magic ;-)

Talking about the project progress - it is through with the cli part and plugins like - accelerometer, camera, dialog,device, globalization and network. We hope to develop more and improve upon those which we already have. Also we aim to club this with sugarizer. I had decided to make some videos during mid of August showing the working but the week which I kept for making videos , suddenly my system crashed ( because of update from ubuntu 12.04 to 14.04) so instead of making videos, I had to debug it and bring it back to the working state.Now its up and working :-) (thankfully ! ) I made a few videos to give you all an idea of what we have tried to achieve. Please go through these ( Make sure to switch on the subtitles if not already ):

Making a sugar activity from web app using cordovoa

Demo of the plugins coded through the summer

Hope you find the video useful,Here is the repo link which you would require incase you decide to play around with the code https://github.com/puneetgkaur/sugar-cordova

Also as the project is not completed we would be up on it and pushing more changes , so keep around ;-) 

Working of sugar cordova

Hey,

So its been some time after the previous post and we have made some serious progress after that :-)

The  work undertaken and done are as follows :

1. Improving upon on the codebase for cli

2. Making the basic layer for cordova for sugar to add plugins upon it

3. Making cli work on the windows platform

4. Completing accelerometer

5. Working on camera

So to discuss what we have got through this time ,I would like to take you through an example of a simple Hello World app , telling you how you can generate your own .xo from any web app and deploy it to your sugar environment.

To be precise, a web app signifies a bundle of files written in html,js and css and having some backend logic to perform a concrete task.Now the point concerning here is to get that web app to your sugar environment. The steps involved would be :

1. Setup your development environment - follow the instruction mentioned here

2. Issue  the following command to  to create a new cordova app :

cordova create <app_directory> <app_package_name> <app_name>

3. Now insert all your web app stuff to the www directory of the newly created project

4. To convert this web app to the .xo isa two step process : 

       (i) first add the sugar platform to your newly created cordova project by using command : 

cordova platform add sugar 

       (ii) Then you build the project after making changes to web app if you wish to make any; by the command: 
cordova build sugar

       (iii) Find your newly create .xo in app_directory/platforms/sugar/cordova/<app_name>.xo

5. Now we can copy and paste the .xo in our sugar environment and issue the following command to install the xo :

sugar-install-bundle <name>.xo 

FEW IMPORTANT NOTES :

1.As an added feature we have provided a --noframe option to the users who already know about sugar web. In that case we shall add no sugar -web feature in the index.html, that means the app_directory/www/index.html must contains all the toolbar and sugar ui related stuff like the index.html in the sugar-web-template. If you give no option in the build command, it is by default assumed that you dont know about sugar web and your web page is added in an iframe in the final index.html along with the sugar ui which is added around it. So you gotto decidie whether to leave the option of adding the sugar ui to the cordova-cli or do it on own. For the former you dont need any option and its activated by default while the later can be acheived by issuing the --noiframe option along.

2.In the windows environment the zip command that is used to create the .xo by the cordova build command doesn't work. So we provide an alternative for that. All the windows users are expected to set an environment variable name ZIPCOMMAND to something similar to the "zip -r" for windows. That is, it should be able to create a zip file recursively, as an option , people can use 7zip which gives an excellent command line tool for creating zips. So install 7zip and issue the following command before issuing cordova build command on windows : 

set ZIPCOMMAND="c:\Program Files\7-Zip\7z.exe" a -r -tzip -aoa

Apart from this, we are currently working on providing you with various plugins for cordova which shall make the communication with the device capabilities easier. You can find the plugins here : https://github.com/puneetgkaur/cordova-plugins , so in this repository we have two folders : one for the plugin and other a sample sugar cordova with the concerned plugin.

Have a look at the sample web app we used : 

Screenshot of the web app in the browser :

The web app as in the sugar shell :

Source of the sample web app :

<html>

<head>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

<link rel="stylesheet" type="text/css" href="css/index.css" />

<meta name="msapplication-tap-highlight" content="no" />

<title>Hello World</title>

</head>

<body>

<div class="app">

<h1>Apache Cordova</h1>

<div id="deviceready" class="blink">

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</div>

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript">

app.initialize();

</script>

</body>

We'll hope to be back with  a lot of cool developments on the plugin development front, so till then enjoy experimenting with sugary cordova ;-)

our journey with cordova-cli

Hey folks !

So we are back with a new post.This time would rather prefer to tell you a kinda story of how we fought we with cordova-cli and finally captured it in our captivity :P :P
Yeah .. Its time to celebrate .. But the success is at very initial stage right now.Getting stucked up with cli was disheartening, but conquering it was heartwarming :D

So to start, we aimed to make the various cordova cli commands work for sugar.All we knew was that we had to push some changes in the cordova-cli package.So quickly searched up where the cordova-cli code lied and downloaded it.Well, to our surprize, the cli code was nothing but a pointer to cordova-lib which was actually the backbone.So downloaded lib too ! But where do the both meet ? How to make them work together ? Though we had some documentation in the readme of cordova-lib.. but ahh .. it didn't work as expected.Spent days to figure what was wrong.Finally after hours of research, found a way to work around.

so let me get you know how we fixed up the things to let our changes in our local directory reflect in the cli on the terminal. The first was the discovery of ~/.cordova directory from where the library code for all the platforms is fetched once downloaded from their respective urls.This is the directory which enables us to copy the templates when we issue the cordova platform add command.Next, the correct linking between cordova-cli and cordova-lib,for this we had to go into cordova-cli directory and issue the npm link from there for cordova-lib.Once cordova-lib is there in the cordova-cli/node_modules then the changes done in directory cordova-cli/node_modules/cordova-lib  get it reflected on terminal.But we have to be cautious to remove the cordova executable file from usr/lib/bin directory which may be residing there from earlier installation of cordova-cli.Lastly to get a feel of our changes we move to cordova-cli/bin and run the cordova executable file present there.

Now let me take you through the digging we have done in the cordova-cli code. Firstly the executable that we run inside the bin folder of cordova-cli, simply calls cli.js of cordova-cli with process.args ( the arguments we provide) , the cli then calls for cordova-lib.js of cordova-lib in node_modules.Obviously apart from the cordova-lib, we do need a few other node dependencies as well.

Cordova-lib.js defines various files to be used with different commands - see here. So for the cordova commands, we are directed to the cordova.js inside cordova-lib/cordova.There different modules which eventually cater to our various category of commands like create, platform add etc are added.

For cordova create command, create.js in cordova-lib simply makes a new project with the specified directory name,id and app name but with no specific platform. To add a platform we issue ' cordova platform add <platform name >'. This calls for the platform.js.It looks in platforms.js [note a difference of 's' in platforms ;-) ] to see if there is an entry for the specified platform.If not it issues an error, else it downloads the platform's library from the url specified in platforms.js.Its only when the command is issued first time for the specified platform that cli downloads it else ~/.cordova/lib/<platform>/<version> is referred for the platform project template.The 'create' file in ~/.cordova/lib/<platform>/<version> /lib folder contains the platform specific script to add the files from the platform's library to the cordova project.

Once the platform has been added to the project, we then need to build project after coding up our logic in the app.For this the build command is broken into two parts, prepare and compile.The prepare part copies all the updated parts from the global www folder - projectDirectory/www to the native platform's www folder - projectDirectory/platform/<platform name>/www, it also updates the app name, package name,icons etc and installs and uninstalls the plugins through plugman.Once the relevant web stuff has been added to the native platform compile part then runs a script using superspawn.js which converts the web stuff to the native platform package.

So as far as today we are building upon the build command and hope to finish it soon :-)

A visual representation of all explained above can be found below ..

A quick update

This week's post is gonna be a bit short.I'll discuss what all we have explored and what we plan to do next.

So the previous week, as per the irc meeting, we  had decided to document up the things done and analyze what more we want to do. We had been focussing more on the code front till then but we decided to shift our focus to "thinking" for a week.So basically it was to analyze the different possible paths and define our goals in a better way and be sure of them.

I documented in details the code we have written, why we wrote that, mapping between what cordova wiki mentions and what we have done and what we need to do next. You can access it here.

So yesterday we discussed on irc the path we must now follow.For this week, we shall be focussing on cordova-cli and try to come up with the accelerometer plugin. As I dont have an xo currently with me, I would be simulating using a linux file.

Once the cordova-cli is done with we shall be able to convert a simple html page to a full blown .xo file which can be installed on the sugar. We hope to do this asap but currently we are facing a lot of issues to be resolved. Hope to get some results soon !

How to create activities with sugar web and help them communicate with python

In the middle of my posts related to the sugar cordova project, I would also like to share a simple and straight process to develop activities on sugar web and help them communicate with native python.

This post is to help all the developers out there who might as well want to develop some cool activities for sugar using sugar web and might need to communicate with the native python back end using the javascript-python bridge.

So here go the steps which you must follow :

1. Setup up the sugar development environment : http://developer.sugarlabs.org/dev-environment.md.html

2. Create a sample activity through command line - follow the steps mentioned here : http://developer.sugarlabs.org/activity.md.html

3.Once you are done with the initial set up of your activity then you can jump into more details, here are a few pointers on how to set up a link between native side and the javascript side using sugar web - 

• Compare this file with the file given here
• A sample call : look here in the first file goes to this line in the apisocket.py file
• So basically if we want to implement something on native front and call it in javascript, so code up your class in python in sugar and import it in apisocket.py and then code up a function in activity class of apisocket.py which wraps up the calls to your class or simply you can put your logic in the function itself if its not huge ( for getting started dont go for building a seperate class and importing, code up your logic in a function there itself to test whether it works).
• The function responsible for calling to the native side isbus.sendmessage.It has the following parameters :
•  the class and function to which call is made : like activity.show_object_chooser
• the parameters which you want to pass are defined in [] like [parameter1,parameter2,....]
• the callback function which has two parameters for the success and failure - when there is success the error object would be null else it shall contain the error
• The call back from native to javascript is made by the send_resultor send_error functions of the API Client class of apisocket.py file - you can see a sample usage of these functions in activity class functions of apisocket.py
• So as per your code logic you either call send_error or send_result function - incase of error call send_error or else return the object through send_result
• On the javascript side you check through the callback(3rd parameter of bus.sendmessage) that whether the error is null and invoke errorhandler or successhandler as per the result
• Inside the apisocket.py function , you can access the parameters passed by : request['params'][0] , request['params'][1] and so on ...

I hope the interested developers are benefitted from the post.

A special thanks to Manusheel for motivating me to write this on blog ;-)

An update of the week's progress

So its been a week to the previous post, and I wish to share what all we have experimented with and done during this time.

As discussed in the previous post, we were facing issues with the way cordova modules have been written and the way sugar web defines the js modules.So we need to convert the sugar web styled modules to that of cordova.For this we take the help of nodejs scripts which can do the interconversion between the two.At first we designed a script which was specific to env.js but we had to make it general so that other sugar web js files which have dependencies can also be converted to the cordova format.So we generalized the script.

Apart from this task, we ventured into the waters of cordova cli and found out how we can make the command like cordova platform add sugar and cordova build sugar work.So we have the cordova-cli repository here which takes care of the command line interface.But now the most of the code of cordova cli has been shifted to this repository named cordova-lib which has all the code for cordova api's.Here we have the parsers for the individual platform which perform the tasks when we give the cordova command.So to make our sugar platform work with the cordova cli we need to make something similar to that.

Now when we are almost through with the basic setup of cordova, so we decided to move ahead to look in for the features of cordova that can be replicated for sugar as well.We are currently studying the various plugins of cordova and trying to understand the complexity of each to implement on sugar.Soon we must be rolling over to the cordova plugin development for sugar ;)

The first steps

Its been around a month and yes we do have made some significant progress.

To start with we basically need to follow the following basic steps for building our cordova wrapper  :

• Instantiate a chromeless browser. Examples include:
  • iOS WebView
  • Android WebView
  • The BlackBerry WebWorks framework instantiates its own chromeless browser
  • Windows Phone 7 WebBrowser
• Load packaged www assets (HTML/CSS/JS)
• Enable a bridge between native framework and the web view
• Integrate a new platform into the cordova-js project. This is a common API for sending messages and triggering error and success callbacks with native framework responses.
• Ensure the mobile-spec tests pass
• Update the documentation where applicable

The first of these is there and the second we leave for the end.Coming to the bridging work, its foundation has already been laid by the sugar web framework.

Our aim now is to provide a common cordova api in front and the native backend support for it.We look for what are the elements required in the basic cordova.js. 

cordova.js is the javascript file that is incorporated in every cordova project on the web code front. It basically contains all the cordova libraries along with the code that interacts with the native side of each platform.This code is to be specific to each platform.Have a look here : cordova-js code.The common directory there contains all the code that is common to all the platforms.It gives a basic front layer after which we need to set up a layer which can interact with our native side.

With all the common code being in common directory and native code in the platform specific directory, a cordova.js specific to each platform is then generated by the packager tool.It basically concatenates all the code in the common directory with the platform specific code to generate a cordova.<platform>.js files.

Lets dive into some more details.Our main function that communicates with native side lies in the exec.js file under the <platform> directory in src folder of cordova-js project.We have a function in exec.js named <platform>Exec that communicates with the native side. It has the following arguments : success,fail,service,action,args. success specifies the successhandler that is executed on successful execution of the call to native while fail denotes the errorhandler for the same.Service specifies the class we need to call, for example to implement the call to the accelerometer to get the current acceleration we shall give a call out to the Accelerometer class.See the example here.So the class to which the call is made is defined by the plugin itself.action specifies the function called,like here the function start is called for the class accelerometer with no arguments.

Also apart from exec.js we have a mandatory platform.js which is kind of a MANIFEST which specifies the details regarding the platform.

So after joining the basic files of cordova and the code specific to the platform we have the cordova.js for the platform ready, here's sugar's basic implementation of cordova.js.

cordova.js will basically help us to initiate a call to the native side of the platform using an exec function like here and handle the response through the success and error handlers passed as the first and the second arguments of the exec function.

The minimal implementation of exec.js for sugar can be represented as follows :

var cordova = require('cordova'),

    utils = require('cordova/utils'),

    base64 = require('cordova/base64'),

    bus = require('cordova/sugar/bus');

bus.listen();

function sugarExec(success, fail, service, action, args) {

    for (var i = 0; i < args.length; i++) {

        if (utils.typeName(args[i]) == 'ArrayBuffer') {

            args[i] = base64.fromArrayBuffer(args[i]);

        }

    }

    var callbackId = service + cordova.callbackId++,

        argsJson = JSON.stringify(args);

    if (success || fail) {

        cordova.callbacks[callbackId] = {success:success, fail:fail};

    }

function onResponseReceived(error, result) {

if (!error ) {

cordova.callbackSuccess(callbackId,result);

} else {

console.log("Its error");

cordova.callbackError(callbackId,error);

}

}

  bus.sendMessage("activity.cordova",[service,action,args],onResponseReceived);

}

module.exports = sugarExec;

To enable cordova.js to communicate with the native environment we need the help of bus and env.js files from the sugar web framework.

As the format in which a module is defined in cordova is different from the sugar web framework one , we need to find out a way to keep both the files at single place and generate the other set from a single copy of the files.This task has been put into the TODO list as of now.

As a result of playing around with the cordova framework inside sugar , we have been able to achieve the following results :

1. We are able to communicate with the native environment using cordova api's.So that means a call to cordova exec function would now work inside a sugar web activity and respond back with the appropriate result

2.Able to integrate the common cordova.js in the sugar framework.

3.Integrate the accelerometer plugin.

Sugar says hello to cordova ;-)

Sugar labs - award-winning Sugar Learning Platform has been around for years now creating wonders in lives of many little ones and young, providing them with a window to a new world to explore new things. This fabulous open source community consists of some really cool and hard working people at the back end, thinking continuously about as to how to make sugar better than ever before.So here props up another idea.. why not make a cordova framework for sugar platform as android, windows and ios have ?? The obvious question that now arises in someone's mind who isnt yet familiar with cordova or phonegap would be - how is that gonna help sugar ? Well, the answer is pretty simple.All the activities and the code for sugar is currently in python because thats the language the software was made in.With cordova, all the web developers can make activities in html,css and js while not bothering about interaction with the physical hardware devices like camera etc.. the cordova wrapper would do that for you.Here's a small video explaining what phonegap/cordova is.

The cordova framework from sugar idea comes from the consistent development that has been done on the sugar web frontier which helps us to run web activities in sugar seamlessly using API in between which enable communication between python and javascript.You can check more about sugar web and its underlying architecture here.On similar yet a different front we wish to design the cordova framework.

Here's a simple view of how we want our cordova framework to look like. Though we might need to modify a bit here and there as we proceed but the basic architecture would be the same.

For the initial tasks of the project, we have decided to first build on the basic layer of cordova through which we can compile and get a basic sugar web template running. Once thats through, we can then add plugins.