Tuesday, 2 January 2018

Single Launch Screen for iOS

When building a project for iOS in Visual Studio Tools for Apache Cordova, I noticed that the launch or splash screen was always shown in iOS devices. This is because iOS always needs a launch/splash screen and this is cannot be removed. So I read some documentation and found out that we can use a single image to be applied to all kind of iOS devices.
All we need to do is add this setting in the project's config.xml file:
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
I used the same name suggested. It may work if we use other file name but I haven't tested it. For the resolution and layout, I tried to follow the default splash.png file in the resources folder. I made my main image in the center and leave plenty amount of spaces around it, knowing that the image will be cropped significantly in some smaller resolution iOS devices. The image size I used is the same as the default image size, which is 2208 x 2208 pixels.


Tuesday, 31 October 2017

Visual Studio Tools for Apache Cordova Remote Build Node.js Version Issue

Recently when I tried to do remote build of my Visual Studio Tools for Apache Cordova application from my Visual Studio 2015 to Mac machine, I had this error message "TACO0204: Error installing taco-remote-multiplexer via npm" on my Visual Studio and "Cannot find module 'internal/fs'" on my Mac machine.

After googling, it seemed that the Node.js on the Mac machine had been upgraded for some reason. I checked the version with these commands:
node -v
I found out that the version is 8.4.0 now.

I needed to remove it and install the compatible version for my Visual Studio. So I deleted the 'npm' folder in '/usr/local/lib/node_modules/' folder by running this:
rm -rf /usr/local/lib/node_modules/npm
Then went to node.js website, downloaded and installed a version that is compatible (i.e.; version 0.12.x is the most compatible).

Thursday, 5 October 2017

Some Visual Studio 2015 Apache Cordova Project iOS Deployment Issues

Recently, I tried to deploy my Visual Studio Tools for Apache Cordova project into iOS mobile device. The project is built in Visual Studio 2015 using Cordova CLI 6.0.0. The Visual Studio is on a Windows machine. I also have a Mac laptop with XCode 8.3. After following the steps on this page https://taco.visualstudio.com/en-us/docs/ios-guide, I ran into some issues.

The first error message I received is "Remotebuild requires your projects to use cordova-ios 4.3.0 or greater with XCode 8.3. Please update your cordova-ios version".
It seemed that the iOS version of the project is less than 4.3.0 and XCode expected the version to be at least 4.3.0.
The solution:
1. on my Windows machine, went to command prompt and installed Cordova; npm install -g cordova
2. changed package.json file in the project to have the later version of iOS:
  "android": "5.1.1",
  "ios": "4.3.0"
3. then on the command prompt, went to the 'platforms' folder of the project and deleted and recreated the iOS version of the project. I ran the command; cordova platform add ios@4.3.0

After passing that, I got another error, "Severity Code Description Project File Line Suppression State Error Warning developmentTeam is missing from your build.json.".
The solution:
- added some configuration settings on my build.json file based on the information on this link https://cordova.apache.org/docs/en/latest/guide/platforms/ios/#using-flags.
So my build.json had something like this:
  "android": {
    . . .
  "ios": {
    "debug": {
      "codeSignIdentity": "iPhone Developer",
      "provisioningProfile": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      "developmentTeam": "XXXXXXXXXX",
      "packageType": "development"
    "release": { }
According to the article, codeSignIdentity should use "iPhone Developer" value for both debug and release mode. provisioningProfile is the profile that I set on Apple Developer website. The filename of the downloaded profile has the same key value. developmentTeam is the team name that is set on Apple Developer website. packageType values are either 'development', 'enterprise', 'ad-hoc', and 'app-store'.

Once this is solved, I got another error:
Severity Code Description Project File Line Suppression State
Error Error: Remote build error from the build server Build failed with error ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy' - 1

- on my Windows machine I ran; npm install -g ios-deploy.

Then another error:
No certificate matching 'iPhone Development' for team 'XXXXXXXXXX': Select a different signing certificate for CODE_SIGN_IDENTITY, a team that matches your selected certificate, or switch to automatic provisioning.
Code signing is required for product type 'Application' in SDK 'iOS 10.3'

- on the Mac computer, I went to Applications > Utilities > KeyChain Access folder and found there were more than one certificates related to the profile downloaded. This was due to a mistake I did earlier when generating provisioning profile. So I deleted the incorrect one.

Finally I got this error:
Failed to launch iOS remote for build C:\myProjectDirectory\bld\ios\Debug\buildInfo.json to :
Http 404: Error mounting developer disk image
------ Cordova tools 6.0.0 already installed.
Requesting debug on remote iOS device for buildNumber 23139 on server
Failed to Debug iOS remote for build C:\myProjectDirectory\bld\ios\Debug\buildInfo.json to :
Http 500: No devices found to debug. Please ensure that a device is connected and awake and retry.

- on my Mac machine I ran; brew upgrade libimobiledevice --HEAD

References and further details:

Thursday, 15 June 2017

Open Link on Browser in Ionic Framework

To be able to open a link in an Ionic Framework based app, we need to install InAppBrowser plugin. If you use Visual Studio Tools for Apache Cordova, you can open config.xml file and find in Plugins section.

After installing the plugin, we don’t need to pass any new module in the code function constructor. All we need to do is just to call the functions directly like:
cordova.InAppBrowser.open('http://www.google.com', '_system');
// or we can use
window.open('http://www.google.com', '_system');
_system target is used so that the link will be opened on system's web browser.

In HTML code, we can call like this:
<a href="#" onclick="window.open('https://www.google.com', '_system');">my link</a>
Don’t forget to include the ‘http://’ otherwise you will get an error like ‘Cannot display PDF (… cannot be opened).

Thursday, 9 February 2017

Ionic Modal with this Controller

Below is a simple example of using Ionic Modal with this controller (Controller As):
var vm = this;
    . . .
    . . .
    . . .

    /* modal */
    vm.showModal = function () {

    $ionicModal.fromTemplateUrl('my-modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        vm.modal = modal;

    vm.openModal = function () {

    vm.closeModal = function () {

    // Clean up the modal
    $scope.$on('$destroy', function () {

    // Execute action on hide modal
    $scope.$on('modal.hidden', function () {
        . . .

    // Execute action on remove modal
    $scope.$on('modal.removed', function () {
        . . .
Note that we still need to use $scope for particular function.

The modal template:
        <h1 class="title">My Modal title</h1>
        <button ng-click="vm.closeModal()">Close</button>

Tuesday, 8 November 2016

Quick Guide to Use Ionic Framework Side Menu

This post will guide you to quickly set side menu in Ionic Framework.

Firstly, we need to set up the routes in app.js file. In this case we have our menu template in menu.html file. We need to name the menu state (e.g. app) and then all other pages will have states with this syntax menuStateName.pageStateName. We will also need to set abstract: true for the menu state.

Below is an example:
ionicApp.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'menu.html'
          .state('app.add', { // add item page
              url: "/add",
              views: {
                  'menuContent': {
                      templateUrl: 'add-item.html'
          .state('app.list', { // list items page
              url: "/list",
              views: {
                  'menuContent': {
                      templateUrl: 'list.html'
         .state('app.edit', { // edit item page
             url: "/edit/:itemId",
             views: {
                 'menuContent': {
                     templateUrl: 'edit-item.html'
        // if none of the above states are matched, use this as the fallback

On index.html, we just need to put <ion-nav-view></ion-nav-view>.
<body ng-app="ionicApp">

Then on each page file, we have ion-view and ion-content:
<ion-view view-title="PageTitle">
    ... your markup content ...

Then on the menu markup file (menu.html), we have something like this:
<ion-side-menus enable-menu-with-back-views="true">
        <ion-nav-bar class="bar">
            <ion-nav-buttons side="left">
                <button class="button button-icon ion-navicon" menu-toggle="left"></button>
        <ion-nav-view name="menuContent"></ion-nav-view>
    <ion-side-menu side="left">
        <ion-header-bar class="custom-brown">
            <div class="title">Menu Title</div>
                <ion-item menu-close href="#/app/add">
                    <b>Add Item</b>
                <ion-item menu-close href="#/app/list">
                    <b>List Items</b>
                <ion-item menu-close href=". . .">
                    <b>. . .</b>
                <ion-item menu-close href=". . .">
                    <b>. . .</b>
On the example above, I use enable-menu-with-back-views="true" so that the menu icon will always be displayed. I also commented out <ion-nav-back-button></ion-nav-back-button> to hide the back button so only the menu icon will be displayed.

We can also have the menu items populated dynamically. We could use something like below:
                <ion-item menu-close ng-repeat="item in vm.items" ui-sref="app.edit({itemId: {{item.itemId}}})">
                    <b>Edit :</b> {{item.name}}

Thursday, 20 October 2016

Setting HTTP Strict Transport Security (HSTS) in ASP.NET Application

Setting HSTS on a website application is one way to avoid Man in the Middle attack which modifies server response to use insecure connection to gain user information.
One online tool that can be used to check whether our website has HSTS or not is https://www.ssllabs.com/ssltest . If on the report, it shows that:
'Strict Transport Security (HSTS) : No'
then it means that it is not set.

To set HSTS in web.config file, add these configurations below inside <system.webServer> node:
  <rule name="HTTP to HTTPS redirect" stopProcessing="true">
   <match url="(.*)" />
    <add input="{HTTPS}" pattern="off" ignoreCase="true" />
   <action type="Redirect" url="https://{HTTP_HOST}/{R:1}"
    redirectType="Permanent" />
  <rule name="Add Strict-Transport-Security when HTTPS" enabled="true">
   <match serverVariable="RESPONSE_Strict_Transport_Security"
    pattern=".*" />
    <add input="{HTTPS}" pattern="on" ignoreCase="true" />
   <action type="Rewrite" value="max-age=31536000" />

However if we do not have URL Rewrite module installed in IIS, we will have a 500 internal server error. This is because IIS does not understand <rewrite> node in the codes.

We can download URL Rewrite module from https://www.iis.net/downloads/microsoft/url-rewrite