Using Web App Template in App Studio to Publish Top-Music-Videos.com WP8 in 25 Steps

Microsoft’s App Studio portal allows developers to build rapid prototypes as well as full blown applications quickly and easily on any machine with a capable web browser.  This has resulted in thousands of published apps from developers around the world!  In today’s post, I am going to focus on one of the many provided templates, the Web App Template.


The Web App Template started as a project on Codeplex that allows for the creation of an app experience on Windows Phone and Windows 8 by leveraging your existing website.  This approach comes with various pros and cons, namely that the more responsive design implemented in the original website the better the layout is when wrapped into an application, in addition the app requires accessibility to the internet for full functionality.  However, this can be seen as a great opportunity for developers looking to create applications which require little maintenance to render across multiple platforms i.e. Android, IOS, Windows etc.


Recently, the Web App Template was brought over as an available template in App Studio offering developers the ability to easily generate wrapped applications over existing mobile ready websites.  This can aid companies in rapidly creating a presence on the Windows ecosystem.  Using this approach, I was able to bring my mobile ready website @ http://top-music-videos.com over to the Windows Store as an app in only 25 steps!



1. A mobile ready / responsive website (It is encouraged to use only IP’s or sites that you own)

2. A free App Studio account available @ http://appstudio.windows.com

3. A Windows Store Developer Account – If you are reading this blog, I may be able to help you out with getting access, e-mail “p decarlo @ Micro soft dot com”


Step 1:

Login to App Studio, and start a new project.

When prompted to Choose your template, select the Web App Template


Step 2:

Click the Create Button



Step 3:

Note the default template which wraps http://m.microsoft.com

The fields should be fairly intuitive


Step 4:

Modify the values below:

1. App Title

2. Base Url – Note the site may render differently on a device, do not always assume it will look like the simulator on the left

3.  Message (I did not prefer the default grammar)

Then click Save


Step 5:

Select Themes from the top menu

Here you can optionally change the color of the Application Bar

Note: Other template modifications won’t render changes in the Web App Template


Step 6:

Let’s gather logos using Bing Image Search

Note: I am searching for Free to modify, share, and use commercially tagged images


Step 7:

Create a nice square logo larger

Note: It is recommended to use a large layout 400 x 400 or greater

App Studio will resize the large square image in the next step

7_TMV Logo

Step 8:

Select Tiles from the Top menu

Upload your image as the Small and Large Tile

Provide appropriate text for your tile

You may also click over to the Splash and Lock menu to modify the Splash Screen


Step 9:

Select Publish Info from the top menu

Click to modify the logo, again I used the same image from the previous step


Step 109_TMV_Logo:

Click Finish, then Generate and select the options below


Step 11:

Verify your app was successfully generated


Step 12:

Head to the Windows Store Dev Center

Select Dashboard


Step 13:

Select Windows Phone Store


Step 14:

Select Submit App


Step 15:

Select App Info


Step 16:

Reserve your App Name

Make sure this app matches the name given to your app in App Studio

If the name is unavailable, find one that is and regenerate your app in App Studio using the new name

Scroll down and select the appropriate categories and distribution options for your app


Step 17:

Head back over to your generated App Studio App and Download the publish package

Here you can also test your app by side-loading using the Installable Packages QR code

More information on these features can be found by clicking “How to”


Step 18:

Note the location of the downloaded publish package


Step 19:

Locate your downloaded publish package



Step 20:

Extract the .XAP file within


Step 21:

Head to Upload and Describe your packages in the Windows Phone Store


Step 22:

Click Add new and select your extracted .XAP file from the previous steps


Step 23:

Add the necessary description and keyword info

In addition you will want to provide the necessary images

I resized my logo used for the live tiles in order to create the 300×300 App Tile Icon

I used the Snipping Tool to grab screenshots from the App Studio previewer and resized to 1280×800

You could also obtain screenshots by sideloading your package into the emulator if you have the WP8 SDK installed


Step 24:

Click Review and Submit


Step 25:

Note the summary of your app submission

If everything looks good, click Submit




Download the published app!



Adblock for Buffalo WHR-G54 running DD-WRT

You can install and run adblock on your devices at home and create an ad-free experience for users of those devices, or you can block ads at the router level and block ads for every device on your network.  Using a WHR-G54 router flashed with DD-WRT I was able to implement such a solution in bash that executes on the router during boot.  As would be expected, this consists of hacks upon hacks upon hacks.

High-level overview:  Create script and house in ram, call script to download and parse adblock list to hostsfile, append hosts in hostsfile to dnsmasq config, restart web portal on port 81, redirect port 80 traffic to gateway ip to webserver on port 81 via firewall rules so things appear vanilla, download pixelserv from remote location, store in ram and initiate on current ip block ending in 254, then deploy cron job to refresh adblock list during router uptime every Friday at 11:45 PM.

To install simply copy and paste the script below into  the window  @ Administration=>Command and click “Save Startup”


Get the script @ Github



2nd Annual Houston Hackathon nets Honorable Mention for Team Awesome

Mayor of Houston

This year marked the 2nd annual Houston Hackathon held at the Houston Technology Center in Downtown Houston.  This year’s event pitted 18 teams against each other to brainstorm up and prototype a technological innovation which benefits the city for the chance to pitch the idea to mayor Annise Parker.  Patrick Wolf, Jesus Hernandez, Thomas Garza, and I formed a group unofficially titled “Team Awesome” to create a concept around the XPlatformCloudKit.  At first, we utilized the framework to consume Police Report data as participants were encouraged to used data repos from the city’s open data initiative.  However, due to the agility of the XPCK framework, we found ourselves with a complete and published project after approximately 6 hours!  We quickly shifted our approach to pitch the ease with which we were to able create a polished application as a pitch to encourage development amongst the community.  Using our app HPD Reports as a proof of concept, we showed the mayor that we could enable the consumption of a variety of data.  This posed a great opportunity to “appify” even more open data repos and even educate the community on how to do so!  At the end of the day, we wound up winning an honorable mention and got an excellent “Winner” banner placed on our Challenge Post submission.

Also awesome, was the fact that our teammate Patrick Wolf’s son’s team won the “Student Challenge” for their not one, but three websites that they created to better service citizens of Houston.  These included a Biking trail service, an HISD lunch menu, and Houston Hackathon promo site!

View the official Challenge Post submission for HPD Reports:


HPD Reports

Download the HPD Reports App @ http://hpdreports.azurewebsites.net/

mayor parker selfie

So much fun!  We even got to meet Mayor Annise Parker!


Workaround for “You’ve reached your MYSQL quota” with WordPress WebSite Deploy on Microsoft Azure

Normally to create a new WordPress site on Azure you would Click => New => Compute => Website => From Gallery => WordPress. Except, this doesn’t work if you already have an existing WordPress site on Azure because the MYSql provider “ClearDB” limits you to one SQL instance. In the final step, you may encounter the following message:


But… you can create a new one and attach it to your site by following these instructions:

1. Select your existing website from the left panel in the Azure Portal


2. Click “Dashboard”


3. Scroll down to “Linked Resources” and click the resource in blue


4. This brings you into your associated “ClearDB” account, click “Dashboard”


5. Click “Create a new Database”


6. Select the free “Mercury” instance


7. Choose the Primary region to deploy your database (you likely want this match the region you intend to deploy your Azure Website)


8. Click “Create my free Database”


9. Take note of the name of your newly created database


10. Back in Azure, create your new WordPress site from New => Compute => Website => From Gallery => WordPress and in step 3, select to “Use an existing MYSQL Database” and create a new WebScale Group in the same region as the Database that was created in step 7


All you have to do now is select your newly created database (name given in step 9) and you are good to go with using your new site against a new ClearDB database instance! Check the “ClearDB terms” box in the final step and notice the check mark is enabled and you can now deply your new WordPress site!


Claim Your Industry-Leading Tools for Windows 8 and Windows Phone Today

Secure the future with Telerik tools for Windows Universal Apps

To support Microsoft and the Microsoft developer community, Telerik is giving away their best tools for building Windows 8 and Windows Phone apps. Get yours before the end of TechEd 2014 — no strings attached.

Click to claim your License now!

And here’s the best part: When Telerik tools for building Windows Universal Apps is officially launched, they will automatically upgrade all license holders of Telerik UI for Windows 8 and UI for Windows Phone.

Win an Xbox One Titanfall Editon via DreamSpark (for students)

Do you live to code?

  • Activate your DreamSpark benefits!
  • Download Visual Studio Pro 2013 FOR FREE
  • Qualify to win an Xbox One Titanfall Edition



Download Visual Studio Professional 2013 FOR FREE and enter a chance to win an Xbox One Titanfall Edition!

By using Visual Studio Professional 2013, you can deliver quality applications on Windows, Office, Windows Phone, the web, or the cloud. When you combine it with Windows 8.1, you’ll be able to build Windows Store apps. It’s a great way to be prepared for that summer internship, or for your new job after graduation. Best of all, it’s FREE to download as a DreamSpark member.

Go here to learn how you can earn a chance to win 1 of 14 Xbox One Titanfall editions. Act fast – the offer ends June 15th!

URL: https://build.windowsstore.com/dreamspark/

Windows Phone 8.1 Jump Start for Developers Announced

Microsoft Virtual Academy has just announced this year’s Windows Phone Jump Start training for developers!

Building Apps for Windows Phone 8.1 Jump Start will be held on 29th, 30th April and extend onto the morning of May 1st:
“If you’re an app developer who wants to design and build Windows Phone 8.1 apps using XAML and C#, don’t miss this exciting event. The two-and-a-half day, demo-rich course, taught by experts who have years of experience developing (and writing about the process), focuses on how to create apps for Windows Phone 8.1 in Visual Studio and how to create universal app projects that share a high percentage of code and that target both Windows and Windows Phone.”

If you are unable to make the live event, you can catch all of the content at your leisure as the videos will be posted to Channel 9.

The Jump Start course is comprised of four sections:

Section 1: Introduction

· Session 1: Introduction to Windows Phone 8.1 (50 minutes)
Overview of the Windows Phone 8.1 developer platform, including guidance on the choices of app framework now available.

Section 2: Building Windows Runtime Apps using XAML and C#

Sessions that show how to build phone apps using WinRT XAML

· Session 2: Getting Started Building Windows Runtime Apps (50 minutes)
Fundamentals of building a WinRT XAML app for a Phone target, introducing the controls, layout, styles and theme resources, AppBar, StatusBar.

· Session 3: Page Navigation and Data Binding (25 minutes)
Navigating between pages in a Windows Runtime app, page caching and data binding

· Session 4: Lists and List Items (50 minutes)
Programming Lists, formatting list items and handling long or complex lists effectively

· Session 5: Windows Runtime App Page Layout Controls (25 minutes)
Pivot, Hub and Single Page layouts.

· Session 6: Adapting UI for Different Screens (25 minutes)
Explain the new layout system, and how to ensure your UI adapts to different phone screen sizes and orientations.

· Session 7: Windows Runtime App Lifecycle (25 minutes)
Explain the ways apps can be started, terminated and resumed.

· Session 8: Localization and Globalization in Windows Runtime Apps (25 minutes)
Making your app world-ready

Section 3: Programming Windows Runtime Platform Features (Windows Runtime XAML and Silverlight 8.1)

Programming platform features in Windows Phone 8.1 apps from either Windows Runtime Apps or Windows Phone Silverlight Apps

· Session 9: Data Storage, Backup and Roaming (50 minutes)
All about storing data, backing app data up to the cloud and roaming data across devices

· Session 10: Contracts and Sharing Files and Data (50 minutes)
Share contract, FileOpenPicker/FileSavePicker, File & Uri associations

[Day 2]

· Session 11: Background Tasks (25 minutes)
How to run code in the background

· Session 12: Maps, Geolocation and Geofencing (25 minutes)
Maps, Location and GeoFencing

· Session 13: Networking, Mobile Services and Authentication (50 minutes)
Networking fundamentals. Includes Background Transfer Service and Web Authentication Broker

· Session 14: Tiles, badges and toasts and Notification Center (50 minutes)
Tiles and toasts and Notification Center

· Session 15: Sensors and Proximity: NFC and Bluetooth (25 minutes)
Sensors, NFC and Bluetooth

· Session 16: Contacts and Calendar (25 minutes)
WinRT APIs for Contacts and Calendar, plus new capabilities (available on phone only) for Wallet-aware apps

· Session 17: Camera, Media, Audio and Speech (50 minutes)
Working with the camera, media and video editing

· Session 18: Enterprise LOB Apps (50 minutes)
All the new features aimed at Enterprise LOB and MDDM

· Session 19: SQLite Database (25 minutes)
How to program SQLite

· Session 20: VS Tooling and Memory Profiling (25 minutes)
Introduction to the many tools built into Visual Studio to help you develop Windows apps

[Day 3]

· Session 21: App Packaging and Publication (50 minutes)
How to package your app and get your app published in the Store

· Session 22: Best practices: Building Universal Apps for Windows Phone and Windows (50 minutes)
Guidance for building for both

Section 4: Upgrading Windows Phone Silverlight 8.0 apps to Silverlight 8.1

Programming new platform features from a Silverlight app

· Session 23: Upgrading Windows Phone Silverlight 8.0 Apps to Silverlight 8.1 (50 minutes)
Recap on why you would use Silverlight, and explanation of what issues must be considered when upgrading to Silverlight 8.1. Topics include behavioural changes introduced by the quirks API, Lifecycle changes as FAR is now the only mode of reactivation, implementing share contract and using the FileOpenPicker/FileSavePicker, Web Authentication Broker, moving from MPNS to WNS, background agents alongside background tasks.

App Builder Rewards – 28 days of Devices!

I am pleased to share the “28 Days of Devices” offer available now through February 28 as part of one of the many cool quests going on in the App Builder Rewards Program.

If you aren’t familiar with App Builder Rewards, here’s how it works:

 For a limited time, you can earn points for completing quests, such as coding apps, attending events, and, of course, publishing your apps to the Windows Store. Cash in your points to get cool stuff, like Xbox games, a Windows Store developer account, or a copy of Windows 8. If you’re ready to code, App Builder has everything you need to create a killer app and get it in the store. So what are you waiting for? Start building – and earning – today!

Okay, that has been the deal since App Builder Rewards launched back in October.  Now, in addition to receiving 5,000 points for each published app entry, a new promotion has launched where App Builder Rewards will be giving away 28 Dell Venue 8 Pro tablet devices in daily drawings during the month of February.  To get your entry, simple submit an app between now and the  February 28 deadline and promote it to reach a minimum of 100 downloads.  In most cases, reaching 100 downloads is not too difficult but the earlier it is achieved, the more chances you have to win!  To help fast track your app to success and achieve those downloads faster, you can take advantage of the App Promotion Kit to boost your app’s visibility in the Windows marketplace.

Here’s how it works:

Enter your Windows Store apps to the Apps Quest.
If your app has less than 100 downloads when you complete the Quest between January 21st and February 28th, you’ll get a $15 Windows Store gift card.**
Use the App Promotion Kit, Windows Store gift card and AdDuplex advertising impressions to reach 100 downloads before the end of February and earn your chance to win one of 28 devices.

Want to increase your odds?
The more apps that get 100 downloads by Feb. 28th, the more App Builder Rewards points and sweepstakes entries you’ll receive – and the earlier your entry qualifies, the more chances you’ll have to win one of our daily device giveaways!

28 Days of Devices Sweepstake Terms and Conditions

Add Pubcenter Ads to App Studio Apps

App Studio is an awesome web-interface for creating fully functional Windows Phone 8 apps.  It has support for displaying a variety of content from various mechanisms is multiple stylized ways.  It is similar to XPCK, but affords you the ability to develop and create a store publishable .xap with nothing more than a web browser!

For those wishing to add Pubcenter Ads to an App Studio app, this walkthrough will help you get started.  There isn’t a one-size fits all solution, as the source code generated by App Studio is dependent on the template you select and the features you add to it.  This post will help you determine how to find the proper place to insert your Pubcenter Ad Control.

First you will want to download your project source code from App Studio and open it in Visual Studio:


Notice in my app I have the following in my View folder:


When I build the app, I am greeted with:


So, going of the previous list of Views, I assume that if I want an ad on this page, my best guess would be \Views\start_Menu.xaml

Next, I open this file in Visual Studio:


I see errors, but the XAML is rendering properly, so I simply ignore them.

Next, I add a row to the LayoutRoot grid and create a text box in the new row:

    <Grid x:Name="LayoutRoot">
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
        <TextBlock Text="test" Grid.Row="1"/>

We can see that it renders properly in the design view:


From here,  follow the instructions @ http://msdn.microsoft.com/en-us/library/advertising-mobile-windows-phone-8-adcontrol-walkthrough-api(v=msads.20).aspx and implement an AdControl in place of the TextBlock and you should be good to go!

Parse Phone numbers to clickable links in WP8 WebView

You’ve got a Windows Phone 8 app and you want to initiate a phone call from a number embedded in a Web View.  In Windows 8, this just works, literally put a phone number in your rendered html and the WebView will detect it and make it clickable.  However, on Windows Phone 8 you will find that your phone number just renders as regular text.

At first, I attempted doing this the easy way by using a telephone protocol link in your html as mentioned on David Walsh’ blog post on the matter.

But… it seems like the protocol trick just isn’t working, it may be possible that we can inject something to turn on built-in “data detectors” but I can’t figure it out, so let’s make something we know can work.

Given: We can make a phone call in C# and WebView controls can allow us to call JS that can externally notify a method in C#.  So let’s embed a button that when clicked calls out to the C# which in turn will initiate a phone call!

But let’s do this a cool way and in effect, create our own data detector since we don’t get the luxury of having one automatically like in Windows 8.   Let’s also make it configurable, and why not put it in the main XPCK branch in case someone else wants to use this feature in an XPCK app.

In essence, we will create something technically referred to as a shim: http://en.wikipedia.org/wiki/Shim_(computing)

First we set the ID_CAP_PHONEDIALER capability to true in WMAppmanifest.xml, otherwise we won’t be able to initiate a call as this requires elevated permissions.


Then create a JS function to detect phone numbers and turn those into buttons with a method that calls out to C#, here is a JSFiddle I created: http://jsfiddle.net/JVsM4/252/

It simulates what we want to do but….

Note: To actually call out to C# requires a slight modification:

First we must create a scriptNotify event and enable script execution on the WebView control

And in our JS, change alert() to window.external.notify(), because whenever window.external.notify is called, it will enter the method set to execute off of the scriptNotify event and pass along any parameter it may have as a single string.

So we encode this parameter with a known prefix (launchPhoneCall: ) and intercept the parameter in C#, parsing out the 16 characters of the known prefix to yield a phone number.


Next we look at the docs for the Phone task @ http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394025(v=vs.105).aspx and create a method to perform a call on our intercepted parameter.



To be useful to XPCK we simply create a setting in AppSettings.cs and trigger all of this behavior based on that value with a simple conditional in the View.  If true, we inject the JS method created above into the rendered Item.Description, otherwise we leave it out.


You can view the specific implemtation of this feature in the following XPCK commit entry: https://github.com/winappkits/XPlatformCloudKit/commit/026788bb70111530163a5075ff4affd0168ee35d