- package.json
- index.html
package.json
{
"name": "com.example.hello",
"displayName": "HelloWorld",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"ecosystem:cordova"
],
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"devDependencies": {
"cordova-android": "^10.1.2",
"cordova-browser": "^6.0.0",
"cordova-clipboard": "^1.3.0",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-splashscreen": "^6.0.2",
"cordova-sqlite-storage": "^6.0.0",
"es6-promise-plugin": "^4.2.2"
},
"cordova": {
"platforms": [
"android",
"browser"
],
"plugins": {
"cordova-plugin-splashscreen": {},
"cordova-plugin-dialogs": {},
"cordova-clipboard": {},
"cordova-plugin-screen-orientation": {},
"cordova-sqlite-storage": {}
}
}
}index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello World</title>
<style>
#editor {
position: fixed;
top: 0;
right: 0;
bottom: 10;
left: 0;
font-size: 120px;
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div class="app" id="app">
<template>
<div class="container-fluid">
<div class="row">
<div class="col-12">
</div>
</div>
{{sql_lite}} <br />
<a href="ionic-vs-cordova-vs-react-native.html">Ionic vs Cordova vs React Native</a><br />
<input v-model="name" />
<button class="btn btn-info" @click="openDb">Salvar</button><br />
<button class="btn btn-primary" @click="pesquisar">Pesquisar</button><br />
<button class="btn btn-primary" @click="removeItem">Excluir Tudo</button><br />
<button class="btn btn-danger" @click="updateItem">Atualizar</button><br />
<div v-for="row in rows">
<h1>{{row.name}}</h1>
<h4>{{row.score}}</h4>
</div> <br />
<pre v-html="database.message"></pre>
</div>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="cordova.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
test: 'AAAA',
sql_lite: "",
db: null,
rows: [],
name: '',
database: {
message: ''
}
},
mounted() {
const mv = this;
var db = null;
document.addEventListener('deviceready', function () {
db = window.sqlitePlugin.openDatabase({
name: 'my.db',
location: 'default',
});
mv.db = db;
mv.getData();
});
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
mv.test = 'Running cordova-' + cordova.platformId + '@' + cordova.version;
}
document.addEventListener("backbutton", yourCallbackFunction, false);
function yourCallbackFunction() {
if (confirm('Deseja realmente sair?')) {
alert('a');
}
}
},
methods: {
abrirSplash() {
window.screen.orientation.lock('portrait');
},
openDb() {
const vm = this;
this.db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS DemoTable (name, score)');
tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', [vm.name, 1000], function (tx, rs) {
vm.database.message = "Add : " + rs.insertId + " | " + " 1rowsAffected: " + rs.rowsAffected;
}, function (tx, error) {
vm.rows = 'SELECT error: ' + error.message
});
}, function (error) {
vm.sql_lite = 'Transaction ERROR: ' + error.message
}, function () {
vm.sql_lite = 'Populated database OK';
});
},
getData() {
vm.db.transaction(function (tx) {
var result1 = [];
tx.executeSql('SELECT * FROM DemoTable', [], function (tx, rs) {
for (var x = 0; x < rs.rows.length; x++) {
result1.push(rs.rows.item(x));
}
vm.rows = result1;
}, function (tx, error) {
vm.rows = 'SELECT error: ' + error.message
});
});
},
removeItem() {
vm.db.transaction(function (tx) {
var query = "DELETE FROM DemoTable;";
tx.executeSql(query, [], function (tx, res) {
vm.database.message = "removeId: " + res.insertId + " | " + "rowsAffected: " + res.rowsAffected;
},
function (tx, error) {
vm.database.message = 'DELETE error: ' + error.message;
});
}, function (error) {
vm.database.message = 'transaction error: ' + error.message
}, function () {
console.log('transaction ok');
});
},
pesquisar() {
const vm = this;
vm.db.transaction(function (tx) {
var result1 = [];
tx.executeSql('SELECT * FROM DemoTable', [], function (tx, rs) {
for (var x = 0; x < rs.rows.length; x++) {
result1.push(rs.rows.item(x));
}
vm.rows = result1;
}, function (tx, error) {
vm.rows = 'SELECT error: ' + error.message
});
});
},
updateItem() {
first = prompt('Deseja atualizar', 'AA');
vm.database.message = 'Dado: ' + first;
// UPDATE Cars SET Name='Skoda Octavia' WHERE Id=3;
vm.db.transaction(function (tx) {
var query = "UPDATE DemoTable SET name = ? WHERE name = ?";
tx.executeSql(query, [first + '-T', first], function (tx, res) {
vm.database.message = "removeId: " + res.insertId + " | " + "rowsAffected: " + res.rowsAffected;
},
function (tx, error) {
vm.database.message = 'UPDATE error: ' + error.message;
});
}, function (error) {
vm.database.message = 'transaction error: ' + error.message
}, function () {
vm.database.message = 'transaction ok';
});
}
}
})
</script>
</body>
</html>