Part 3 - Setting Up Client Side Project

In part three, we will setup the client side project using Visual Studio Code, Nodejs, and the Angular and Ionic Frameworks.  These will all be used to build the front end of the mobile app (e.g. buttons, textboxes, labels, images, etc…).  If you haven’t yet installed the applications in the intro post, you will need Visual Studio Code (https://code.visualstudio.com/) and Nodejs (https://nodejs.org/en/).  Once both of these are installed open a fresh instance of Visual Studio Code and you can close the Welcome window.

To ensure everything is installed properly, let’s check the version of Node Package Manager and Node itself.  Press CTRL + Shift + ~ to pull up the terminal window.  The ~ key is typically above the tab key on your keyboard.

In the terminal type the following two commands:

npm --version
node --version

You should receive the following output with versions equal to or higher than those shown.



Next we need to install the Ionic and Cordova libraries globally using the node package manager.  The Ionic framework is used to organize and run your Angular project in a browser window.  The Cordova library will be used to convert our application into native mobile applications.  To do this, run the following command to install both:

npm install -g ionic cordova

You should then see a successful installation of those packages as shown below.



Now that we have installed the prerequisites, we can proceed to creating the project.  Navigate to your project folder where the invoicing projects were created in the last post.  You should navigate here in the same terminal window so we can continue to use the command line to setup the project.  To do this, you can type “cd” and then the path of your project separated by a space.  In my case, I type:

cd C:\users\Micha\Source\Repos\Invoicing\



From here, you will run the following command to create your project.

ionic start Invoicing.Client blank

At the time this was ran, I was asked the following questions:

You are about to create an Ionic 3 app. Would you like to try Ionic 4 (beta)?  Answer No.
Integrate your new app with Cordova to target native iOS and Android? Answer Yes.
Install the free Ionic Pro SDK and connect your app? Answer No.

This should take a couple minutes to fully setup.



At this point, the project is setup.  You can close this instance of Visual Studio Code and then open a new instance.  From the Welcome screen, select the “Open folder…” link in the top left.



Navigate to and select your Invoicing.Client folder.  You should now have be able to see the files associated with this project.



You can run the blank app in a browser window by pulling up the terminal with CTRL + Shift + ~ and typing:

ionic serve



A new browser window should open.  If using Chrome as your default browser, push F12 to open up the developer console.  In the top left of the developer console, select the Toggle device toolbar icon or press CTRL + Shift + M to toggle a mobile device view.  Your browser window and app should look similar to the following.



You can now close the browser and press CTRL + C in the terminal window to prompt termination of the mobile application.  Answer Yes to terminating to end the app session.

In the next post we will start setting up our mobile application’s interface!  This is where we will see the application really take shape, so some exciting stuff to follow...

Part 2 - Setting Up Server Side Projects

Next we will setup our server side projects.  Having a well structured project folder will prevent confusion and a mess as the application grows.  It will also help guide us through our development process that I’ll get to in a future post.

Since we will be building the server side projects in ASP.NET Core, we’ll use Visual Studio 2017 to build our server side projects.  If you didn’t get a chance to install this via the Intro post, the free community edition can be downloaded from here: https://visualstudio.microsoft.com/downloads/.  You should select the ASP.NET and web development workload during installation.  We will be creating two projects to get started.  The first of which will be a project for our application to handle requests from the application and provide responses to the application.

1. Open Visual Studio 2017 and go to File –> New Project.

2. Select .NET Core on the right

3. Select ASP.NET Core Web Application in the middle.

4. This will serve as the API for your mobile app, thus in this case we’ll name the project Invoicing.API

5. Choose a location for your project.  The shorter the path, the better to avoid limitations on path length for other aspects of this project.

6. Name your solution Invoicing (without the .API)

You should now have a completed screen as follows.  Then click OK.



The next screen will allow you to pick your target framework, version, template, and other starter options.  We will pick the default setup, which should match the following screenshot.
.NET Core and ASP.NET Core 2.1 across the top API selected in the center, Configure for HTTPS should be ON, and No Authentication should be shown to the right. Then click OK.

Note: If you are missing ASP.NET Core 2.1, then you should download the SDK.  Just a warning though, if you are working in ASP.NET Core 2.0 with other projects, please use caution as this will cause conflicts.

Navigate here: https://www.microsoft.com/net/download 

Click Download .NET Core SDK and install. 

 

Repeat the above process after installation and ASP.NET Core 2.1 should now be available. 

You should now have the following project files in your Solution Explorer.



Now we’ll need our second project to handle all of the core functionality for our application.  This project will be used by the project we just created to perform any business logic, read and update the database, etc…  We’ll create this project by righting click on your Solution and click Add and select New Project.



This new project will be used for your Entity Framework, Services, Repositories, and other shared functionality used in your application.

We’ll again select .NET Core on the left, but this time select Class Library (.NET Core) in the center.

Name the project Invoicing.Core



You should now have the following project structure.



Next we’ll quickly setup the required directories for the Invoicing.Core project, but first, you can delete the default Class1.cs

Then create the following folders: Base, Data, Migrations, Models, Repositories, Services, and ViewModels.

You should now be left with the following structure



In the next post we will walk through setting up the front end project in the Angular and Ionic Frameworks using Visual Studio Code.  If you have not yet setup Visual Studio Code or Nodejs, these will be needed in the next post.  You can download Visual Studio Code and Nodejs for free from https://code.visualstudio.com/ and https://nodejs.org/en/.

Part 1 - Designing your Mobile App

Now that we have made a decision on which application we are going to build, we have to get some design work out of the way so we know what we are aiming for.  We will need some basic screens for login, adding and editing clients, and creating and viewing invoices.  I’ll use a site called draw.io to mock up some screens for the application.

For some helpful controls, after navigating to draw.io, click the “x” on the initial popup such that you are presented with a blank canvas for designing your application.  On the left nav, select More Shapes in the bottom left, then select the Bootstrap option and click Apply.



I’ll start with a simple login screen, which I’ll borrow straight from the login screen already provided in the Bootstrap tools we just added.



Next I’ll need a way to view and add clients such that we can start invoicing them.  For that, I’ll use one of the built in controls and add in some modifications for viewing client detail and a button to create a new invoice for the client.



When they click the View button, we’ll need a screen to edit the client details.  This will simply be a few text boxes to collect some information about the client.



When we click the invoice button on the client list, we’ll want to go to a new invoice screen to enter invoice details.  We’ll add a Download option such that we can obtain a PDF report and an Email button such that we can send the invoice to the client right from the app.



We’ll also need a way to review all of our invoices.  So we’ll also build an invoice listing screen.  We’ll add a view button to this list such that we can see the invoice details again.  We’ll also allow the user to change the status right from the list to keep things easy.



This should be all we need to get a good start on our app.  We can make some adjustments along the way if needed.

Intro - Building a Cross Platform Mobile Application with ASP.NET Core, Entity Framework, SQLite, Angular and Ionic on the Cloud w/ Report Creation from Start to Finish

Wow, that is quite the title… Let me explain why...

Today there are so many ways to build websites, desktop applications, and mobile applications.  While developing my first solution, I struggled through various technologies and jumped from tutorial to tutorial in order to find the right development stack.  There were various hurdles, incompatibilities, and expenses along the way.  I wanted what everyone wants: a straight forward, highly scalable, extremely portable, widely supported and robust solution at little to no cost.  I think I have found such the solution and wanted to share my findings in a clear and consolidated blog that walks you through an all encompassing solution from start to finish.

Though this tutorial will be start to finish, it will assume a strong understanding of programming and basic understanding of the various frameworks.  I will make attempts to refer to tutorials where need and explain things I had difficulty with along the way.

The first thing we need to do is to identify what kind of application we plan to make.  Finding a need for an application is a good first step in making this determination.  I currently have a need to easily invoice clients and keep track of my outstanding invoices.  I have used the free trials of many apps that do this, but they are either too complex or have monthly costs higher than I am willing to spend.  Therefore, I have decided I need an invoicing application to do this at little to no cost.  Therefore this is the application we will make and publish in this tutorial.  Maybe we’ll even get lucky and make a few bucks on ad revenue or subscriptions.

As mentioned at the start of this blog, all of the software used in this tutorial to build and run your application is more or less free.  In order to get started, you will need the below software installed on your development machine.  There will be more to install and plenty more to setup along the way, but this is a good start.

Visual Studio 2017 Community Edition - https://visualstudio.microsoft.com/downloads/

• Select the ASP.NET and web development workload during installation

Visual Studio Code - https://code.visualstudio.com/

Nodejs - https://nodejs.org/en/

SQL Server Report Builder - https://www.microsoft.com/en-us/download/details.aspx?id=53613

DB Browser for SQLite - https://sqlitebrowser.org/