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:
Android Studio
Visual Studio
Shared Requirements
There are a few things that need to be set up any way you run the Emulator.
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:
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.
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:
Well this looks nice, but what’s really happening under the hood?
Let’s break it down:
Android and iOS
You write your C# and XAML code in Visual Studio
Uno takes the code and lets you add any Xamarin specific libraries or tools
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 –
You reuse both your logic and UI that you wrote for your mobile apps.
Uno uses the Web Assembly Bootstrapper to take any .NET standard library and execute these files in the JavaScript console.
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 –
You reuse both your logic and UI that you wrote for your mobile apps and Web Assembly Apps.
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!
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:
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
Android
Web
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?
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?
Support for MacOS or Linux.
More features from UWP API
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
Very rarely, if ever, do we come across a situation in programming where an entire application relies on isolated database tables that do not have share data between each other. So, then, how do you use Entity Framework to help these tables communicate?
Solution: Join Tables
There are several relationship types your Entity Framework Entities can have with each other.
One-to-One
One-to-Many
Many-to-Many
One-to-One can be handled simply by using a foreign key. For simplicity sake, let’s say we have a Dog class and an Adopter class. A dog can only have one adopter and an adopter can only adopt one dog. Here is what the class setup looks like:
Dog Class:
public class Dog
{
public string Id { get; set; }
public string Name { get; set; }
public virtual Adopter Adopter {get; set}
}
Adopter Class:
public class Adopter
{
public string Id { get; set; }
public string Name { get; set; }
public string DogId {get; set;}
public virtual Dog Dog {get; set}
}
When this is compiled by Entity Framework, the Id of the Dog with be placed in the virtual Dog column of the Adopter table and the Id of the Adopter will be placed in the virtual Adopter column of the Dog table. And that’s it. Simple.
For a One-to-Many relationship, let’s say an Adopter can adopt multiple dogs (as it should be), but a dog can still only have one Adopter.
This is what the class setup will look like:
Dog Class:
public class Dog
{
public string Id { get; set; }
public string Name { get; set; }
public virtual Adopter Adopter {get; set}
}
Adopter Class:
public class Adopter
{
public string Id { get; set; }
public string Name { get; set; }
public string DogId {get; set;}
public virtual ICollection Dogs {get; set;}
}
Here, the Dog Class stays the same since it can still only have one Adopter. However, the Adopter class looks a little different. Instead of a single foreign key, we have a collection of Dogs. In the database this looks like a list of Dog Ids.
Finally, we have the Many-to-Many relationship. In this situation, a Dog can have many Adopters and and Adopter can have many Dogs. Now, following the pattern above, you may think that we would just set up a virtual collection in both the Dog and Adopter classes. This, however, is not the case. Instead, we need what is called a Binding or Join Table.
Join Tables allow Many-to-Many relationships in Entity Framework by matching the necessary data (normally an Id).
Here is what our classes will look like:
Dog Class:
public class Dog
{
public string Id { get; set; }
public string Name { get; set; }
public virtual ICollection AdoptionMember {get; set;}
}
Adopter Class:
public class Adopter
{
public string Id { get; set; }
public string Name { get; set; }
public virtual ICollection AdoptionMember {get; set;}
}
public class AdoptionMember
{
public string Id { get; set; }
public string AdoptionDate { get; set; }
public int AdoptionFee { get; set;}
public string DogId {get; set;}
public string AdopterId {get; set;}
public virtual Dog Dog { get; set; }
public virtual Adopter Adopter { get; set; }
}
Notice that there is a third class, the AdoptionMember. Both the Dog and Adopter classes will have a collection of the AdoptionMember class. The AdoptionMember class has single Foreign Keys for each the Dog and Adoption classes. The AdoptionMember class also has shared data such as the Adoption Date and the Adoption Fee for each individual adoption.
This is a very basic overview of the most common data relationship types you will run into using MVC and how to set up your data when using Entity Framework Code First method.
Welcome back! Now that we have our environment set up, this post is going to go into more detail about the MVC (Model-View-Controller) design pattern and how it helps us write clear and reusable code.
If this is the first post of the series you are reading, everything should make just as much sense to you as it would if you were following along. However, if you need help setting up your environment, feel free to check out the first two posts here and here.
Let’s dive in!
First, what is a design pattern? A Design Pattern is a commonly used solution to commonly encountered problems. The problem MVC handles, is how to separate business logic from what the end user sees. The reason I’m choosing to use MVC is because it is relatively simple to understand and implement and has a solid community around it (MVC has been around since the 70s but has been an official project type if ASP.NET for about 10 years).
Let’s break it up.
M (Model) – The model is where you hold your business logic and data.
V (View) – The view is what the end user sees and interacts with. We will be setting up our views using Razor syntax.
C (Controller) – The controller is how the model and view communicate and decides which view to render to the user.
The flow looks a little like this:
The Controller renders data from the Model to the View, deciding which view the user needs to see. The user sees the View and sends requests back to the Controller. The Controller then updates the Model. The Model accesses data from the database and sends the data back to the Controller that sends the data up to the View for the user.
Here is a way to visualize:
Let’s walk through an example using our handy Dog class.
First, let’s create out Model.
We set up our dog class in Part 2 and it looked a little like this:
namespace RescueShare.Models
{
public class Dog
{
public string ID { get; set; }
public string Name { get; set; }
public string Breed { get; set;}
}
}
This class is going to be our Model (conveniently positioned in the Models folder). Notice we have our 3 properties. We could also add some basic functions but we’ll leave it at the properties for now.
Next up is our Controller.
You should already have a “Controllers” folder if you’ve installed MVC as discussed in Part 1 but if not, go ahead and create a folder under your solution called “Controllers”.
Right click on this folder and hit Add -> Controller .
Select MVC Controller with Views…
On the next screen, we are going to tell the Controller which Model we want it to be tied to. In this example, we will be using the Dogs Model:
It will also ask for your DbContext and what you want to name the Controller. Naming convention for Controllers is [Model] + ‘s’. So, since our Model is called “Dog”, our Controller will be called “Dogs”.
And, create!
Take a minute to look around at what just got created:
Brand new Controller class with several built in HTTP requests
A new Views folder named after our model with 5 built in Views (Create, Edit, Delete, Details, Index)
Click into one of the Views, your Model is already wired up and looks like this:
@model RescueShare.Models.Dog
Woo! Now we have used the MVC design pattern!
Now we’ll walk through how these parts interact with the user.
On our Create Dog page
we see our Name and Breed fields. The Controller grabs these from the Model then displays them to the View. If we remove either of those fields from the Model and refresh, the Controller will see that change and update the View.
Now, we can enter some values into the fields. Once saved, the Controller will take these values and bring them to the Model. The Model checks to see if it needs to do anything with these values and if not, stores them in the database.
Here are the 3 main files interacting on this page using MVC:
If you’re just jumping into this post, make sure to catch up on the current state of the RescueShare project here.
If you’ve already read up, let’s get started!
So, now we have the bare bones of a web app. But, how are we going to save and access data? We need to set up a database.
I chose to use PostgreSQL as my database based on the fact that it is powerful and is being used more frequently to handle large data. You can learn more about PostgreSQL here but the quick snapshot is that PostgreSQL is an open-sourced object-relational database that uses the SQL language. This blog series does not require experience with SQL but if you’re curious, this is a great place to get comfortable with the basics.
Note: I am going to walk through the steps to download Windows x86-64 Version 11.3, but there are detailed instructions on the PostgreSQL website for other operating systems and versions.
Choose the OS and version you want to work with. I will be working with this:
Click through the prompts.
Make sure you install pgAdmin.
Okay, so now we have a pretty program and a powerful database. Cool. How do we get them to work together?
In many programs, the SQL language is how your logic will communicate with the data. However, we will be using a tool called Entity Framework to make our code cleaner and our lives a little easier.
What is Entity Framework?
TLDR: An object-relational mapper that allows you to use the what you already know and love (.NET) to communicate between your logic in Visual Studio and your data in PostgreSQL (although EF can be used with several other database providers listed here).
In-depth: Read all about Entity Framework (which I highly recommend because it’s super cool) here.
How do we get Entity Framework?
Remember the NuGet Packages we installed from Part 1? Entity Framework was one of those packages.
Why Entity Framework?
EF lets us use the Code First method which basically means we can build our database using classes rather than SQL queries. This allows us to organize our code in a more Object Oriented style and maintain a sleek and easy to-read-look.
Convinced?
Let’s get started.
First, it’s important to understand the basics of EF. There are several types in EF, most importantly being the DbContext. The DbContext communicates with Models to “write” and execute queries. Any tables you want to have in your database will be defined in the DbConext using this syntax:
public DbSet Dogs { get; set; }
public DbSet Shelters { get; set; }
public DbSet Volunteers { get; set; }
This will look for a corresponding Model. The model is where you will define the columns for your table as properties and it looks a little like this:
namespace RescueShare.Models
{
public class Dog
{
public string ID { get; set; }
public string Name { get; set; }
public string Breed { get; set;}
}
}
You can find the DbContext in the Data folder in the Solution Explorer. The default name will be ApplicationDbContext.
You can add models in the Models folder by right clicking on the folder and clicking Add > Class
Remember, every time you add a new model you want to be a table, you must add it to the DbConext.
We’ll talk more later about what these Model files will contain, but for now, just add the properties you want to see as columns in your table.
Now we know how to create tables using Entity Framework. Great!
But how do we actually add them to our database?
First, let’s take a look at what our database already has.
Log in to pgAdmin if you haven’t already (this was installed with PostgreSQL and you can get to it by a quick search in your downloads folder).
Once there, navigate to localhost -> Login / Group Roles
Add a name to your user (I used the name of my application) and added a password under the Definition tab.
Now you have a user! This is next part could have been done with the default postgres user, however, it’s best to create your own.
Back in Visual Studio, navigate to your startup.cs file. You should see some lines of code that look similar to this
Currently, this is telling your application to use the default database (SQL Server) but we want to tell it to use pgAdmin. So, change the line that says
options.UseSqlServer
to say…
options.UseNpgsql
On the next line of code, you can see it is grabbing something called the “DefaultConnection”. This is found in our appsettings.json file. This also holds a default value we are going to change. Right now, you should see something that looks similar to this
but we want to update it with our user we just created in pgAdmin.
Your updated version should look something like this (with your user information instead):
User ID=rescueshare;Password="";Host=localhost;Port=5432;Database=rescueshare_local;Pooling=true;
Congrats! You have now configured your application to use PostgreSQL!
Next step, getting your data actually into the database.
In the Data folder where you found the DbContext, you should have also seen a Migrations folder. A Migration is how Entity Framework wraps up all your database changes and converts them into SQL to send to PostgreSQL.
You can read more detail about Migrations in Entity Framework here
Remember the Package Manager Console from the first blog post that allowed you to add NuGet Packages? This is also where you will add migrations and update your database.
Here are the steps to adding a migration:
In the Package Manger Console, run Add-Migrations
You will be prompted to add a name. This should be something short about the changes you made. After adding a name, hit enter.
You should see something like this:
This will automatically create a class in your Migrations folder where you can see the changes that will be made.
Now that you have a migration, you need to update your database with the data.
Still in the Package Manager Console, run Update-Database.
Woo! You have just successfully moved all your database changes into your database which you can now view through pgAdmin!
That was a lot of heavy information so I highly recommend reading through some of the docs I linked throughout the post to get a deeper understanding for what we did here.
Up next, we’ll get more into the thick of it and start writing some world altering code.