In my last blog post, I created a Firebase database from the Firebase console and left it at that. In this post, I am going to set up a small UWP (Universal WIndows Platform) application which I will use to connect to that database. In the following posts, I will add to this more functionality to this application and by the end of this short series, we will have an application which can write data to and read data from Firebase.
One thing I have noticed that may be confusing to some readers is that since I wrote my last blog post, the layout of the Firebase site has changed somewhat. I will add a post that will reiterate the information in the last post with updated screenshots and I will link each post together to limit any confusion which anyone may have. I have one and only one objective in this particular post - set up a small UWP app and prepare it for use with Firebase.
Firebase Database.net
As I mentioned in my earlier posts, Firebase offers guidance in connecting to it programmatically from a number of different frameworks and languages, C# however, is not one of those. In this case, I am going to use a 3rd party library called Firebase Database.net to connect to and easily add the data to Firebase. I will add this package to the project in the next post. Firebase Database.net is an open source project by step-up-labs which provides a simple wrapper on top of the Firebase Realtime Database REST API and it works great - https://github.com/step-up-labs/firebase-database-dotnet
Creating the Project in Visual Studio 2015
Open up Visual Studio 2015 (VS) and create a new project. From the templates, select Visual C# -> Windows -> Universal and then Blank App in the list of available templates. I named the project FirebaseHeroes. In the popup window, I used the selected defaults of Target Version Build 14393 and Minimum Version Build 10586.
Creating a Data Model
The application will be used to add data to Firebase but what type of data? I'm a big fan of the Angular web framework so I'm going to base this application around the Angular Tour of Heroes tutorial. I'll talk about this in a future post hopefully, but for now I'll just take a look at the very simple data that is used in the tutorial - a Hero with an ID and a Name. ID is usually a good field to have on any database object, but I'm going to change this and use a Rating field instead. This will be fine for the purposes of my application. Let's now make a data model to represent this data. Right-click the FirebaseHeroes project in Visual Studio and add a new folder named 'Data'. In this folder, add a new class and name it Hero. Make the class public and add some properties with getters and setters to it: Key, Rating and Name, as shown in the code below: public class Hero { public string Key { get; set; } public int Rating { get; set; } public string Name { get; set; } }
I have not mentioned the Key field yet but this is important for Firebase as it is the unique identifier for the object in the Firebase database and is added to every record inserted into a Firebase database. More on this later.
Adding a Data Entry Area The first thing I want to be able to do with this application is to add some data to Firebase, data which will be input in a textbox on the main page of the application. First I'll create a simple layout in XAML and add the relevant elements to it. I'm going to keep it very simple (and ugly) to begin with as this is a prototype. After opening MainPage.xaml, I gave the existing Grid object a name, i.e. x:Name="gridRoot". I then added the needed elements to a Grid within a vertical StackPanel. This is a quick and dirty UI setup and I will change it later as needed. There are great resources and tutorials for working with XAML on MSDN and this is out of scope for my posts so I will not elaborate on any of the elements too much. For now, it contains everything needed, including an output area which is populated when the Add button is clicked. This is achieved using the event handler 'btnAdd_Tapped' which is attached to the Button. Visual Studio prompts to add this handler automatically to the MainPage.xaml.cs file if needed and this is usually a good idea. The resulting MainPage.xaml now looks like this: <Page x:Class="FirebaseHeroes.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FirebaseHeroes" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="gridRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientation="Vertical"> <Grid x:Name="gridInput" Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> <TextBox x:Name="tbInputName" PlaceholderText="Name" Grid.Column="0"/> <TextBox x:Name="tbInputRating" PlaceholderText="Rating" Grid.Column="1" InputScope="Number"/> <Button x:Name="btnAdd" Grid.Column="2" Content="Add" Tapped="btnAdd_Tapped"/> <TextBlock x:Name="tbOutput" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Center"/> </Grid> </StackPanel> </Grid> </Page> And MainPage.xaml.cs now looks like this with the event handler, which I have added some code to so that the tbOutput text box will be populated when the button is clicked: public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); }
private void btnAdd_Tapped(object sender, TappedRoutedEventArgs e) { this.tbOutput.Text = "Name: " + this.tbInputName.Text +" - Rating : " + this.tbInputRating.Text ; } }
Run The Project and Test
Now that the basic input is set up, try it out by running the project. The Main Page should open with both of the texboxes and the button visible. Enter something into each textbox and click the Add button and the text should be displayed in the output textblock. That is all that I am going to cover in this post but in the next post, hopefully, I will get to cover adding some data in to Firebase using this very simple UI.
1 Comment
|
Author
2nd Year B.Sc. Software Development Archives
December 2017
Categories |