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

Solution:
- 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'

Solution:
- 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://192.168.1.118:3000/cordova :
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 http://192.168.1.118:3000/cordova...
Failed to Debug iOS remote for build C:\myProjectDirectory\bld\ios\Debug\buildInfo.json to http://192.168.1.118:3000/cordova :
Http 500: No devices found to debug. Please ensure that a device is connected and awake and retry.

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


References and further details:
https://github.com/Microsoft/remotebuild/issues/5
https://stackoverflow.com/questions/43944273/apache-cordova-visual-studio-2015-xcode-8-3-cannot-remotebuild

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.show();
    };

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

    vm.openModal = function () {
        vm.modal.show();
    };

    vm.closeModal = function () {
        vm.modal.hide();
    };

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

    // 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:
<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
        Hello!
        <button ng-click="vm.closeModal()">Close</button>
    </ion-content>
</ion-modal-view>