If you can't read please download the document
Upload
juliano-martins
View
9.481
Download
2
Embed Size (px)
Citation preview
Mobile Development
Creating a CRUD with Ionic Part 1
Juliano Marcos Martins [email protected]
http://jmmwrite.wordpress.com
SQLite
Is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.
https://www.sqlite.org/
Local Storage
Can be used to store data, but don't Assume that it will Always Work In Your Hybrid App.
// examplelocalStorage.setItem('nome', 'Juliano'); var name = localStorage.getItem('nome'); console.log(name);
IOs and Android can clean it in some situations.
Intro
We will create an application to manage people from a table.
Its recommended that you already have basic concepts about Ionic and Mobile Development before go ahead. For more intro material, check my blog: http://jmmwrite.wordpress.com/
You can get the source code from this slides here https://github.com/julianommartins/ionicDataBase.git
Step by Step
Create the projectionic start ionicDataBase blank
Step by Step
Enter in the project folder and Add platform:ionic platform add android
Step by Step
Add SQLite module (documentation: http://ngcordova.com/docs/plugins/sqlite/ ):cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
Step by Step
Go to http://ngcordova.com/docs/install/ and get the JS lib (download the zip file)
Extract it and get ng-cordova.min.js , put this file in the JS folder of your application
* You can also use bower to get ng-cordova
Step by Step
Open your index.html file and import ng-cordova there by adding the folowing line BEFORE cordova import:
:
Step by Step
Open your app.js file and inject ngCordova module:
This will make module work!
Step by Step index.html
DB Example
Pessoas Insert Select Resultado: {{mensagemFinal}} Resultado: {{resultado}}
Step by Step app.js
// Database instance.var db = null;
// Include dependency: ngCordovavar starter = angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } db = $cordovaSQLite.openDB({name: "my.db"}); $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS pessoas (id INTEGER PRIMARY KEY, firstname text, lastname text)"); });})
starter.controller('DBController', function($scope, $cordovaSQLite) { $scope.resultado = []; $scope.mensagemFinal = "Iniciou Sistema"; $scope.insert = function(firstname, lastname) { var query = "insert into pessoas (firstname, lastname) values (?,?)"; $cordovaSQLite.execute(db,query,[firstname,lastname]).then(function(result) { $scope.mensagemFinal = "FOI"; $scope.resultado.push({mensagem: "Insert Ok"}); console.log("Insert ID -> " + result.insertId); }, function(error){ $scope.resultado.push({mensagem: "insert Fail"}); $scope.mensagemFinal = "Fail"; console.log(error); }); }
Step by Step app.js - continuation
$scope.select = function(lastname){ var query = "select firstname, lastname from pessoas where lastname = ?"; $cordovaSQLite.execute(db,query,[lastname]).then(function(result) { if(result.rows.length > 0){ $scope.mensagemFinal = "ACHEI"; $scope.resultado = result.rows.item(0).firstname; console.log("Achei " + result.rows.item(0).firstname + " " + result.rows.item(0).lastname); } else { $scope.mensagemFinal = "NAO ACHEI"; $scope.resultado = []; console.log("Nao achei"); } }, function(error){ console.log(error); }); } });
Step by Step
Let's run with the command (you need to have an emulator or your physical phone connected, in my case, I have Genymotion running):ionic run android
TIP
To see the Android log, go to the folder platform-tools from your sdk and run:./adb logcat
This is for Linux.
Creating a CRUD with Ionic Part 2
Juliano Marcos Martins [email protected]
http://jmmwrite.wordpress.com
Part 2
We have created a code that insert and search for names, but, its hardcoded!
Now we will create a FORM, to allow user type First and Last names and perform the Insert and Search Operations with this data.
We are not wondering about form validation for now, but, we will create a better UI at least!
You can get the source code from this slides here https://github.com/julianommartins/ionicDataBase.git
Step by Step index.html
DB Example
Pessoas First Name Last Name Select Insert Delete Update Pessoas
Step by Step app.js
// Database instance.var db = null;
// Include dependency: ngCordovavar starter = angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } db = $cordovaSQLite.openDB({name: "my.db"}); $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS pessoas (id INTEGER PRIMARY KEY, firstname text, lastname text)"); });})
starter.controller('DBController', function($scope, $cordovaSQLite) { $scope.resultado = ""; $scope.insert = function(firstname, lastname) { var query = "insert into pessoas (firstname, lastname) values (?,?)"; $cordovaSQLite.execute(db,query,[firstname,lastname]).then(function(result) { //$scope.resultado.push({mensagem: "Insert Ok"}); $scope.resultado = "Insert Ok"; }, function(error){ $scope.resultado = "Insert FAIL"; }); }
Step by Step app.js (continuation)
$scope.select = function(lastname){ var query = "select firstname, lastname from pessoas where lastname = ?"; $cordovaSQLite.execute(db,query,[lastname]).then(function(result) { if(result.rows.length > 0){ $scope.resultado = result.rows.item(0).firstname + " found with this last name."; } else { $scope.resultado = "Not found"; } }, function(error){ console.log(error); }); } });
Step by Step
Let's run with the command (you need to have an emulator or your physical phone connected, in my case, I have Genymotion running):ionic run android
Part 3
Now, lets implement the update and delete operations.
You can get the source code from this slides here https://github.com/julianommartins/ionicDataBase.git
Step by Step app.js
$scope.delete = function(lastname) { var query = "delete from pessoas where lastname = ?"; $cordovaSQLite.execute(db,query,[lastname]).then(function(result) { $scope.resultado = "Delete Ok."; }, function(error){ $scope.resultado = "Delete FAIL!"; }); } $scope.update = function(firstname, lastname) { var query = "update pessoas set firstname = ? where lastname = ?"; $cordovaSQLite.execute(db,query,[firstname,lastname]).then(function(result) { $scope.resultado = "Update OK."; }, function(error){ $scope.resultado = "Update FAIL!"; }); }
Just add this functions to app.js
Part 4
We have a Functional Crud, but now, we want a function to list all the people from DB!
Also, we will remove the delete button and put it in the list, to let user swipe the user in order to remove.
You can get the source code from this slides here https://github.com/julianommartins/ionicDataBase.git
Step by Step index.html
DB Example
People List First Name Last Name Select Insert Update List {{people.firstname}} {{people.lastname}}
Step by Step app.js
// Database instance.var db = null;
// Include dependency: ngCordovavar starter = angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } db = $cordovaSQLite.openDB({name: "my.db"}); $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS pessoas (id INTEGER PRIMARY KEY, firstname text, lastname text)"); });})
starter.controller('DBController', function($scope, $cordovaSQLite) { $scope.resultado = ""; $scope.peopleList = []; $scope.insert = function(firstname, lastname) { $scope.peopleList = []; var query = "insert into pessoas (firstname, lastname) values (?,?)"; $cordovaSQLite.execute(db,query,[firstname,lastname]).then(function(result) { //$scope.resultado.push({mensagem: "Insert Ok"}); $scope.resultado = "Insert OK."; }, function(error){ $scope.resultado = "Insert FAIL!"; }); }
Step by Step app.js - cont
$scope.select = function(lastname){ $scope.peopleList = []; var query = "select firstname, lastname from pessoas where lastname = ?"; $cordovaSQLite.execute(db,query,[lastname]).then(function(result) { if(result.rows.length > 0){ $scope.resultado = result.rows.item(0).firstname + " found with this last name."; } else { $scope.resultado = "Last Name Not Found!"; } }, function(error){ console.log(error); }); } $scope.selectAll = function(){ $scope.peopleList = []; var query = "select firstname, lastname from pessoas"; $cordovaSQLite.execute(db,query,[]).then(function(result) { if(result.rows.length > 0){ for(var i = 0; i < result.rows.length; i++) { $scope.peopleList.push({firstname: result.rows.item(i).firstname, lastname: result.rows.item(i).lastname}); } $scope.resultado = result.rows.length + " rows found."; } else { $scope.resultado = "0 rows found!"; $scope.peopleList = []; } }, function(error){ console.log(error); }); } $scope.delete = function(lastname) { $scope.peopleList = []; var query = "delete from pessoas where lastname = ?"; $cordovaSQLite.execute(db,query,[lastname]).then(function(result) { $scope.resultado = "Delete Ok."; }, function(error){ $scope.resultado = "Delete FAIL!"; }); }
Step by Step app.js - cont
$scope.update = function(firstname, lastname) { $scope.peopleList = []; var query = "update pessoas set firstname = ? where lastname = ?"; $cordovaSQLite.execute(db,query,[firstname,lastname]).then(function(result) { $scope.resultado = "Update OK."; }, function(error){ $scope.resultado = "Update FAIL!"; }); } // you can add a button to cleat he table! $scope.deleteAll = function() { $scope.peopleList = []; var query = "delete from pessoas"; $cordovaSQLite.execute(db,query,[]).then(function(result) { $scope.resultado = "Delete Ok."; }, function(error){ $scope.resultado = "Delete FAIL!"; }); } });
Step by Step
Let's run with the command (you need to have an emulator or your physical phone connected, in my case, I have Genymotion running):ionic run android
To do!
We have some things that we can make better:Need to validate data that user enter, like empty names.
Clear the form after the submit
You can get the source code from this slides here https://github.com/julianommartins/ionicDataBase.git
Links
Ionic JavaScript functionalities
http://ionicframework.com/docs/api/ Ionic CSS
http://ionicframework.com/docs/components/ Ionic Creator
http://creator.ionic.io/app/login Extensions for Cordova API
http://ngcordova.com/
Thank you
for your dedication and patience!
All text and image content in this document is licensed under the Creative Commons Attribution-Share Alike 3.0 License (unless otherwise specified). Adobe, Google, Apple, Apache, and other are registered trademarks. Their respective logos and icons are subject to international copyright laws.