In this blog post, I'll try to walk-through the process of making the base of the PEP Browser app. I'll be writing this from memory so I might miss some steps. So if you're trying to follow this and got lost, don't hesitate to leave me a comment.
Boilerplate Couchapp
To start, I made the initial boilerplate application using the Couchapp utility. You could install it using the following command in the command-line. (Note: my instructions assumes that you are using a unix based system)
$ sudo easy_install couchapp
After installing the Couchapp utility, I created the boilerplate application by running the following command.
$ couchapp generate pepbrowser
The above command would generate a directory named, 'pepbrowser', which is a simple Couchapp which we will use as the starting for our project. Before starting to customize it, let us first push the initial Couchapp to a local Couchdb server to see that it works.
To push it to a Couchdb server, we need to modify or create the '.couchapprc' file inside the 'pepbrowser' folder. The file should look like as follows.
{
"env": {
"default": {
"db": "http://username:password@localhost:5984/pepbrowser"
}
}
}
"env": {
"default": {
"db": "http://username:password@localhost:5984/pepbrowser"
}
}
}
Remember that you should change the 'username' and 'password' in the above example. You should also change 'localhost' and '5984', in case your Couchdb server is not installed locally and does not use the default port.
After modifying the '.couchapprc' file, we push the initial Couchapp using the following command.
$ couchapp push
The above command should be run inside the 'pepbrowser' folder. Running the command would produce an output similar to the output below.
$ couchapp push
2011-06-22 21:53:45 [INFO] Visit your CouchApp here:
http://localhost:5984/pepbrowser/_design/pepbrowser/index.html
2011-06-22 21:53:45 [INFO] Visit your CouchApp here:
http://localhost:5984/pepbrowser/_design/pepbrowser/index.html
As indicated above, you could already visit the installed Couchapp using the link provided above. Visiting the above link in your browser wold display a page similar to the screen capture below.
By now, we have a working Couchapp. We will proceed with customizing the Couchapp.
Setup Initial View
As an initial page for this app, I want to setup a static html page with Jquerymobile working. I want to make sure that I could make Jquerymobile work inside a Couchapp. To start, I copied the 'index.html' file inside the '_attachments' directory to a new file 'main.html'. The 'main.html' is also located inside the '_attachments' folder. The 'main.html' page would be accessible through this url, http://localhost:5984/pepbrowser/_design/pepbrowser/main.html. But for this page to be accessible, you would have to run 'couchapp push' in order to push your changes to the server.
Before modifying the 'main.html' file, we would have to download and set-up the Jquerymobile files so that it could be loaded. I used Jquerymobile version 1.0a4.1 as I encountered some issues with the latest version. I'll try to update this later to the latest version if possible. Jquerymobile is composed of one javascript file, one CSS file and a folder of images. I copied the CSS file, 'jquery.mobile-1.0a4.1.min.css', to the 'style' directory inside the '_attachments' directory. I also copied to the 'style' directory the 'image' directory.
Inside the '_attachments' directory, I created a 'js' directory, which will contain javascript files. I placed inside that new directory the 'jquery.mobile-1.0a4.1.min.js' file. Now we have setup Jquerymobile inside our Couchapp.
One more thing. We need to add a newer version of Jquery to the 'js' directory. The reason for this is that the Couchapp comes with verion 1.4.2 which does not work with Jquerymobile 1.0a4.1. I tried upgrading to the latest version of Jquery, but it breaks Evently. After trying so many versions, the latest version of Jquery that works with both Evently and Jquerymobile 1.0a4.1 is version 1.4.4. So we get a minimized copy of that version and also place it inside the 'js' folder.
So now lets modify the 'main.html' file. It should now be similar to the following code.
<!doctype html>
<head>
<title>PEP Browser</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" type="text/css">
<script src="js/myloader.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincontent">
<ul id="peplist" data-role="listview" data-theme="c" data-dividertheme="b">
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-theme="b">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Notice some special tag attributes (data-role, data-theme) in the markup. This attributes are used by Jquerymobile. To better understand the above mark-up, check-out the Jquerymobile documentation. Its very easy to understand.
Another thing to notice in the code above is the link and script tag inside the header tag. The link tag is simply a reference to the Jquerymobile CSS located in the 'style' directory. The script tag refers to a custom javascript, myloader.js.
In the 'index.html' file in the '_attachments' directory, notice that it loads a javascript, 'loader.js'.
<!DOCTYPE html>
<html>
<head>
<title>My New CouchApp</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<div id="account"></div>
<h1>Generated CouchApp</h1>
<div id="profile"></div>
<div id="items"></div>
<div id="sidebar">
<p>Edit welcome message.</p>
<p>Ideas: You could easily turn this into a photo sharing app, or a grocery list, or a chat room.</p>
</div>
</body>
<script src="vendor/couchapp/loader.js"></script>
<script type="text/javascript" charset="utf-8">
$.couch.app(function(app) {
$("#account").evently("account", app);
$("#profile").evently("profile", app);
$.evently.connect("#account","#profile", ["loggedIn","loggedOut"]);
$("#items").evently("items", app);
});
</script>
</html>
This script simply loads all the necessary Javascript files for the page to operate. Below is the code inside loader.js.
Since we are loading some additional Javascript files and we would like to override the default Jquery version, I copied the contents of this loader.js into myloader.js and made some modifications. Its code resulting code of myloader.js follows.
Note: I don't know if this is right, but I decided to put all script tags inside the <head> tag as i don't expect any loading delays as I plan to run this Couchapp in a local database, no network congestion. I might be wrong so feel free to leave a comment.
So now after all these changes to the boilerplate Couchap, we could push our changes to the Couchdb server using 'couchapp push' and view the 'main.html' page, http://localhost:5984/pepbrowser/_design/pepbrowser/main.html. The result when viewed in a regular browser would appear as follows.
Notice that the page looks to be more appropriate for a mobile browser.
Next Post
Next post, we will create an Evently widget for the listing of PEPs.
By now, we have a working Couchapp. We will proceed with customizing the Couchapp.
Setup Initial View
As an initial page for this app, I want to setup a static html page with Jquerymobile working. I want to make sure that I could make Jquerymobile work inside a Couchapp. To start, I copied the 'index.html' file inside the '_attachments' directory to a new file 'main.html'. The 'main.html' is also located inside the '_attachments' folder. The 'main.html' page would be accessible through this url, http://localhost:5984/pepbrowser/_design/pepbrowser/main.html. But for this page to be accessible, you would have to run 'couchapp push' in order to push your changes to the server.
Before modifying the 'main.html' file, we would have to download and set-up the Jquerymobile files so that it could be loaded. I used Jquerymobile version 1.0a4.1 as I encountered some issues with the latest version. I'll try to update this later to the latest version if possible. Jquerymobile is composed of one javascript file, one CSS file and a folder of images. I copied the CSS file, 'jquery.mobile-1.0a4.1.min.css', to the 'style' directory inside the '_attachments' directory. I also copied to the 'style' directory the 'image' directory.
Inside the '_attachments' directory, I created a 'js' directory, which will contain javascript files. I placed inside that new directory the 'jquery.mobile-1.0a4.1.min.js' file. Now we have setup Jquerymobile inside our Couchapp.
One more thing. We need to add a newer version of Jquery to the 'js' directory. The reason for this is that the Couchapp comes with verion 1.4.2 which does not work with Jquerymobile 1.0a4.1. I tried upgrading to the latest version of Jquery, but it breaks Evently. After trying so many versions, the latest version of Jquery that works with both Evently and Jquerymobile 1.0a4.1 is version 1.4.4. So we get a minimized copy of that version and also place it inside the 'js' folder.
So now lets modify the 'main.html' file. It should now be similar to the following code.
<!doctype html>
<head>
<title>PEP Browser</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" type="text/css">
<script src="js/myloader.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincontent">
<ul id="peplist" data-role="listview" data-theme="c" data-dividertheme="b">
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
<li>
<a href="#">Entry</a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-theme="b">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Notice some special tag attributes (data-role, data-theme) in the markup. This attributes are used by Jquerymobile. To better understand the above mark-up, check-out the Jquerymobile documentation. Its very easy to understand.
Another thing to notice in the code above is the link and script tag inside the header tag. The link tag is simply a reference to the Jquerymobile CSS located in the 'style' directory. The script tag refers to a custom javascript, myloader.js.
In the 'index.html' file in the '_attachments' directory, notice that it loads a javascript, 'loader.js'.
<!DOCTYPE html>
<html>
<head>
<title>My New CouchApp</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<div id="account"></div>
<h1>Generated CouchApp</h1>
<div id="profile"></div>
<div id="items"></div>
<div id="sidebar">
<p>Edit welcome message.</p>
<p>Ideas: You could easily turn this into a photo sharing app, or a grocery list, or a chat room.</p>
</div>
</body>
<script src="vendor/couchapp/loader.js"></script>
<script type="text/javascript" charset="utf-8">
$.couch.app(function(app) {
$("#account").evently("account", app);
$("#profile").evently("profile", app);
$.evently.connect("#account","#profile", ["loggedIn","loggedOut"]);
$("#items").evently("items", app);
});
</script>
</html>
This script simply loads all the necessary Javascript files for the page to operate. Below is the code inside loader.js.
function couchapp_load(scripts) {
for (var i=0; i < scripts.length; i++) {
document.write('<script src="'+scripts[i]+'"><\/script>')
};
};
couchapp_load([
"/_utils/script/sha1.js",
"/_utils/script/json2.js",
"/_utils/script/jquery.js",
"/_utils/script/jquery.couch.js",
"vendor/couchapp/jquery.couch.app.js",
"vendor/couchapp/jquery.couch.app.util.js",
"vendor/couchapp/jquery.mustache.js",
"vendor/couchapp/jquery.evently.js"
]);
Since we are loading some additional Javascript files and we would like to override the default Jquery version, I copied the contents of this loader.js into myloader.js and made some modifications. Its code resulting code of myloader.js follows.
function couchapp_load(scripts) {
for (var i=0; i < scripts.length; i++) {
document.write('<script src="'+scripts[i]+'"><\/script>')
};
};
couchapp_load([
"/_utils/script/sha1.js",
"/_utils/script/json2.js",
"js/jquery-1.4.4.min.js",
"/_utils/script/jquery.couch.js",
"vendor/couchapp/jquery.couch.app.js",
"vendor/couchapp/jquery.couch.app.util.js",
"vendor/couchapp/jquery.mustache.js",
"vendor/couchapp/jquery.evently.js",
"js/jquery.mobile-1.0a4.1.min.js"
]);
Note: I don't know if this is right, but I decided to put all script tags inside the <head> tag as i don't expect any loading delays as I plan to run this Couchapp in a local database, no network congestion. I might be wrong so feel free to leave a comment.
So now after all these changes to the boilerplate Couchap, we could push our changes to the Couchdb server using 'couchapp push' and view the 'main.html' page, http://localhost:5984/pepbrowser/_design/pepbrowser/main.html. The result when viewed in a regular browser would appear as follows.
Notice that the page looks to be more appropriate for a mobile browser.
Next Post
Next post, we will create an Evently widget for the listing of PEPs.
No comments:
Post a Comment