Going the SPA way

AngularJS Hackathon

The SPAs are very popular lately! And I’m not talking about what everybody thinks of when they hear SPA, but about Single Page Applications. I guess every week I keep reading at least 1-2 posts in my RSS reader about the subject.

There are tons of articles already on the subject, plenty of books to read and so many frameworks aimed at making the development of SPAs easier that it’s really difficult to pick the right one for you in case you are new to the subject (just like me…).

About 2 months ago I read/watched via RSS one article written by Dan Wahlin called Video Tutorial: AngularJS Fundamentals in 60-ish Minutes. This is without any doubt the best 70 minutes I’ve spent on YouTube in a long long time. The video is very well organized, very easy to follow and introduces you to the AngularJS framework created by Google. It doesn’t go into details as it’s impossible to do it in only 70 minutes, but it shows the power of AngularJS and makes you want to find out more!

I was really impressed by what you can do with very little code and effort, so I wanted to dig a bit deeper… There are plenty of resources online for learning and understanding AngularJS and below I’ll enumerate just a few that I’ve found to be really good:

  •  AngularJS API reference – very good point to start directive, modules etc… also easy to discuss problems and get help as every topic has a Disqus thread associated.
  • Egghead.io – very good collection of short videos on AngularJS topics (the AngularJS official site points actually to this collection of videos)
  • Scoop.it! – has a very good collection of AngularJS resources that it’s worth taking a look at

As probably the best way to learn something new is to do something practical, I decided to write a small SPA in order to show the events listed on Cyprus Events in a more mobile friendly way (their “mobile” interface is old and rather unfriendly to use).

For the purpose I’ve use the following technology stack:

  • AngularJS
  • Bootstrap – cause I can’t design anything and Twitter Bootstrap is really amazing
  • jQuery
  • UnderscoreJS – a really nice JS utility library that makes life easier… it contains some nice “extension methods” for collections that helped me write “LINQ like queries” on an array – thanks to .NET Rocks and Derik Whittaker for mentioning this library in show 873.

The result is available online here… the app is not impressive from functionality point of view, but in order to make it work I’ve got my hands dirty with few AngularJS concepts: modules, routing, controllers and views, created a service to retrieve the events for a specific feed (as I couldn’t load the RSS feeds directly with jQuery’s AJAX methods I’ve used a small PHP code snippet found here), used promises and even created a factory which I’ve used to share data between 2 controllers.

One aspect that I would like to improve would be caching of events as currently the feed is loaded every time the user selects a category. One idea would be to use the HTML5 local storage if available using also the date when the feed was last loaded and reload it on user request (some button for refresh) or if the data is older than 1 hour (could be even more)… but, still I’m trying to understand what caching options is AngularJS offering (suggestions are welcomed in comments 🙂 )…

The result is working properly on desktop browsers (Chrome, Firefox, IE, Opera) and mobile phones: checked on Android phones and also iPhone and iPad emulators (available as plugins for Web Matrix), but it’s not working on my Windows Phone device (WP 7.8) – trying to find a way to understand why the feeds are not loaded…

The project in it’s current stage is available for download on my SkyDrive

As soon as I’ll get some free time I’ll try to implement something similar, but using the approach John Papa is promoting: Durandal, Breeze (which looks really interesting), KnockoutJSHot Towel… and probably use jQuery Mobile for the interface…

Any comments or suggestions are welcomed!

Enhanced by Zemanta

Kindle resources

Kindle For exactly a year now, I own a Kindle 3 ebook reader… At the time I bought it, this version was already released for quite some time so there were plenty or reviews and opinions available. Although I read many positive reviews about the device, my main concern was related to reading technical/programming books on it: some online reviews and also some friends were complaining about the reading experience when it came to technical books.

Nonetheless I decided to go ahead and buy one as I wanted a dedicated ebook reader. One year later I am still very happy with my purchase… and have on my device more documents than I can read at this moment.

In order to use the Kindle at it’s best there are a series of tools that, in my opinion, every Kindle user should use.

1. Calibre  – E-book management – this is probably the best ebook manager available and it’s FREE! Supports a wide range of ebook readers (not only Kindle) and besides the syncing of ebook readers contents it also provides the ability to fetch news from the internet. While I used to buy the National Geographic every month before having my Kindle, now I simply download the latest version straight to my device – the language choice is yours! Also it provides a converter to MOBI format, but don’t expect miracles. I tried it, it works, but doesn’t do a great job when it comes to keeping the formatting. Anyway, overall, this is the best option out there for ebook reader management.

2. SENDtoREADER – as they present themselves, SENDtoREADER is a simple web application that allows you to send any webpage to your Amazon Kindle Reader instantly. All you have to do is create an account on their website (or login using your Facebook account) and using their browser addons (http://sendtoreader.com/addons/) you can send any webpage to your Kindle reader.

3. MSDN Magazine on Kindle – if you like to read the MSDN magazine and want to have it on your Kindle, this is a very good option (in my opinion even better than the “Fetch News” feature of Calibre). While downloading and producing the MOBI version of MSDN Magazine, it also downloads the Technet magazine.

While getting newspapers, magazines and web pages on your Kindle is cool, this is not enough 🙂 Below you can find few places where you can get ebooks for free or at discounted prices.

  1. Microsoft Press Deal of the Day–  get a new ebook at 50% discount on every week day… if you are using Microsoft technologies this is a great source.
  2. Syncfusion Succinctly Series– a free collection of ebooks available in PDF and MOBI formats on various topics. If you want a book which will get you started quickly with a new technology, this may be the place for you.
  3. O’Reilly– well-known publisher. It has it’s own “Deal of the Day” section and they have “sales” on a regular basis. If you buy books from them, you may be asked to provide a review and you’ll receive a discount code for your feedback.
  4. in case you are using Microsoft technologies, you will want to take a look at this link. It contains a large collection of Microsoft books in various formats (PDF, MOBI, EPUB, XPS) for technologies like Visual Studio, Windows Phone, SQL Server, ASP.NET and ASP.NET MVC, Office etc

I’m sure that there are lots of other resources for Kindle ebooks out there… the ones listed above are just used on a very regular basis by me.

If you own a Kindle reader or any other type of ebook reader and know or use other resources that are not listed here feel free to drop me a message in the comments. I would love to find out about other sources for quality content 🙂

My Delicious – Windows Phone 7 manager for your Delicious bookmarks

My first ever Windows Phone 7 application made it to the MarketPlace!

My Delicious is a Windows Phone 7 manager for your Deliciousbookmarks. It provides the ability to:

  • view your recent bookmarks
  • browse and filter your tags
  • filter bookmarks by tag
  • add a new bookmark
  • edit an existing bookmark
  • delete a bookmark
  • share a bookmark by email or any other account linked on your phone

The MarketPlace link for the app is http://www.windowsphone.com/en-US/apps/e63bffa0-986e-4ccc-94ae-38df542083ee or you can use the QR code below to get to the application on your mobile phone.My_Delicious_MarketPlace

For now I’ve set up a homepage for the application on my blog and it can be accessed from the main menu (top of the page) – My Delicious link – the page also contains screenshots of the application.

If you own a Windows Phone 7 device and use Delicious to save your bookmarks, go ahead and install the application.

Feedback, suggestions and comments are welcomed!

My new toy – LG E900 Optimus 7

LG E900 Optimus7  For more than a month I am the owner of a brand new Windows Phone – LG E900 Optimus7. Yes, I wrote properly… a Windows Phone :)… I know many people laugh when they hear about Windows Phone OS and prefer Android based devices or the more expensive iPhone. Personally, I don’t like iPhone (and consider them over-rated and over-priced) and although my girlfriend has an Android and she’s very happy with it, I am not a big fan of it.

After using the phone for more than a month I can say that I am very pleased with the purchase. Why? Let’s take it one by one…

Ease of use

The phone came with Windows Phone 7 installed, but at the time I got it, the new Mango update (WP 7.5) was already available. After the first boot of the device when I used my Windows Live ID to take full advantage of the phones features (just like Android users need a Google account), I used Zune software (which I already had for my Zune mp3 player) and once I connected the phone I was prompted that updates are available.

The update process was very simple: just a few clicks for accepting each update the phone got and few phone reboots. After about 1 hour and a half the phone was upgraded to Windows Phone 7.5 (Mango).


Although some of my Android using friends described the interface as being “too simple and too square”, I love it. The interface is really easy to use, finding things is simple and the live-tiles and clear fonts are easy to follow. Not to mention that the interface is very responsive: applications load fast and the system navigation is very smooth.

Installing new applications is simple and straight forward using the Marketplace application which comes installed with the phone. I agree that there are not as many applications as for Android devices, but on the other hand I see the positive side of this: less junk applications. Anyway, most of the important apps available for iPhone and Android are already available for Windows Phones as well. And the number of available apps keeps growing.

Since I got my phone I installed the following apps (few others as well, but not using them on a regular basis so I won’t mention them here):

  • Adobe Reader
  • All Recipes – nice application for finding new recipes based on ingredients
  • Dictionary.com
  • Facebook
  • IMDb
  • GDocs – for accessing the Google Docs
  • Phot0Funia – hundreds of effects you can apply to your photos
  • Pulse – one of my favorite applications for read lots of interesting websites
  • Seesmic – nice Twitter & Facebook client
  • All flights – SkyScanner
  • Shazam
  • Trip Advisor
  • Weather Bug
  • WordPress – official application to manage your WordPress powered blog
  • YouTube

There are plenty of other applications and games, many available for free, others available for rather small prices.

Integration with other services

Another cool feature is the integration with other services. Who said you can’t use your Google account? You can… just add your Google account and see all your contact under the People application and even all the events in your Calendar. You can also add your:

  • Yahoo! Mail
  • Twitter
  • LinkedIn
  • Facebook

Another plus is the battery life. Although I was sure I will have to charge my phone daily, until now I am charging my phone (on an average) every 2.5 days and this with normal phone usage (calls & text messaging) and moderate Wifi usage. Curious if other Windows Phones are doing as well from battery point of view, or it’s just my LG phone.

I will stop here as I don’t want to turn this into some sort of review – there are plenty of professional reviews online. However, I think that the common judgment that Windows Phones are no good is totally false. Although there are still things to improve (Mango update fixed lots of problems), I think that Windows Phones are a very good option for someone who wants a smartphone easy to use and powerful at the same time.

Just the other day I was using the I’m a WP7 application and noticed that there are plenty of Windows Phone users in Cyprus. Also, most of the electronics shops in Cyprus started to introduce in their offers WP7 phones.

A nice “simulator” for WP7 was released recently by Microsoft to allow people to “test” a WP7 phone in their browser… you can access it here.

What about you? Did you have the chance to play with a Windows Phone? Would you try one? Why?

Using Propel ORM with Smarty templates in a PHP project – Part 1

Recently I decided to switch a project from ASP.NET to PHP and in order to ease my development I decided to use two interesting libraries:

  • Smarty – a template engine for PHP, facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation.
  • Propel ORM – open-source Object-Relational Mapping (ORM) for PHP5. It allows you to access your database using a set of objects, providing a simple API for storing and retrieving data.

This is the first part (out of 2) of the article which will focus on explaining how to install both libraries and use them in your PHP project, how to generate the Propel classes for working with an existing MySQL database, configure and initialize Propel for you website and finally, display data from your database using the Smarty library.

This part will focus on Propel ORM framework, how to install it and use it in a project for which you have already a MySQL database. So, without further delay, let’s get started with Propel…

1. Installing Propel ORM

First step we need to do is download and install the latest Propel ORM version. To download the latest version of Propel ORM you can access the Download page of the project and choose any of the options that fits you better. I downloaded the latest full propel package – version 1.5.6.

In order to use Propel ORM, you don’t need to actually run any installer, you just need to unzip the contents of the archive in a location convenient for you. Before you can run Propel ORM generator you will need to:

  • download the Phing library which is used by Propel ORM
  • after you download Phing, make sure that phing.bat and also php.exe can be found on your PATH environment variable. I had to add to my PATH both the location for phing.bat and php.exe in order to be able to run the Propel generator.

2. Generating the schema.xml file from your existing MySQL database

For the demo purposes of this article we’ll use a very simple MySQL database with a single table name people with the following structure:

    CREATE TABLE `people` (
      `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
      `name` varchar(30) NOT NULL,
      `age` int(3) unsigned NOT NULL,
      PRIMARY KEY (`id`)
    ) ;

The first step in using Propel ORM with an existing database is to generate the schema.xml file from our existing database. For that we need to create a folder on the disk where we’ll store all the Propel generated files (om classes, configuration files). For convenience I created my PropelTest folder inside my propel\generator\bin folder. In order to generate the schema.xml file we first need to create a build.properties file which I placed inside the PropelTest folder I just created. The build.properties file looks like this:

propel.project = PropelTest

# The Propel driver to use for generating SQL, etc.
propel.database = mysql

# This must be a PDO DSN
propel.database.url = mysql:dbname=PropelTest
propel.database.user = root
# propel.database.password =

Once you have the build.properties file you can run the propel-gen command. I did it from the propel\generator\bin folder:

> propel-gen PropelTest reverse

The first argument of the command is the folder in which we have the build.properties file. If the setup of Propel and Phing was done properly, the above command should work properly. If you have any errors try to fix them (I had few errors in the beginning and the error messages were pretty clear).

Once you run successfully the above command you should see in the PropelTest folder a new file: schema.xml

If you are curious to open it in any text editor, you will see the database definition:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--Autogenerated by PropelSchemaReverseTask class.-->
  3. <database name="PropelTest" defaultIdMethod="native">
  4. <table name="people" phpName="People">
  5. <column name="id" phpName="Id" type="INTEGER" size="11" primaryKey="true" autoIncrement="true" required="true"/>
  6. <column name="name" phpName="Name" type="VARCHAR" size="30" required="true"/>
  7. <column name="age" phpName="Age" type="INTEGER" size="3" required="true"/>
  8. </table>
  9. </database>

3. Generating the model classes

Once we have the schema.xml file, we can generate the model classes we will use in your project to work with the database. In order to generate the classes we need to run the following command:

> propel-gen PropelTest om

If the command finishes running successfully, in the PropelTest folder you created you should see a new folder called build, which also contains a folder called classes. In the classes folder you should find another folder which you can use in you project. The name of this folder is given by the propel.project value in the build.properties file. In our case it’s again PropelTest.

For every table in the database, Propel creates 3 PHP classes:

  • a model class (e.g. People), which represents a row in the database;
  • a peer class (e.g. PeoplePeer), offering static constants and methods mostly for compatibility with previous Propel versions;
  • a query class (e.g. PeopleQuery), used to operate on a table to retrieve and update rows

More details on the model classes can be found here.

4. Generating the Propel initialization file

Once we have generated the model classes we have one step left to perform before actually using them in our project: we need to generate an initialization file for Propel framework. In order to generate our initialization file we’ll need to create one XML file named runtime-conf.xml which should look like this:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <config>
  3. <propel>
  4. <datasources default="PropelTest">
  5. <datasource id="PropelTest">
  6. <adapter>mysql</adapter> <!-- sqlite, mysql, myssql, oracle, or pgsql -->
  7. <connection>
  8. <dsn>mysql:host=localhost;dbname=PropelTest</dsn>
  9. <user>root</user>
  10. <password></password>
  11. </connection>
  12. </datasource>
  13. </datasources>
  14. </propel>
  15. </config>

According to the Propel documentation, the id  attribute for the datasource element must have the same value as the name attribute of the database element from schema.xml file. You can find more details about the runtime configuration file here.

Once you created the runtime-conf.xml file you can run the following command:

> propel-gen PropelTest convert-conf

After running this command, if you didn’t get any errors, you should see in the build folder a new folder called conf. In the new folder you should find your initialization file which in my case has the name PropelTest-conf.php.

5. Using Propel in your PHP project

In order to use Propel in my PHP project I created two additional folders in my project:

  • model – folder in which I copied the content of the build folder generated running the previous steps. If you’ll decide to do the same, in the model folder you’ll have the classes and conf folder with their contents.
  • propel – folder in which I copied the contents of the runtime\lib folder from the Propel installation.

Next step was to create a setup script for Propel which I am including in all the PHP scripts which need to access the database.

The setup script is very simple and looks like this:

  1. <?php
  2. // Include the main Propel script
  3. require_once 'propel/Propel.php';
  5. // Initialize Propel with the runtime configuration
  6. Propel::init("model/conf/PropelTest-conf.php");
  8. // Add the generated 'classes' directory to the include path
  9. set_include_path("model/classes" . PATH_SEPARATOR . get_include_path());
  10. ?>

6. Adding, updating and deleting entries in the database with Propel

Once you generated the model classes, using them and interacting with the database is rather simple.

In order to show how to create, update and delete an entry for the people table from our database, I just created a simple PHP script which does all the operations mentioned before. The script is just for demo purpose, I am sure that for your projects you’ll get to use more complex queries.

The demo script is:

  1. <?php
  2. include("propel_init.php");
  4. function PrintDetails($people, $message)
  5. {
  6. print $message."<br />ID: ".$people->getId()."<br />Name: ".$people->getName()."<br />Age: ".$people->getAge()."<br /><br />";
  7. }
  9. // create a new record
  10. $me = new People();
  11. $me->setName('Andrei');
  12. $me->setAge(28);
  13. $me->save(); // save the record to the table
  15. PrintDetails($me, "Created:");
  17. // update the entry
  18. $people = PeopleQuery::create()->findPK(2); // find the people record with the Primary Key 1
  19. if($people != null)
  20. {
  21. PrintDetails($me, "Found:");
  22. $people->setName('Andrei Croitoriu');
  23. $people->save();
  24. PrintDetails($people, "Updated found entry to:");
  26. $people->delete();
  27. print "Deleted the entry!";
  28. }
  29. ?>

For more details on the basic CRUD operations with Propel you can read this page.

I’ll stop here with this part of the article, hoping that the steps listed above with the explanations given will be enough to get you started with Propel. I know that the example given is very simple, but should be enough to make your understand how to use Propel.

In the following article (part 2 of this one) I will explain in a similar way how to get started with Smarty (at a very low level) and also how to use MySQL views with Propel to display data in your project.

In case you have any comments, questions and any sort of feedback for this article, please feel free to drop me a message.

Happy coding!