Xamarin – sets for deploying an android application

In the Android project click on Android_manifest.xml. Once you do that you can edit the “Required permissions” section.

In my project I am using the Device’s camera as well as the Camera’s internet (WIFI)

under required permission I clicked:

1) AccessCoarseLocation (Read online that this is default)

2) AccessFineLocation (Read online that this is default)

3) Camera

4) Internet

Screen Shot 2018-02-10 at 15.09.16


Once I deployed the App, I has difficulty trying to switch the App back to deployment mode. I was unable to deploy the app to my physical mobile device.



I changed both the Application and the end of the Package Name from WeActive to WeActiveApp.

However, I recommend keeping the Package name the same. Only change the Application Name. It should still deploy.


.NET Standard 2.0 and .NET Core

The .Net Standard library, think of it as an interface. A library which is generic, consisting of interfaces and classes, and is implemented differently in .Net Core and Mono framework.

When I worked in the delivery company, we created standard .net libraries which were then imported by the .NET core Application.

Unable to make work with .Net standard version 1.0 because they took out a lot of API’s which they have now put back in .Net standard version 2.0.

Net standard 2.0 can be shared amongst xamarin and asp.net web application.

Compatibility with Windows and Mac

Visual Studio for Mac Version 7.1

It is possible to work on the same project from either a Windows or a Mac.

Business Application Project

1) Jamie prefers to have control over the Servers. That way it is cheaper in terms of support because you know exactly what is going on.

2) Business Application infrastructure. For 5 companies or below it would be best to have one Server that you provide to host the Companies data. However, for more companies let say 50 then you may want to decentralise the Servers. This means that you have servers on the Client’s office space. In further detail this means that you would only have a Database server on the client’s office and then one website.


→ Limited budget, only £4000 pounds in

Balloon One Review

When a many computers connect to your server think of it that each client get’s it’s own instance of the code. The only time that Clients will have shared code is when classes or variables are marked as static. This is why I was told previously in my career history why you should never mark a class as static, however marking variables as static is fine. Making a class static makes it messy.


SQL Lite

SQL Lite is the Database Query Langauge used on Mobile phone devices, mainly iPhone and Android.

How did the Application fit together

There are three pieces to the Springboard Delivery Application.

  • The Website
  • The Webservice API
  • The Mobile Application

The Webservice API

Firstly, I had to launch the Webservice API. I did this by going into Visual Studio and pressing F5. When you do this the URLs are on-line and it it possible to access the URLS from your Mobile application. Gabor said that the Webservice is only used by the Mobile Phone. However, one reason why I am a little sceptical of that claim is because I had to run the web-service even when I was working on the website. Furthermore, I remember previously that Gabor said that the web-service was used by both the website and mobile applications.

  • Webservice must be hosted on a HTTPS server. To prevent anyone accessing the Webservice
  • In the Action method for the Webservice we have an Authentication object so we can check if the User is logged into the Application using an If statement.
  • The Webservice is the DataLayer between the Database and the Web Application.

The Website

Note that the Website, Webservice and the Mobile Application  were all built client side, on my Computer. The Database was the only thing built server side. This meant that on the server side computer. The server had a Linux/Ubuntu Operating System with MariaDB installed that’s it. We connected to the Server using Heildsql to modify and create table data.Picture

The Mobile Application

With the Mobile Application we have to synchronise it with the database so that the data we have on our mobile phones is always up to data with what we have on our Data. I remember my lead developer, create a button on the mobile phone application called synchronise which you would have to press in order to get the latest data. The reason you have to do this is because the mobile doesn’t always get Wifi signal so it can’t connect to your database through the web API.

Kendo UI

Kendo UI is very good for displaying grids of data.

Kendo UI is generated Server Side. Whenever you see:
@{ var grid = “/**/”}
this means that the code was in fact generated in the server, even though this code may indeed be located in a html file.

Later on in the code you may see this with different shaped brackets, round shaped ones as supposed to curly brackets.


This means that the code will then be outputted onto the screen.

Angular 2

NgSwitch Statement

  • Switch and If statements are two type of condition statements that exists in many programming languages. Angular 2 is no different.
  • In this section we will be focusing on ngSwitch.
  • NgSwitch is used mainly when we want to display one element and it’s children from a set of elements based on a condition

NgIf Statement

In an ng-if statement during the evaluation, as the course array length property is empty the second div in the yellow box will appear in the DOM. Whereas the div in the red box just above will not at all if the DOM.


We can also bind an ng-if statement to a div’s property. However, unlike the ng-if statement above the DOM element will still be rendered into the page even if the hidden expression evaluates to false;

Exporting components

If you have a component called component C which exists inside Module A, and you want to use component C outside module A inside Module B for instances all you have to do is export it.


In the picture above we have registered tweet.component with tweet.module. However, let’s say we want to use tweet.component outside of the tweet.module all we have to do is export the component.

Working remotely

When you commit your project to Github it is extremely important to remove the node_modules folder from your commit and add it to the .gitignore.  This is because when you pull down the code onto another machine you can run npm start which will look at your package.json file and will generate the node_modules that your project requires. All you need to ensure is that you have the package.json. You can follow these steps. If you create a .gitignore and git is already aware of your node_module folder then run the steps below:

  1. git rm -r –cached .\node_modules – Just encase it has been cached by git
  2. Git add .
  3. Git commit

Setting-up the development environment

When you commit your code to the GitHub repository, it is best practice to not commit the node_modules dependency folder. Instead you should automatically generate the node_modules folder on your client machine, by running npm start.


It is more efficient to use external templates as supposed to inline templates because your application will need to make a second request to the server to request the html file. The request will only be made the first time for the extra html file then it will be cached by  the Browser


Class binding in Angular


In the green box

In the snippet [class.Active]. The class part literally means the class selector in the CSS property, it does not refer to typescript, remember that we have class and id selectors. So the class.Active refers to the class Action, which is a selector defined below:

Note: I defined the Active class property in the file style.css which is available globally.


notice how we set the [class.Active] equal to a Boolean. This means that when the Boolean property is true, then the class Active will be applied. However, when it is false the class Active will not be applied. So the styling of the span element is dependent on the boolean value of isActive, which is property in the typescript class supporting this view. If it is true the the styling will be applied if it is false the styling won’t be applied. So have do we modify this behaviour; well through a method called, in this case, onClick().



In the Red Box

The round click with the verb click specifies a DOM action. So on click we specify that an Action will be called. This action method is onClick which is a method in our ts class. The first parameter is the trigger. The second parameter is the method that will response to the trigger in our Typescript class.

Style binding

Style binding is very similar to class binding.


The style refers to the inline style class that has a lot of properties one of them is the background color property. Which we set equal to the boolean isBack. We automatically, update the value of the isBack property through the method secondClick().


Event binding



When we click on the Hello World button we call the getClick method. We can prevent the event from bubbling further up the DOM tree with the statement $event.stopPropagation(); . Without this line then the OnDClick method would be invoked.

Two-way binding

To bind a DOM property and a component property together. The example below is one that shows Two-way binding. We bind the Value property of the input box to the title property in the app.component.ts class. We bind the value of the text box to the title property. Then we bind from the WordUpdate method to the title property.  So when we type into the text box the property field updates. This is a long way of doing two way binding.


A shorter way of doing two-way binding is the following, below: