Submitting My First UWP App to the Microsoft Store

The credit of photo used: Fortune

Getting our apps to the market is always an exciting moment. I once remembered I worked with the business co-founders until mid-night when we launched our first version of the app. There was also a time when minister and other government officers visited the launch event of our UWP app. So, yup, publishing and releasing the apps to market is a crucial knowledge to learn for developers. Today, this post will share my journey of submitting my first UWP app to the Microsoft Store.

Microsoft Store is a digital distribution platform for distributing our UWP apps which. It has a great amount of users which can be helpful in getting exposure. Once our UWP apps are ready on the platform, Windows 10 users can conveniently download and install our apps to their Windows 10 machine. In addition, organizational customers can acquire our apps to distribute internally to their organizations through the Microsoft Store for Business.

As a staff in an education institute, I can access Microsoft Store for Education too.

When we package our apps using Visual Studio and then release it to the Microsoft Store, a special capability will be added automatically. It’s called runFullTrust, a restricted capability. It allows our apps to run at the full trust permission level and to have full access to resources on the users’ machine. Hence, we need to submit our apps to the Microsoft Store and then wait for approval from Microsoft before our apps can be released on the Microsoft Store.

So, let’s start the app publish journey with me now.

Mission 1: Setup App Manifest

Before we release our app, we should make sure it works as expected on all device families that we plan to support. It’s important to test our app with the Release configuration and check that our app behaves as expected.

After that, we will proceed to configure our app manifest file Package.appxmanifest. It’s an XML file that contains the properties and settings required to create our app package.

The Display Name and Description are controlled in the resource file Resources.resw. I also set my app to support the Landscape views only.

After that, we will need to upload the product logo. Even though there are many visual assets for different sizes of tiles, icons, package logo, and splash screen, what we need to do is simply just upload one logo image which is at least 400×400 pixels. Then Visual Studio will be able to help us to generate the necessary assets.

I set the background of tile and splash screen to be the same colour as the uploaded logo because the logo file comes with a background colour.

I will skip the Capabilities, Declarations, and Content URIs tabs here because they are not relevant to our app for now.

Mission 2: Create Developer Account

Before we proceed, we need to make sure we have a Microsoft Developer account so that we can submit our UWP apps to the Microsoft Store.

We need to pay a one-time registration fee with no renewal is required. In Singapore, individual account costs SGD 24 and company account is SGD 120.

After we have logged in to the Microsoft Partner Center, we can first reserve our product name first. So we can take our time developing and publishing our apps without worrying the name will be used by other developer or company within the next three months.

Reserving a name for our app before submitting it is similar to the act of placing packets of tissue on empty tables to reserve seats while we go grab our food. (Photo Credit: The Straits Times)

Mission 3: Associate App with the Microsoft Store

After we have successfully created a developer account, we can then associate our app with the Microsoft Store in Visual Studio.

Right click our solution and we can associate our app with the Microsoft Store.

After the association is done, we will see that, in the Packaging tab of our app manifest, the app has already been signed with a trusted certificate. This allows the users to install and run our app without installing the associated app signing certificate.

Mission 4: Create the App Package

Since we have already associated the app, now when we proceed to create the app package, we will have an option to distribute to the Microsoft Store for the app directly.

Choosing the distribution method.

After that, we will need to select the architectures for our app. In order to make it runnable on most of the platforms, we should choose relevant ones.

Windows 10 devices and architectures. (Image Source: MSIX Docs)

After that, we can proceed to create the app package. The app package creation will take about 1 to 2 minutes to complete. Then we will be promoted, as shown below, to validate our app package. The validation process involves a tool called Windows App Certification Kit (WACK). It is to make sure that our app complies with Microsoft Store requirements and is ready to publish.

Certification tests for our app on Windows App Certification Kit.

This mission is successfully completed as long as the Overall Result shows “PASSED”.

Mission 5: Publish to Microsoft Store!

Before we can submit our package on the Microsoft Partner Center, there are a few information we need to prepare.

Both privacy policy and website of my app are hosted as GitHub Pages.
  • Support Contact Info: Please do not enter email as Support Contact Info, provide URL of a support page of the app instead. I received many spam mails after using my email for this field. Haha.
If email is used as Support Contact Info, web crawlers can easily retrieve our email address and spam us.
  • System Requirements: If customers are using hardware that doesn’t meet the minimum requirements, they may see a warning before they download our app.
  • Age Rating: There will be a tool to help us determine the rating of our app in each of the markets.
Age rating of our app.
  • Publish Date: By default, our app will be published to the Microsoft Store as soon as the submission passes certification. However, we can also manually publish it later or schedule the publish to a later date and time.

Once we have provided all the information above, we can proceed to upload our app package to the Packages section, as shown in the screenshot below.

If the submission is rejected, we simply replace the app package here with a new one and then resubmit the same submission.

After our submission is done, we just need to wait for the Microsoft staff to certify our app.

If our submission is rejected, we will see a report as follows under the Submission where there will be details on action to take.

Oh no, there is an uncaught exception in our app. We gonna fix it fast.

If there is no problem, we will be able to see our app on the Microsoft Store, as demonstrated in the following screenshot. The whole certification and release process is very fast to me.

I submitted the app on Sunday night (SGT) and my app was approved on Monday night (SGT) after fixing the problems reported by Microsoft and re-submitting again for one time on Monday evening (SGT).

Mission 6: Monetise App with In-app Ads

Since I am supporting open-source software, so the apps I publish are all free to the public to download. However, it would still be great if I can get financial supports from users who love my work. Hence, monetisation our app with in-app ads is one of the options.

Unfortunately, starting from 2020, the Microsoft Ad Monetization platform for UWP apps had been shut down. So, we have no choice but to look into 3rd party solutions. The service that I am using is AdsJumbo, a verified advertisement network for Windows 10, desktop apps & games because it is straightforward to use.

It is better to get our app approved on Ads Jumbo before uploading our app with in-app ads to the Microsoft Store.

The approval process on Ads Jumbo is fast to me. My app was approved on the day I submitted it on Ads Jumbo. While waiting for approval, we can also first do a test so that we can visualise the ads positioning in our app, as shown below.

We should test to see how the ads would be positioned before publishing it.

Yup, that’s all about my journey of getting my first Windows 10 UWP app on the Microsoft Store. Please download it now and let me know what you think. Thank you!

Download URL: https://www.microsoft.com/en-sg/p/lunar-ocr/9p1kxg6tvksn

Source Code: https://github.com/goh-chunlin/Lunar.OCR/tree/microsoft-store

References

Implement OCR Feature in UWP for Windows 10 and Hololens 2

I have been in the logistics and port industry for more than 3 years. I have also been asked by different business owners and managers about implementing OCR in their business solutions for more than 3 years. This is because it’s not only a challenging topic, but also a very crucial feature in their daily jobs.

For example, currently the truck drivers need to manually key in the container numbers into their systems. Sometimes, there will be human errors. Hence, they always have this question about whether there is a feature in their mobile app, for example, that can extract the container number directly from merely a photo of the container.

In 2019, I gave a talk about implementing OCR technology in the logistics industry during a tech meetup in Microsoft Tokyo. At that point of time, I demoed using Microsoft Cognitive Services. Since then many things have changed. Thus, it’s now a good time to revisit this topic.

Pen and paper is still playing an important role in the logistics industry. So, can OCR help in digitalising the industry? (Image Source: Singapore .NET Developers Community YouTube Channel)

Performing OCR Locally with Tesseract

Tesseract is an open-source OCR engine currently developed and led by Ray Smith from Google. The reason why I choose Tesseract is because there is no Internet connection needed. Hence, OCR can be done quickly without the need to upload images to the cloud to process.

In 2016, Hewlett Packard Enterprise senior developer, Yoisel Melis, created a project which enables developers to use Tesseract on Windows Store Apps. However, it’s just a POC and it has not been updated for about 5 years. Fortunately, there is also a .NET wrapper for Tesseract, done by Charles Weld, available on NuGet. With that package, we now can easily implement OCR feature in our UWP apps.

Currently, I have tried out the following two features offered by Tesseract OCR engine.

  1. Reading text from the image with confidence level returned;
  2. Getting the coordinates of the image.

The following screenshot shows that Tesseract is able to retrieve the container number out from a photo of a container.

Only the “45G1” is misread as “4561”m as highlighted by the orange rectangle. The main container number is correctly retrieved from the photo.

Generally, Tesseract is also good at recognizing multiple fonts. However, sometimes we do need to train it based on certain font to improve the accuracy of text recognition. To do so, Bogusław Zaręba has written a very detailed tutorial on how to do it, so I won’t repeat the steps here.

Tesseract can also work with multiple languages. To recognise different languages, we simply need to download the corresponding language data files for Tesseract 4 and add them to our UWP project. The following screenshot shows the Chinese text that Tesseract can extract from a screenshot of a Chinese game. The OCR engine performs better on images with lesser noise, so in this case, some Chinese words are not recognised.

Many Chinese words are still not recognised.

So, how about doing OCR with Azure Cognitive Services? Will it perform better than Tesseract?

Performing OCR on Microsoft Azure

On Azure, Computer Vision is able to analyse content in images and video. Similar as Tesseract, Azure Computer Vision can also extract printed text written in different languages and styles from images. It currently also offers free instance which allows us to have 5,000 free transactions per month. Hence, if you would like to try out the Computer Vision APIs, you can start with the free tier.

So, let’s see how well Azure OCR engine can recognise the container number shown on the container image above.

Our UWP app can run on the Hololens 2 Emulator.

As shown in the screenshot above, not only the container number, but also the text “45G1” is correctly retrieved by the Computer Vision OCR API. The only downside of the API is that we need to upload the photo to the cloud first and it will then take one to two minutes to process the image.

Computer Vision OCR also can recognise non-English words, such as Korean characters, as shown in the screenshot below. So next time we can travel the world without worry with Hololens translating the local languages to us.

With Hololens, now I can know what I’m ordering in a Korean restaurant. I want 돼지갈비 (BBQ Pork)~

Conclusion

That’s all for my small little experiment on the two OCR engines, i.e. Tesseract and Azure Computer Vision. Depends on your use cases, you can further update the engine and the UWP app above to make the app works smarter in your business.

Currently I am still having problem of using Tesseract on Hololens 2 Emulator. If you know how to solve this problem, please let me know. Thanks in advance!

I have uploaded the project source code of the UWP app to GitHub, feel free to contribute to the project.

Together, we learn better.

References