Salva il database di Cordova su Dropbox

Come salvare il database a Dropbox (e come ripristinarlo) all'interno di un'applicazione Cordova – solo Android (parte 1)

Lascia un commento / Cordova / Di

Qualche tempo fa, Stavo sviluppando un'applicazione mobile ibrida per Android usando Cordova. In tale applicazione, Avevo bisogno di salvare l'intero database locale creato con WebSql su Dropbox.

Così ho iniziato a imparare a usare l'API Dropbox, come integrarlo con Cordova, quali plugin dovevo installare e ho anche trovato un paio di trucchi per far funzionare tutto. Quindi ora voglio condividere ciò che ho fatto per portare a termine il lavoro.

Importante: Sebbene questo tutorial sia incentrato sullo sviluppo di un'app per Android, quasi tutto dovrebbe funzionare anche per Ios. Se trovi qualche problema, per favore riferisci a documentazione ufficiale di Cordova.

L'intero tutorial è diviso in tre capitoli:

  1. in questo primo, costruiremo un'applicazione scheletro utilizzando Cordova; Creeremo un database con alcuni dati e caricheremo i dati nell'applicazione.
  2. Nella seconda parte vedremo come esportare effettivamente il nostro database e come ripristinarlo; per fare questo useremo un plugin Cordova per fare tutto il lavoro sporco per noi
  3. nel terzo e ultimo capitolo vedremo come collegare la nostra applicazione Cordova con Dropbox e salvare lì il nostro file di backup (e come scaricarlo per ripristinare il nostro database locale)

 

Presumo che tu abbia già familiarità con Cordova, quindi non spiegherò alcun dettaglio superfluo sulla struttura dell'applicazione Cordova, come devi connettere il tuo telefono o come puoi costruire ed eseguire un progetto Cordova. Se non conosci Cordova o non sei sicuro di qualcosa, per favore riferisci a documentazione ufficiale.

Software richiesto

  1. Il Dropbox JavaScript SDK per gestire il processo di autenticazione e la connessione con un account Dropbox;
  2. Il cordova-plugin-inappbrowser
  3. Il cordova-plugin-file
  4. Il cordova-sqlite-porter

Li installeremo quando avremo bisogno di averli attivi e funzionanti. Prima di tutto, dobbiamo creare una piccola app di test.

Avvio di una nuova applicazione Cordova

Quindi cominciamo creando una piccola Cordova app per testare la nostra connessione Dropbox. Apre vi comando interfaccia a riga (sarà il prompt dei comandi di Windows e la finestra del terminale in Linux), Passare alla directory dove tieni le tue applicazioni Cordova e tipo:

cordova create dropboxTest com.codingfix.dropboxTest DropboxTest

E poi entriamo nuova directory del progetto e aggiungere piattaforma Android:

cd dropboxTest
cordova platforms add android

Preparazione dell'applicazione principale (e solo) pagina

Il CSS più povero di sempre

Ora puoi iniziare a modificare la tua applicazione. Prima di tutto, apri il file indice.html nel www cartella e rilascia il div con class “App” e tutto il suo contenuto: non abbiamo bisogno di esso. Sostituisci anche l'intero contenuto del indice.css file con le seguenti righe (la nostra piccola app sarà molto scarsa dal punto di vista della GUI, ma sentiti libero di giocare per migliorarlo :)):

#utenti > in{
	stile elenco: nessuna;
	margine: 10px automatico 10px -40px;
	bordo-fondo: 1px solido #333;
}
li.dropdown > il{
  Schermo: nessuna;
}
.centrato{
  Allinea testo: centro;
}
.Btn,
.Btn:messa a fuoco,
.Btn:attivo,
.Btn:visitato{
	colore di sfondo: fiordaliso;
	Schermo: bloccare;
	imbottitura: 10px 20 px;
	dimensione del font: 14Px;
	colore: bianca;
	larghezza: 120Px;
	margine: 30px automatico;
	decorazione del testo: nessuna;
}

Il markup

Adesso, aprire indice.html file e sostituisci il div “App” con il seguente markup:

<h3>Utente registrato</h3>
<ul id ="utenti">

</il>
<Br>
<div class ="centrato">
	<h3>Seleziona un Paese:</h3>
	<seleziona id="Paesi">
	</Selezionare>
	<a href ="#" id ="creare DB" class ="btn btn-primario">Crea tabelle</un'>
	<a href ="#" id ="exportDB" class ="btn btn-primario">Esporta database</un'>
	<a href ="#" id ="DB vuoto" class ="btn btn-primario">Database vuoto</un'>
	<a href ="#" id ="importDB" class ="btn btn-primario">Importa database</un'>
</Div>

L'elenco non ordinato… elenca i nostri utenti falsi e la selezione elencherà tutti i paesi che abbiamo nel nostro database.

Va bene, per il markup è tutto. Ehi, Avevo detto che era un'interfaccia utente molto scadente!

Oh, Sto dimenticando… dobbiamo aggiungere jQuery! Scarica l'ultima versione di jQuery e metti jquery-x.x.x.min.js nel tuo .js cartella e aggiungi un riferimento ad essa nel tuo indice.html file appena prima del riferimento al nostro indice.js.

A partire da index.js

L'unica cosa che dobbiamo fare per il momento è rimuovere le seguenti righe di codice che appartengono all'app Cordova predefinita:

var parentElement = document.getElementById(Id);
var listeningElement = parentElement.querySelector('.ascoltando');
var receivedElement = parentElement.querySelector('.Received');

listeningElement.setAttribute('stile', 'Schermo:nessuna;');
ricevutoElement.setAttribute('stile', 'Schermo:bloccare;');

console.log('Evento ha ricevuto: ' + Id);

Va bene, puoi usare la tua CLI per navigare nella directory del tuo progetto /dropboxTest/ ed esegui l'app solo per verificare che tutto sia a posto:

cordova esegui Android

Dovresti vedere l'immagine qui sotto:

App di base

Creazione del database

Adesso, È il momento di creare il nostro database con un paio di tabelle e alcuni dati, solo per avere qualcosa con cui giocare quando dovremo esportare il nostro database su Dropbox (e importalo di nuovo nella nostra app). Per prima cosa dobbiamo creare il database e ottenere un riferimento all'oggetto del database. Metti questa riga subito dopo app.initialize();

var db = window.openDatabase("dropboxTest", "1.0", "Test di importazione/esportazione del processo di dati con Dropbox", 200000);

Ora creeremo un utenti tavolo con 4 utenti e a Paesi tabella che contiene tutti i paesi del mondo. Avvolgeremo il codice necessario in 2 funzioni, createUsersTable() e createUsersTable() in modo da poterli chiamare quando avremo bisogno. Così, inserisci il seguente codice nel tuo JS / index.js dopo aver creato il database:

funzione createCountryTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("DROP TABLE SE ESISTONO paesi");
		tx.executeSql("CREA TABELLA SE NON ESISTE paesi (id INCREMENTO AUTOMATICO CHIAVE PRIMARIA INTEGER, paese INTEGER, codice TESTO)", [], countryCreatedSuccess, countryCreatedError);
		tx.executeSql("INSERIRE NEI paesi (Id, nazione, codice) VALORI (1, "Afghanistan", 'DI'),(2, «Albania», «AL»),(3, «Algeria», «DZ»),(4, 'Andorra', 'ANNO DOMINI'),(5, «Angola», 'A'),(6, 'Antigua e Barbuda', «AG»),(7, "Argentina", 'INSIEME A'),(8, «Armenia», 'SONO'),(9, 'Australia', 'A'),(10, «Austria», 'A'),	(11, 'Azerbaigian', 'IL'),(12, «Bahamas, Il', «BS»),(13, 'Bahrein', «BH»),(14, "Bangladesh", «BD»),(15, 'Barbado', «BB»),(16, 'Bielorussia', 'DI'),(17, 'Belgio', 'ESSERE'),(18, 'Belize', «BZ»),	(19, 'benin', 'BJ'),(20, 'Bhutan', «BT»),(21, 'Bolivia', «BO»),(22, 'Bosnia Erzegovina', «BA»),(23, "Botswana", 'bianco e nero'),(24, 'Brasile', 'BR'),(25, 'Brune', «BN»),(26, «Bulgaria», «BG»),(27, 'Burkina Faso', «BF»),(28, 'Burundi', 'CON UN'),(29, 'Cambogia', 'KH'),(30, 'Camerun', «CM»),(31, «Canada», 'QUELLO'),(32, «Capo Verde», «CV»),(33, "Repubblica Centrafricana", «CF»),(34, 'Ciad', 'TD'),(35, «Cile», «CL»),(36, 'Cina, Repubblica popolare di', «NC»),(37, «Colombia», «CO»),(38, "Comore", «KM»),(39, "Congo", (Congo ? Kinshasa)', 'CD'),(40, "Congo", (Congo ? Brazzaville)', 'CG'),(41, 'Costa Rica', «CR»),	(42, 'Costa d'Avorio (Costa d'Avorio)', «CI»),	(43, 'Croazia', "Risorse umane"),	(44, «Cuba», 'INSIEME A'),	(45, 'Cipro', «CY»),	(46, 'Repubblica Ceca', "CZ"),(47, 'Danimarca', 'non so'),	(48, 'Gibuti', "DJ"),	(49, "Dominica", «DM»),	(50, 'Repubblica Dominicana', 'FARE'),	(51, «Ecuador», "CE"),	(52, 'Egitto', 'PER ESEMPIO'),	(53, 'Il salvatore', «SV»),	(54, 'Guinea Equatoriale', 'GQ'),	(55, 'Eritrea', 'È'),	(56, «Estonia», 'SÌ'),	(57, 'Etiopia', 'E'),	(58, «Figi», «FJ»),	(59, 'Finlandia', 'ESSERE'),	(60, 'Francia', «FR»),	(61, «Gabon», «GA»),(62, «Gambia, Il', «GM»),(63, «Georgia», 'DARE'),(64, 'Germania', 'A PARTIRE DAL'),	(65, «Ghana», «GH»),	(66, 'Grecia', «GR»),	(67, "Grenata", «GD»),	(68, 'Guatemala', «GT»),	(69, «Guinea», «GN»),	(70, "Guinea-Bissau", 'GW'),	(71, 'Guyana', 'GY'),	(72, 'Haiti', «HT»),	(73, 'Honduras', «HN»),	(74, 'Ungheria', «HU»),	(75, 'Islanda', 'È'),	(76, «India», 'IN'),	(77, «Indonesia», «Documento d'identità»),	(78, "Iran", «IR»),	(79, 'Iraq', 'QI'),	(80, 'Irlanda', 'CIOÈ'),	(81, 'Israele', «IL»),	(82, 'Italia', 'ESSO'),(83, 'Giamaica', «JM»),	(84, 'Giappone', «JP»),	(85, 'Giordania', 'GIÀ'),	(86, "Kazakistan", 'KZ'),	(87, 'Kenia', 'Ke'),	(88, "Kiribati", 'Ki'),	(89, 'Corea, Nord', «KP»),	(90, 'Corea, Sud', «KR»),	(91, «Kuwait», 'KW'),(92, "Kirghizistan", «KG»),	(93, 'Laos', 'IL'),	(94, 'Lettonia', «LV»),	(95, 'Libano', 'LIBBRE'),	(96, 'Lesotho', «LS»),	(97, «Liberia», «LR»),	(98, 'Libia', 'LY'),	(99, "Liechtenstein", 'AL'),	(100, 'Lituania', «LT»),	(101, "Lussemburgo", «LU»),	(102, "Macedonia", «MK»),	(103, 'Madagascar', "MG"),	(104, 'Malawi', «MW»),	(105, 'Malesia', 'MIO'),	(106, 'Maldive', 'MV'),	(107, «Mali», «ML»),	(108, «Malta», 'MT'),	(109, 'Isole Marshall', «MH»),	(110, "Mauritania", 'SIG'),	(111, "Maurizio", «MU»),	(112, 'Messico', 'MX'),	(113, "Micronesia", 'FM'),	(114, "Moldavia", «Dottore»),	(115, "Monaco", 'MC'),	(116, 'Mongolia', «MN»),	(117, «Montenegro», 'IO'),	(118, 'Marocco', «MA»),	(119, "Mozambico", «MZ»),	(120, «Myanmar (Birmania)', «MM»),	(121, «Namibia», 'N / A'),	(122, 'Nauru', 'NO'),	(123, 'Nepal', 'PER ESEMPIO'),	(124, 'Olanda', «NL»),	(125, 'Nuova Zelanda', «Nuova Zelanda»),	(126, 'Nicaragua', «NI»),	(127, «Niger», 'NATO'),	(128, «Nigeria», «NG»),	(129, 'Norvegia', «NO»),	(130, 'Oman', 'SE'),	(131, «Pakistan», «PK»),	(132, 'Pala', «PW»),	(133, «Panama», 'PAPÀ'),	(134, 'Papua Nuova Guinea', «PG»),	(135, "Paraguay", 'PI'),	(136, 'Perù', 'SU'),	(137, "Filippine", 'PH'),	(138, 'Polonia', «PL»),	(139, 'Portogallo', «PT»),	(140, «Qatar», «QA»),	(141, «Romania», «RO»),	(142, «Russia», «RU»),	(143, 'Ruanda', «RW»),	(144, "Saint Kitts e Nevis", 'KN'),	(145, 'Santa Lucia', «LC»),	(146, "Saint Vincent e Grenadine", 'TU'),	(147, 'Samoa', «WS»),	(148, 'San Marino', «SM»),	(149, "Sao Tomé e Principe", 'NS'),	(150, 'Arabia Saudita', 'A'),	(151, «Senegal», «SN»),	(152, «Serbia», 'RS'),	(153, "Seychelles", 'NS'),	(154, 'Sierra Leone', «SL»),	(155, «Singapore», «SG»),	(156, "Slovacchia", 'SK'),	(157, "Slovenia", 'E'),	(158, 'Isole Salomone', «SB»),	(159, «Somalia», 'COSÌ'),	(160, 'Sud Africa', 'PER'),	(161, 'Spagna', 'È'),	(162, 'Sri Lanka', 'PAGINA'),	(163, 'Sudan', 'SD'),	(164, «Suriname», «SR»),	(165, "Swaziland", 'SZ'),	(166, 'Svezia', 'LO SO'),	(167, 'Svizzera', «CH»),	(168, 'Siria', 'IL SUO'),	(169, "Tagikistan", 'TJ'),	(170, «Tanzania», 'ZZ'),	(171, 'Tailandia', 'NS'),	(172, Timor Est (Timor Est)', 'TL'),	(173, 'Andare', «TG»),	(174, 'Tonga', 'A'),	(175, 'Trinidad e Tobago', «TT»),	(176, «Tunisia», «TN»),	(177, 'Tacchino', «TR»),	(178, "Turkmenistan", 'TM'),	(179, 'Tuvalu', 'TV'),	(180, 'Uganda', 'UG'),	(181, 'Ucraina', «UA»),	(182, 'Emirati Arabi Uniti', «AE»),	(183, 'Regno Unito', «GB»),	(184, 'Stati Uniti', 'NOI'),	(185, «Uruguay», 'U'),	(186, «Uzbekistan», 'A'),	(187, Vanuatu, 'VISTO'),	(188, 'Città del Vaticano', «VA»),	(189, 'Venezuela', 'E'),	(190, 'Vietnam', «VN»),	(191, 'Yemen', 'VOI'),	(192, «Zambia», «ZM»),	(193, «Zimbabwe», 'Z W'),	(194, 'Abcasia', 'DARE'),	(195, 'Cina, Repubblica di (Taiwan)', 'TW'),	(196, "Nagorno-Karabakh", 'IL'),	(197, "Cipro settentrionale", «CY»),	(198, "Pridnestrovie" (Transnistria)', «Dottore»),	(199, 'Somalia', 'COSÌ'),	(200, "Ossezia del Sud", 'DARE'),	(201, "Isole Ashmore e Cartier", 'A'),	(202, 'Isola di Natale', 'CX'),	(203, «Cocco (Keeling) Isole', «CC»),	(204, "Isole del Mar dei Coralli", 'A'),	(205, "Isole Heard e McDonald", «HM»),	(206, "Isola Norfolk", «NF»),	(207, 'Nuova Caledonia', «NC»),	(208, 'Polinesia francese', «PF»),	(209, 'Mayotte', 'YT'),	(210, "San Bartolomeo", 'GP'),	(211, 'San Martino', 'GP'),	(212, "San Pietro e Miquelon", "Primo giorno"),	(213, "Wallis e Futuna", «WF»),	(214, "Terre australi e antartiche francesi", «TF»),	(215, "Isola di Clipperton", «PF»),	(216, "Isola Bouvet", 'VB'),	(217, 'Isole Cook', «CK»),	(218, 'Nuovo', 'NON'),	(219, 'Tokelau', «TK»),	(220, 'Guernsey', 'GG'),	(221, 'Isola di Man', 'IO SONO'),	(222, 'Maglia', 'JE'),	(223, 'Anguilla', 'IA'),	(224, 'Bermuda', «BM»),	(225, 'Territorio britannico dell'Oceano Indiano', 'IO'),	(226, "Aree di base sovrana britannica", ''),	(227, 'Isole Vergini Britanniche', «VG»),	(228, 'Isole Cayman', 'KY'),	(229, 'Isole Falkland (Isole Falkland)', «FK»),	(230, 'Gibilterra', 'DARE'),	(231, "Monserrato", 'SM'),	(232, "Isole Pitcairn", «PN»),	(233, 'Sant'Elena', 'SH'),	(234, "Georgia del Sud" & Isole Sandwich Meridionali", «GS»),	(235, 'Isole Turks e Caicos', «TC»),	(236, 'Isole Marianne settentrionali', 'deputato'),	(237, "Porto Rico", «PR»),	(238, 'Samoa americane', 'COME'),	(239, "Isola del panettiere", 'UN'),	(240, 'Guam', «GU»),	(241, 'Isola Howland', 'UN'),	(242, "Isola Jarvis", 'UN'),	(243, "Atollo Johnston", 'UN'),	(244, 'Barriera corallina di Kingman', 'UN'),	(245, "Isole intermedie", 'UN'),	(246, 'Isola Navassa', 'UN'),	(247, "Atollo di Palmira", 'UN'),	(248, 'NOI. Isole Vergini', 'NOI'),	(249, "Isola del risveglio", 'UN'),	(250, 'Hong Kong', «HK»),	(251, 'Macao', «MO»),	(252, 'Isole Faroe', 'NS'),	(253, 'Groenlandia', «GL»),	(254, 'Guiana francese', «GF»),	(255, 'Guadalupa', 'GP'),	(256, "Martinica", 'MQ'),	(257, 'Riunione', 'RIF'),	(258, 'Una terra', 'ASCIA'),	(259, 'Aruba', 'AW'),	(260, 'Antille Olandesi', 'UN'),	(261, 'Svalbard', «SJ»),	(262, 'Ascensione', «AC»),	(263, "Tristano da Cunha", «TA»),	(268, "Territorio antartico australiano", 'QA'),	(269, "Dipendenza Ross", 'QA'),	(270, "Isola Pietro I", 'QA'),	(271, "Terra della Regina Maud", 'QA'),	(272, "Territorio antartico britannico", 'QA');", [], countryFilledSuccess, countryFilledError);
		funzione countryCreatedSuccess() {
			console.log('Tabella dei paesi creata con successo!');
		}
		funzione countryCreatedError(Tx, errore) {
			console.log(messaggio di errore);
		}
		funzione countryFilledSuccess() {
			console.log('Tabella dei paesi compilata con successo!');
			caricaPaesi();
		}
		funzione countryFilledError(Tx, errore) {
			console.log(messaggio di errore);
		}

	});
}

funzione createUsersTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("ELIMINA TABELLA SE ESISTE utenti");
		tx.executeSql("CREA TABELLA SE NON ESISTE utenti (id INCREMENTO AUTOMATICO CHIAVE PRIMARIA INTEGER, nome TEXT, cognome TEXT, indirizzo_email TESTO, paese TESTO)", [], userCreatedSuccess, UserCreatedError);
		tx.executeSql("INSERIRE NEGLI utenti (Id, nome di battesimo, cognome, indirizzo email, nazione) VALORI (1, 'Giovanni', 'Dina', 'john.doe@email.com', 'STATI UNITI D'AMERICA'), (2, 'Miguel', 'Olivare', 'miguel.olivares.Doe@email.es', 'Spagna'), (3, 'Franco', 'Kuttermeyer', 'frankut@email.de', 'Germania'), (4, 'Marianna', 'Jolie', 'mariannejolie@email.fr', 'Francia')", [], userFilledSuccess, UserFilledError);
		funzione userCreatedSuccess() {
			console.log('Tabella degli utenti creata con successo!');
		}
		funzione userCreatedError(Tx, errore) {
			console.log(messaggio di errore);
		}
		funzione userFilledSuccess() {
			console.log('Tabella degli utenti compilata con successo!');
			caricaUtenti();
		}
		funzione userFilledError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}

funzione createTables() {
	createCountryTable();
	createUsersTable();
}

Dropping tabelle

Abbiamo anche bisogno di qualcosa per far cadere i nostri tavoli, così potremo testare importare database funzione. Facciamolo:

funzione dropCountriesTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("DROP TABLE SE ESISTONO paesi", [], dropPaesiSuccesso, dropCountriesError);
		funzione dropPaesiSuccesso() {
			console.log('Tabella dei paesi eliminata con successo!');
			caricaPaesi();
		}
		funzione dropCountriesError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}

funzione dropUsersTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("ELIMINA TABELLA SE ESISTE utenti", [], dropUsersSuccess, dropUsersError);
		funzione dropUsersSuccess() {
			console.log('Tabella degli utenti eliminata con successo!');
			caricaUtenti();
		}
		funzione dropUsersError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}
funzione dropTables(){
	dropUsersTable();
	dropCountriesTable();
}

Carica i dati nel nostro markup

Bene. Ora dobbiamo scrivere le funzioni per caricare i nostri dati e riempire la nostra pagina con loro. Tornare a JS / index.js file e continua ad aggiungere le seguenti funzioni:

funzione caricoPaesi() {
	var qry = "SELEZIONA ID, paese DA paesi";
	db.transaction(funzione (Tx) {
		tx.executeSql(qry, [], querySuccess, queryError);
		funzione querySuccess(Tx, dati) {
			$('seleziona#paesi').figli().rimuovere();
			var paesi = {};
			per (var io = 0; io < dati.righe.lunghezza; io++) {
				$('seleziona#paesi').aggiungere('<valore opzione="' + dati.righe[io].Id + '">' + dati.righe[io].nazione + '</opzione>');
			}
		}
		funzione queryError(transazione, errore) {
			console.log('Query errorHandler' + messaggio di errore + 'in interrogazione' + qry);
                        //usiamo la funzione di callback di errore per svuotare i controlli della pagina   
			$('seleziona#paesi').figli().rimuovere();
			$('seleziona#paesi').aggiungere('<opzione>Non sono stati trovati dati sul paese!</opzione>');
		}
	});
}

funzione loadUsers() {
	var qry = "SELECT nome, cognome, indirizzo email, paese FROM utenti";
	db.transaction(funzione (Tx) {
		tx.executeSql(qry, [], querySuccess, queryError);
		funzione querySuccess(Tx, dati) {
			$('#utenti').figli().rimuovere();
			per (var io = 0; io < dati.righe.lunghezza; io++) {
				$('#utenti').aggiungere('<Li = classe"cadere in picchiata">'
						+ dati.righe[io].nome di battesimo
						+ ' '
						+ dati.righe[io].cognome
						+ '<ul class ="sottomenu"><in>'
						+ dati.righe[io].indirizzo email
						+ '</in><in>'
						+ dati.righe[io].nazione
						+ '</in></il></in>');
			}
		}
		funzione queryError(transazione, errore) {
			console.log('Query errorHandler' + messaggio di errore + 'in interrogazione' + qry);
                        //usiamo la funzione di callback di errore per svuotare i controlli della pagina   
			$('#utenti').figli().rimuovere();
			$('#utenti').aggiungere('<opzione>Nessun dato utente trovato!</opzione>');
		}
	});
}

Così, noi abbiamo 2 funzioni che caricano i dati dal database e li utilizzano per compilare i nostri controlli nell'applicazione principale (e unico) pagina. Queste funzioni vengono chiamate nel callback di successo delle funzioni che creano le tabelle.

Ora aggiungiamo i gestori di eventi per i nostri pulsanti: per il momento solo due pulsanti faranno qualcosa di interessante. Ovviamente, inseriamo i gestori di eventi all'interno della funzione jQuery principale; qui chiamiamo le nostre due funzioni per popolare i nostri controlli con i dati se il database è già stato creato.

$(documento).pronto(funzione () {
	caricaPaesi();
	caricaUtenti();
	$('#creaDB').clic(funzione (e) {
		e.preventDefault();
		creare tabelle();
	});

	$('#exportDB').clic(funzione (e) {
		e.preventDefault();

	});

	$('#DB vuoto').clic(funzione (e) {
		e.preventDefault();
		dropTables();
	});

	$('#importDB').clic(funzione (e) {
		e.preventDefault();

	});
});

Come tocco finale, Aggiungiamo qualche riga di javascript per rendere i nostri utenti’ Elenco Lavoro come fisarmonica (Ho usato qui una versione leggermente diversa del codice che ho illustrato nel mio articolo La fisarmonica jQuery più semplice di sempre!):

	$('#utenti').su('clic', 'li.dropdown', funzione (e) {
		e.preventDefault();
		console.log($(Questo).testo());
		var elementi = $(Questo).fratelli().trova('ul.sottomenu');
		articoli.ciascuno(funzione () {
			Se ($(Questo).è(':visibile')) {
				$(Questo).scorrere verso l'alto('Lento');
			}
		});
		$(Questo).trova('ul.sottomenu').slideToggle();
	});

Riassumendo

Giusto per essere sicuri che sia tutto chiaro, Ti mostro come appare ogni file dell'applicazione (Ho appena rimosso i commenti superflui).

indice.html

<!DOCTYPE html>
<.html>
    <testa>
        <meta http-equiv ="Content-Security-politica" = contenuto"default-src dati 'sé': divario: https://ssl.gstatic.com 'insicuro-eval'; style-src 'sé' 'non sicuro-inline'; media-src *; Dati img-src 'sé': soddisfare:;">
        <meta name ="format-rilevamento" = contenuto"telefono = no">
        <meta name ="msapplication-tap-evidenziazione" = contenuto"No">
        <meta name ="Finestra" = contenuto"user-scalable = no, iniziale scala = 1, massima scala = 1, minimo scala = 1, larghezza = device-width">
        <Link rel ="foglio di stile" type ="text / css" href ="css / index.css">
        <titolo>Ciao mondo</titolo>
    </testa>
    <corpo>
		<h3>Utente registrato</h3>
		<ul id ="utenti">

		</il>
		<Br>
		<div class ="centrato">
			<h3>Seleziona un Paese:</h3>
			<seleziona id="Paesi">
			</Selezionare>
			<a href ="#" id ="creare DB" class ="btn btn-primario">Crea tabelle</un'>
			<a href ="#" id ="exportDB" class ="btn btn-primario">Esporta database</un'>
			<a href ="#" id ="DB vuoto" class ="btn btn-primario">Database vuoto</un'>
			<a href ="#" id ="importDB" class ="btn btn-primario">Importa database</un'>
		</Div>
		<script type ="text / javascript" src ="Cordova.js"></copione>
		<script type ="text / javascript" src ="JS / jquery-2.2.3.min.js"></copione>
		<script type ="text / javascript" src ="JS / index.js"></copione>
	</corpo>
</.html>

indice.css

#utenti > in{
	stile elenco: nessuna;
	margine: 10px automatico 10px -40px;
	bordo-fondo: 1px solido #333;
}
li.dropdown > il{
  Schermo: nessuna;
}
.centrato{
	Allinea testo: centro;
}
.Btn,
.Btn:messa a fuoco,
.Btn:attivo,
.Btn:visitato{
	colore di sfondo: fiordaliso;
	Schermo: bloccare;
	imbottitura: 10px 20 px;
	dimensione del font: 14Px;
	colore: bianca;
	larghezza: 120Px;
	margine: 30px automatico;
	decorazione del testo: nessuna;
}

indice.js

era app = {
	inizializzare: funzione () {
		document.addEventListener('Deviceready', this.onDeviceReady.bind(Questo), falso);
	},
	onDeviceReady: funzione () {
		this.receivedEvent('Deviceready');
	},
	receivedEvent: funzione (Id) {
		var parentElement = document.getElementById(Id);
		var listeningElement = parentElement.querySelector('.ascoltando');
		var receivedElement = parentElement.querySelector('.Received');

		listeningElement.setAttribute('stile', 'Schermo:nessuna;');
		ricevutoElement.setAttribute('stile', 'Schermo:bloccare;');

		console.log('Evento ha ricevuto: ' + Id);
	}
};

app.initialize();

var db = window.openDatabase("dropbox_test", "1.0", "Test di importazione/esportazione del processo di dati con Dropbox", 200000);

funzione createCountryTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("DROP TABLE SE ESISTONO paesi");
		tx.executeSql("CREA TABELLA SE NON ESISTE paesi (id INCREMENTO AUTOMATICO CHIAVE PRIMARIA INTEGER, paese INTEGER, codice TESTO)", [], countryCreatedSuccess, countryCreatedError);
		tx.executeSql("INSERIRE NEI paesi (Id, nazione, codice) VALORI (1, "Afghanistan", 'DI'),(2, «Albania», «AL»),(3, «Algeria», «DZ»),(4, 'Andorra', 'ANNO DOMINI'),(5, «Angola», 'A'),(6, 'Antigua e Barbuda', «AG»),(7, "Argentina", 'INSIEME A'),(8, «Armenia», 'SONO'),(9, 'Australia', 'A'),(10, «Austria», 'A'),	(11, 'Azerbaigian', 'IL'),(12, «Bahamas, Il', «BS»),(13, 'Bahrein', «BH»),(14, "Bangladesh", «BD»),(15, 'Barbado', «BB»),(16, 'Bielorussia', 'DI'),(17, 'Belgio', 'ESSERE'),(18, 'Belize', «BZ»),	(19, 'benin', 'BJ'),(20, 'Bhutan', «BT»),(21, 'Bolivia', «BO»),(22, 'Bosnia Erzegovina', «BA»),(23, "Botswana", 'bianco e nero'),(24, 'Brasile', 'BR'),(25, 'Brune', «BN»),(26, «Bulgaria», «BG»),(27, 'Burkina Faso', «BF»),(28, 'Burundi', 'CON UN'),(29, 'Cambogia', 'KH'),(30, 'Camerun', «CM»),(31, «Canada», 'QUELLO'),(32, «Capo Verde», «CV»),(33, "Repubblica Centrafricana", «CF»),(34, 'Ciad', 'TD'),(35, «Cile», «CL»),(36, 'Cina, Repubblica popolare di', «NC»),(37, «Colombia», «CO»),(38, "Comore", «KM»),(39, "Congo", (Congo ? Kinshasa)', 'CD'),(40, "Congo", (Congo ? Brazzaville)', 'CG'),(41, 'Costa Rica', «CR»),	(42, 'Costa d'Avorio (Costa d'Avorio)', «CI»),	(43, 'Croazia', "Risorse umane"),	(44, «Cuba», 'INSIEME A'),	(45, 'Cipro', «CY»),	(46, 'Repubblica Ceca', "CZ"),(47, 'Danimarca', 'non so'),	(48, 'Gibuti', "DJ"),	(49, "Dominica", «DM»),	(50, 'Repubblica Dominicana', 'FARE'),	(51, «Ecuador», "CE"),	(52, 'Egitto', 'PER ESEMPIO'),	(53, 'Il salvatore', «SV»),	(54, 'Guinea Equatoriale', 'GQ'),	(55, 'Eritrea', 'È'),	(56, «Estonia», 'SÌ'),	(57, 'Etiopia', 'E'),	(58, «Figi», «FJ»),	(59, 'Finlandia', 'ESSERE'),	(60, 'Francia', «FR»),	(61, «Gabon», «GA»),(62, «Gambia, Il', «GM»),(63, «Georgia», 'DARE'),(64, 'Germania', 'A PARTIRE DAL'),	(65, «Ghana», «GH»),	(66, 'Grecia', «GR»),	(67, "Grenata", «GD»),	(68, 'Guatemala', «GT»),	(69, «Guinea», «GN»),	(70, "Guinea-Bissau", 'GW'),	(71, 'Guyana', 'GY'),	(72, 'Haiti', «HT»),	(73, 'Honduras', «HN»),	(74, 'Ungheria', «HU»),	(75, 'Islanda', 'È'),	(76, «India», 'IN'),	(77, «Indonesia», «Documento d'identità»),	(78, "Iran", «IR»),	(79, 'Iraq', 'QI'),	(80, 'Irlanda', 'CIOÈ'),	(81, 'Israele', «IL»),	(82, 'Italia', 'ESSO'),(83, 'Giamaica', «JM»),	(84, 'Giappone', «JP»),	(85, 'Giordania', 'GIÀ'),	(86, "Kazakistan", 'KZ'),	(87, 'Kenia', 'Ke'),	(88, "Kiribati", 'Ki'),	(89, 'Corea, Nord', «KP»),	(90, 'Corea, Sud', «KR»),	(91, «Kuwait», 'KW'),(92, "Kirghizistan", «KG»),	(93, 'Laos', 'IL'),	(94, 'Lettonia', «LV»),	(95, 'Libano', 'LIBBRE'),	(96, 'Lesotho', «LS»),	(97, «Liberia», «LR»),	(98, 'Libia', 'LY'),	(99, "Liechtenstein", 'AL'),	(100, 'Lituania', «LT»),	(101, "Lussemburgo", «LU»),	(102, "Macedonia", «MK»),	(103, 'Madagascar', "MG"),	(104, 'Malawi', «MW»),	(105, 'Malesia', 'MIO'),	(106, 'Maldive', 'MV'),	(107, «Mali», «ML»),	(108, «Malta», 'MT'),	(109, 'Isole Marshall', «MH»),	(110, "Mauritania", 'SIG'),	(111, "Maurizio", «MU»),	(112, 'Messico', 'MX'),	(113, "Micronesia", 'FM'),	(114, "Moldavia", «Dottore»),	(115, "Monaco", 'MC'),	(116, 'Mongolia', «MN»),	(117, «Montenegro», 'IO'),	(118, 'Marocco', «MA»),	(119, "Mozambico", «MZ»),	(120, «Myanmar (Birmania)', «MM»),	(121, «Namibia», 'N / A'),	(122, 'Nauru', 'NO'),	(123, 'Nepal', 'PER ESEMPIO'),	(124, 'Olanda', «NL»),	(125, 'Nuova Zelanda', «Nuova Zelanda»),	(126, 'Nicaragua', «NI»),	(127, «Niger», 'NATO'),	(128, «Nigeria», «NG»),	(129, 'Norvegia', «NO»),	(130, 'Oman', 'SE'),	(131, «Pakistan», «PK»),	(132, 'Pala', «PW»),	(133, «Panama», 'PAPÀ'),	(134, 'Papua Nuova Guinea', «PG»),	(135, "Paraguay", 'PI'),	(136, 'Perù', 'SU'),	(137, "Filippine", 'PH'),	(138, 'Polonia', «PL»),	(139, 'Portogallo', «PT»),	(140, «Qatar», «QA»),	(141, «Romania», «RO»),	(142, «Russia», «RU»),	(143, 'Ruanda', «RW»),	(144, "Saint Kitts e Nevis", 'KN'),	(145, 'Santa Lucia', «LC»),	(146, "Saint Vincent e Grenadine", 'TU'),	(147, 'Samoa', «WS»),	(148, 'San Marino', «SM»),	(149, "Sao Tomé e Principe", 'NS'),	(150, 'Arabia Saudita', 'A'),	(151, «Senegal», «SN»),	(152, «Serbia», 'RS'),	(153, "Seychelles", 'NS'),	(154, 'Sierra Leone', «SL»),	(155, «Singapore», «SG»),	(156, "Slovacchia", 'SK'),	(157, "Slovenia", 'E'),	(158, 'Isole Salomone', «SB»),	(159, «Somalia», 'COSÌ'),	(160, 'Sud Africa', 'PER'),	(161, 'Spagna', 'È'),	(162, 'Sri Lanka', 'PAGINA'),	(163, 'Sudan', 'SD'),	(164, «Suriname», «SR»),	(165, "Swaziland", 'SZ'),	(166, 'Svezia', 'LO SO'),	(167, 'Svizzera', «CH»),	(168, 'Siria', 'IL SUO'),	(169, "Tagikistan", 'TJ'),	(170, «Tanzania», 'ZZ'),	(171, 'Tailandia', 'NS'),	(172, Timor Est (Timor Est)', 'TL'),	(173, 'Andare', «TG»),	(174, 'Tonga', 'A'),	(175, 'Trinidad e Tobago', «TT»),	(176, «Tunisia», «TN»),	(177, 'Tacchino', «TR»),	(178, "Turkmenistan", 'TM'),	(179, 'Tuvalu', 'TV'),	(180, 'Uganda', 'UG'),	(181, 'Ucraina', «UA»),	(182, 'Emirati Arabi Uniti', «AE»),	(183, 'Regno Unito', «GB»),	(184, 'Stati Uniti', 'NOI'),	(185, «Uruguay», 'U'),	(186, «Uzbekistan», 'A'),	(187, Vanuatu, 'VISTO'),	(188, 'Città del Vaticano', «VA»),	(189, 'Venezuela', 'E'),	(190, 'Vietnam', «VN»),	(191, 'Yemen', 'VOI'),	(192, «Zambia», «ZM»),	(193, «Zimbabwe», 'Z W'),	(194, 'Abcasia', 'DARE'),	(195, 'Cina, Repubblica di (Taiwan)', 'TW'),	(196, "Nagorno-Karabakh", 'IL'),	(197, "Cipro settentrionale", «CY»),	(198, "Pridnestrovie" (Transnistria)', «Dottore»),	(199, 'Somalia', 'COSÌ'),	(200, "Ossezia del Sud", 'DARE'),	(201, "Isole Ashmore e Cartier", 'A'),	(202, 'Isola di Natale', 'CX'),	(203, «Cocco (Keeling) Isole', «CC»),	(204, "Isole del Mar dei Coralli", 'A'),	(205, "Isole Heard e McDonald", «HM»),	(206, "Isola Norfolk", «NF»),	(207, 'Nuova Caledonia', «NC»),	(208, 'Polinesia francese', «PF»),	(209, 'Mayotte', 'YT'),	(210, "San Bartolomeo", 'GP'),	(211, 'San Martino', 'GP'),	(212, "San Pietro e Miquelon", "Primo giorno"),	(213, "Wallis e Futuna", «WF»),	(214, "Terre australi e antartiche francesi", «TF»),	(215, "Isola di Clipperton", «PF»),	(216, "Isola Bouvet", 'VB'),	(217, 'Isole Cook', «CK»),	(218, 'Nuovo', 'NON'),	(219, 'Tokelau', «TK»),	(220, 'Guernsey', 'GG'),	(221, 'Isola di Man', 'IO SONO'),	(222, 'Maglia', 'JE'),	(223, 'Anguilla', 'IA'),	(224, 'Bermuda', «BM»),	(225, 'Territorio britannico dell'Oceano Indiano', 'IO'),	(226, "Aree di base sovrana britannica", ''),	(227, 'Isole Vergini Britanniche', «VG»),	(228, 'Isole Cayman', 'KY'),	(229, 'Isole Falkland (Isole Falkland)', «FK»),	(230, 'Gibilterra', 'DARE'),	(231, "Monserrato", 'SM'),	(232, "Isole Pitcairn", «PN»),	(233, 'Sant'Elena', 'SH'),	(234, "Georgia del Sud" & Isole Sandwich Meridionali", «GS»),	(235, 'Isole Turks e Caicos', «TC»),	(236, 'Isole Marianne settentrionali', 'deputato'),	(237, "Porto Rico", «PR»),	(238, 'Samoa americane', 'COME'),	(239, "Isola del panettiere", 'UN'),	(240, 'Guam', «GU»),	(241, 'Isola Howland', 'UN'),	(242, "Isola Jarvis", 'UN'),	(243, "Atollo Johnston", 'UN'),	(244, 'Barriera corallina di Kingman', 'UN'),	(245, "Isole intermedie", 'UN'),	(246, 'Isola Navassa', 'UN'),	(247, "Atollo di Palmira", 'UN'),	(248, 'NOI. Isole Vergini', 'NOI'),	(249, "Isola del risveglio", 'UN'),	(250, 'Hong Kong', «HK»),	(251, 'Macao', «MO»),	(252, 'Isole Faroe', 'NS'),	(253, 'Groenlandia', «GL»),	(254, 'Guiana francese', «GF»),	(255, 'Guadalupa', 'GP'),	(256, "Martinica", 'MQ'),	(257, 'Riunione', 'RIF'),	(258, 'Una terra', 'ASCIA'),	(259, 'Aruba', 'AW'),	(260, 'Antille Olandesi', 'UN'),	(261, 'Svalbard', «SJ»),	(262, 'Ascensione', «AC»),	(263, "Tristano da Cunha", «TA»),	(268, "Territorio antartico australiano", 'QA'),	(269, "Dipendenza Ross", 'QA'),	(270, "Isola Pietro I", 'QA'),	(271, "Terra della Regina Maud", 'QA'),	(272, "Territorio antartico britannico", 'QA');", [], countryFilledSuccess, countryFilledError);
		funzione countryCreatedSuccess() {
			console.log('Tabella dei paesi creata con successo!');
		}
		funzione countryCreatedError(Tx, errore) {
			console.log(messaggio di errore);
		}
		funzione countryFilledSuccess() {
			console.log('Tabella dei paesi compilata con successo!');
			caricaPaesi();
		}
		funzione countryFilledError(Tx, errore) {
			console.log(messaggio di errore);
		}

	});
}

funzione createUsersTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("ELIMINA TABELLA SE ESISTE utenti");
		tx.executeSql("CREA TABELLA SE NON ESISTE utenti (id INCREMENTO AUTOMATICO CHIAVE PRIMARIA INTEGER, nome TEXT, cognome TEXT, indirizzo_email TESTO, paese TESTO)", [], userCreatedSuccess, UserCreatedError);
		tx.executeSql("INSERIRE NEGLI utenti (Id, nome di battesimo, cognome, indirizzo email, nazione) VALORI (1, 'Giovanni', 'Dina', 'john.doe@email.com', 'STATI UNITI D'AMERICA'), (2, 'Miguel', 'Olivare', 'miguel.olivares.Doe@email.es', 'Spagna'), (3, 'Franco', 'Kuttermeyer', 'frankut@email.de', 'Germania'), (4, 'Marianna', 'Jolie', 'mariannejolie@email.fr', 'Francia')", [], userFilledSuccess, UserFilledError);
		funzione userCreatedSuccess() {
			console.log('Tabella degli utenti creata con successo!');
		}
		funzione userCreatedError(Tx, errore) {
			console.log(messaggio di errore);
		}
		funzione userFilledSuccess() {
			console.log('Tabella degli utenti compilata con successo!');
			caricaUtenti();
		}
		funzione userFilledError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}

funzione createTables() {
	createCountryTable();
	createUsersTable();
}

funzione dropCountriesTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("DROP TABLE SE ESISTONO paesi", [], dropPaesiSuccesso, dropCountriesError);
		funzione dropPaesiSuccesso() {
			console.log('Tabella dei paesi eliminata con successo!');
			caricaPaesi();
		}
		funzione dropCountriesError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}

funzione dropUsersTable() {
	db.transaction(funzione (Tx) {
		tx.executeSql("ELIMINA TABELLA SE ESISTE utenti", [], dropUsersSuccess, dropUsersError);
		funzione dropUsersSuccess() {
			console.log('Tabella degli utenti eliminata con successo!');
			caricaUtenti();
		}
		funzione dropUsersError(Tx, errore) {
			console.log(messaggio di errore);
		}
	});
}
funzione dropTables() {
	dropUsersTable();
	dropCountriesTable();
}

funzione caricoPaesi() {
	var qry = "SELEZIONA ID, paese DA paesi";
	db.transaction(funzione (Tx) {
		tx.executeSql(qry, [], querySuccess, queryError);
		funzione querySuccess(Tx, dati) {
			$('seleziona#paesi').figli().rimuovere();
			var paesi = {};
			per (var io = 0; io < dati.righe.lunghezza; io++) {
				$('seleziona#paesi').aggiungere('<valore opzione="' + dati.righe[io].Id + '">' + dati.righe[io].nazione + '</opzione>');
			}
		}
		funzione queryError(transazione, errore) {
			console.log('Query errorHandler' + messaggio di errore + 'in interrogazione' + qry);
			//usiamo la funzione di callback di errore per svuotare i controlli della pagina   
			$('seleziona#paesi').figli().rimuovere();
			$('seleziona#paesi').aggiungere('<opzione>Non sono stati trovati dati sul paese!</opzione>');
		}
	});
}

funzione loadUsers() {
	var qry = "SELECT nome, cognome, indirizzo email, paese FROM utenti";
	db.transaction(funzione (Tx) {
		tx.executeSql(qry, [], querySuccess, queryError);
		funzione querySuccess(Tx, dati) {
			$('#utenti').figli().rimuovere();
			per (var io = 0; io < dati.righe.lunghezza; io++) {
				$('#utenti').aggiungere('<Li = classe"cadere in picchiata">'
						+ dati.righe[io].nome di battesimo
						+ ' '
						+ dati.righe[io].cognome
						+ '<ul class ="sottomenu"><in>'
						+ dati.righe[io].indirizzo email
						+ '</in><in>'
						+ dati.righe[io].nazione
						+ '</in></il></in>');
			}
		}
		funzione queryError(transazione, errore) {
			console.log('Query errorHandler' + messaggio di errore + 'in interrogazione' + qry);
			//usiamo la funzione di callback di errore per svuotare i controlli della pagina   
			$('#utenti').figli().rimuovere();
			$('#utenti').aggiungere('<opzione>Nessun dato utente trovato!</opzione>');
		}
	});
}

$(documento).pronto(funzione () {
	caricaPaesi();
	caricaUtenti();
	$('#creaDB').clic(funzione (e) {
		e.preventDefault();
		creare tabelle();
	});

	$('#exportDB').clic(funzione (e) {
		e.preventDefault();

	});

	$('#DB vuoto').clic(funzione (e) {
		e.preventDefault();
		dropTables();
	});

	$('#importDB').clic(funzione (e) {
		e.preventDefault();

	});
	
	$('#utenti').su('clic', 'li.dropdown', funzione (e) {
		e.preventDefault();
		console.log($(Questo).testo());
		var elementi = $(Questo).fratelli().trova('ul.sottomenu');
		articoli.ciascuno(funzione () {
			Se ($(Questo).è(':visibile')) {
				$(Questo).scorrere verso l'alto('Lento');
			}
		});
		$(Questo).trova('ul.sottomenu').slideToggle();
	});	
	
});

Adesso, se esegui la nostra app e tocchi Crea tabelle pulsante, dovresti vedere qualcosa del genere:

Avvio dell'app
Avvio dell'app la prima volta: il database è vuoto

 

App con dati
Dopo aver toccato “Crea tabelle” pulsante, i dati sono mostrati.

Dopo aver cliccato su Database vuoto pulsante, l'app assomiglierà di nuovo al primo screenshot.

Bene, ora che abbiamo la nostra applicazione scheletro possiamo andare con la parte successiva: attivare una connessione con l'account Dropbox dell'utente. Andiamo a parte 2 di questo tutorial!

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *