Uncategorized

2 Ways to Run Surface Duo Emulator

Microsoft announced they will be releasing the new Surface Duo in December of 2020. The Duo runs on Android and is one of their dual-screen devices that gives users new ways to interact with their apps. It also introduces new challenges for developers to provide the optimal experience for our users. So, Microsoft has released the Surface Duo Emulator to allow developers to get a head start optimizing their apps.

In this article, we will go over 2 different ways to run the Surface Duo Emulator on Windows:

  1. Android Studio
  2. Visual Studio

Shared Requirements

There are a few things that need to be set up any way you run the Emulator.

  1. Install Android Studio
  2. Set up Android SDK Settings:

Tools > Android SDK Manager > SDK Tools

AndroidSDKRecs

Make sure all these SDK tools are installed.

3. Download Duo SDK

4. In File Explorer, navigate to the Emulator run.bat file. The default path is :

users/[USER]/SurfaceDuoEmulator/artifacts/run.bat

Open this file in any text editor and make sure the ANDROID_SDK_LOCATION is set to the location of your Android SDK. You can find your Android SDK Location here:

sdklolcation

For example, this is what the ANDROID_SDK_LOCATION path looks like for the above path:

set ANDROID_SDK_LOCATION=%LOCALAPPDATA%\Android\android-sdk

Great! Now we can start on the platform specific setup.

Android Studio

If everything above is properly configured, you can now run the emulator from the command line.

cd into the directory and run the run.bat script.

The emulator should start running!

Note: It can take a while the first time 

Visual Studio

To run the emulator using visual studio, we have a few more steps.

    1 . Open either an existing or new project with an Android head (including Uno, Xamarin, etc.) in Visual Studio 2019.

    I will be using a new Uno  project.

    2. Set up your Android SDK settings

    Tools > Android > Android SDK Manager

    Make sure you have these tools installed:

    androidsettings

    3. In order to run our app, the emulator will need to be running. Search for Duo Emulator in windows and select “Duo Emulator for Visual Studio”

    duovssearch

    4 . Select “Open”

    This will run a different run.bat script. The difference only being that the visual studio version removes the port definitions.

    5. Back in Visual Studio, you should now see the emulator as an option in your devices dropdown. It will look like this:

    build

    6. Click the big green arrow and your app will pop up in the emulator!

    deploy

There you have it! Two ways to run the Surface Duo Emulator on Windows. To learn more about developing for Dual Screen Devices, check out the docs.

Uncategorized

Uno – One Platform to Rule Them All

First, we should start off with what Uno is and why you should care.

As stated on their website, Uno is “The only platform for building native mobile, desktop and WebAssembly apps with C#, XAML from a single codebase. Open source and professionally supported.”

What does this mean?

Well if you have any experience (or not) building a mobile app and a subsequent web app, you have essentially had to build both separately, outside of potentially sharing data through an API.

Before Xamarin, you would even have had to build the iOS and Android apps separately using different languages (Swift/Objective-C and Java/Kotlin respectively). Uno introduces a way to build for iOS, Android, Web, and UWP using shared logic and UI.

This is huge.

Sharing logic between platforms has been the “easy” part for developers. Sharing UI, however, is not. There is a huge difference in UI between Android and iOS and even larger differences between web and mobile. Xamarin.Forms allows us to share UI for Android and iOS but we were still on our own for the web.

Uno enables you to write the UI once, then, using native controls, deploys native UI look and feel to each of your platforms. This means, you write the same code for a button regardless of the platform the button is for, and the user will see the native button for their platform.

How does it work?

The Uno Platform works differently depending on what you’re building.

The platform specific UI is created by taking the visual tree and rendering into what the platform supports:

iOS – UI Kit

Android – ViewGroups and Views

Web – Native controls

The logic is also deployed differently for each platform.

When building a UWP app, Uno runs on top of, well, UWP and WinUI. When building Android and iOS apps, Uno runs on top of the Xamarin Native Stack. Finally, when you’re building a Web App, Uno runs on top of WebAssembly. The mobile apps and web apps all run with Mono runtime. When it all comes together, it looks a little like this:

unodiagram

Well this looks nice, but what’s really happening under the hood?

Let’s break it down:

Android and iOS

  1. You write your C# and XAML code in Visual Studio
  2. Uno takes the code and lets you add any Xamarin specific libraries or tools
  3. Mono runtime executes the C# code

This process is essentially the same as regular Xamarin. The big difference between Xamarin and Uno comes with the ability to run the same UI on the Web.

Web Apps –

  1. You reuse both your logic and UI that you wrote for your mobile apps.
  2. Uno uses the Web Assembly Bootstrapper to take any .NET standard library and execute these files in the JavaScript console.
  3. Mono runtime then executes the code

The ability for Uno to utilize Web Assembly (which is what allows you to write your code in C# and not JavaScript) is what makes Uno so unique.

UWP –

  1. You reuse both your logic and UI that you wrote for your mobile apps and Web Assembly Apps.
  2. Your code is run through the Windows UI which does not need the Mono runtime to execute.

The big difference here is that UWP apps already have the Windows namespaces and do not need to reference the Uno.UI. The benefit Uno provides here is the ability to reuse the code you’ve already written for mobile and web.

Now that we have an idea of how this beauty works, let’s write some code!

To get started with Uno, follow their instructions here: https://platform.uno/docs/articles/get-started.html

When you create your Uno solution in Visual Studio, there is a similar feel to when you create a Xamarin.Forms solution because of the different projects created for you. Here is a look at the projects that are auto-created:

2019-10-01_1528

As you would see in a Xamarin.Forms project, there are separate projects for each platform and a single shared project. The Droid, iOS, UWP, and Wasm projects are all the same as if you had created a blank app for each, the only difference being references to the Uno UI. The magic happens in the Shared project.

Similar to the Shared project in Xamarin.Forms, this is where you will write all your shared logic and UI. Uno provides support for the MVVM, a design pattern many developers are familiar and comfortable with.

So, what does a finished product look like?

Here are examples of each platform using the “TODOS” Demo App from Uno.

iOS

iOS

Android

Android

Web

WASM

UWP

UWP

These projects all use logic and UI from the shared project. Code once, four apps.

Let’s talk debugging.

Debugging in Uno can be a bit different depending which platform you are trying to debug.

Android and iOS – For mobile, you will use the same Mono debugger you are used to using in Visual Studio, with access to all your favorite breakpoints, value changes, etc.

Web – Currently there is only support for chromium debugging, which means Chrome and Edge.

UWP – Here, the tooling comes from .NET studios which is not as efficient with the mono runtime.

Want to try out Uno but don’t want to go through the steps to get set up through Visual Studio?

Then checkout their playground!

2019-10-02_1518

The Uno Playground is a fun and easy way to look at how different items render on different platforms. They make it quick and easy to try out new styles and is great for beginners and tutorials.

What are future features we can look forward to?

  1. Support for MacOS or Linux.
  2. More features from UWP API
  3. Support for smart watches

The true beauty of Uno is that it encompasses what we as developers should all be striving to accomplish – building on top of each others’ accomplishments. We don’t need to re-create the wheel, real innovation happens when you stand on the shoulders of giants and we all move upwards.

Happy coding.

Authored by me, originally posted through freeCodeCamp