Trying out Meteor + Ionic

Trying out Meteor + Ionic
oktober 30, 2015 Daniel Arenhage

With meteors newly introduced official support for angular released this September, we are now able to integrate many of the third party libraries introduced with angular in our meteor application. This also introduces the possibility to use angular based frameworks in our meteor applications, Ionic being one of them!

For those not familiar with Ionic, it is a powerful HTML5 framework that let’s you build neatly wrapped mobile applications using core web technologies with great ease. In some sense we no longer need to rely on our mad css-skills in order to build nice and neat mobile applications in Meteor. Ionic will fix (all) that boilerplate for us!

So in order to start using all this new and exciting functionality, let’s start of by creating a new meteor-angular application. For reference, the documentation for the angular-meteor project can be found here.

The application itself will in the end aim to provide us with a list of all the consultants working at Squeed!

Let’s start with creating a new meteor application, adding the angular and ionic packages and remove the autopublish/insecure packages so that we don’t publish all and all.

[enlighter lang=”javascript”]
meteor create squeeders
cd squeeders
meteor remove autopublish
meteor remove insecure
[/enlighter]

[enlighter lang=”javascript”]
meteor add angular
meteor add driftyco:ionic
[/enlighter]

Next let’s add some folder structure and some basic files for our application packaging.

[enlighter lang=”javascript”]
– client
index.html
– templates
– scripts
– controllers
– lib
– stylesheets
– server
– lib
[/enlighter]

We start by defining our top level index.html file where we will in ionic fashion render our ionic-views.

client/index.html
[enlighter lang=”javascript”]



Squeeders




[/enlighter]

Just to have it in place, let’s create the mongo collection and publish it from the server to interested clients.

lib/collections.js
[enlighter lang=”javascript”]
Squeeders = new Mongo.Collection(”squeeders”);
[/enlighter]

server/publications.js
[enlighter lang=”javascript”]
Meteor.publish(”squeeders”, function() {
return Squeeders.find({});
});
[/enlighter]

Next let’s add our angular ”app.js”

client/scripts/lib/app.ng.js
[enlighter lang=”javascript”]
angular.module(‘squeeders’, [‘angular-meteor’,’ionic’]);

if (Meteor.isCordova) {
angular.element(document).on(‘deviceready’, onReady);
}
else {
angular.element(document).ready(onReady);
}

function onReady() {
angular.bootstrap(document, [‘squeeders’]);
}
[/enlighter]

Note that we want this to be placed in our ../lib folder in order to guarantee that its loaded first.
Also note that we want to name all our files that contains angular specific code with the .ng extension in order for the angular module to recognize this as angular.js code. Including our html, in order for angular to properly load our html templates.

Now for some ionic and angular specifics. We are interested in having a side menu. So let’s create a main content holder which we can later load as a main abstract template in our angular router.

client/templates/main.ng.html
[enlighter lang=”javascript”]








Menu




[/enlighter]

Just for some look and feel, lets color it in Squeed colors!

client/stylesheets/squeed.css
[enlighter lang=”javascript”]
.bar.bar-squeed {
border-color: #e6b400;
background-color: black;
background-image: linear-gradient(0deg, #e6b400, #e6b400 50%, transparent 50%);
color: #fff;
}
.bar.bar-squeed .title {
color: #EAA42F;
}

.squeed-orange {
color: #EAA42F !important
}
[/enlighter]

Now we need to query our list from the database and provide it to our template. Lets create our angular ListController.

client/scripts/controllers/list.ng.js
[enlighter lang=”javascript”]
angular.module(‘squeeders’).controller(‘ListController’, function ($scope) {
$scope.$meteorSubscribe(‘squeeders’);
$scope.squeeders = $scope.$meteorCollection(Squeeders, false);
});
[/enlighter]

$meteorSubscribe will subscribe on our collection squeeders and provision our local client side database.
We then use $scope.$meteorCollection binding our $scope variables to reactive changes on our squeeders collection.

Next we create our template to display the actual list.

client/templates/list.ng.html
[enlighter lang=”javascript”]




{{squeeder.name}}

{{squeeder.desc}}





[/enlighter]

Let’s bind it together and route to the appropriate template. We create our angular router.

client/scripts/routes.ng.js
[enlighter lang=”javascript”]
angular.module(‘squeeders’).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘main’, {
url: ‘/main’,
abstract: true,
templateUrl: ‘client/templates/main.ng.html’
})
.state(‘main.list’, {
url: ‘/list’,
views: {
‘menuContent’: {
templateUrl: ‘client/templates/list.ng.html’,
controller: ‘ListController’
}
}
});
$urlRouterProvider.otherwise(‘main/list’);
});
[/enlighter]

So let’s fetch the data that we want to show in our actual list and insert it to the database.
In this particular case we are interested in showing a list of all squeeders currently working on Squeed.
This information is easily accessible from www.squeed.com/squeeders, but since there is no api to conveniently query this we turn to simply scraping it off our webpage. For that we will need to add some additional packages (just because it’s fun to scrape stuff).

[enlighter lang=”javascript”]
meteor add http
meteor add mrt:cheerio
[/enlighter]

Using cheerio we can now scrape the homepage for the information we need. Let’s add this to a startup script run when the meteor server starts, adding all the squeeders to our database collection.

server/bootstrap.js
[enlighter lang=”javascript”]
Meteor.startup(function () {
Squeeders.remove({});
result = Meteor.http.get(”http://www.squeed.com/squeeders”);
$ = cheerio.load(result.content);
var ones = $(‘.sixteen.columns.content.content-page > div’);
ones.each(function(index) {
Squeeders.insert({
name:$(this).find(‘div.team > h4’).text(),
img:$(this).find(‘div.thumb > img’).attr(‘src’),
desc:$(this).find(‘div.member-content > p > span’).text(),
profile:$(this).find(‘a’).attr(‘href’)
});
});
});
[/enlighter]

And there we have it! Check out the final result on http://squeeders.meteor.com surfing in on your mobile device.
If we also wanted to build this as an actual mobile application. We can simply add the respective platform (android in this case) by so:

[enlighter lang=”javascript”]
meteor add-platform android
[/enlighter]

And follow the procedure, which might include installing the android sdk etc with some simple meteor commands. Then we can use:

[enlighter lang=”javascript”]
meteor build output –server
[/enlighter]

And in our build output we will find the apk file to install.

If you want to checkout the complete example, you can find the source here

1 Kommentar

Pingbacks

  1. […] companies list of employees, neatly wrapping it in Ionic framework. You can read the full blog post here if interested! The source code for the application can be found on my […]

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*