In my last post, we went over the basics of Windows AppStudio and Bandstown API, and briefly touched on how they can be used collectively to create a Universal app that allows you to track your favourite musician or band. To prepare for this, I left you with some homework to verify you have the necessary development tools installed on your machine, compile a list of URLs that point to data feeds you will include in your app, design an app logo, and gather any other images you wish to use in your app.
With all that in place, we can pick up where we left off!
Step 3: Design the app using AppStudio
It’s time to log into Windows AppStudio to create the shell of your app, selecting a template whose style suits your fancy. If you’re not sure how to navigate the tool, step through my blog post series on AppStudio:
Creating an App with Windows Phone App Studio – Part 1
Creating an App with Windows Phone App Studio – Part 2
Creating an App with Windows Phone App Studio – Part 3
For the purpose of this blog series, I have chosen to create a fan app about Maroon 5 (oh, Adam Levine, how I love thee…let me count the ways). I decided to use the template, “My favourite band”, for its layout. Let’s take a look at what that gave me out of the box.
From the app’s dashboard, we can see that AppStudio generated everything we need to see what the app will look like. Out of the box, it created 6 default sections which correspond to the type of app you want to develop. Test data is already wired up for you with stock images for the app logo, background, splash screen, and live tiles. Now that you have a sense of how the app will flow, you can decide which sections you wish to keep, remove, and add, if you don’t like the suggested sections that were created by default.
App Logo and Title
First things first, ideally you should change the app logo to one that will represent your app. You will notice as we proceed through this post, that the app logo is used within the app, but you will need to also upload images for the application’s live tiles and application icon which will represent your app in the Windows Store. For a consistent experience, it would be nice if the app logo, tile image, and application icon all aligned by using the same image throughout, just as the template has demonstrated.
To swap out the app logo, click on the current one at the top of the page, and when prompted select your custom logo. The image can be on your local machine, in your OneDrive account, or you can select an alternate AppStudio resource. Next, in the App Title field, provide a name that describes your app. In my case, I’ve set the title to “Maroon 5 Fan Book”.
Next, we can start modifying the content.
By default, the template preloaded 6 sections: HTML, singles, albums, concerts, blog, and videos. This is just a suggestion and not a requirement in your app. The beauty here is you have the flexibility to add, remove, and reorder sections as you see fit.
In my app, I decided to remove the first 3 sections: HTML, singles, and albums. I easily can delete the HTML and singles sections without issue, but the albums section won’t allow me to delete it because it is used a data source for the Cycle tile, which is the default tile for the “My favorite band” template.
We’ll fix this once we have our other sections sorted out.
The concerts section will be used to display the concert listings that I will retrieve from the Bandsintown API. To do this, I will edit the section which will allow me to choose a different layout, and specify a data source. In this case, I like the default layout the template provided. I just need to change the data source. Within the Edit section page, I click on Data, and enter the Bandsintown request URL to retrieve the concert listings for Maroon 5: http://api.bandsintown.com/artists/Maroon5/events.json?api_version=2.0&app_id=YOUR_APP_ID
Remember that the API call must also include your own unique App Id as a query string parameter, so you will need to replace “YOUR_APP_ID” with one that you’ve come up with. With that in place, I save my changes. Notice that no data is displayed in the preview to the left. Don’t worry about that for now. We’ll revisit that later.
I perform the same steps for the blog and videos section to ensure that sections are retrieving data from Maroon 5’s blog and YouTube channel respectively. In these cases, you will notice the data is displayed as expected in the preview to the left.
So far so good?
Yes and no. I want to add one more section because 3 just doesn’t feel like enough. So I decide to add a Twitter feed to round out my app. This requires a few extra steps to ensure I register my app with Twitter, obtain the required consumer key/secret and access token/secret values, and copy them into my Twitter feed section in AppStudio.
For a detailed walkthrough on how to add a Twitter feed to your AppStudio project, check out the section, “Using The Twitter Data Source” within AppStudio’s online documentation.
The next step is to select the theme you wish to use. The Theme that the template uses by default is a custom theme with a standard stock image as the background. If you wish to use the Custom Theme with a background image, this is the time to swap out the stock image provided by the template with a custom image that represents your app. Ensure the image is your own, or one obtained under the Creative Commons License and be sure to include proper attribution.
Alternatively, you can go with the standard light or dark theme, which doesn’t require a background image. The choice is yours!
Similar to Themes, the template has selected a default tile format. In the case of the “My favorite band” template, it is the Cycle tile template that is selected by default. And as we noticed earlier, the Cycle tile template uses the albums data source to display pictures on the app’s live tile. I change this to simply use a Flip tile for simplicity.
I also needed to modify the tile title to correspond to my app title. Changing the app title didn’t automatically propagate that change to my tile. Last but not least, the tile images need to be uploaded. By default, the template provides a small tile image which is the same stock image it provided for the app logo. I will swap this out with my custom logo image, in each of the sizes it requires: Small (160X160), Normal (340X340), and Back (715X340). I can optionally choose to add a back title and some text that will be displayed on the back side of the tile.
The Tile tab also includes a section to swap out the stock images that were added for the app’s splash screen (both for Windows Phone and Windows Store) and the Windows Phone lock screen. Once I swap these images out for my own images, I save my changes, then revisit the Content tab to delete the albums section.
The final step is to include the information that will be packaged with the app and displayed in the store when it is eventually published, including app name, description, and privacy URL. You will also need to upload the image that will serve as the application icon when the app is published to the Windows Store.
At this point, you can also associate your app with the Store. This will require you to have a registered Dev Center account, and will allow you to reserve your app name in advance of publishing the app.
For details on how to publish your app to the Windows Store, refer to the Publish section within AppStudio’s online documentation.
At this point, the app is not yet ready to be published. Remember earlier on in this post, that the Bandsintown concert listings weren’t appearing as we had hoped? That’s because it will require some extra work to get it working. And it will give me the opportunity to provide some custom styling for that list, if I so choose.
Step 4: Download the source code
With the app completed as far as we can go in AppStudio, I select “Finish”, then “Generate”. In the dialog box that appears, I simply select the “Generate” button to generate the source code. Once the code is generated, I can click the link within the Download Source Code Section, “Visual Studio 2013 Universal Project …” to do exactly that.
A zip file will be downloaded containing the Visual Studio solution for my app.
To Be Continued…
Awesome! At this point, we have a functioning app that requires some minor modifications to polish it off so that it can be published to the Store with pride.
In my next post, we will explore the modifications that need to be made to the source code to get the concert listings to display properly, as well as to allow users to purchase tickets without leaving the app!
Let’s face it. We all love music. Some of us love it so much, that we track our favourite musicians waiting for concert dates to be announced and tickets to go on sale. Wouldn’t it be easier to use an app that will do that for you? Better yet, wouldn’t it be awesome if you could purchase available concert tickets for your favourite artist right from within the app?
With Windows AppStudio and the Bandsintown combined, you can easily create your own ultimate fan app with a few clicks of the mouse, and some modifications to the code.
If you’re not familiar with Windows AppStudio, it is Microsoft’s online design tool which allows you to create Universal apps through a wizard-style interface. It also allows you to generate and download the source code for the app so that you can customize it further from within Visual Studio. AppStudio is great for displaying collections of data, whether it’s an RSS feed, live Twitter stream, Facebook page posts, photos, or static data.
To learn more about how AppStudio works, check out my 3 part blog post series on using AppStudio to create a Windows Phone app:
Creating an App with Windows Phone App Studio – Part 1
Creating an App with Windows Phone App Studio – Part 2
Creating an App with Windows Phone App Studio – Part 3
AppStudio has changed since then to include more features and the ability to generate Universal apps, but the main concepts of the design tool are the same. You can check out how to use the latest features of Windows AppStudio by reading the online How-To guide.
Now that you know what AppStudio is, let’s explore what Bandsintown is all about and how it can help you create a custom fan-based app.
Bandsintown is a platform that connects fans with their favourite artists. It includes information on a multitude of artists, such as band information, concert listings, and ticket availability. Bandsintown v2 API is designed for enterprise partners with websites, media players, and/or mobile applications that are part of the Facebook platform and would like to provide their users with the ability to RSVP to and share artist's real Facebook events. Response data is available either as a JSON or XML result.
In order to use the Bandsintown v2 API, you will need to, review Bandintown’s best practices for using the API, send them a note to let them know that you will be using their API, and choose a custom Id that will serve as your unique application identifier. You will use this value each time an API call is made. Since their API returns links to an artist’s Facebook page, you will also need to ensure that you follow all Facebook policies.
Before you start designing your ultimate fan app, I recommend that the following preparations are made ahead of time to ensure that the app creation process is as smooth as possible.
Step 1: Select your favourite artist, and gather information
Decide which artist your app will feature, any images you wish to use within your app. Ensure that any image you use, if it is not your own, is made available under the Creative Commons License and proper attribution is included in your app.
You will also need to design a logo for your app. You can use Syncfusion’s MetroStudio, a free tool, to create Modern style icons.
Also, decide on which data sources you will use to load information relevant to your favourite artist within your app. For example, this could be information from the artist’s Facebook page, videos from YouTube, or photos from Flickr or Instagram. Be sure to have these links handy so that you can copy/paste them into AppStudio’s design tool when configuring the sections within your app.
Step 2: Prepare your development environment
Next, ensure you have Visual Studio 2013 (with Update 2 or higher) installed on your machine. If you don’t have Visual Studio installed, you can download the Express edition which is free. To help you through this process, check out my post, Setting up Your Development Environment in 30 minutes (or less).
To be continued…
Now that you know what your app will be focused on, and have the necessary materials at hand, creating the app will be a seamless process. In my next post, we will explore how to create the ultimate fan app using Windows AppStudio and the Bandsintown v2 API!
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.
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.
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.
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.
I 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?
I 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.
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?
Attend 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.
Establish a support team for your user group. It’s easy if you have other people to share some of the work and responsibility.
Take 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.
Automate 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.
Take 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.
Ask 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.
Always be consistent with scheduling your events. It’s far easier to establish recurring attendance if you schedule for the same time each month.
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!
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.
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.
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.
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
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!
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.
Nikolai 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?
When did you develop your very first Windows Phone app, and what was it about?
Actually, 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?
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.
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
Nikolai’s Windows Store Apps
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!
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.
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.
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.
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.
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:
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!
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!
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!
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.
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!
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.
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.
At this point, you will see a progress indicator screen as shown below.
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.
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.
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.
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).
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Selecting a lock screen image from App Studio resources:
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!