A Close-Up Look at Developing Your Own Opera Unite Application

Opera Unite is a technology which can enable a range of exciting possibilities in your browser. It essentially turns your web browser into a web server, and thus makes it possible for you to host your own Opera Unite applications, and use the Web to communicate in a two way manner. You can start using Opera Unite with Opera 10.10 Beta.

For web developers, building Unite applications should be fairly straight forward. Opera Unite applications are written using regular web technologies such as HTML, CSS and JavaScript. The server-side code is written in server-side JavaScript. The front-end, in HTML, CSS and client-side JavaScript. You can also read the developer-focused primer of Opera Unite here.

I recently made an Opera Unite application, called ‘The Task Manager’. You can install it by going to the Opera Unite application page..

The idea started when I thought of making a small shopping list. I had this idea in my head to make a list of things I wanted to buy (I typed the list down at home on my desktop), and that I could access that list even when I’m outside my home using my mobile browser . I could share the URL with my friends so that if I had forgotten to add something in that list, then my friends could do so, and the next time I refreshed the page on my mobile phone, I could get the updated list including what my friends want me to buy. Later I realized that I could extend this concept from just a simple shopping list, to a proper task manager.

While building the app, I came across some thoughts on building Opera Unite applications, that I want to share…

<h3>Data</h3>
Just like almost any application, the data will reside at the heart of it. What your data will be, how you will interact with it, and what all you can do with it, will define how you go about building your app.

For The Task Manager app, I stored all the data in aJSON entry. I personally think JSON is great and makes it very easy for JavaScript developers to work with key-value pairs. However, there maybe some cases where you might build an app where there isn’t really any need to store any real amount of data (for example an app which exists solely to transfer files to your computer, etc).

Most of the time however, you would like some form of persistent data storage for your apps. Lets see how we can do that.

<h3>Saving your data (persistent storage)</h3>
For most applications, you want the data to not be lost whenever a user restarts the server or closes the browser. There is a trick to make sure this doesn’t happen - the File I/O API.

Download the json2.js file from the JSON site. We’ll be using this file later on. The code in json2.js is under public domain, and can be used in any kind of project.

The trick is to convert the data we have (a JSON object) to a string. Once that happens, we save it to a text file. Whenever we want the data again, we once again load the file, take the string, convert it back to a JSON object, and then continue with our job.

<pre> //getting mountpoint var mp = opera.io.filesystem.mountSystemDirectory('storage'); //resolving to see the file var fp = mp.resolve('entries.txt'); //if file exits if (fp.exists){ var stream = fp.open(fp, opera.io.filemode.READ);//open stream in read mode var sentence = stream.readLine(); //read if (!sentence){ //if we read nothing data.isEmpty = true; //there is no data } else { var jsonData = JSON.parse(sentence); //parse the string into an object data.entries = jsonData; //put that object to data.entries }

} </pre>

The comments in the above code explain what is going on. We open a mountpoint, check to see if the file exists, and if it does open a stream in read mode, and read the string and store it in a variable. If the variable contains something, then we take the variable (which is a string) and use the JSON.parse() function available from the json2.js file we have downloaded, to parse that string into a JSON object.

We can similarly use the json2.js file to convert a JSON object to a string and then store it in a text file. Using this technique, you can save data to, and load it from, external text files, so that even if the server is restarted or if the browser closes, the next time you open the app, the data remains from the last time you used it.

<h3>Markuper</h3>
If you have not read about Markuper, then you can read about it in the Dev Opera Markuper Unite Template Library article. It will make your life much easier when you have to make some complex Unite App. One thing not mentioned in the article, but would be of interest is the way to collect info from a GET request.

As mentioned in the article, the way to do it from a POST request is something like this
<pre> var thepostdata = request.bodyItems[‘whatever’][0]; </pre> For a GET request it will be
<pre> var thegetdata = request.queryItems[‘whatever’][0]; </pre> That is, ‘queryItems’ is used instead of ‘bodyItems’ when it comes to collecting any GET request.

Markuper also allows you to use templates for HTML files, which makes the task of writing the front-end much much simpler, faster and fun (not to mention lesser errors)!

<h3>Other Notes</h3>
I will once again touch upon the concept of the data. What your data will be, how you will store and retrieve it (if at all) and how you will interact with it, will truly determine what your app will become. Also, a good thing to keep in mind is how people might misuse the data. For example, in this app, each task can have no more than 1024 characters and only a total of 99 tasks are allowed. This is to prevent a spammer from flooding your machine with tasks.The limit of 99 and 1024 was decided by me, and of course you can have your own limits for data entry, but the point is to have a sane limit on it, so that its not open to misuse.

I've found that once you get used to it, building apps in Opera Unite is pretty fast. Apart from making powerful full-blown applications, it can also be used to make quick prototypes of web design concepts. I think it could be particularly useful for web developers or designers to quickly make a mockup and give the URL to the client for instant feedback. Also another good idea is to think of what you do just within a limited set of friends and colleagues, and then make an app for it on Unite, as Unite is perfect for apps which require sharing or collaboration between just a group of few people.

There are quite a few other useful apps available, which you can check out on the Opera Unite applications page. Hopefully, you'll find them useful and gain inspiration to write your own Opera Unite application soon!