Useful Developer Tools #3: Placeit

If you are a software developer and don’t have an own dedicated design department you sometimes have to create these fancy product images by your own. Your Photoshop skills are as weak as mine? No problem, Placeit can do that for you. Just upload your screenshots to them and select an image from their library where they should put it in. That’s it. You can download a small free version of the generated image afterwards or purchase a large one for advertisement purposes.

default_watermarked_girlrunning_standard_base

Interested in more Useful Developer Tools? Take a look at the whole series.

The 5 best Visual Studio extensions, I can’t code without

Visual Studio Marketplace recently hit a major milestone – 1 million page views and 250K unique users! The community is expanding rapidly, with 740 publishers and 711 public extensions available in the marketplace today. Visual Studio is a great IDE, without doubt – the best one, if you ask me. But as always there is some room for improvement. These are my top 5 extensions that fill the gap:

1. ReSharper

The well known champion of Visual Studio extensions and the only charged entry in this list but is worth every penny. The popular coding helper from JetBrains identifies code adjustments, suggests LINQ writings, detects performance issues and always has a good advice for you. If you have used it once, you can’t believe how you could have written such a bad code before.

Download (30 days trial)

2. Indent Guides

Indent guide lines are a well known part of most IDEs and don’t ask me why Visual Studio does not bring them by default. Whatever, this extension adds them. To keep the overview when indenting your code, these lines can be incredibly useful and I personally don’t want to look at my code without them anymore.

Download

3. Whitespace Visualizer

If you you are as neurotic as I am when it comes to coding, this is the right extension for you. If I had to name one thing, I hate myself most for when coding, it would probably be leaving unnecessary white spaces. I don’t know why it happens, but I create them – when deleting lines, when moving code around, when rewriting things. I really try to avoid them but they always appear and I hate myself when finding them. This extension does not only highlight unnecessary white spaces, it also removes them whenever you save the document. Thank the gods for this!

Download

4. GitHub Extensions for Visual Studio

If you work with GitHub you might have your own ways and workflows for submitting changes, pulling things, merging branches and so forth. If you like Visual Studio’s built in Git support, you might want to take a look at the GitHub extensions, that integrates a bunch of GitHub functionality directly into the IDE. Especially in combination with Visual Studio’s merging view (which is the best one that you can find out there, in my eyes) it shows its power. It is worth the try, so tell me what you think!

Download

5. XAML Styler

XAML things might not might be that interesting for most of you but for me, as I work with it for all my windows projects, it is an essential part of my development process. Believe me – it is way better than its reputation and far ahead Android’s AXML or even HTML5 + CSS. Even if it is not as powerful as the last one, of course. But that’s not the point. So if you write XAML code and want to have it “beautified” automatically, this might be the right plugin for you. The XAML Styler not only indents everything correctly for you, it also applies your custom style to it. It sorts the attributes as you tells it to do, places them in separate lines if you want, closes tags for you and much more. If you are in clean code and in XAML, then this one is made for you.

Download  |  My configuration

Bonus: Visual Studio Spell Checker

This extension is so small that it does not really deserves an own step on the ladder, but I didn’t want to miss it out. I really don’t know why this is not built in but the Visual Studio Spell Checker (Surprise!) checks every string you type for spelling mistakes and typos, which can avoid embarrassing situations.

Download

Have fun trying them out and please let me know, what you think about my ranking. Please also tip me on other notable extensions that make your life easier everyday and I have missed out here.

Cortana Integration #1: Hey Cortana, work with my Windows app!

In the video game series Halo, the relationship between the protagonist and his AI companion Cortana is very close and intensive. On the new Windows platforms, users now also have the chance to interact with Cortana as a personal assistant. But for achieving the same intensive relationship with the user that Master Chief and Cortana already have, one important thing is missing: The integration of your app. Read here, how to close that gap.

Define voice commands

First of all you have to define, what the user can say to let Cortana connect these sentences with your app. For this, you need to create a new XML file that describes the different scenarios in the VCD format. Defining CommandSet nodes that contains the commands for each language you want to support is a good start. Within these nodes you need to define the CommandPrefix. These are the keywords that let Cortana put the spoken words in context with your app. Usually this CommandPrefix is the name of your app but you can choose whatever you like to make the interaction more natural. In my ears the sentence “Switch on the light!” sounds way better that “LightSwitcher, turn the light on!”. You are also advised to add an Example to your command set that will appear in the list of commands when you ask Cortana, what you can say.

Now you define the commands that the user should be able to use. Make sure that they build a logical sentence with the preceded CommandPrefix. A Command node need a Name property and some self-explaining children. The Example works similar to the previous one and the Feedback is the sentence that Cortana answers the user after activating your app. Beyond doubt, the most important node is ListenFor. Here you define the sentence that is mapped to your command. You can use two types of variables inside of it. Those written in square brackets are optional words that the user can say or leave out. The variables in curly braces point to one of the PhraseList strings that you define below. The user has to say one of the words or phrases that you define there. Please note, that you are not able to change the commands once the app is running on the users device. What you can manipulate are the PhraseList items. If the user adds a new room for example you are able to extend the room list by this entry. We will see you how to do this in the next chapter. Last you can choose, what should happen, if a user uses the command. The simplest case is navigation to your app, which is why we used the Navigate property here. You can also start a background service or let Cortana interact deeper with the user but we will discuss these scenarios in one of the following posts.

Let Cortana learn them

Once you have defined all your commands you can add them to Cortana’s vocabulary. Usually you do this, when your app starts which implicates that the user have to start the app at least one time. Add the following line to the OnLaunched event handler of your central App class, to load the XML file and register it to Cortana.

As mentioned above, you will sometimes need to edit the list of options that you defined in one of these PhraseList nodes. You do this by calling SetPhraseListAsync() on a VoiceCommandSet you extracted out of the installed command sets.

React on app activation by Cortana

Whenever your app get activated by Cortana, she tells you as a developer that she did so and passes you some additional information about the activation context and the spoken commands. To access this, you need to override the OnActivated event handler inside the App class. Here you can differentiate between different ActivationKinds. If it is a VoiceCommand, you know that your app has been started via Cortana and need to react. Access the SemanticInterpretation of the spoken text to extract the variables like room and status out of it that you have defined in the VCD file before. You can wrap this information in a single separated string and pass them to your  MainPage while navigating to it.

At last we need to teach our MainPage to deal with those navigation arguments and to react on them properly. Inside theOnNavigatedTo event handler we can access the navigation arguments and split them into single parts. Now we can proceed regarding to the spoken command.

Next steps

As you can see, teaching Cortana to work with your app is not that hard but it can get very complex if you have to consider each scenario and create the right sentences and phrase lists. Cortana is very picky when it comes to recognizing that the spoken words belong to your apps. This means if the user says a word too much or misses out something you have not marked with curly braces, it won’t work and Cortana opens the Bing search instead. And let’s be honest: Who wants that?

So make sure that the command you created covers all usage scenarios. You are also free to create multiple commands for the same use case but with different wordings. It can also get a little bit heavier when you need to handle different languages in your code.

If you want to achieve a solid Cortana integration, make sure to also read these useful articles and documentations:

In the next Cortana posts, we will dive deeper into the other usecases you can use the personal assistant for. Stay tuned.

Building better apps with Xamarin Insights

Last week Xamarin announced the release of Xamarin 4. The release brings new features to almost every Xamarin product and adds new apps (in preview) to make our lives easier. One aspect of the 4.0 release that I thought especially awesome was that Xamarin Insights has been made available to all Xamarin platform subscribers at no cost! Xamarin Insights is an amazing tool for mobile developers using Xamarin and .NET developers building apps for Windows. It enables us to track user events, crashes, usage patterns and even what devices are most popular with the user base, which allows us to prioritise our testing with Test Cloud to devices being used.

Insights

As a usability engineer, Insights is going to make my life much easier for a number of reasons which I’ll be detailing below.

Usability Testing

In an ideal world, a usability engineer working for a software development company would be involved in the development process of a new feature or product from the beginning. This includes working with designers, creating wireframes based on use cases, working closely with developers on the implementation of the wireframes and also managing the usability testing to ensure it meets the requirements. Even for a small project, usability testing can be an expensive and time consuming process.

To really understand some of the pain points associated with usability testing, let’s take a look at what needs to be done in order to test a simple app.

Find some test subjects

To have representable test results, it’s extremely important to have a large enough group of people testing the product. This brings about one of my least favourite tasks as a usability engineer: finding test subjects. The problem with finding test subjects is how to convince them to give time out of their busy day, to sit in a lab in front of an eye-tracking device to test an app they likely don’t care much about.

Xamarin Insights solves this problem as all of our existing users can be our test subjects. We no longer have to be in the same room as them to see how they interact with our app, instead we can ship it and wait for the information to flow in.

User Overview

Creating the test sequence

To be able to make a comparison between two test runs, a set of test sequences needs to be defined. This limits the chances to find potential issues and is not representative of the way most users would interact with the app.

With Xamarin.Insights, we can track all events in a user’s session over time. Each user is given an unique id which allows us to track the user’s events over multiple sessions. An overview shows us exactly how long every user spends on any particular view and every action they took within each view.

sample user session

Cost Savings

Usability testing can be a costly affair – paying all of the test subjects and hiring the lab facilities are just two of the many expenses. After the results of the tests come in, if we’re lucky, and we’ve the ability to iterate, we can run another set of tests, but this is very rarely the case. In the mobile business, very few developers can afford the luxury to test an app in this way. The end result is poor quality apps shipped to the App store, which is exactly what we want to avoid.

Here is where Xamarin Insights really shines. It gives us so much more information about our mobile apps at a much lower cost. It gives us (almost) everything we’d normally get with usability testing but instead of collecting the data once, we can collect the data all the time. We can iterate quickly to build better products and see instantly how our users are using the new features. That really is a no-brainer.. Investing in better apps will always pay up and Xamarin Insights makes this easier than it’s ever been.

The gift that keeps on giving

With all the Insight-full (pun intended) information gained from the usability test, it’s one easy step to start using this data to create automated UI tests for using in Xamarin’s Test Cloud. With the tests replicating how real world users are using the apps, we can upload this to Xamarin Test Cloud and run it on thousands of physical devices, ensuring that our app performs consistently across devices and platforms. With the free device hours every Xamarin platform subscription gets, there is no reason not to use this data with Test Cloud!

Wrapping up

Xamarin.Insight helps mobile developers and usability engineers gain a deeper understanding of how users interact with their mobile apps, giving them an unique insight into how their users are using the apps. This kind of information is no longer reserved for those that can afford testing labs and lengthy processes but it’s available to all Xamarin developers. If you’re a Xamarin subscriber, I highly recommend you take the opportunity to learn about Insights and how it can help you improve the quality of your mobile apps.

Useful Developer Tools #3 – Final Android Resizer

When developing for Android you quickly come to a point where you need images rezised for different screen densities. While most icons you can download comes in different sizes, creating own images could take much time if you need to rezise them manually.

The Final Android Reziser is a free and platform indipendent tool that addresses exactly that problem. You can simply drop a high-resolution image to the tool and it rezises it for the selected densities. Try it out and boost your Android development!

Final-Android-Reziser

Interested in more Useful Developer Tools? Take a look at the whole series.

Swipe to refresh your Xamarin Android app

Most apps that deal with online data have implemented a refresh mechanism. If you want to enable your users to trigger this on their own, providing a “swipe to refresh” implementation is a common and intuitive design pattern. Users can pull down from the top of a page to trigger the refresh. This has the best effect when it is added to a scrollable object like ListView or ScrollView.
swipetorefreshdemo

Backwards compatibility

First make sure that our app is backward compatible. To do so, add the Android Support Library v4 and v7 to your project and make sure that your activity inherits from AppCompatActivity. Additionally you need to use a style that inherits from a Theme.AppCompat version like the Theme.AppCompat.Light.DarkActionBar theme. If you need help with this, check the demo code on GitHub.

Prepare your layout

You do not need much to make your app ready for a swipe to refresh implementation. Just surround your layout with a SwipeRefreshLayout widget that you can find inside the Android Support Library v4. If you use a toolbar make sure to exclude it from the SwipeRefreshLayout to achieve a better optical effect.

After inflating the layout in your code, you have the chance to adjust some things like the colors of the loading indicator. By default it is simply black but you can set upto four colors to cycle through.

You should also add an event listener here to be able to react on the refresh command. As soon as a user pulles the indicator down, the layout fires the Refresh event that you can subscribe to.

Implement your refresh logic

What you want to do when the Refresh event is fired is up to you. Make sure to hide the loading indicator when you are done by setting the Refreshing property of the layout to false.

If you want to use the layout to show the user that your application is currently loading, you also have the opportunity to show the loading indicator without having the user pull it down by setting the Refreshing property manually to true.

Hint: Please consider that this can only be set when the SwipeRefreshLayout has been completely loaded. If you want to show the indicator when your app starts, you need to wait until the layout is loaded and activate the refreshing afterwards to make it work. Use the Post() method to delay the command until the control has been loaded.

Take a look at our demo code on GitHub if you need a working sample or want to take a look at the full code.

Useful Developer Tools #2: Random User Generator

Need some demo data for your mocks? You should try out the Random User Generator that does exactly what you would expect from a tool with this name: It generates a detailed user profile including a picture, address, E-Mail and more.

Additionally it comes with an API that you can integrate into your application to quickly generate the amount of random users you need.

random-user-generator

Interested in more Useful Developer Tools? Take a look at the whole series.

Useful Developer Tools #1: Adobe Color Wheel

Welcome to the first part of our “Useful Developer Tools” series. We would like to present you a set of small tools that makes a developer’s life easier and their results better. Today we want to start with the Adobe Color Wheel.

Formerly known as “Adobe Kuler” the color wheel genrates color schemes that look great because of the adjustment of their colors. The Adobe Color Wheel only shows you combinations of colors that look good and harmonic together. You can configure the output in different ways like selecting a single color and let the tool generate matching ones or selecting only complementary colors and much more. Just play around with it and discover a color scheme that fits your needs.

For inspiration you can also explore popular schemes from others and adapt them, if you like. It is completely free so you should definitely give it a try!

adobecolorwheel

Show a custom dialog in your Xamarin Android app

Sometimes you want to show your users a dialog that contains more than just text and buttons. In those cases the pre-defined AlertDialog that come with Android will need some adjustment. Read here how to do that.

First of all we need an Alert Dialog Builder as always when it comes to creating dialogs in Android. If you want to go with backwards compatibility you should use the one that can be found inside the Android.Support.V7.App class, but you don’t necessarily need to. Instead of simply adding a title and a message we now have the chance to inflate our custom layout and set it as the dialog’s view.

Once the view is attached to the dialog we can manipulate it. We can access its elements by calling FindViewById from the dialogView.

Of course you can still attach buttons and event hanlders to your dialog or set a title, like you are used to it when working with the pre-definded alert dialog.

Don’t forget to show the dialog with builder.Show() and proudly present your first custom dialog to your users!

Xamarin .gitignore

If you use git as source control for your Xamarin project, you might not want everything but only the necessary files to be commited. Unfortunately most auto-generated .gitignore files like the one from GitHub for example don’t contain Xamarin paths. By adding these lines to your .gitignore file your repository will remain clean:

The bin and obj folders (both with upper or lower case) contain compiled stuff and do not need to be checked into your repository. Same is with the test-results. Inside the Components folder you can find downloaded Xamarin components that you loaded from the component store. You do not need to check them in, because a reference to the components is included in your project file and everytime you build, the systems checks if they already have been downloaded or not. If you work on a Mac, make sure to ignore hidden the Mac resourece folder .DS_Store.

Remember: If you already committed files that should be ignored afterwards, git will continue to watch them. Read this post about how you can fix that.