UWP: Making Your First UWP App Using HTML And JavaScript

How to make your first UWP Application using HTML and JavaScript ?

If you have had experience in HTML and JavaScript and always wanted to dive in Application Development, you’re at the right place. With the advent of UWP(Universal Windows Platform), you can now leverage what you have already learnt and make awesome applications for Windows Desktop and Mobiles. Without even wasting even a second, let’s jump right into the cool stuff.

Let’s make our first “Hello World” UWP Application using HTML and JavaScript.

Step 1: Open Visual Studio -> Click on File -> New -> Project. Then click on JavaScript -> Windows -> Universal and select Blank App(Universal Windows) Template, Give the Name and Path as you like and hit OK as shown below.

Step 2: You should see the following structure in solution explorer.

Step 3: Now open the index.html and view the contents of it. It should look something like this:

Step 4: Put whatever you want instead of “Content goes here!” (see highlighted part in the previous step). 

Step 5: That’s it! Now run the Application on Local Machine (your PC or Laptop) or on a Windows Phone and the results will be like this:

On PC/Laptop:

On Windows Phone:

You must be wondering how the application navigates to “index.html”. Well, just open the “package.appxmanifest” and have a look at it.You can see the Start Page points to the “index.html”. Likewise you can point to a local(Within your App) Web page or even a hosted Web Page(e.g. www.yourwebsite.com) and the application will open that Web Page when it launches.

As you can see, how easy and intuitive it is to develop an App using HTML and JavaScript on the Universal Windows Platform (UWP). I encourage you to explore more on this topic and stay tuned for more articles to follow. Cheers!

You can download the source code from the following link:

Download Hello World JS App

UWP : Continuous Integration of UWP(or Windows) Apps using Jenkins

Automating the building of UWP(or Windows) Apps using Jenkins

Continuous Integration is the de-facto standard in almost every company to take care of the automated building of code, running test cases and informing the stakeholders about the status of the build. This is what should happen to UWP and Windows Apps too!! Isn't it ? But unfortunately it's not that easy to achieve. It took me around 4 days to get everything in order and I was able to achieve what the post title suggests.

That is why I decided to come up with this post that may be helpful to many engineers out there. Before we start I must mention that it's good to have a basic Idea of how to build an App using Command line. If you are really interested, it could be found here -

How to build a UWP (or Windows App) from Command Line

Now without wasting a second, let's jump into the process :

Step 1: Go to your Jenkins Portal and click on New Item on the left.  

Step 2: Select Freestyle Project and give an Item Name and then click on OK.

Step 3: This is the place where you do the configuration stuff e.g. Source Code Management, etc. Give a Description if you want.

Step 4: This is where the fun begins. Scroll down to Build and click on Add Build Step => Execute Windows Batch Command.

Step 5: This step is basically for restoring Nuget packages before the project is actually built. Enter the following in the Command box:

NuGet.exe restore "Path_To_Solution" -ConfigFile "path_To_Nuget_ConfigFile" –NoCache

 In my case it looks like:

Step 6: Again Click on Add Build Step and click on Windows PowerShell [Please Note: For this you should have PowerShell plugin for Jenkins Installed].

Step 7: This step is basically for the building of the UWP Project. Add the following code to the Windows PowerShell Command box:

#############################################################################
# Path to Msbuild tool
# $msbuild = "[Path to MsBuild.exe. See below for reference]"
$msbuild = "C:\Program Files (x86)\MSBuild\14.0\bin\MSBuild.exe"
set-alias msbuild $msbuild
# solution settings
# $sln_name = "[Path to Solution File. See below for reference]"
$sln_name = "C:\Users\Saurabh\Documents\Visual Studio 2015\Projects\uwptry\uwptry.sln"
$vs_config = "Release" 
$vs_platfom = "ARM"
 # call the build method
Write-Host "Building solution`n" -foregroundcolor Green
msbuild $sln_name /t:Build /p:Configuration=$vs_config /p:Platform=$vs_platfom /v:q /nologo
#############################################################################

This is how it looks when both the build steps are added:

Step 8: Click on Save.

Step 9: Now Click on Build Now on the left side.

Step 10: The build process starts. The build is in progress.

 Step 11: If it’s a Sunny day out and you have always done good deeds, the build is successful just like in my case J. If the ball is red in color, build failed L. 

Step 12: Click on the Build number (#1 in my case). Now click on Console output to see the build process.

Step 13: As we can see from the Console output that the build was successful. We can also infer other important information from the Console output.

You can download the above tutorial as PDF from the link below (Hosted on Google Drive):
Download Continuous Integration of UWP(or Windows) Apps using Jenkins PDF

And we are done! Hope that helps.

Thanks!

UWP : Building UWP (or Windows) App from command line

How to build a UWP (or Windows App) from Command Line

Related Links –

1) http://stackoverflow.com/questions/3892065/building-c-sharp-solutions-from-command-line-with-visual-studio-2010

2) http://stackoverflow.com/questions/498106/how-do-i-compile-a-visual-studio-project-from-the-command-line

3) http://stackoverflow.com/questions/5669765/build-visual-studio-project-through-the-command-line

First Approach: Using MSBuild  [ <path to>msbuild.exe <path to>solution/project file ]

Initial Step: Clean the Project (You can also clean the project before Rebuilding the Project)

Example:  C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319>msbuild.exe "C:\Users\Saurabh\Documents\Visual Studio 2015\Projects\SimplyNote\SimplyNote.sln" /t:Clean /p:Configuration=Release

Clean Succeeds:

Step 1: Navigate to the folder where MSBuild resides (Refer Above links for more info)

Example:  

C:\WINDOWS>cd C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319

Step 2:  Now Build the project using MSBuild

Example:

 C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319>msbuild.exe "C:\Users\Saurabh\Do

cuments\Visual Studio 2015\Projects\SimplyNote\SimplyNote.sln"

Step 3: The Build succeeds.

Step 4: Rebuilding the application (Please Note: It’s better to clean the project before Rebuilding, Refer initials step for the same)

Rebuilding Started:

Example:  C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319>msbuild.exe "C:\Users\Saurabh\Documents\Visual Studio 2015\Projects\SimplyNote\SimplyNote.sln" /t:Rebuild /p:Configuration=Release

Rebuilding Succeeded:

Other Examples:

•            MSBuild MyApp.sln /t:Rebuild /p:Configuration=Release
•             MSBuild MyApp.csproj /t:Clean /p:Configuration=Debug;TargetFrameworkVersion=v3.5
•             C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319>msbuild.exe "C:\Users\Saurabh\Documents\Visual Studio 2015\Projects\SimplyNote\SimplyNote.sln" Configuration="Release"

 Second Approach :Using devenv (requires Visual Studio installed) [ devenv /build Release Solution.sln | devenv /build Debug Solution.sln ]

Step 1: Open the Visual Studio Developer Console/prompt.

Step 2: The Visual Studio Developer console/prompt opens.

Step 3: Use the devenv command to build the Solution(.sln) file. Make sure you give proper path to the solution file.

Example:    C:\Program Files (x86)\Microsoft Visual Studio 14.0>devenv /build Release "C:\Users\Saurabh\Documents\Visual Studio 2015\Projects\SimplyNote\SimplyNote.sln"

Step 4: The Build Succeeds!!

You can download the PDF of above post for easy reference from below (Hosted on Google Drive):

Download How to build UWP(or Windows) App from Command Line PDF 

Hope that helps!!

UWP : How to create an Appx package using Visual Studio

Creating an Appx using Visual Studio 2015 for a UWP or Windows App

After reading this tutorial, you will be able to create appx packages(not for Windows store) that you can use to quickly deploy your apps on the Windows Phone or Tablets. Also you can share the appx with your friends so that they can try you App and appreciate your work.

This may sound very trivial to experienced Developers but may be a daunting task for the beginners.One may want to share his appx package with friends or to deploy the app quickly on to the phone. Hence I decided to write this article which may be useful for beginners. Let us directly jump into action.

Step 1:  Open the Solution(.sln) file using Visual Studio (I am using VS 2015 Professional).

Step 2: Build the project (Don't forget to select "Release" and "ARM" or as you require).

Step 3: Build Succeeded.

Step 4: Right click on the project. Go to Store => Create App Packages.

Step 5: The prompt asks whether you are making appx for store. Select NO and click Next.

Step 6: Select the output location for appx and select the type of appx you want.

Step 7: Package Creation completed. Launch Windows Certificaton Kit (If required).

Step 8: Go to the Output folder that you had mentioned and see the packages that were created.

Step 9: Use the appx as you want e.g. copy it to a windows phone and install it.

You can download the above tutorial as PDF from the following link (Hosted on Google Drive):
Download How to create Appx using Visual Studio PDF

Hope that helps !!

UWP : How to detect current system language on Windows Phone

How to detect the current language in a UWP App

If you are making yet another awesome app and want to make it big at the global level, your App has to support multiple languages or has to support Localization as said by many. You can't target a global audience if you don't take care of their local language. But to do so you should be able to detect the language on the device and then only you can show relevant content in that specific language. This post analyzes how the language feature behaves in a Windows 10 Phone (Lumia Device ) and how to detect the language in a UWP App.

These were my observations :

1) Currently the language is set to English  (United States).

  

2) Long tap cestina and click move up or move whatever language you want to use to the top.

As you can see , it says "Restart phone". Till you restart the phone, you won't be able to detect the changes. You can test the same by using the UWP sample project at the end of the page.

3) If you move the current language (that was being used) to the top again, then the "Restart phone"  option disappears as shown below :

  

The moral of the story is that you will be able to see everything in the new language only after you restart. I kept cestina at the top and restarted the phone as suggested. Then I could see everything in cestina (as shown below) which were earlier in English.

 I tried almost 4 approaches to get the language of the phone just to see if any way gives me the latest language that I have moved to top. Unfortunately, even if you move up any new language, each approach still gives the current language that is being used. If you restart the device then all the approaches give the new language that was set. Things will be more clear when you download the sample project and play around with it.

Let's see the code that does the magic. This is the code in my MainPage.xaml.cs which does the trick:  

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Globalization;
using Windows.Globalization.DateTimeFormatting;
using System.Globalization;


namespace LangPOC
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
       public static string lang;
        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var cultureName = new DateTimeFormatter("longdate", new[] { "US" }).ResolvedLanguage;
            textBlock.Text = cultureName.ToString();

            CultureInfo cultureInfo = CultureInfo.CurrentCulture;
            CultureInfo currentUIInfo = CultureInfo.CurrentUICulture;
            //String LanguageCode = cultureInfo.TwoLetterISOLanguageName;
            textBlock.Text = "Getting Lang from DateTimeFormatter - " + textBlock.Text + Environment.NewLine  
                             + "CultureInfo - " + cultureInfo + Environment.NewLine + 
                             "Getting the topmost lang in settings - " + lang + Environment.NewLine +
                             "CurrentUIInfo - " + currentUIInfo;
        }
    }
}

My current language is cestina and here is the output that the sample project gives: 

Now even if you move English (United States) to the top and run the sample project again, you will still get the above output i.e. cestina. But If you restart your phone and then run the sample project, you will get the language as English (United States). I have not gone into the details of the methods used in Code to get the language. Explanation of CultureInfo is all you need and is readily available. The idea was to analyze the behavior of the Windows Phone using a UWP App for language changes.  

You can download the UWP Sample App from the link given below (hosted on Google Drive) :

Download UWP Sample Project to detect System Language

Hope this article helped you.

Thanks!! 

UWP : How to check for Internet connectivity in a UWP Application

 Check for Internet connectivity in a UWP Application

Last Updated on : 28th February 2016

Hey guys !! Hope you are doing well. 

At times there are situations when you want your app to behave or respond to  Internet connectivity changes. If that is what you are looking for in case of UWP (Universal Windows Platform), you are at the right place.

Just like you, I was developing a UWP application and I got into a situation where detecting the changes in Internet connectivity and responding accordingly was crucial. Hence I started searching around and the solution wasn't too far. The class which comes to the rescue and does it all for you is :

Windows.Networking.Connectivity.NetworkInformation

I decided to play a little and hence made a simple POC(Proof of Concept) called InternetPOC that you can download and use. I have hosed in on Google Drive and you can find the link at the bottom of the page. Having said that, let us go through the steps on how to use the above class for our Internet connectivity check. All it takes are the following two steps:

Step 1 : Register the event handler for NetworkStatusChanged.

Step 2 : Write appropriate code in the handler to respond to change in Internet connectivity.

In my case, I have decided to show a dialog saying "Internet is present" when Internet connectivity is there and saying "Internet is not present" when internet is gone. I installed the app on my Windows Phone and tried turning my Wi-Fi on and off.and the results were as expected.

Case 1 : Internet is present

Case 2 : Internet is not present

Now let us go through the implementation. This is my MainPage.xaml.cs class where all the trick resides.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Networking.Connectivity;
using Windows.UI.Popups;
using System.Threading.Tasks;


namespace InternetPOC
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // Registering the handler for NetworkStatusChanged
            NetworkInformation.NetworkStatusChanged += NetworkInformation_NetworkStatusChanged;
            CheckInternetAndShowDialog();
        }

        /// <summary>
        /// NetworkStatusChangeHandler : Implementaion of what to do when Internet Connectivity changes 
        /// </summary>
        /// <param name="sender"></param>
        private void NetworkInformation_NetworkStatusChanged(object sender)
        {
            // This is what happens when Network Status Changes 
            CheckInternetAndShowDialog();
        }

        private void CheckInternetAndShowDialog()
        {
            Task.Run(async () =>
            {
                var connectionProfile = NetworkInformation.GetInternetConnectionProfile();
                bool HasInternetAccess = (connectionProfile != null &&
                                     connectionProfile.GetNetworkConnectivityLevel() ==
                                     NetworkConnectivityLevel.InternetAccess);
                if (HasInternetAccess)
                {
                    MessageDialog md = new MessageDialog("Internet is present");
                    await md.ShowAsync();
                }
                else
                {
                    MessageDialog md = new MessageDialog("Internet is not present");
                    await md.ShowAsync();
                }
            });
        }
    }
}

You can download the full project from the following link (Hosted on Google Drive):

InternetPOC Download Link

Thanks!!