Using SSL (Https) in an Azure Cloud Service – Boredom Challenge Final Day

Standard

Any person that has a basic computer knowledge can go ahead and use Microsoft Network Monitor, Fiddler or any other similar application to monitor his/her own network traffic, whereupon he/she will see that the applications which use HTTP have their data displayed plainly. And people with a little more technical knowledge can go further and use other applications (such as Cain and Abel) to sniff the whole network, which will include packages from every computer connected to it. So, someone just logged in to a website that used HTTP while you were listening to the network? Well, tough luck for him/her, because you’ve just sniffed the username and password.

For demonstration, I’ve created an Azure Cloud Service that has a method which returns the number of characters for a given string. And as you see, Fiddler directly catches my request to the web method and its response:

This is what I sent to the web method.

This is what I sent to the web method.

And this is what the web method returned.

And this is what the web method returned.

Of course, a competent developer would take precautions against this. We use hashing and salting for username – passwords so they are not displayed plainly, but still, we don’t want people to get the hashed version either, because then they could try decrypting it or use that hashed version to make calls to our service themselves. Therefore, we need more security.

This is where HTTPS comes in, which is actually the HTTP protocol with SSL on top. SSL (Secure Socket Layer) uses certificates for encryption and authorization, therefore allowing a secure communication over the network. Many applications (such as e-mail, instant messaging or voice-over-IP applications) use this to ensure security, and in this article, we’ll see how we can use it in our own Azure Cloud Service.

➤ For bonus points, use Fiddler to check other apps’ web method calls. It’s quite entertaining to see how they work. 🙂

Advertisements

Creating a “Page Turning” Effect in Blend – Boredom Challenge Day 29

Standard

Animations, when done properly, are a guaranteed way of increasing the visual appeal of an app. In my previous blog posts, we’ve seen how we can make simple animations in Blend, and later we’ve seen how we can combine these simple animations to make a card flip effect. So, contiuning on in this trend, I’ve set my eyes on the another such frequently used and nice-looking effect: Turning a page.

If you look at the card flip effect example, you can see that we can actually use it for turning a page by changing the center of rotation of the objects. However, this will result in stiff looking rectangle pages which lack the curvy edges of a real page. So, how can we turn that page more realistically?

Unfortunately, we can't make it look as good as this. At least, not easily.

Unfortunately, we can’t make it look as good as this. At least, not easily.

It is not possible to create an effect in Blend like shown in the screenshot. You can, however, create such an effect in code, using bezier curves and whatnot. But it looks quite complicated, and I’ve seen people suggesting to use Direct2D instead of creating such animations in code. Also, while searching, I’ve come across some code examples or custom user controls but they were generally for WPF (I’ve only found one custom control for WinRT, and it wasn’t free).

So our best bet would be animating curves in codebehind, or learning Direct2D. Unfortunately, ain’t nobody got time for that.

If you are muttering to yourself “But.. but, I just wanted to turn a simple page, nothing fancy!”, then you are at the right place. We can play around in Blend a little to make it “sort of” curvy and look just like shown in the video below:

In this article, we’ll create an example app which will have a book where the user can turn the pages with the animation shown above.

➤ Here I am, on the road again.. There I am, up on the stage..

Integrating Twitter in Windows Store Apps with “Linq to Twitter” – Boredom Challenge Day 28

Standard

In this previous blog post I’ve talked about why integrating Twitter in our apps is a good idea and then created a sample app which fetched a public Twitter feed without requiring the user to log in. However, this was just a small feature, and we may wish to take it a step further and allow the user to login to Twitter and publish tweets directly from our app, or maybe make the user follow a specific Twitter user, display favorite tweets or allow the user retweet and so on.

1

If you try to use Twitter’s REST API to do this, however, you are in for quite a ride. Because of security reasons, trying to do some operations may cause you to mutter “wtf” to yourself several times in a short time span, such as constructing the HTTP request for authorization, since it only accepts parameters that require specific encryptions and encodings (see for yourself). It is, of course, not impossible, but it is time consuming. Therefore, we’ll be going the easy way, by using an open source 3rd party library called Linq to Twitter that does these operations itself and allows us to reach every function of the Twitter API way more easily. Linq to Twitter also allows us to query Twitter using Linq syntax (hence the name), which I really liked.

So, in this article we’ll create a Windows Store app that allows the user to sign in with his/her Twitter account, get and display the user’s basic information, and let the user send a tweet from inside the app.

➤ Twitter API is actually quite nice as it allows you to do anything you could on the website itself

Creating a “Card Flip” Effect with Blend – Boredom Challenge Day 27

Standard

In one of my previous blog posts I’ve talked about how we can make simple animations in Blend and shown how we can move stuff around in our interface. However, our animations would need to be a lot better than moving several elements around or spinning them in order to be visually appealing.

And one of the most widely used effects is, of course, flipping something onscreen like a card. This effect not only looks good, but also can be used as a nice transition animation between several elements in your page. And it is really easy to implement by using Blend. Here are the videos of the example app we will make (source code is at the bottom of the page :)):

My computer is a bit old, so it caused some stuttering when saving the videos. The animations are quite smooth in the app. 🙂

So, if this has grabbed your attention, read on and we will create the example app shown in the videos above.

➤ Bonus points for shouting “I activate my trap card!”

Infinite Scrolling in Windows Store Apps Using ISupportIncrementalLoading – Boredom Challenge Day 26

Standard

In my previous blog post we’ve seen how we can implement pagination in Windows Store Apps by using a FlipView, but that is actually kind of against the design principles of WinRT and that solution may not be always desirable for you. So you may want a GridView or ListView that incrementally loads their items as the user progresses through it, just like your main page in Facebook where you infinitely get the past items as your scroll lower and lower.

For example, my blog incrementally loads 7 posts as you scroll through. If you scroll quickly, you'll see the loading icon in the lower left and then the previous 7 blog posts will appear.

For example, my blog incrementally loads 7 posts as you scroll through. If you scroll quickly, you’ll see the loading icon in the lower left and then the previous 7 blog posts will appear.

Ok then, we want this feature in our Windows Store Apps. One direct approach would be using an ObservableCollection, then constantly checking the how much the GridView is scrolled, and if it is scrolled enough, loading the new items by adding them to the ObservableCollection. However, although that makes sense, trying to implement it manually is not really a good idea, especially when we have an interface made just for this purpose: ISupportIncrementalLoading (lol it’s like saying “I support incremental loading.”… Ok, that was lame).

Anyway, in this article, we’ll create an example app to see how we can use ISupportIncrementalLoading interface to load items incrementally so our user can scroll infinitely.

➤ I’m gonna say it… TO INFINITY AND BEYOND!

Implementing Pagination in Windows Store Apps Using FlipView – Boredom Challenge Day 25

Standard

If you have a large amount of items in a list, it is quite common to divide them into smaller sized lists (pages) in order to display them effectively. This is called pagination, and it is done for several (obvious) reasons: You won’t have to get all of the items at the same time (which may cause quite a performance hit while fetching and displaying the data) and the user won’t have to rummage through thousands of items to find the one s/he wants.

1

In Windows Store Apps, we wouldn’t normally need to implement such a feature due to the design principles (GridView, combined with SemanticZoom can work wonders in this case, check this article if you want to know more). However, this only eliminates the user’s side of the problem: You would still need to get all the items from your database at the same time. And although you can implement infinite scrolling with GridView (more items are incrementally loaded as user scrolls), you may not want the user to scroll at all and wish to display a set number of items where the user can navigate to the next set or the previous set (just like pagination explained above).

So, we want to be able to get a smaller number of items, load them only when the user wishes to view them, and let the user “flip” them like a turning a page. Seems like a job for.. FlipView! Yes, we can use a FlipView control to provide this functionality, by using a custom UserControl in its ItemTemplate and jumping through a few hoops.

A screenshot from the example app we'll make.

A screenshot from the example app we’ll make.

In this article, we’ll create an app that will use a FlipView for pagination. We’ll create it in such a way that in the beginning, we would only need to tell the FlipView how many pages we will have, and then load the items within the UserControl in FlipView’s ItemTemplate when a specific page is selected. Therefore, we will get the items user will view only when they will be used.

➤ Our items will be in a Grid, within a GridView, within a UserControl, within a FlipView… I really wanted to go deeper

Reorderable and Draggable Items in GridView and ListView – Boredom Challenge Day 24

Standard

A cool feature of the GridView and ListView controls is that by setting a few properties, we can allow the user to reorder the items on the GridView by dragging them around, or let the user drag an item from the GridView and drop it on other controls to perform an action. For example, we could let our user rearrange the items in their to-do list, or maybe create a kid’s game where they drag and drop items on correct colors.

An example reorderable to-do list.

An example to-do list while reordering items.

The controls that support reordering and dragging out of the box also come with their own animations, so we when we select an item in a GridView and drag it around, other items will move out of the way, and if we drag the item away, other items will go back to their original positions, which look quite nice and require no effort whatsoever from us.

The animation in GridView while dragging an item.

The animation in GridView while dragging an item.

In this article, we’ll see how we can add this functionality by creating a matching game, where the purpose will be to match the item with its picture.

➤ With a little effort, I bet we could make some nice puzzle games with this