Developing Mobile Apps with Xamarin and Azure

Transcription

1 Developing Mobile Apps with Xamarin and Azure Xamarin, a recent addition to Microsoft s list of products, allows developers to build apps using a single code base with close-to-native appearance and performance. Up to 95% of the code can be reused across all three platforms. As long as you are proficient in C# and XAML, you can build a mobile app in Xamarin. NOTE: You can read about the comparison between native vs hybrid vs Xamarin in this article. Xamarin allows the opportunity to develop apps using native UI or shared UI using Xamarin Forms. If you need to create a native app for Android or ios, you can use Xamarin.Android or Xamarin.iOS.

2 Related Reading Six Advantages of Cross-Platform Mobile Application Development Xamarin Forms Xamarin Forms is a cross-platform user interface (UI) toolkit that allows developers to easily create mobile UIs for Android, ios and Windows Mobile. To create a UI in Xamarin, you can either use a code-based approach or you can use an XAML-based approach. Here, I ll show you how to build a Xamarin app for reminders and tasks. To store the to-do items, we will create an Azure-based mobile app service, where we will consume a service and store the items in a database of choice (here, SQL Server). Let s walk through how to create a backend service for the mobile app. You will need an Azure subscription to create and host a mobile app service. Azure Mobile App Service Login to the Azure portal: go to the Azure portal. You will be redirected to the Azure portal dashboard. Click New on the top left corner of the screen.

3 Choose Web + Mobile and select Mobile App. Enter a unique name for your app service. Select your subscription, and enter a resource group name. Choose the app service plan and location. On the next screen, select Create New and enter an app service plan name. To avoid lagging, choose the location nearest to you. Choose the pricing tier based on your

4 requirements. Since this is a demo app, I have chosen the free tier. NOTE: it s important to create a resource group for each unique app service. Once you re ready to deploy the solution, you can easily remove the resource group to avoid any errors and unexpected billing. Click OK to create. After validating your request, Azure will start deploying your mobile app and you will see a notification that the deployment succeeded. (To check the status of your deployment, click the bell icon on the top right corner of the page. It will open the notifications screen.) Click Pin to Dashboard to easily access the app service in the future. Click Go to resource.

5 On the App Service, click Quickstart on the left side menu. Then choose Xamarin.Forms. On the next screen, select the alert shown below: You will need a database in order to complete this Quickstart. Click here to create one.

6 Click + Add on the second screen. This will open a new screen. Choose SQL Database as the type, click Configure required settings. Then click Create a new database. Enter a database name. Choose a target server to add the SQL database, click Create a new server. Enter a unique server name, and the server admin username and password. Choose a location nearest to you. Click Select.

7 Choose a pricing tier. In this example, we chose basic, which offers 5 DTU and is enough for development purposes. Then click Select. Choose a connection string name for connecting to the SQL database. Select OK. Choose C# as the backend language and click Download to download the Azure mobile app backend service. Choose CREATE A NEW APP and click Download in the below section to download a preconfigured Xamarin.Forms mobile application.

8 If we look at the downloaded files, it will contain Runtime and Xamarin_Forms added to the service name we created earlier. The app-name}_runtime.zip file contains the Azure mobile app sample code and appname}_xamarin_forms.zip file contains the Xamarin mobile application.

9 Extract the compressed zip folders. Open the app-name}_runtime folder and double-click the app-name}.sln solution file. The solution already contains to-do items in the application backend logic. To connect to the database, on the Azure portal dashboard page, choose the resource group name we used earlier.

10 On the next screen, choose the SQL database we created earlier. Click Connection strings from the left menu.

11 From the screen under the ADO.NET tab, copy the connection string. In Visual Studio, open web.config. Find the ConnectionStrings element and replace the existing connection string with the one copied from the Azure portal.

12 To learn more about how Entity Framework Code First Model is used to create a database and update tables, I have additional resources listed at the bottom of this blog. Now, let s publish the solution so that we can use the to-do items service from the Xamarin mobile application! From Solution Explorer, right-click on the project and from the popup menu, click publish.

13 From the publish screen, choose Microsoft Azure App Service > Select Existing and then click Publish. Log into your Microsoft account.

14 From the list, choose your created app service and click OK. Visual Studio will start publishing your app.

15 After publishing, you will be redirected to the app service in a browser. Extract the file app-name}_xamarin_forms.zip and open the appname}_xamarin_forms.sln solution file. In Visual Studio, open Solution Explorer, right click on the solution and click Restore NuGet Packages. This will take some time to pull all the required NuGet packages.

16 Right click on app-name}.android or app-name}.uwp as the startup. Build the project and run to see the output. Here are the sample outputs from both Android and UWP respectively.

17

18 Start coding in Xamarin. Happy Hacking! NEW BLOG

19 Entity Framework Code First Model In Entity Framework (EF in short), you can create database tables and use the EF Database First model generator to generate model classes. This generates the edmx file (an XML file) which defines a conceptual model, a storage model and the mapping between these models. It also holds information for the ADO.NET Entity Data Model Designer to render a model graphically. In the database first model, the database tables, any change that needs to be done (for example adding a new column) will need a new query to update the table. ALTER TABLE dbo.[user] ADD CreatedOn DateTime After the query execution, update the edmx again to reflect the changes back to the data models.

20 Now let s dive deeper into how to use EF Code First Model. For this demo, I ve created a new ASP.NET Core MVC application. If you re targeting a regular ASP.NET MVC application, you need to install Install-Package EntityFramework using the Package Manager console. If you re targeting the new ASP.NET Core MVC application, you need to install Install-Package Microsoft.EntityFrameworkCore.SqlServer using the Package Manager console. You can also use the NuGet Package Manager to install the above packages. NOTE: Both the packages support Code First Model, but also differs in the functional aspects. For the complete list of supported features, click here.

21 To keep things simple, I created a simple Context that inherits from DbContext and uses a localdb to store the data. public class SampleContext : DbContext public DbSet<Blog> Blogs get; set; } public DbSet<Post> Posts get; set; } protected override void OnConfiguring(DbContextOptionsBuilder optionsbuilder)

22 tabase=mydatabase;trusted_connection=true;"); } public class Blog public int BlogId get; set; } public string Url get; set; } public int Rating get; set; } public List<Post> Posts get; set; } } public class Post public int PostId get; set; } public string Title get; set; } public string Content get; set; } public int BlogId get; set; } public Blog Blog get; set; }

23 } } I also created two classes, Blog and Posts, with a one-to-many relationship between blog and posts. The first command that needs to be executed is to enable migrations if any code changes can be added back to the database. Add-Migration To run this command using the package manager console, use the AddMigration command followed by a word. Create a new migration with the specified name. public partial class First : Migration protected override void Up(MigrationBuilder migrationbuilder) migrationbuilder.createtable( name: "Blogs", columns: table => new BlogId = table.column<int>(type: "int", nullable: false).annotation("sqlserver:valuegenerationstrategy",

24 SqlServerValueGenerationStrategy.IdentityColumn), Rating = table.column<int>(type: "int", nullable: false), Url = table.column<string>(type: "nvarchar(max)", nullable: true) }, constraints: table => table.primarykey("pk_blogs", x => x.blogid); }); migrationbuilder.createtable( name: "Posts", columns: table => new PostId = table.column<int>(type: "int", nullable: false).annotation("sqlserver:valuegenerationstrategy", SqlServerValueGenerationStrategy.IdentityColumn), BlogId = table.column<int>(type: "int", nullable: false), Content = table.column<string>(type: nullable: true), "nvarchar(max)", Title = table.column<string>(type: "nvarchar(max)", nullable: true) },

25 constraints: table => table.primarykey("pk_posts", x => x.postid); table.foreignkey( name: "FK_Posts_Blogs_BlogId", column: x => x.blogid, principaltable: "Blogs", principalcolumn: "BlogId", ondelete: ReferentialAction.Cascade); }); migrationbuilder.createindex( name: "IX_Posts_BlogId", table: "Posts", column: "BlogId"); } protected override migrationbuilder) migrationbuilder.droptable( void Down(MigrationBuilder

26 name: "Posts"); migrationbuilder.droptable( name: "Blogs"); } } } Run the Add-migration command to generate the class above. To update the database, use the Update-database command. Then, create the database (if it doesn t exist) and create the tables.

27 Let s modify the post class and update the database. public class Post public int PostId get; set; } public string Title get; set; } public string Content get; set; } public DateTime PostedDate get; set; } public int BlogId get; set; } public Blog Blog get; set; } }

28 I added PostedDate property to the post class. Now, run the add-migration command once again to generate a new migration. public partial class second : Migration protected override void Up(MigrationBuilder migrationbuilder) migrationbuilder.addcolumn<datetime>( name: "PostedDate", table: "Posts", type: "datetime2", nullable: false, defaultvalue: new DateTime(1, DateTimeKind.Unspecified)); 1, 1, 0, 0, 0, 0, } protected override migrationbuilder) migrationbuilder.dropcolumn( name: "PostedDate", table: "Posts"); } void Down(MigrationBuilder

29 } Let s update the database using update-database command. To learn more about the code first model works under the hood, click here to watch the screencast. To learn how to use a code-first model in a team environment and learn about its limitations, watch this video.