
Des interfaces utilisateur CRUD avec Ionic
Pages html
A partir de lab2 créer dans le tutoriel de l’authentification en Ionic , modifiez le fichier nommé profile.html dans le dossier www / templates, avec ce contenu: www/templates/profile.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ion-view view-title="Profile"> <ion-content class="padding" ng-init="getCurrentUser()"> <br> <h2 class="text-center">USER PROFILE</h2> <br><br> <div class="list"> <label class="item item-input"> <span class="input-label">Prénom :*</span> <input type="text" ng-model="currentUser.firstName" > </label> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="currentUser.lastName"> </label> <label class="item item-input"> <span class="input-label">Nom d'utilisateur :*</span> <input type="text" ng-model="currentUser.username" > </label> <label class="item item-input"> <span class="input-label">Email :*</span> <input type="text" ng-model="currentUser.email"> </label> </div> <button class="button button-full button-calm" ng-click="updateUserProfile()">Modifier</button> </ion-content> </ion-view> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<ion-view view-title="Devices"> <ion-content class="padding" ng-init="getAllDeviceOfUser()"> <br> <h2 class="text-center">USER DEVICE</h2> <div class=" col col-center"> <button ui-sref="newDevice" class="button button-full button-calm"> Ajouter un nouveau appareil </button> </div> <div class="list" style="width:100;margin:auto"> <div ng-repeat="device in devices"> <div class="item item-divider">{{device.name}}</div> <div class="item"> <label> <strong>Nom: </strong> {{device.name}} </label> <br> <label> <strong>Matricule: </strong> {{device.uniqueId}} </label> <br> <label> <strong>Status: </strong> {{device.status}} </label> <br> <label> <strong>Téléphone: </strong> {{device.phoneNumber}} </label> <br> <div class="post-actions row "> <div class="col col-33 "> <a class="button button-small button-full button-calm" ng-click="selectDeviceToUpdate(device)"> Modifier </a> </div> <div class="col col-33"> <button type="button" class="button button-small button-full button-calm" ng-click="deleteConfirmation(device.id)"> Supprimer </button> </div> </div> </div> </div> </div> </ion-content> </ion-view> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<ion-view view-title="Nouveau device"> <ion-content class="padding"> <br> <h2 class="text-center">NOUVEAU APPAREIL</h2> <div class="list"> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="newDevice.name" > </label> <label class="item item-input"> <span class="input-label">Unique id :*</span> <input type="text" ng-model="newDevice.uniqueId" > </label> <label class="item item-input"> <span class="input-label">Téléphone :*</span> <input type="text" ng-model="newDevice.phoneNumber" > </label> <label class="item item-input item-select"> <span class="input-label">Status :*</span> <select ng-model="newDevice.status" ng-options="__status._status for __status in status" > </select> </label> <button type="button" class="button button-full button-calm" ng-click="addNewDevice()"> Sauvegarder </button> </div> </div> </ion-content> </ion-view> |
www/templates/updateDevice.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<ion-view view-title="Modifier appareil"> <ion-content class="padding"> <br> <h2 class="text-center">MODIFIER APPAREIL</h2> <div class="list"> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="deviceToUpdate.name" > </label> <label class="item item-input"> <span class="input-label">Téléphone :*</span> <input type="text" ng-model="deviceToUpdate.phoneNumber" > </label> <label class="item item-input item-select"> <span class="input-label">Status :*</span> <select ng-model="deviceToUpdate.status" ng-options="__status._status for __status in status" > </select> </label> <button type="button" class="button button-full button-calm" ng-click="updateDevice(deviceToUpdate.id)"> Sauvegarder </button> </div> </div> </ion-content> </ion-view> |
Service
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
angular.module('starter.services', []) .service('LoginService', function($resource,SERVER_PATH) { return $resource('login:', {}, { authenticate: { method: 'POST', url:SERVER_PATH.path+'/login/authenticate' } } ); }) .service('ProfileService', function($resource,SERVER_PATH) { return $resource('profile:', {}, { getCurrentUser: { method: 'GET', url:SERVER_PATH.path+'/users/getCurrentUser' }, updateUserProfile: { method: 'POST', url:SERVER_PATH.path+'/users/updateUserProfile' } } ); }) .service('DeviceService', function($resource,SERVER_PATH) { return $resource('device:', {}, { addNewDevice: { method: 'POST', url:SERVER_PATH.path+'/devices/addNewDevice' }, getAllDeviceOfUser: { method: 'GET', isArray:true, url:SERVER_PATH.path+'/devices/getByUserId' } } ); }) .service('PopupService', function($ionicPopup,$state) { var popups={}; popups.showPopupConfirmation=function(message,functiontoExecute){ var confirmPopup = $ionicPopup.confirm({ title: 'Confirmation', template: message }); confirmPopup.then(function(res) { if(res) { functiontoExecute; } }); } popups.showPopup=function(title, message, goTo){ var popupAlert = $ionicPopup.alert({ title: title, template: message }); popupAlert.then(function(result) { if(goTo!==''){ $state.go(goTo); } }); } return popups; }) .service('DataService', function($resource,SERVER_PATH) { var data = {}; return { getData: function () { return data; }, setData: function (_data) { data = _data; } }; }) ; |
Contrôleur
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
angular.module('starter.controllers', []) .controller('LoginCtrl', function($scope, $state, $rootScope, $cookieStore, $http, $ionicLoading, LoginService) { $scope.credentials = { username: '', password: '' } var xAuthTokenHeaderName = 'x-auth-token'; $scope.login = function() { $ionicLoading.show({ template: 'Chargement...' }); $scope.invalidCredentials=false; LoginService.authenticate({username: $scope.credentials.username, password: $scope.credentials.password}) .$promise.then(function(user) { if(user.status=="OK"){ $rootScope.user = user; $http.defaults.headers.common[ xAuthTokenHeaderName ] = user.token; $cookieStore.put('user', user); $state.go('tab.profile'); }else{ $scope.invalidCredentials=true; } $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } }) .controller('DeviceCtrl', function($scope,DataService,$state,$http, $ionicLoading,SERVER_PATH, PopupService, DeviceService, SERVER_PATH) { $scope.devices=[]; $scope.getAllDeviceOfUser=function(){ $ionicLoading.show({ template: 'Chargement...' }); DeviceService.getAllDeviceOfUser() .$promise.then(function(response){ $scope.devices=response; $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.status=[ {id:'1',_status:"ONLINE"}, {id:'2',_status:"OFFLINE"} ]; $scope.newDevice={}; $scope.addNewDevice=function(){ $ionicLoading.show({ template: 'Chargement...' }); DeviceService.addNewDevice({name:$scope.newDevice.name,uniqueId: $scope.newDevice.uniqueId, status:$scope.newDevice.status._status,phoneNumber:$scope.newDevice.phoneNumber}) .$promise.then(function(response){ $scope.devices.push(response); PopupService.showPopup('Bien', 'Votre appareil a été ajouté','tab.device'); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deviceToUpdate=DataService.getData();; $scope.selectDeviceToUpdate=function(device){ DataService.setData(device); $state.go('updateDevice'); } $scope.updateDevice=function(deviceId){ $scope.newDevicetoUpdateData={ name:$scope.deviceToUpdate.name, status: $scope.deviceToUpdate.status._status, phoneNumber:$scope.deviceToUpdate.phoneNumber } $http.put(SERVER_PATH.path+"/devices/updateDevice/"+deviceId,$scope.newDevicetoUpdateData) .success(function(response){ PopupService.showPopup('Bien', 'Votre appareil a été modifié','tab.device'); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deleteDevice=function(deviceId){ $ionicLoading.show({ template: 'Chargement...' }); $http.delete(SERVER_PATH.path+"/devices/deleteDevice/"+deviceId) .success(function(response){ if(response.status=="Success"){ $scope.getAllDeviceOfUser(); } $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deleteConfirmation=function(deviceId){ PopupService.showPopupConfirmation("ddd",$scope.deleteDevice(deviceId)); } }) .controller('ProfileCtrl', function($scope, $ionicLoading, PopupService, ProfileService,$http) { $scope.currentUser={}; $scope.getCurrentUser=function(){ $ionicLoading.show({ template: 'Chargement...' }); ProfileService.getCurrentUser().$promise.then(function(response){ $scope.currentUser=response; $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.updateUserProfile=function(){ ProfileService.updateUserProfile({firstName:$scope.currentUser.firstName,lastName: $scope.currentUser.lastName, username:$scope.currentUser.username,email:$scope.currentUser.email}) .$promise.then(function(response){ PopupService.showPopup('Bien', 'Votre profile a été modifié',''); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } }); |
Exécuter l’application mobile
Télécharger le code source à partir de ce lien
Créez une base de données avec le nom springlabs et exécutez le script dans la base de données PostgreSQL:
src/main/resources/static/sql/insert.sql
1 2 3 4 |
INSERT INTO public.role (id, role_name) VALUES (1, 'ROLE_ADMIN'); INSERT INTO public.role (id, role_name) VALUES (2, 'ROLE_USER'); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (1, 'Nizar', 'Ellouze','nizarellouze@gmail.com', '$2a$10$bpNMKeaQXKpJ4JVxOHWvu.tZdmCLT9nKcZreJ/ELfCgmTCyhC7GPy', 'admin', 1); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (2, 'Omar', 'Kessemtini','kessemtini.omar@gmail.com', '$2a$10$TA.UfUqLa8uDeGkt95FfLeq7T5Y5vpDpzAtvJrHSLzLliY/PARXUq', 'user', 2); |
Maintenant, exécutez l’application en lançant la classe SpringBootApplication à l’aide de la commande mvn spring–boot: run et visitez localhost: 8080 et authentifiez-vous auprès de l’un des deux utilisateurs suivants :
USER1: username=user, password=user
USER2: username=admin, password=admin
Exécuter l’application mobile
Télécharger le code source à partir de:
https://bitbucket.org/intellitech-team/spring-labs/src/b07388e0252dc3680c5b57eea151432ea26a214d/Lab4(IONIC_CRUD)/?at=master et exécutez la commande suivante :
1 2 |
cd auth-with-ionic ionic serve --lab |