desenvolvendo uma aplicação híbrida para android e ios utilizando ionic, acessando sqlite

Download Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, acessando SQLite

If you can't read please download the document

Upload: juliano-martins

Post on 15-Apr-2017

9.480 views

Category:

Technology


2 download

TRANSCRIPT

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.