ionic – Artyom's Blog

Automatically build Android APK for Ionic 3 project stored in GitLab

Setup GitLab CI. Your configuration file will look something like this

image: applicazza/ionic:latest

stages:
  - deploy

cache:
  untracked: true
  key: "$CI_PROJECT_ID"
  paths:
    - node_modules/

build_android:
  stage: deploy
  only:
    - master
  script:
    - ls
    - npm i
    - ionic cordova platform rm android
    - ionic cordova platform add android
    - ionic cordova build android
    - ls ./platforms/android/build/outputs/apk/android*.apk
  artifacts:
    paths:
      - platforms/android/build/outputs/apk/

image: applicazza/ionic:latest

stages:

- deploy

cache:

untracked: true

key: "$CI_PROJECT_ID"

paths:

- node_modules/

build_android:

stage: deploy

only:

- master

script:

- ls

- npm i

- ionic cordova platform rm android

- ionic cordova platform add android

- ionic cordova build android

- ls ./platforms/android/build/outputs/apk/android*.apk

artifacts:

paths:

- platforms/android/build/outputs/apk/

Optionally put a link to file in your README.md that will look like

https://gitlab.com/YOUR_ORGANIZATION_NAME/YOUR_PROJECT_NAME/builds/artifacts/master/raw/platforms/android/build/outputs/apk/android-debug.apk?job=build_android

How-to: Display images obtained from cordova-plugin-camera in ionic with live reload

Install cordova-plugin-file.

Obtain file URI from cordova-plugin-camera and convert it to cdvfile://

var options = {
     //...
     destinationType: Camera.DestinationType.FILE_URI
     //...
};

$cordovaCamera.getPicture(options).then(function (fileUri) {

    FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

        $scope.ngImgSrc = cordovaUri;

    });

});

var options = {

//...

destinationType: Camera.DestinationType.FILE_URI

//...

};

$cordovaCamera.getPicture(options).then(function (fileUri) {

FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

$scope.ngImgSrc = cordovaUri;

});

'use strict';
angular.module('main')
    .service('FileService', function ($log, $q) {

        // Public

        this.convertFileUriToInternalURL = convertFileUriToInternalURL;

        // Private

        // Converts File URI to proper Internal URL that will be used
        // to display local device images while being in LiveReload mode
        function convertFileUriToInternalURL(fileUri) {

            var deferred = $q.defer();

            // Here we use cordova file plugin that resolves fileEntry from fileUri
            window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolved(fileEntry) {

                deferred.resolve(fileEntry.toInternalURL());
            }

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolveError() {

                deferred.reject();
            }

            return deferred.promise;
        }

    });

'use strict';

angular.module('main')

.service('FileService', function ($log, $q) {

// Public

this.convertFileUriToInternalURL = convertFileUriToInternalURL;

// Private

// Converts File URI to proper Internal URL that will be used

// to display local device images while being in LiveReload mode

function convertFileUriToInternalURL(fileUri) {

var deferred = $q.defer();

// Here we use cordova file plugin that resolves fileEntry from fileUri

window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolved(fileEntry) {

deferred.resolve(fileEntry.toInternalURL());

}

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolveError() {

deferred.reject();

}

return deferred.promise;

}

});

How-to: Use angular-templatecache with ionic

From project’s directory execute next command in order to install angular-templatecache

npm install gulp-angular-templatecache --save-dev

1	npm install gulp-angular-templatecache --save-dev

Modify your gulpfile.js

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {
  sass: ['./scss/**/*.scss'],
  templates: ['./www/templates/**/*.html'] // <-- ADDED
};

// ...

gulp.task('watch', ['sass', 'templates'], function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.templates, ['templates']); // <-- ADDED
});

// ...

// ADDED
gulp.task('templates', function(done){
    gulp.src(paths.templates)
        .pipe(templateCache({
            standalone:true,
            root: 'templates'}))
        .pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER
        .on('end', done);
});

// ADDED
gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {

sass: ['./scss/**/*.scss'],

templates: ['./www/templates/**/*.html'] // <-- ADDED

};

// ...

gulp.task('watch', ['sass', 'templates'], function() {

gulp.watch(paths.sass, ['sass']);

gulp.watch(paths.templates, ['templates']); // <-- ADDED

});

// ...

// ADDED

gulp.task('templates', function(done){

gulp.src(paths.templates)

.pipe(templateCache({

standalone:true,

root: 'templates'}))

.pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER

.on('end', done);

});

// ADDED

gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

Don’t forget to reference ‘templates’ dependency in your www/js/app.js

Don’t forget to reference www/js/dist/templates.js in your index.html file.

Start debugging with

ionic serve

1	ionic serve

Run next command to rebuild template cache

gulp templates

1	gulp templates