Studyx - Professional web training

BECOME A WEB EXPERT

Maak Een Hybride App In 12 Stappen Met Ionic Framework

Naar aanleiding van de nieuwe opleiding: Hybride apps met Ionic en Phonegap geven we graag een voorbeeld hoe hybride apps ontwikkeld kunnen worden met het Ionic Famework.

Wat zijn hybride apps?

Hybride apps zijn webapplicaties (of webpagina’s) die gebruik maken van de browser van het toestel (UIWebView in IOS en WebView op Android toestellen). Deze apps zijn ontwikkeld met HTML, CSS en Javascript, daarna verpakt in een native applicatie door middel van Phonegap of Ionic met gebruik van de Cordova API (API die met de toestellen kan communiceren).

Met één extra lijn aan code kan deze meteen ingezet worden op een extra platform en door middel van een grote bibliotheek aan plugins kan je makkelijk verbinding maken met de hardware van de toestellen, denk bijvoorbeeld aan de camera.

Ionic Framework

In dit voorbeeld zullen we gebruik maken van Ionic om een Todo-applicatie te maken. Voor de installatie van Ionic Framework (en Phonegap) is NodeJS  nodig. De Node Packet Manager (npm) wordt hier gebruikt om Cordova en Ionic te installeren.

Installatie

Na de installatie van NodeJs kan je de laatste versies van Cordova en Ionic installeren via de command line:

$ npm install -g cordova ionic

Development

Na het installatieproces kan je al direct gebruik maken van ionic om nieuwe projecten te maken. Er zijn drie verschillende templates om mee te beginnen: blank, tabs en sidemenu.
blank-apptabs-appmenu-app

Om een nieuw project aan te maken wordt volgend commando ingegeven.

$ ionic start studyx-ionic blank

We zullen in dit voorbeeld een todo-applicatie maken waar men todos kunnen toevoegen en verwijderen uit een lijst. Omdat we maar één pagina nodig hebben beginnen we vanuit een blank-template.We zullen bij het aanmaken van een nieuwe todo een Dialog tonen. Om de native dialogs van android of IOS beschikbaar te maken voor de app hebben we de dialog-plugin van cordova nodig. Deze plugin kan worden geïnstalleerd met volgend commando:

$ cordova plugin add cordova-plugin-dialogs

Tijdens de ontwikkeling van een app kan je de app in de browser testen door volgend commando in te voeren:

$ ionic serve

Let op! Niet elke Cordova-plugin is compatibel met de browser. Om die functionaliteit te kunnen testen moet je de app eerst builden. Daarna kan je deze op een simulator draaien. Dit gebeurt allemaal met volgende commands:

$ionic add platform ios
$ionic build ios
$ionic run

Een andere manier om de app mobiel te testen is door een account aan te maken op Ionic en Ionic View op je telefoon te installeren. Na deze stappen kan je de app uploaden en via Ionic View testen. Volgend commando is nodig om de app beschikbaar te maken in Ionic View:

$ ionic upload

Omdat we hier met Ionic werken zullen we gebruik maken van AngularJs. Dit wordt standaard meegeleverd bij het aanmaken van een nieuw project. Naast Angular zullen we gebruik maken van ngCordova. Dit is een AngularjS wrapper voor Cordova en Phonegap plugins. Download hier de laatste versie en voeg ng-cordova.min.js toe in de js-folder van het project

Deze file moet ook nog beschikbaar gemaakt worden voor ons project. Open de index.html file en voeg volgende lijnen toe.

<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/todo.js"></script>
</head>

Nog een belangrijke stap is het injecteren van ngCordova in onze module. Maak een nieuwe file: todo.js en voeg volgende lijn bovenaan in:

var app = angular.module('ionicApp', ['ionic', 'ngCordova'])

Nu is het tijd om een factory aan te maken die onze todos beschikbaar maken. Daarin worden volgende functies toegevoegd:

  • All: geeft alle todos die opgeslaan zijn
  • Save: vervang de opgeslagen todos met de nieuwe lijst
  • newTodo: creëer een nieuw Todo-object
app.factory('Todos', function() {
    return {
        all: function() {
            var todoString = window.localStorage['todos'];
            if(todoString) {
                return angular.fromJson(todoString);
            }
            return [];
        },
        save: function(todos) {
            window.localStorage['todos'] = angular.toJson(todos);
        },
        newTodo: function(name) {
            return {
                name: name
            };
        }
    }
})

In de controller wordt de koppeling gemaakt tussen de data die we van onze factory kunnen halen en de index.html file. De controller in deze applicatie ziet er als volgt uit:

app.controller('TodosCtrl', function($scope, $cordovaDialogs, Todos) {
    $scope.data = {
        showDelete: false
    };
    $scope.todos = Todos.all();
    $scope.addTodo = function() {
    $cordovaDialogs.prompt('Insert a new Todo', 'New Todo', ['Ok', 'Cancel'], '')
    .then(function(result) {
        var input = result.input1;
        if(result.buttonIndex == 1 && input != '') {
            var newTodo = Todos.newTodo(input);
            $scope.todos.push(newTodo);
            Todos.save($scope.todos);
            $scope.todos = Todos.all();
        }
    })
    ;
    };
    $scope.removeTodo = function(index) {
        $scope.todos.splice(index, 1);
        Todos.save($scope.todos);
        $scope.todos = Todos.all();
    };
});

Bij het aanmaken van de controller geven we 3 parameters mee

  • $scope object: refereert naar het applicatie model
  • $cordovaDialogs: functionaliteit om dialogen weer te geven
  • Todos: het factory model waar todos worden uitgelezen en weggeschreven

Om functionaliteit beschikbaar te stellen in onze index.html worden functies en data meegegeven met het $scope-object.

Iets wat meer uitleg geeft is de showDelete-variabele die wordt meegegeven. Deze variabele zorgt voor een verwijder-modus in onze applicatie.

De laatste stap is het koppelen tussen de data in onze todo.js file en de index.html file. Om onze module te binden aan de html koppelen we onze app aan onze pagina met volgende code:

<html ng-app="ionicApp">

En onze controller kunnen we koppelen aan de body:

<body ng-controller="TodosCtrl">

Nu is onze functionaliteit beschikbaar en kunnen we volgende code gebruiken om alles te koppelen.

<body ng-controller="TodosCtrl">
<ion-pane>
    <ion-header-bar class="bar-energized">

        <div class="buttons">
            <button class="button" ng-click="data.showDelete = !data.showDelete">Delete</button>
        </div>


        <h1 class="title">Studyx Todos</h1>


        <div class="buttons">
            <button class="button" ng-click="addTodo()">Add</button>
        </div>

    </ion-header-bar>
    <ion-content>
        <ion-list show-delete="data.showDelete">
            <ion-item ng-repeat="todo in todos">
            {{todo.name}}
            <ion-delete-button class="ion-minus-circled" ng-click="removeTodo($index)">
            </ion-delete-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-pane>
</body>

Ionic framework geeft een set componenten met eigen styling mee voor het opbouwen van apps. Lees hier de documentatie om Ionic applicaties op te bouwen.

We maken gebruik van de ng-repeat functie van Angular om een lijst van onze todos weer te geven. Als er op de delete-button wordt geklikt verandert de status van showDelete naar true en worden de delete-buttons getoond.

Broncode

Stuur ons een mail voor de broncode. Heb je nog vragen of interesse in een offerte? Contacteer ons dan met een mailtje of bel naar het nummer .

Share on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

0 Reacties opMaak Een Hybride App In 12 Stappen Met Ionic Framework"

Laat een bericht na