On The Dot...
A Day in the Life of a .NET Developer

Community Leader Spotlight: Tom Walker

For this month’s spotlight post, I interviewed Tom Walker, who is the User Group Leader of the London .NET User Group in London, Ontario. Tom also volunteers for many community groups and tech events across the region, including my own user group, CTTDNUG. He is also a conference speaker, Windows 8 / Windows Phone Developer, and Xamarin Developer and an advocate for those platforms.

Background:

clip_image002

Tom Walker is a senior software developer with over 10 years of experience in the .NET stack. In those 10+ years he has worked in the auto, medical and fitness industries. He specializes in building software that enhances people’s lives in their day-to-day activities be it work or play. His current goal is to combine his passion for art and development into beautiful useful apps. Beyond that you can find him tinkering away on open data and open source projects using Windows Azure, Node.js, MongoDB, and Xamarin plus C #to glue it all together.

Twitter: @TinyToot

Blog: http://www.tom-walker.ca/

London .NET User Group: meetup.com/London-NET-Developers-Group/

1) How many years have you been involved in the .NET community as a volunteer?

I have been a volunteer for 3 years.

2) Which events have you participated in as a volunteer in the past?

When I was speaking at DevTeach I volunteered my time to the Humanitarian Toolbox hackathon. Humanitarian Toolbox is a charity organization that utilizes IT skills to help save lives during disasters and relief efforts.

I have volunteered my time as host and helped out on weekend developer workshops for CTTDNUG, which is the Kitchener/Waterloo area .NET user group.

I recently volunteered as a developer mentor at two Nokia/Microsoft DVLUP events in Toronto. The DVLUP events were setup to provide mentors and resources to help developers complete their Windows Phone apps or enable them to start creating an app.

clip_image004

Toronto DVLUP event

3) What prompted you to participate in those events?

My first volunteer event was with Humanitarian Toolbox when I was speaking at the DevTeach conference in Toronto. It was during this event my interest was sparked to help others through the use of my coding skills. After this event I was hooked and wanted to do even more to help others and to improve the developer community.

DevTeach was my first time speaking at a professional developer conference. I found that going through the process of preparing for the talk really forced me to learn my session topics. The other benefit I found with giving talks was the audience engagement. I found during my session talks that I was learning from my audience, from their reactions and questions on my presentations.

clip_image006I attended two more developer conferences, Prairie Developer Conference in Saskatoon and GRDev Days in Grand Rapids in Michigan. It took me awhile to overcome my fear of talking in front of others. However, I found the experience to be worthwhile because I was able to meet other developers from other parts of Canada and the US. I would like to encourage other developers to either speak at their user group or a local developer conference. It’s a great way to meet new people with the same interest and motivation for learning a subject matter. I always found I learned better when I had a purpose for doing it. Preparing to give developer session talk gives me this purpose. Also being a speaker at conferences does have its perks. Speakers at conferences attend for free and some organizers do cover some of the travelling costs.

My current passion is Windows 8/Windows Phone 8 app development. I found that by volunteering to be a mentor I could share with others my development experience and also learn from them as well. I also found the experience always renewed my purpose for being a developer. I recently volunteered as a developer mentor at two Nokia/Microsoft DVLUP events in Toronto. It was challenging for me in solving other developers problems and very enjoyable at the same time to see other developer app creations.

4) When did you start up the London .NET Developers User Group?


clip_image008I started London .NET Developers User Group in September 2013. So we haven’t reached our 1 year anniversary yet and I am happy to say our membership is 124 registered developers.
Really the motivating factor for me is the time I’ve spent with the great community of developers within CTTDNUG. I wanted to bring that same community experience to London by creating a similar .NET user group. Having these kinds of developer communities is a great way for developers to share their experiences and network with others on job opportunities or on personal projects. I’ve seen the positive impact our group has had by connecting local developers with local companies looking to fill developer roles.

 

5) What were the challenges you faced in starting up a new User Group?

The biggest challenge was overcoming the fear of failing. In the past I had always found an excuse to convince myself that I could never establish a successful user group for the London, Ontario area. It was encouragement from Rob McDermid the CEO of IES Group that gave me the courage. Rob has always been a great mentor to me. He had also helped by making introductions to local developers who later became members of the lead support team for the new group.

I saw firsthand through Lori Lalonde the leadership of how to properly structure a user group. It was just a simple matter of duplicating the same group organization that she had created for CTTDNUG.

The last challenge was finding a decent place for our group to meet. I was fortunate to find HackerStudios which offered us a space for reasonable price. HackerStudios is a co-work space for local entrepreneur to share in the cost of office and work space. The space offered us plenty of room for our members, Wi-Fi and flexibility on seating configuration depending if we were doing a speaker session or workshop event.

clip_image010

London .NET UG Event at HackerStudios

6) What challenges do you face running the User Group on a regular basis?

The challenges that I face on a regular basis are what topics to create for our monthly sessions, who can I schedule as a speaker and how to increase membership. The most difficult recurring challenge is how to schedule this extra work on top of my normal day to day job. So I had to tackle each of these challenges one at a time. I found if I planned topics 2 months in advance it became less stressful. Now I’m trying to schedule topics and workshops for our entire upcoming session season. I’ve been fortunate because I’ve networked with several industry experts during my time with CTTDNUG and through the conferences that I’ve attended.
It was as simple as reaching out to these people and asking if they would be interested in speaking at our user group. I’ve always been courteous and schedule speakers 2 months in advance. You have to remember these people are busy with their work and lives as well.


As for picking topics it was matter of listening to what members were interested in and taking advantage of the resources from the Microsoft user group support program. Microsoft has already prepared several topic packages which included Power Point slides and speaking notes. The topic packages save some of the work and are great resources that help me create session talks for sessions or lab lessons for our workshops.
In order to help increase membership I take advantage of social media channels like Twitter, Facebook, LinkedIn to get the word out about our group and upcoming event. I also take advantage of local community event boards on websites like TechAlliance to help promote our events. However, word of mouth is still king when it comes in promoting events. I found if we kept delivering interesting topics membership registration would increase as well.

7) What advice would you give to someone who is thinking about starting up / running a User Group?

imageAttend an existing user group in nearby city if you can. Talk with the other group leads and members. You basically want to walk way confident that this is something you seriously want to pursue. There will be some cost and work involved.

imageEstablish a support team for your user group. It’s easy if you have other people to share some of the work and responsibility.


imageTake advantage of group website services like Meetup. It didn’t take me long to decide to buy into the monthly fees for Meetup. I was able to have all the group info created and schedule sessions in just one Sunday afternoon. I don’t have to worry about creating webpages or setting up web server. Meetup had everything I needed plus it had discussion forums, member signups, image uploads and member feedback and comments.

imageAutomate as much as the work as you can. I’ve been using BufferApp to schedule all my social media event promotion for up to 10 days. I typical schedule event promotions 4 times a day and within 4 days of a typical week.

imageTake advantage of user group support programs from Microsoft and other vendors like Telerik, Pluralsight, Apress and Wrox. They can provide discounts on products, resources for topics and potential swag to give away during your sessions.

imageAsk if your company can provide space for your user group to meet. It will save on some of the upfront costs. You can always sell the idea as a means for the company to screen potential developer hires.

imageAlways be consistent with scheduling your events. It’s far easier to establish recurring attendance if you schedule for the same time each month.

Wrap Up

Thanks Tom for participating in my second Spotlight blog post!

To find out more about Tom Walker, be sure to follow him on Twitter, visit his blog, and join the London .NET Developers Meetup Group!



Microsoft Virtual Academy - Free Training at your Fingertips

If you haven't heard of Microsoft Virtual Academy yet, now is the time. Microsoft Virtual Academy (MVA) provides you with access to countless hours of online training videos on the latest and greatest technologies all for FREE! If you haven't registered for Microsoft Virtual Academy yet, do it now! You can register by going to their home page, and signing in with your Microsoft Live ID. Click HERE to get started!

Setup a Learning Plan

In addition to providing free online training, MVA also lets you set up your own Learning Plan, which allows you to queue up a selection of courses in a list for easy access when you log into your MVA account.

image

You can also view your list of courses in progress, as well as courses completed, and even download a course completion certificate, or your MVA transcript.

image

Earn Points For Learning!

With each module that you complete, you earn points towards your MVA ranking. Each course has a total number of points that can be earned, but you still earn points by module. Completing a course will earn you bonus points.

image

image

As you earn points, your MVA profile is associated with a bronze, silver, gold, and then platinum cup as you progress up the list. You can see how you rank in your country, and overall. Your MVA ranking might not seem like a big deal now, but as you rack up those points, you will secure bragging rights. Even more so if your name ends up on the MVA top 3 students of the week list Smile

image

 

It’s Fun, Free, and Fabulous

So what are you waiting for? Get onto Microsoft Virtual Academy today, learn something new, and have fun along the way!



Windows Phone Developer Spotlight: Nikolai Joukov

As part of an ongoing series, I plan to include a spotlight post on people within the community that are stars in their field and area of expertise.

For my first spotlight post, I interviewed Nikolai Joukov, who is a regular attendee at my local area .NET User Group (CTTDNUG), and has also participated in many of the Mobile and Cloud workshops we have hosted over the past few years. Nikolai stood out immediately, because of his passion for developing mobile apps, his interest in continuous learning, and his drive to publish quality apps that people will find useful and entertaining.

Background:

clip_image001Nikolai immigrated to Canada in 1995, and has been working in IT since 1997. He moved on to become an independent contractor in 2005, and has worked at various large scale organizations over the course of his career, including BMO, Enbridge, Economical Insurance, Equitable Life, Manulife and Sun Life.

Nikolai is an accomplished Windows Phone and Windows Store publisher, with 11 published Windows Phone apps, and 8 published Windows Store apps. He has almost 6000 downloads and favourable reviews.

Q & A with Nikolai

How many years have you been developing Windows Phone apps?

2 years

When did you develop your very first Windows Phone app, and what was it about?

clip_image003Actually, the very first app I wrote was for the Microsoft “Smart Phone” back in 2004. This phone was given to me by Microsoft during the Developers Days Conference in Toronto. It was some kind of experimental model named Smart Phone, but you had to use VB 3 to develop the applications. Needless to say, this was not very successful at that time. My app was a Stock Trades Calculator. Very primitive, but it was working for me. The phone was heavy and the battery barely lasted 4 hours. Microsoft stopped supporting it few months later and the phone stopped working shortly after, but I still have it as a souvenir.

For Windows Phone, my first app was “Trip Packing Assistant”. This is a simple trip packing check list that allows you to list items by category, set required quantity of items, and mark off the item in the list when it is packed. I designed it for me and my wife Galina, since we love to travel and this program helps manage our list for us.

How did you get started in Windows Phone development?

I have to say thanks to our .NET User Group for introducing me to Windows Phone development. I was intrigued and decided to give it a try. In October 2012 during a 2 day training event that ObjectSharp hosted in London, I met Bruce Johnson. On his advice, I registered for Developer Movement, and it is was a good push to actually complete the apps that I started.

You have a great series of travel guide apps both for Windows Phone and Windows Store. Tell us about how you came up with the idea to develop those apps and what process you went through to put it all together.

Like I said earlier, my wife and I love to travel. Before I created Trip Packing Assistant, every time we were planning to travel somewhere new, Galina would spend 3-4 weeks doing research. She would create a Word document with all of the information. We didn’t want to have to carry our laptop with us all the time, so we printed out the Word document she created, and would take it with us. After we returned from the trip, we would bring back tons of pictures and materials. Then our friends started to ask us about our materials before they planned their trips to the same places we had visited. So I decided to give it a try and started making apps for Windows Phone and for Windows 8. I hope these applications will help people who are planning to travel.

So, all of the pictures used in the travel apps you created were actually taken by you during these amazing trips?

Yes

Do you have another Windows Store/Windows Phone project in development right now? If so, can you give us a hint at what it will be about?

I want to stay with travel apps for now. But this time I will try to write an app for us (Galina and I). Usually we go on the trip, then I write the apps after we have all this beautiful pictures in our hands. We are planning a trip to Rome. This app will not have the pictures, but I want to add a map with points of interest and all information that can be useful for us. Then we will go on our trip and test it on location. As well I am planning to work on my existing apps to make them better.

What learning resources would you recommend for other developers that want to get started in Window Store and Windows Phone development?

I would start with dev.windowsphone.com to get all tools and samples, also links to training materials. I like MVA (Microsoft Virtual Academy). Their videos are really useful and it is free. Pluralsight is good too but it is not free and I do not have a subscription anymore. Our .NET User Group meetings give good insights too. I went to all meetings and full day training events. When you start to develop your app, you need to do research for specific questions that arise during development. The Developer Portal and Nokia Developer are good resources too.

Wrap Up

Thanks Nikolai for participating in my first Spotlight blog post!

Shown below is Nikolai’s publisher page in the Windows Phone Store and his publisher page in the Windows Store. Simply click on it to be taken to there to check out his portfolio of apps. Be sure to download his apps and try them out! They are all free!

Nikolai’s Windows Phone apps

clip_image005

 

Nikolai’s Windows Store Apps

clip_image007



Upcoming Event - Canadian MVP Consumer Camp

image

Did you know that Microsoft is organizing a pretty sweet event at the Microsoft Store at Square One Shopping Centre in Mississauga? It’s called the first Canadian MVP Consumer Camp and it is being held on Thursday, May 29th from 4pm to 9pm. A group of Microsoft MVPs will be on site answering tech questions, showing off demos and the unique features of Microsoft devices. To add to the excitement, there will also be prize draws, Q&A sessions, and snacks and refreshments to all those that attend! 

MVPs are recognized exceptional, independent community leaders who share their passion, technical expertise, and real-world knowledge of Microsoft products with others. We speak at events, answer questions online, and have awesome technical blogs! You will not want to miss out on this once-in-a-lifetime opportunity to meet such a large number of Microsoft MVPs from across Canada at a single event!

For those of you who haven’t been to a Microsoft Store yet, they are amazing!  They have a huge selection of the latest products and gadgets with experts who can answer all of your questions.  If you can’t make the event, definitely try to drop in to a store to try the latest Xbox game, check out Windows 8.1 and its great touch features or to buy the latest and greatest Windows Phone.  The Nokia Lumia 1020 has an unbelievable camera by the way ;)

Do you have any questions about Surface, Windows, Office, Windows Phone or Xbox?  Do you want to learn about how to get the most out of your gadgets?  There will be an MVP there who can provide answers!

Register here!

image

 

image



Quick Look at What’s New in VS 2013 Update 2 RC

One of the major announcements at BUILD 2014 was the topic of universal apps. What are universal apps?

u·ni·ver·sal apps [yoo-nuh-vur-suhl aps] - an app that is developed using a common Windows runtime which can run on multiple platforms (ie. phones, tablets, and PCs)

Check out the post, Extending Platform Commonality Through Universal Windows Apps on the Windows Blog to learn more about it.

To enable developers to build universal apps, Microsoft released an update to Visual Studio 2013 which also installs the latest SDKs so that you can get started on developing apps which target Windows 8.1, Windows Phone 8.1 or both (ie. universal)! You can download the update from the Microsoft Download Center.

I installed the update last night to have a quick peek at what has changed.

Universal App Templates

The first noticeable difference is the grouping of templates for Windows Store and Windows Phone apps.  Everything is now grouped under the label “Store apps”, from which you can choose to create Universal, Windows Store, or Windows Phone apps.

Drilling down to the Universal Apps, you can see there are a handful of templates available: Blank App, Hub App, Class Library, Windows Runtime Component.

image

In creating a new Universal App using either the Blank App or Hub App template, you will notice that it creates a Windows 8.1, Windows Phone 8.1 and a Shared project by default. This allows you to create code that will be shared among both platforms in one location, similar to the concept of Portable Class Libraries, with one major difference…. the ability include your views in the Shared project! This concept was demonstrated at BUILD yesterday. If your views are designed properly (one example is to ensure you are not using fixed widths in your UI elements, folks), then your views will adapt to the resolution of the device that it is running on.

image

Also, you will notice now that your projects will list the platform that it is targeting to the right of the project name.

I plan on experimenting with the latest SDKs and writing more posts on my experiences in developing Universal apps. But those are posts for another day. In the meantime, check out Laurent Buignon wrote a post on building a Universal App using MVVM Light, which is a great starting point.

Windows App Templates

The Windows Apps templates are pretty much the same as what was offered before, except the Portable Class Library template is no longer available here. Portable Class Libraries are available under the Universal Apps umbrella.

image

Windows Phone Templates

The number of available Windows Phone templates has grown considerably in this update. The new Windows Phone 8.1 templates are labeled as “Windows Phone”. The original templates are still available, but are now labeled as “Windows Phone Silverlight”. This means that along with developing new WP8.1 apps, you can continue to develop new, and maintain any existing, WP8 apps.

image

The WP8.1 templates will create projects that incorporate the Windows Runtime. So although there are a handful that are named the same as the original Windows Phone Silverlight templates (ie. Blank App, Hub App, Pivot App), the projects that are created reference a different set of libraries than the WP8 templates:

image      image

You will also notice that there is a WebView template. For those of you that have developed apps for Windows 8, you will be familiar with the WebView control, which allows you to embed HTML content into your app. This replaces the WebBrowser control, which is no longer available when creating new WP8.1 apps. However, the WebBrowser control is available in WP8 apps, and in WP8 apps that have been retargeted to WP8.1.

Also, you can see that Coded UI Test Projects are now available for Windows Phone!

Summary

This was just a quick look at the new templates available in the latest VS2013 update, as well as the ability to create universal Windows apps. We have only scratched the surface of what’s new in VS2013 Update 2 RC. More posts will follow on my experiences with the latest update. But for now, you should download the update for yourself, and dive right in!



CTTDNUG’s Windows Azure Cloud Camp Wrap Up

This past Sunday, CTTDNUG hosted its annual workshop. This year, the focus was on Windows Azure and it was held at The Tannery Event Centre in downtown Kitchener. For those of you that live in the KW area, you know that the Tannery is a pretty prime location for hosting events. So I was really excited about securing this venue for this year’s workshop.

In the months leading up to the workshop, I had a campaign going to convince the “Cloud Guy”, Jonathan Rozenblit, to come out to our event to give the keynote presentation and assist with running the hands-on labs. In order to convince Jonathan that we were a serious bunch of devs (aside from the fact that our CTTDNUG members are cool, amazing, and fun), I asked our members to start ramping up ahead of time, on any technology that their hearts desired, by watching free video sessions on the Microsoft Virtual Academy web site. For those developers that completed at least 2 courses, Jonathan was willing to award them an extra 100 points on their MVA profile.

As I expected, our CTTDNUG members rose to the occasion to watch as many MVA sessions as they could. It really was a win-win deal for our members. Free training videos on the latest technologies, plus bonus points just for learning, plus the fact that we could convince one of Microsoft’s very own Cloud Experts to participate in our camp!

We welcomed just over 30 people at our camp on Sunday! True to his word, Jonathan delivered a great keynote presentation to kick off the day long workshop, followed by a hands-on lab where our camp attendees learned how to build ASP.NET web sites in Azure.

Next up to bat, our very own CTTDNUG volunteer and Azure Community Expert, Tom Walker was up to talk about Windows Azure Virtual Machines. He wrapped up his great presentation with a hands-on lab to walk the group through setting up VMs in the Cloud.

Last but not least, I had the opportunity to present the final session on Windows Azure Mobile Services, demonstrating many of the cool features that are included (data storage and dynamic schemas, push notifications, scheduler, authentication, and so much more!), which was also followed by a hands-on lab to allow the attendees to get a Windows 8.1 app connected to Azure Mobile Services up and running.

We wrapped up the day o’ fun with some pretty sweet prize giveaways including a Telerik DevCraft license, Telerik Kendo UI license, a 1 year subscription to Pluralsight, books donated by O’Reilly and Apress, and a Lenovo Miix 2 8” Windows 8.1 tablet!

WP_20140216_003

Thanks to….

Thanks to my fellow presenters, Jonathan and Tom, for helping out during the camp. Tom was also our resident photographer, who took some great photos during the camp which are posted on the CTTDNUG Facebook page. Jonathan assisted with troubleshooting issues during the hands-on labs, and for some of the demos that weren’t working quite right. He also saved the day by assisting an elderly lady who had fallen outside in the parking lot. A Superhero cape is awarded to him for this alone!

Thanks to Bingeman’s who catered the event at the Tannery! Everything was setup perfectly for our workshop. The food was fabulous, including a great selection of drinks during breakfast and lunch, and there was a never ending supply of coffee and water throughout the day for our attendees!

Thanks to everyone that attended and participated! You are the reason we continue to host these types of workshops. We hope you enjoyed learning as much as we enjoyed teaching!

The event was a huge success because of the active participation from our members and the support we received from our sponsors.

Special thanks to our event sponsors for supporting CTTDNUG and helping us to make this the event of the year for our members: Microsoft Canada, Telerik, Pluralsight, Apress, O'Reilly, and Solola Solutions Inc.

WP_20140216_001

Jonathan Rozenblit schooling a table full of students on the ways of Azure

I’m happy to say that we had a great turnout for the event and we received positive feedback from those that attended.

Missed our workshop?

If you missed our Azure Cloud Camp and are feeling remorseful at having missed this wonderful opportunity for learning, networking, socializing, and potentially walking away with some great prizes (along with a new set of skills), I have good news! Another Azure Cloud Camp is being held in London, Ontario on March 16th hosted by the London .NET User Group. To check out details on that event and to register, check out their registration page on EventBrite: http://www.eventbrite.com/e/windows-azure-cloud-camp-tickets-9017428371

If you can’t make it out to a full day’s workshop in person, then go to the Microsoft Virtual Academy site to watch videos at your own pace, on a variety of technologies…for free!

Ready to start building cloud-connected apps?

If you attended our camp, or watched a ton of training videos on the MVA site, and are ready to start building cloud-connected apps, be sure to register for the Developer Movement first, so that you can earn points for your efforts! Those points can then be cashed in for prizes! If you haven’t heard of the Developer Movement, check out my recent post, “The Developer Movement Is Back”, to learn more about it!



Creating An App With Windows Phone App Studio–Part 3

So you read my previous posts, Creating An App With Windows Phone App Studio - Part 1 and Creating An App With Windows Phone App Studio - Part 2, became inspired, and decided to use App Studio to design a fully FUNctional app Now what?

In the final step of the Windows Phone App Studio wizard, you are given the option to generate your app so that you can install it on your personal Windows Phone device, or you can visit the summary page of the application to have a look at what you have accomplished thus far.

image

Generating the App

Let’s generate the app so you can download it on your device. Click the Generate app link. This will raise a message to let you know it may take a few minutes to complete the app generation, and ask if you wish to continue. Click the checkmark button to proceed with the app generation.

image

At this point, you will see a progress indicator screen as shown below.

image

When the app has been created, a Congrats message will be displayed. As you can see, you have a long list of options available to you. You can choose to:

· install the Windows Phone App Studio Certificate,

· install the newly created app to your device,

· download the app’s source code,

· download the app’s publish package,

· share your app by email, or

· continue editing the app

Since the point of this post is to demonstrate how to install the app onto your personal Windows Phone device, let’s carry on down that path.

image

Installing the Certificate

Before installing your newly created app to a device, you will need to install the Windows Phone App Studio Certificate. You can do this in one of two ways:

1) Click the “Install the Certificate” link in the Congrats page shown below, or

2) Click the link that was sent to you via email by App Studio

Clicking the “Install the Certificate” link displays a QR Code which you can scan from your device by tapping the Search device button to bring up Bing, and tapping the Vision icon in the application bar. Scan the QR code by pointing your device directly at it. A URL will appear when the scan is successful. This is the direct link to download your certificate.

Tap the URL that is displayed. When the URL is tapped, you should receive a prompt indicating “Tap to Open”. Tap to install the certificate.

Trouble installing certificate?

If you are anything like me, then you most certainly have experienced Murphy’s Law firsthand (you know… the old adage “if something can go wrong, it will”). In my case, installing the certificate just wasn’t happening. The email link nor the QR code scan worked. I just was left at a “Tap to Open” prompt that did nothing when tapped.

In this case, I managed to come across a helpful reply by Richard Baily regarding a post on the Microsoft forums that brought up this issue.

He simply suggested to download the certificate on a laptop using the link provided in the original email sent by App Studio, and email it back to yourself as an attachment (use an email account that is set up on your device). On the device, open the attachment, at which point you will be prompted to install the certificate. Done and done.

Installing the App

Simply scan the QR code displayed on the Congrats page. As with the certificate, successfully scanning this QR code will provide you with a URL that is a direct link to download the app to your device. You will receive a confirmation asking if you wish to install the app from Microsoft Corporation.

image

Click the install button to proceed. And just like that, you have a shiny brand new app to play with on your device!

Revisiting Your App From the Dashboard

When you go back to your Dashboard, you will notice that the status of your app has been updated to indicate that it has been generated, along with the date and time of generation, when your mouse hovers over the app’s tile in the Dashboard.

image

Click on the app tile to view the App Summary page. The App Summary page allows you to regenerate your app, edit or delete the app, download the source code or publish package, re-install the app through the QR Code that is displayed, or share your app by email. You can also view the generation history, and other details about your app (logo, description, images from your data source collections, etc).

image

In Summary

In a few easy steps, which I managed to convert into lengthy blog posts, you can see that Windows Phone App Studio provides you with a healthy selection of pre-defined templates that you can leverage to quickly create an app from your imagination and install it onto your device in no time at all!



Creating An App With Windows Phone App Studio–Part 2

Welcome back! In my previous post, Creating An App With Windows Phone App Studio - Part 1, we started the process of designing an app through Windows Phone App Studio using one of the templates provided. We wrapped up that post with editing the info section in the My City template, which is the default entry point into the app.

The next step in the process is to examine the remaining sections that were generated by the My City template, and determine if we want to edit them to include real data that is relevant to the application, or remove the sections altogether.

Manage Application Sections

You can edit, preview or delete a section by selecting the respective buttons located at the right side of the section header. For my application, I have decided I don’t really need a monuments page. So I will remove the section by clicking the “x” button.

This will raise a confirmation, at which point I can choose to confirm the deletion and remove the section, or cancel the action and leave the section intact.

image

In this case, I will confirm the deletion by clicking the checkmark button.

As you can see below, the monuments section has been removed, but its related data source was not deleted along with it. This data source has been left in place. This could be a safeguard in the event you are using the same data source in different sections. However, I can tell that the monumentsCollection is not used elsewhere, because now I have the option to delete the collection as noted by the big red delete button available on the data source itself.

image

Since I know it is safe to delete the monumentsCollection without affecting any other section, I will remove it simply by clicking the X button. A confirmation displays giving me the option to continue with the delete or cancel and go back. I will continue with the delete to permanently remove the data source.

Edit a Collection Data Source

Next, I want to modify the special places section, so that it contains places of interest in Leamington. To do this, I will need to modify the data source, specialPlacesCollection. Click on the collection to launch its editor.

image

Notice that the Edit Data Source view for this section looks different than the Edit Data Source view for the info section, which we worked on in the previous post. The data source editor will change based on the type of data source you are editing. In this case, we are working on a static collection of items. Each item in the collection contains a Title, Subtitle, Image and Description.

To modify the items in the collection, I can choose to:

· edit the existing items in place and change the content by clicking the Edit button for each item

· delete one or more items individually by clicking the Delete button for each item, or

· add new items using the Create Item button at the top, left of the collection grid

· import my own collection as long as it follows a specific format,

· delete all rows

I’m going to delete all rows, by clicking the respective button, and enter my own list of special places from scratch. Notice that in doing so, there is no confirmation before the deletion takes place. The rows are simply cleared.

Now, I can select the Create Item button, to start adding my own places to the collection. Clicking the Create Item button launches the Item Edit view.

image

For this collection, I am required to enter data in all fields, and include an image. If I exclude any of these items, and select the checkmark button to save my changes, I will receive an error.

image

In the screenshot above, I have entered my data and obtained an image from Wikimedia which is available under the Creative Commons license. It is important to provide proper attribution here in order to give credit to the publisher of that photo.

Important Note about Using Images

Be careful when using images in your apps. Purchase royalty-free photos from stock photo sites such as Fotolia, or search for images that are available for use under the Creative Commons license. Do not just pull any images from Google on a whim. It could cost you dearly. Read this article to learn more about what to do, and not do, when using images, whether it is on a blog or web site, or within an app: “How Using Google Images Can Cost You $8000

Here is the photo attribution I included in the app:

“Point Pelee from the tip” (http://commons.wikimedia.org/wiki/File%3APoint_Pelee_from_the_tip.jpg) by Alasdair McLellan (http://commons.wikimedia.org/wiki/User:Arsenikk) [CC-BY-SA-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

The one pain point I have with the Collections data source is that it does not allow HTML in the Description field, so the URLs provided will appear as static text in the attribution. So for any images I use, the attribution is going to look quite messy. I’d prefer to have the attribution read like this:

Point Pelee from the tip” by Alasdair McLellan is licensed under CC-BY-SA-3.0-2.5-2.0-1.0 via Wikimedia Commons

Once you have entered the necessary item data within the Item Edit view, you can add the item to the collection by clicking the Save button. This will close the Item Edit view, and refresh the collection grid with your newly added item in the list.

image

Repeat these steps to create as many items as you need in your collection. Once you are finished modifying the collection (ie. adding, editing and/or deleting items), click the Save Changes button to return back to the Configure App Content view.

Edit Section Page Layout and Content

At this point, you have the option to modify the layout of the section pages in your template. It’s not a requirement. You can choose to leave the default layouts for each page as is, but it is nice to at least go through them to see what options you have.

Note that in my example, there are 3 section pages which are structured in a Master-Detail format.

image

The Master page is the SpecialPlaces page which displays the entire collection of items as a list. The user can drill down into an item by tapping the item in the list, which will navigate to the Detail page. The Detail page is a single page which contains two pivot items: Detail and About. The Detail “page” is really a single pivot item which is also shared with the About “page”, a second pivot item. The Detail pivot item is loaded by default when the user selects an item from the list in the master page. The user can then swipe from right to left, or left to right, to view the About pivot item, and to switch back to the Details pivot item.

You can edit the layout of Master page, SpecialPlaces, as well as the Detail and About pivot items. To edit the layout or the content that displays, simply select one of the section pages to load its respective Edit Page view, as shown below.

image

To select an alternate layout, you can click on any of the available layout icons that display in the Edit Page view. As you select a layout, the app preview will refresh to give you an idea of how the layout will look before you save your changes. Once you’ve decided on a layout for the current page, you can choose to change the content of the page’s title, and image. As you switch between layouts, you may notice that some layouts contain additional fields to display more information.

As we discussed in Creating An App With Windows Phone App Studio - Part 1, within the Edit A Page section, you can select the blue icon next to a field that is associated to a Data Source field. This will allow you to either select another field from the same Data Source, or clear the field. You cannot enter freeform text into this field. It will not render in the application.

image

Depending on the page that you are editing, you may also have the same Extra options that were also discussed within the Edit A Page section in Part 1 (ie. Pin Tile to Start, Text to Speech, Share, etc).

Go through each section page, and adjust your layout and content as you see fit. Once you are satisfied with your changes, you can move onto the remaining sections, and modify them and/or their respective data sources, to suit your application. You can remove any sections that you feel are not needed in your application.

Configure the App Style

When you are happy with your data, sections, pages, and layouts, you can then click the Next button to move on. At this point, you will now be able to set the style of your app, including colors (accent, background, foreground, and the application bar), tiles, splash screen and lock screen.

Colors

In Windows Phone development, when defining a color scheme for your app, you assign colors using brush resources. App Studio gives you the ability to set 4 types of brushes:

Accent – this brush sets the foreground color for special items, such as the page’s title.

Background – this brush sets the background color of the pages within your app. Alternatively you can choose to select an image, instead of a color, for the background on all pages. This is the only brush that allows you this option.

Foreground – this brush sets the foreground color of the text in your app.

Application Bar – this brush sets the background color of the application bar in your app. The application bar is the bottom vertical bar along the bottom of the device screen, which contains icon buttons, an ellipsis button (..) which when tapped expands to display any additional menu items (such as Share or About), if available.

image

You can select one of the standard, pre-defined colors in the color bar, or you can select a custom color by selecting the dropdown arrow in the custom color picker at the right.

When selecting a custom color, you can choose to select a color in the palette, or enter a hexadecimal (hex) notation that represents your desired color in the field provided, as shown below.

image

Once you are happy with the color selected, you can click the choose button to continue and set the brush to the color you selected, or you can cancel out of the color picker leave the brush at its original color selection.

When you make your color selections, you will notice the app preview will update accordingly. Once you are satisfied with your color scheme, click Next to continue on to Tiles.

Tiles

On a Windows Phone, a tile is an image that represents your app when pinned to the Start screen. An app is pinned to the Start screen when the user decides to do so. It does not display on the Start screen by default, when it is first installed. The user can pin a tile to the Start screen in one of two ways: from the device’s app list, or from within the app, if the app provides the option.

If you recall in the my previous post, Creating An App With Windows Phone App Studio - Part 1, within Edit A Section, I touched on this topic when discussing the purpose of enabling/disabling the Pin To Start option.

Every app must have a default tile defined. This is done by selecting one of the 3 available tile templates: cycle, flip and iconic. App Studio provides a description of each type of template, and an example on how each displays, as shown below.

image

To select a template as the Tile Template for your app, simply click on the template. The template will become highlighted, and you will have the option to edit the template. Click the Edit button to further customize your tile.

Tile Sizes

A tile can be pinned to the Start screen in 1 of 3 sizes: Small, Medium, or Wide. As we discuss tile templates, you will see examples of each of these sizes.

Cycle Template

The Cycle template allows you specify the title that will appear at the bottom of the tile. You must also select a small image which is displayed when the tile is reduced to a small icon on the Start screen (in this case, no images will cycle). By default, it has inserted the app logo here. Since the app logo is the image that displays when the tile appears in the app list, I want to leave the small image set to the app logo as well just to maintain consistency.

image

The cool thing with the Cycle template is that you can select a data source which contains images that can be used in your tile. Up to 9 images will be used in the cycle tile, so if your data source contains a large number of items with images, only the first 9 images will appear. The Cycle tile will only display images when the medium or wide application tile is pinned to the Start screen. If the small tile is pinned, only the static small image appears. A preview of each tile size is displayed in the Edit page.

Flip Template

Just as with the Cycle template, you can specify the title and select the small image for your flip tile.

However, you now have the option to select a normal image. This is the image that displays on the medium sized flip tile. Since the Flip template creates a tile that “flips” from front to back, you now have the ability to define a title for the back tile display, as well as an image. Just as with the Cycle template, a preview of all 3 tile sizes are displayed in the template, which refreshes to reflect any changes as you are editing the template.

image

 

Iconic Template

The Icon template provides the option to specify the title that will display at the bottom of the app tile. However, you only have one image option, which is indicated as the icon image. This image will display within all 3 sizes of your tile. You also have the option to specify 3 separate lines of text that will display when the Wide tile is pinned to the Start screen.

image

Once you have decided on a tile template, customize it, save your changes, then click the Next button in the Tiles tab to continue on.

 

Splash & Lock Screen

The final step in configuring the style of your app is selecting images for the application’s splash screen and lock screen.

A splash screen image is a static image that appears when your app is loading. It usually appears for a second or two when the app is launched.

A lock screen image is a static image that displays when the device is locked. A user must choose your application as the lock screen provider. In doing so, the lock screen image you selected for your application will be used. Be sure that both the splash screen and lock screen images reflect the nature of your application.

To select an image for the splash screen, select the “+” button within the Splash Screen Background section. Selecting the image itself will only cause the image to display in the app preview.

image

Once you select the “+” button to select an image, you will be prompted to choose an image resource, which will give you the option to select an image from your computer, your SkyDrive account, or an App Studio resource.

If you choose to use an App Studio resource, you will notice that your resource options are different based on the type of image you are selecting an image for, as shown in the two screen shots below.

Selecting a splash screen image from App Studio resources:

image

Selecting a lock screen image from App Studio resources:

image

When you have decided on the splash screen and lock screen images for your app, you can select each image in the Splash & Lock tab to have the images display in the app preview at the right. If you are happy with the images you selected, click Next to finish configuring your app’s style.

To Be Continued (yet again)…

In this post, you learned:

  • - how to edit a Collections Data Source, by adding, deleting, and editing items within the collection
  • - how to delete a section from your app,
  • - how to delete a data source that is no longer in use,
  • - how to edit a section page and change its layout,
  • - how to change your app’s background, foreground, accent, and app bar colors
  • - what a tile is, and the different templates available to create a tile
  • - how to select a splash screen image for your app, and
  • - how to select a lock screen image for your app

In the next post, we will move on to the final step which is generating your app and installing the app on your device! 



Creating An App With Windows Phone App Studio – Part 1

In the last blog post, we went through the steps to get registered for Windows Phone App Studio. Now we can move on, and talk about how to create an app without having to enter a single line of code!

Login to App Studio

In order to access your App Studio account, you will need to login with the credentials that were used when you registered your account for the first time. To login to App Studio:

1. Go to http://apps.windowsstore.com/

2. Click the Start Building button

3. Login with your Microsoft Live ID credentials

Create Your Masterpiece

Once you are logged in, you will be redirected to your App Studio Dashboard. Click Create link in your Dashboard to create a new app.

image

Template Selection

Upon clicking the Create link, you should see the following screen:

image

As you can see, you have the option to create an empty app or an app from a template. An empty app simply allows you to create a new app from scratch. If you are new to App Studio and to Windows Phone development, I recommend that you create a few apps from the different templates available to become familiar with the layouts and features that App Studio provides, then move on to creating apps from scratch! After all, there’s no limit to the number of apps you can create!

If you’re not sure which template you would like to use, simply click on each template to view more information about it along with sample preview screens, as shown below.

image

Once you have decided on a template, click the Create App button in the template preview window. This will redirect you to the App Designer with your selected template loaded in view.

App Information

The first step in the designer requires you to enter information about your app including title, description, and a default language.

image

Notice that you have an app preview on the right side of the screen, which shows you how your app will look on a Windows Phone device. When you change your app’s title, and tab off the field, notice that the title in the preview changes.

Note that changing the text in the Description field does not affect the preview of your app’s info page. This is because the description is the information about your app that appears in the About page in your app, which you will be able to access when you install the app on your device. Try to keep it short and sweet (maximum of 255 characters) to ensure that your description is not cut off in the About page.

To change the logo, simply click on the image that appears as the current Logo image in the top left corner of the screen. This will provide you with the option to select an image from your computer, your SkyDrive account, or use an App Studio resource image:

image

If you choose to use your own image, you must ensure the logo is 160 pixels in both width and height.

For this walkthrough, I’m making an app based on my hometown of Leamington, Ontario. Here’s what I’ve entered for my app information:

image

I’ve changed the logo to a tomato because Leamington, Ontario is known as the Tomato Capital of Canada. I made this logo using Syncfusion’s Metro Studio app.

Once you are happy with the app information you have entered for your new super awesome app, click the Next button at the bottom of the page.

Configure App Content

Now it is time to modify the default sections and data that were generated for your app.

The first thing you will notice is that there are a set of Data Sources and a set of Application Sections that were generated by the template you selected (this will vary across templates). For the My City template, I have 5 data sources that were generated for me.

Sidebar #1: What the heck is a Data Source?

A data source is the thing that will provide content to your app. In App Studio, a data source can be an HTML page, a collection of items (which you will create and we will see later), an RSS feed, a Flickr feed, a YouTube feed, or a Bing search. You can tell which data sources are being used simply by the icon that represents the data source:

image

Sidebar #2: What are Application Sections?

Application Sections are the sections in your app with the first one in the list being the default section. The default section is the page that your app will open up on when first loaded. From there you will be able to navigate to other sections of your app. For the city template, you will navigate between sections by swiping to the left or to the right. Note that you can have up to 6 sections in your application. Also note that an application section can be 1 of 2 types:

  • Section – group of pages
  • Menu – list of links to other sections or to external web sites

Edit a Data Source

Ok, so let’s go back to App Studio and enter in data that is relevant to our app, starting with the first page. The first thing I want to do is enter some basic information about Leamington which will serve as an introduction to this lovely community. To do that, I will click on the info link under “Data Sources” or the info DataSource link in the info Application Section.

image

This will load up my Edit DataSource page. Since this Data Source is an HTML page, I have a very basic WYSYWIG (ie. What You See Is What You Get) editor available to me, in which I can enter basic text with options to bold and/or italicize the font, and maybe even throw in a list. If I want to design my HTML page with additional features (for example: specifying a font color and size), then I can choose to enter in raw HTML by selecting the button in the editor. To go back to the text view, I simply select the button again.

image

For this example, I’m just going to enter plain text, because I promised you that you wouldn’t have to enter a single line of code.

image

Once I’m happy with the text and formatting for my info page, I click the save button (ie. the checkmark button), to save my changes and return to the list of Application Sections. To cancel your changes, simply click the X button.

If you saved your changes, you will now notice that the info page displays the HTML page you created in the app preview.

Sidebar #3: The HTML Editor Glitch

Now when I enter in custom HTML to change the font color, for example, if I switch between the HTML view and the text view in the editor by toggling the button on and off, the custom HTML tags are stripped out and all is lost when in the text view.

If I stay in the raw HTML view, and save what I have entered in the editor without switching back to the text view, then my custom HTML is rendered in the preview. I’m not sure if I’m going against the grain by entering in HTML tags that are not available off the editor, or if the editor has a glitch that doesn’t recognize these additional tags and strips them out. Either way, it is possible to customize your HTML page beyond the basic bold, italics, and list buttons that are available.

If you do this, I recommend that you save a copy of your formatted HTML page to an external file so that if you ever want to revisit the editor to make changes, you can do so by copying your HTML from your external file and pasting it into the editor. Because you will notice that when you revisit this data source, your formatted HTML will be wiped out when loaded in the editor, and if you hit the Save button, that formatting will be lost forever.

Edit a Section Page

Let’s edit the info section page. Click the info link within the Section Pages in the first application section.

As you can see below, you can change the title of the page which won’t affect your app preview. This will simply be the text that is displayed if you add a link to this page from another section.

Changing the header title will change the heading that appears in the preview to the right. I am fine with “info”, so I’ll just be leaving it as is.

image

 

The Content field shows some weird text there. This is a notation to indicate that the content of your page will be retrieved from a data source. If you click on the blue icon next to the field, you will have the option to select a field from your data source where the data will be pulled from. Since this is an HTML page, I only have one option for a data source and that is the one HTML field for which we entered data. So in this case, {Data.Content} refers to that and I have no other options to select from, as shown below.

image

If you are still unsure about how this works, it will become clear as we look at the collection data source.

Next, expand the Extras section. Here you can see that you can turn on/off Windows Phone features within your app:

Text To Speech – when enabled, this feature provides a “read” button within the current page in your app. When pressed, the content from your data source will translate the text to speech. Essentially the phone will read out the information on the page.

Share Text – when enabled, this feature provides a Share link in the application bar’s menu for the current page. This link will allow you to share the text with social media feeds or by sending the text via email or messaging.

Pin To Start – when enabled, this feature provides a “pin to start” button within the current page in your app. When pressed, an application tile will be pinned to the Start screen of the device so that users can access your app simply by clicking the application tile.

image

If you have made changes to the header title, or if you have turned off the features included in the Extras section, you will notice your preview hasn’t updated to reflect your change. You can click the Preview button at the bottom of the page to refresh the app preview displayed at the right. Once doing that, you can see that the app preview reflects your changes. Your changes still aren’t saved at this point. You have the option to save your changes, if you like what you see in the app preview window. Or you can cancel your changes.

At this point, you will be back at the Configure App Content section.

To Be Continued…

We covered a lot of ground in this post. You learned:

  • - how to create a new app in App Studio,
  • - how to preview and select a template for your app,
  • - what data sources and sections are, and how they are tied together
  • - how to edit a data source
  • - how to edit a section page

In the next post, we will look at data sources in depth. In the meantime, poke around and take a look at the other data sources and sections that were generated by your template! 



Can’t Code? Build a Windows Phone 8 App Anyway!

Microsoft has provided a way for anyone -  developers, hobbyists, non-techie folks, your next door neighbour - with the ability to build a Windows Phone 8 App without installing developer tools or even knowing how to code.

Windows Phone App Studio is a web-based, app-builder tool which allows you to create a personal mobile app from a set of pre-defined templates (19 templates, at the time of this writing). You also have the option to start off with a clean slate (ie. an empty app). It allows you to easily customize your app content and style, and install the newly created app to your own Windows Phone.

If you have a Windows Phone Developer Center account, you can also publish your app to the Windows Phone Store to share with the world!

Getting Started

In order to start building apps with App Studio, you will need to register for an account:

1. Navigate to the Windows Phone App Studio site.

2. Click the Start Building button

3. Next, you will be prompted to sign into your Microsoft Live account. Enter your Live Id credentials and click Sign in.

4. You will then be prompted to allow App Studio to access your Live account information. Click Yes to continue.

GrantPermission

5. A Welcome message will be displayed, with your Live account information pre-populated in the User and Email fields. Read and accept the Windows Phone App Studio Agreement, and then click the Register button.

Register

6. Voila! You now have a Windows Phone App Studio account, and you are able to view your Dashboard, as shown below.

Dashboard

7. You can click the my profile tab to view your profile information (user name, email, and account registration date). As well, you have the option to remove your account if you no longer wish to use App Studio.

In my next post, we will walk through the steps to create an app in App Studio using one of the predefined templates!