Sencha Touch HTML5 Project Template for Visual Studio 2010

Sencha Touch is a powerful JavaScript framework for mobile which is based on HTML5 and CSS3 and let you create eye catching web applications for popular mobile platforms like Android, iOS and BlackBerry.

If you’re a Microsoft developer, most likely you prefer to work in your favorite IDE: Visual Studio. In order to create a Sencha Touch powered website in VS you can create an empty website, remove web.config, add necessary JavaScript and CSS files and create an HTML5 file to begin. This is easy but the better way you can use a pre-built project template to create such project in seconds. Today I created the same project and exported it as a Visual Studio Template which you can include in your templates. Let’s see how we can do this:

1. Download Sencha Touch Project Template.
2. Copy downloaded zip file to C:\Users\{USERNAME}\Documents\Visual Studio 2010\Templates\ProjectTemplates (I suggest you rename the file to Sencha Touch Project.zip after copying)
3. Open Visual Studio.
4. Select “File > New Website…” and then “Sencha Touch Project”

Ok! You’re done. Now you have a project with a “content” folder containing required CSS and JavaScript files to start with Sencha Touch Framework as well as a sample HTML5ified “index.html” to begin your work.

How to use Google Data API in ASP.NET MVC. Part 1 – Google Analytics

It’s really amazing that Google let developers access and use its services data via GData easily. It’s really easy to interact with services like Calendar, Analytics, Google Reader, Blogger, YouTube, etc. using GData.

There are also several libraries for languages and technologies to include and use in your project.

Recently I needed to use Google API in a project to interact with YouTube and Google Analytics in an ASP.NET MVC application. My scenario was not too complicated and so I decided to share my experience in two separate blog posts and you’re reading the first one of this series: using GData to retrieve a websites’ visitors statistics information which is monitored by Google Analytics.

As I mentioned before, my scenario was not complicated and I just wanted to retrieves total number of page views as well as today and yesterday’s page views number. Ready? Here we go!

First of all you need to download GData .NET library from Google Code and add references to these assemblies in your project:

• Google.GData.Analytics.dll
• Google.GData.Client.dll
• Google.GData.Extensions.dll

UPDATE: I was working on my project two months ago and I forgot to mention in my post that Google Analytics is not yet officially a part of GData .NET library. Anyway you can download it from Google Code SVN or the easier, I uploaded it here and you can get it.

Next, we need an Action method that returns information which is retrieved from GData to pass to our View:

public ActionResult Stats()
{
    string userName = ConfigurationManager.AppSettings["GoogleUsername"];
    string passWord = ConfigurationManager.AppSettings["GooglePassword"];
    string profileId = ConfigurationManager.AppSettings["GoogleAnalyticsProfileId"];

    const string dataFeedUrl = "https://www.google.com/analytics/feeds/data";

    var service = new AnalyticsService("WebSiteAnalytics");

    service.setUserCredentials(userName, passWord);

    var dataQuery = new DataQuery(dataFeedUrl)
    {
        Ids = profileId,
        Metrics = "ga:pageviews",
        Sort = "ga:pageviews",
        GAStartDate = new DateTime(2010, 3, 1).ToString("yyyy-MM-dd"),
        GAEndDate = DateTime.Now.ToString("yyyy-MM-dd")
    };

    var dataFeed = service.Query(dataQuery);

    var totalEntry = dataFeed.Entries[0];

    ViewData["Total"] = ((DataEntry)(totalEntry)).Metrics[0].Value;

    dataQuery.GAStartDate = DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd");
    dataQuery.GAEndDate = DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd");
    dataFeed = service.Query(dataQuery);

    var yesterdayEntry = dataFeed.Entries[0];
    ViewData["Yesterday"] = ((DataEntry)(yesterdayEntry)).Metrics[0].Value;
    dataQuery.GAStartDate = DateTime.Now.ToString("yyyy-MM-dd");
    dataQuery.GAEndDate = DateTime.Now.ToString("yyyy-MM-dd");
    dataFeed = service.Query(dataQuery);

    var todayEntry = dataFeed.Entries[0];
    ViewData["Today"] = ((DataEntry)(todayEntry)).Metrics[0].Value;

    return PartialView(dataFeed.Entries);
}

Now, let me explain the code a little. To authenticate with GData you should pass Google Username (e.g.: myusername@gmail.com), Google Password and ProfileID of website which you want to access data. This ProfileID is in this format: ga:NNNNNNN and you can find this NNNNNNN number in query string when you’re logged in to your Google Analytics dashboard.

Next you define the URL of data feed which is https://www.google.com/analytics/feeds/data. Next steps are straightforward enough to understand; you create an instance of AnalyticsService and pass credentials, then send a new DataQuery to AnalyticsService object providing your query information (in this case, PageViews, StartDate and EndDate). DataFeed result which is returned from the service is an array of informtion and in our case we need its first element. If you look at my code you see that we have repeated this process to retrieve yesterday and today statistics.

I have chosen the easiest way to pass data to View which is using ViewData dictionary collection; but you can create a Model class with properties you need and bind it to your view.

Our view to show data looks like this:

< %@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
Website Stats:

    

        Total:
        < %= ((Convert.ToInt32(ViewData["Total"]))).ToString("##,#")%>
    

        Yesterday:
        < %= Convert.ToInt32(ViewData["Yesterday"]).ToString("##,#")%>
    
    

        Today:
        < %= Convert.ToInt32(ViewData["Today"]).ToString("##,#")%>
    

It was a very simple sample of how to use GData to show Google Analytics data on your ASP.NET MVC powered website. I hope it helps you :-)

Next post in these series will show you how to use GData to interact with YouTube API and upload videos from your application and stream it to your visitors.

Centralize your identity with Chi.mp

A few months ago I found an amazing Web 2.0 free service called Chi.mp. As Chi.mp guys have stated in their about section, main goal of this service is centralizing online identity consists of content (blog entries, photos, videos, tweets, etc.) and your contacts and friends in one place. Once you sign up with them you receive a dedicated domain name with .mp extension (.mp is the ccTLD for the U.S. Commonwealth of the Northern Marianas Islands (CNMI); for more information take a look at get.mp website) and then you can setup and configure your current social activities into your domain.mp. Many services like Twitter, Flickr, YouTube, Facebook, RSS Feeds, etc. are supported now. Your visitors then can see your latest updates on social sites in one place and also can see your contact information based on your public/private settings.

Another amazing feature that Chi.mp offers to its users is OpenID! Yes! Chi.mp is an OpenID provider and once you sign up with them, your own domain name is an OpenID address as well. This is great because you can use a very pretty, short and easy to remember address as your OpenID instead of those ugly URLs provided by Google, Yahoo and other OpenID service providers!

You can also define an email address on your own .mp domain name and forward it to your favorite email address. Mine is i@mahdi.mp now!

Chi.mp is a ‘by invites only’ service at present and you should request current .mp owners to send you an invite (if any left!) or being in a waiting list by adding your information here. [Sorry! I don’t have any invites at present!]

Since Chi.mp is still in beta stage there are many many features that can be added and more enhancements that can be applied to this service and I’m sure it can be one of the most favorite services of 2009 among Web 2.0 geeks.

By the way, my Chi.mp account can be found at http://mahdi.mp ;-)

Clean up your digital life!

Once upon a time there were only limited everyday tasks for geeks such as checking emails and in recent years, checking feeds. After Web 2.0 revolution these tasks number has been dramatically increased. Nowadays you have to check your Twitter, Friendfeed accounts several times a day (and for someone several times an hour), manage multiple messengers like Yahoo! WLM, GTalk, Skype, etc., posting various resources to sites like Delicious and Digg, and many other hidden tasks which can consume your time and energy everyday. In this situation busy persons like me would fall in this trap and waste a huge amount of time everyday. What can we do? In recent weeks I tried to manage such stuff and ‘clean up my digital life’! It could help me a lot and so this idea came to my mind to share these experiences with you too. Here’s a list of suggestions and tips to mineralize your social web activities such that you lose the least:

- Follow less people on micro blogging systems: I saw some people who follow thousand of peoples on sites like Twitter and Jaiku. Are all of them your friends or people who you may be interested in their words? Do you read all of their tweets everyday? Of course not; so reduce your following list number. Follow only your real friends, prominent community guys and valuable news/resource twitters. Keep this number under 100.

- Use desktop clients for Twitter and Friendfeed: If you’re a fan of Twitter or Friendfeed, try to use a good desktop client to check updates and posts your own updates. Checking for updates via browser is confusing. My favorite client for Twitter is TweetDeck but unfortunately it doesn’t yet support Friendfeed; to check both Twitter and Friendfeed in one client you can use Twhirl.

- Clean up your messenger friends list: You may have dozens of friends in your messengers who are not real friends and you’ve added them once or they’ve did and you accepted and added them back. Most of them are only like spammers to you and you may receive many offline and online messages from them everyday (and most of these messages are kind of ‘Send to All’). I suggest you organize and clean up your friends list and keep only those whom you chat to frequently. Remove all others. There is another point, If you want to no longer receive messages from them you’ve to ignore and mark them as spammer and this decision depend on you. My personal solution was creating another messenger ID and adding all my required friends to that account again. I’m satisfied with this solution and my list is so clean now! [Tip: There are many short IDs available on ymail.com (for Yahoo!) and live.com (for WLM). Try it!]

- Use less messengers at a time: Many of us have multiple IM accounts such as Yahoo!, Live, GTalk, Skype, AIM, etc. but is it necessary to put all of them in startup and being singed in everywhere? I guess not; Reduce the number of your online messengers to two at most. You can have other messengers installed but use them only when you need.

- Clean up your feed reader: How many feeds do you have in your feed reader? How many of them are really important and interesting and you read them? I guess this ratio is 100/50; I mean if you have 100 feeds in your reader, only 50 of them may be useful and important and other 50 feeds may be ignorable. It’s my own experience before organizing my feeds, I was marking many of my feeds as read prior to read their content. You learn which feeds are your favorites after about 15 days of adding them to your reader. So if you feel you don’t use a particular feed’s content, remove it and let yourself focus on other important titles.

- Use bookmarklets and extensions to bookmark links: If you’re a fan of bookmarking sites like Del.icio.us or Digg, you can use Firefox extensions, toolbars or bookmarklets to easily post links to your account.

- Waste less time to check emails: I have both Web based and POP3/IMAP email accounts and to check them all, I had to open Outlook and a browser tab several times a day and perform a repeating send/receive action to see if there is new mails. This process wastes about 5 minutes each time and if I repeat this 6 times per day I lose half an hour for nothing! What did I do to solve this problem?! My favorite sidebar is Yahoo! Widgets; and my most favorite widget is Informer. There are a lot of works you can do with Informer but here, I want to talk about email checker sensor. You can add as many email accounts as you want including Yahoo!, Gmail, any POP3 or IMAP account and this widget which sits above your task bar checks for new emails in selected period of time and shows the number of new emails; if you hover it you can see latest emails subjects as well and if you like to see it you would click on account name to open browser or favorite email client. Yep! You save your time ;-)

- Keep your desktop clean: A desktop full of icons consumes more memory and you get puzzled soon with all these icons. Only keep necessary shortcuts on your desktop and let your eyes enjoy a beautiful desktop wallpaper!

These were my own experiences and you can find your own tips to easily manage a better digital life, so share them with me ;-)

Non English Words in URL

After releasing ASP.NET MVC previews, URLs have found more important role in web applications. If many developers used to show URLs like /products/showproducts.aspx?pid=14 or /products/14.aspx or even products/14/ in past, now MVC lovers are going to use more friendly URLs like /products/notebook/sony/fz-490; that’s much better. But what if your main language is not English?!

For example assume you’re developing a Persian web application to show news items. Now what to do with URLs? Will you let site administrator add an English translation for headline to show in URL and build a URL like this: /news/2008/8/8/this-is-a-headline/ or show native language words in URL (e.g.: /news/1387/8/8/این-یک-سرخط-خبر-است/)? I chatted to Simone about this and he suggested me use full English URLs instead of a combination of Persian/English characters. He also thought it’s better to keep a unity among all URLs and not to use English URLs somewhere in your application and use non-English (or a combination of both) somewhere else. I agree with him on this and personally I prefer English URLs too.

Another point is that Persian characters are not extended from English and are totally different. For example Simone told me they have characters like à è ò in Italian language but this chars have equivalents like a e o and even if you show URL using native language and characters, you can have equivalent URLs and map them to each other using a simple URL rewriting (So you can satisfy both fans of native and English URLs!); but in Persian language we don’t have this option! Everything will be shown in Persian languages and there is no solution to convert it to a similar English characters URL.

Now let’s take a look at this issue from another point of view: SEO. What is search engine crawlers’ behavior against non-English URLs? Is it better to use native words or not? I have no idea about this because I’m not a SEO expert; so I invite you participate in this discussion by leaving a comment. What is your opinion? What solution you suggest to reach a standard way?

As I told Simone, there aren’t many Persian sites in which they use Persian words in URLs but we have some exceptions too. e.g. Persian Wikipedia (http://fa.wikipedia.org/wiki/صفحهٔ_اصلی). (+ PS: Referencing Keyvan’s post, there are non-English domain names too; e.g. Pedram‘s Persian domain name (www.پدرام.com))

P.S.: Simone invited me to write a blog post about this and open a discussion and also suggested me to talk to Keyvan about it. So, Keyvan, I would be appreciated and so glad if you participate on this topic ;-)

P.S. (2): My dear friend Keyvan accepted my invitation to join this thread and wrote a nice blog post about it. Please read this post as well.