IMPORTANT INFO FOR GSOC APPPLICANTS APPLYING FOR SUGAR CORDOVA PROJECT

Hi,

I would request all the GSOC 2015 applicants to kindly go through http://plugins.cordova.io/#/ page and find out the plugins relevant to sugar. Also provide a brief description of how you'll go about making your suggested plugins.

Think of something apart from those implemented already !

Go though the repos you get on this link : https://github.com/apache?query=cordova-plugin and think of a similar structure for sugar ! For any kind of help, dont hesitate to ping me.

To the students applying for GSOC - Part 2

To the students applying this year to the sugar cordova project - I would like to let you all know a few pre-requisites for the project. We expect that students should complete the following before they apply and also include their work in their application, the better you accomplish, more your chances of getting in ! So pull up you sleeves for some real work ;) Here are a list of tasks that you must all look into :

1. Go through all the post on this blog
2. Go through my sugar cordova related repos on github : https://github.com/puneetgkaur, setup the cordova for sugar with the help of my repos : https://github.com/puneetgkaur/cordova-cli, https://github.com/puneetgkaur/cordova-lib, and https://github.com/puneetgkaur/cordova-plugman. Clone these repos, follow the README on each repo and install cordova for sugar on your system.You should be able to make a simple web app for sugar with the help of this installation by using simple commands : cordova create, cordova platform add sugar, cordova build - you'll get an xo which you must try installing on sugar development environment using sugar-install-bundle command.
3. Setup your sugar development environment : http://developer.sugarlabs.org/dev-environment.md.html and explore around try making changes in code , see where the code rests and try making a few changes to the code, play around with the GUI and get a feel of the sugar environment if you arent familiar before.
4. Know all about cordova - from in and out , visit the cordova repos : https://github.com/apache/cordova-lib, https://github.com/apache/cordova-cli, https://github.com/apache/cordova-plugman , https://github.com/apache/cordova-js and some pltforms repo too : https://github.com/apache/cordova-android, https://github.com/apache/cordova-ios etc. Read the docs : http://cordova.apache.org/docs/en/4.0.0/
5. Know about sugar -web architecture : http://developer.sugarlabs.org/web-architecture.md.html , https://github.com/sugarlabs/sugar-web , https://surajgillespie123.wordpress.com/
6. Carefully read through the last post of how the cordova plugins are made and make a demo plugin for sugar  - note - we want a working prototype of the demo for you to be eligible for the gsoc project - it can be a very simple prototype - just to judge whether you got the workflow or not - if you need help you can mail me.
7. Suggest a list of plugins you aim to code this summer along with the relevantworkflow as to how you think you'll approach each of them - Note : Its shouldn't be the one in air ! We want a concrete set of list which you think you would accomplish, a result of thorough visualization and observation of yourself of how much time you would take to complete each plugin and what all you can do, a complete list of plugins which you think are feasible and good for the sugar community - If you wish to discuss your ideas feel free to discuss them on mail - note : better the list and more feasible it looks on your profile - higher your chances of getting selected.
8.Lastly, keep a blog about your progress on these points, a record of all what you have done and whats remaining, a place where you jot down your daily progress on the above points and present to us in a systematic manner and dont forget - we are always there to help you when you need help - email at puneet.gkaur@gmail.com for help if needed.


All the best guys !!

Hello all,

So GSOC is back again and we got requests from many students to know more about the project, how the plugins are build etc. I would like to dedicate this post of mine for the students interested in the cordova container for sugar project.

So first a basic layout of the project and what we trying to accomplish. Through the cordova container our aim is to enable the web apps with the sugar compatibility. What does that mean ? It means that the web developers dont need to care about the hardware dependencies or not even care about digging into the native code when developing their app. They simply need to call the standard cordova api to do their job. This would enable their apps to be cross platform and they can simply compile their app for sugar and Taaa daa !! it transforms into an activity ready to run.

Now we need to do 2 things here : 1. develop the cordova cli for sugar 2. Develop the plugin which enable the backend for the apps.

Last year we were able to successfully accomplish the bridging of cordova and sugar and also develop a few plugins and showcased the usage via a sugar activity. This time's task would be around making more plugins and showing the use with the relevant activity and also incorporating the plugins into existing activities. I wish all the best to the students applying this year !

An overview of how plugins are made :

For a plugin we have two side : one javascript side and the other native side.So for each plugin we need code on both the ends. So must be proficient enough in both javascript as well as python ! Have a look at this repo of mine : https://github.com/puneetgkaur/cordova-plugins . So for example lets take up accelerometer to explain things, the code on javascript side lies here : https://github.com/puneetgkaur/cordova-plugins/tree/master/accelerometer/accelerometer_plugin/org.apache.cordova.device-motion/src/sugar do have a look into this file.

We define an object : https://github.com/puneetgkaur/cordova-plugins/blob/master/accelerometer/accelerometer_plugin/org.apache.cordova.device-motion/src/sugar/accelerometer.js#L56 with functions start, stop .

The communication to the native side happens through this line : https://github.com/puneetgkaur/cordova-plugins/blob/master/accelerometer/accelerometer_plugin/org.apache.cordova.device-motion/src/sugar/accelerometer.js#L41 and we pass the arguments "Acceleration" , "GetCurrentAcceleration" respectively

We recieved the parameters pasased through the javascript side on the native side through the function here : https://github.com/puneetgkaur/sugar/blob/master/src/jarabe/apisocket.py#L106

Once we have the parameters with us on the native side we then pass them on to the respective code though the piece of code here : https://github.com/puneetgkaur/sugar-toolkit-gtk3/blob/master/src/sugar3/cordova/cordovaSocket.py#L13

So eventually our cordova accelerometer call lands us to the accelerometer code on the native side residing here : https://github.com/puneetgkaur/sugar-toolkit-gtk3/blob/master/src/sugar3/cordova/accelerometer.py#L5

The response is sent via this line : https://github.com/puneetgkaur/sugar-toolkit-gtk3/blob/master/src/sugar3/cordova/accelerometer.py#L16 back to the javascript code.

I hope this makes things a bit clear. The main communication within javascript from the bus.sendmessage to the apisocket function can be handled as seperate topic as it depends on the sugae web framework developed seperately.

So for this project you shall need to develop the native ends as well. You must be proficient with python and secondly must know the sugar code as well. So early you start the better position you would be in to know things and do it in a better way. All the best once again to the prospective students :) I hope we shall  get in a new set of talented developers this time round too :-)

Incase of help dont hesitate to drop a mail at puneet.gkaur@gmail.com

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 !