• Home

Add an action overlay with ionicframework

When user interaction is blocked while loading data, computing stuff...you should display something, if not, the user will think the app is crashing or not responsive. Ionicframework provides the excellent $ionicloading service. You just need to instance the service, then to call it wherever you want. Let's see an example based on ltanews.

First you need to declare the service, do it in your controller via something like :

.controller('TweetsCtrl', function($scope, $http, $ionicLoading, $cordovaGoogleAnalytics, tweetService, Settings)

This controller is using data from the service called tweetService : we need to display the overlay, get data from the service, insert data in a handler, hide the overlay. Let's see.

Right after the controller definition I add :

$ionicLoading.show({
        content: 'Chargement',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });

 Then just after this overlay I call the service, if the call is successful I hide the overlay :

$scope.init = function() { // get data from twitter proxy service and fill the scope
        var x2js = new X2JS();
        $scope.tweets = [];
        
        tweetService.getTweets().success(function(data, status, header, config) {
            tweetlist = x2js.xml_str2json(data);
            $ionicLoading.hide();
            $scope.tweets = tweetlist.entries.entry;
        }).error(function(data, status, headers, config) {
            console.log("status : " + status + " FAILURE!");
        });
    }

Be sure to hide the overlay in a promise.

Link : $ionicLoading reference on ionicframework 1.2 website http://ionicframework.com/docs/api/service/$ionicLoading/

Print Email

ltanews background

In September 2015, I made a Ionic Framework presentation at a laTechamienoise event. I think it is time to explain here how the app is working :

At first we need data : the tweets are extracted from laTechamienoise timeline. To grab such data I had to set up a twitter proxy php script and a Twitter app. Since I don't want my Twitter API credentials to be bundled in my app, I add to fill them in my script and to deny browsing (via .htaccess). The script is outputing data in JSON; this feed is parsed by my application and rendered via a classic collection-repeat directive in my Ionic app.

The agenda feed is less complex but also less satisfying... I'm scrapping data via an import.io API collecting data from laTechamienoise agenda page... Why ? Because the RSS on the agenda page is filled with current month events only. You can browse to next/previous months only by clicking icons with javascript enabled...nice... This part still needs work, since latest agenda updates are not in sync... :-( I need time to have a look, both to the import.io API and my bash script.

These scripts store content on a specific http adress, which respond to my app request. The tweets page is refreshed via a ionicloading directive (really nice).

App settings are persistent while the app is installed, thanks to localstorage.

I can track the app usage via an embedded google analytics tracking code (Google Play only tracks install/uninstall/updates/OS versions....) on each page.

Here is the components used in this app :

  • cordova 6.0
  • ionicframework 1.2.4
  • angularjs 1.4.3
  • x2js 1.2.0
  • ngCordova (for localstorage)

 The code for this app is on my Github repo, here : https://github.com/lennycartier/ionic-ltanews

What will be improved : agenda feed

What could be improved : app size, I can reduce it by hand but a nice gulp.js would be more efficient

Print Email

How fix Cordova Google play security alert ?

Like a lot of people I received a Google play security alert about some of my applications using a Cordova version < 4.1.1. I should have take care of it before, you are right Google, thanks :-)

BTW to update a project to latest Cordova, you have to :

  • install latest Cordova, a sudo npm install -g cordova should do the trick
  • update all your Cordova platform in a project folder by doing cordova plaforma update <platform>
  • check your Cordova platforms with cordova platform ls
  • rebuild, sign, test on device, upload to Google Play, test the update from Google Play, put in production
  • wait several hours (>5)

 

Print Email

Asus P8H67M-evo + El Capitan hackintosh

Time for vacations & updates ! Since several years now I switched on Mac OS at home. Used Leo, ML, Yosemite and now El Capitan.

The installation with my setup is not over complicated.

You have to download El Capitan installer on the Mac app store, then build a USB installer key (Legacy clover mode) with Unibeast found at http://www.tonymacx86.com/

Reboot, disable VT extensions in the bios. At Clover prompt go to Options, then edit boot options. I had to disable some cpus at first by adding "cpus = 1" in the options field. The install on my SSD was slow but functionnal.

At first reboot, edit Clover boot options to add "cpus = 1" (slow...), you should use "nv_disable = 1" if you have a NVidia card. Now logged on El Capitan you should download Unibeast always at http://www.tonymacx86.com/

Start Unibeast, select Quick start, Legacy mode, for system definition choose imac 14.1, add the Realtek Kext. Reboot.

You should now do not need to edit options in Clover boot parameters. You can safely enable VT in the bios.

Have a look to Trim Enabler for your SSD.

My sound output is a Sabre DAC so I don't have to deal with more Kexts to enable a low quality sound chipset.

aboutthiscomputer

 

 

Print Email