Satura rādītājs
Vietni, kas izveidota ar HTML 5, JavaScript, CSS 3, var izpildīt dažādās ierīcēs, izmantojot Apache Cordova. Ja mums ir mobilā lietojumprogramma un mēs vēlamies datus uzglabāt, pārvaldīt un izgūt efektīvi un uzticami, Apache Cordova nodrošina mums spraudni SQLite datu bāzu apstrādei.Savukārt Android jau savā arhitektūrā ievieš visus nepieciešamos rīkus, lai izveidotu un pārvaldītu SQLite datu bāzes, lai mēs varētu ievietot, modificēt, konsultēties un dzēst datus. Šī datu bāze būs lokāla, tas ir, tā tiks saglabāta ierīcē, kurā darbojas lietojumprogramma.
Citā apmācībā mēs jau paskaidrojām Apache Cordova instalēšanu, šajā mēs izveidosim lietojumprogrammu, lai saprastu, kā darbojas Sqlite datu bāze no Android.
Šajā gadījumā mēs izmantosim Linux termināli, bet Apache Cordova ir daudzplatformu. Mēs sāksim, izveidojot projektu no termināļa un saknes režīmā, izmantojot šādu kodu:
cordova izveidot lietotni com.demo.app App01
cordova platforma pievienot androidMēs pieņemam, ka Android Adv pārvaldniekā mums jau ir konfigurēta ierīce, bet mēs konfigurējam ierīci, kas atbalsta Api 19 un turpmāk, tas ir, Android 4.4.2
pievienojiet cordova spraudni https://github.com/brodysoft/Cordova-SQLitePlugin.gitMēs pārbaudīsim, vai noklusējuma lietojumprogramma darbojas, tāpēc mēs ejam uz termināli un rakstām šādu kodu
cordova emulate androidTā sāks apkopot lietojumprogrammu, un, ja viss darbojas, mums vajadzētu redzēt emulēto ierīci, kā parādīts zemāk.
PALIELINĀT
Tad mēs mainām bloku Esmu iekļāvis veidlapu datu ievadīšanai
Līnijakalpos, lai parādītu ievadītos datus, kas atrodami datu bāzē. Css direktorijā atrodam failu index.css, atveram šo failu, izdzēšam tā saturu un pievienojam šādu stila kodu, lai veidlapai piešķirtu dizainu.Kontaktinformācija
Iegravēt
- Vārds
- E-pasts
html, body, h1, form, fieldset, ol, li {margin: 0; polsterējums: 0; } body {background: #ffffff; krāsa: # 111111; fontu saime: Georgia, "Times New Roman", Times, serif; polsterējums: 20 pikseļi; } veidlapa # kontakti {fons: # 9cbc2c; -moz-border-rādiuss: 5 pikseļi; -webkit-border-rādiuss: 5 pikseļi; polsterējums: 20 pikseļi; platums: 400 pikseļi; augstums: 150 pikseļi; } veidlapa # kontaktu lauku kopa {robeža: nav; apakšējā mala: 10 pikseļi; } veidlapa # kontaktu lauku kopa: pēdējā tipa {margin-bottom: 0; } veidlapa # kontaktu leģenda {krāsa: # 384313; fonta lielums: 16 pikseļi; fonta svars: treknraksts; polsterējums apakšā: 10 pikseļi; } veidlapa # kontakti> lauku kopa> apzīmējums: pirms {content: "Step" counter (fieldets) ":"; skaitliskais pieaugums: lauku kopas; } veidlapa # kontakti fieldset fieldset legend {color: # 111111; fonta lielums: 13 pikseļi; fonta svars: normāls; polsterējums apakšā: 0; } veidlapa # kontakti ol li {fons: # b9cf6a; fons: rgba (255,255,255, .3); border-color: # e3ebc3; apmales krāsa: rgba (255,255,255, .6); robežas stils: ciets; robežas platums: 2 pikseļi; -moz-border-rādiuss: 5 pikseļi; -webkit-border-rādiuss: 5 pikseļi; līnijas augstums: 30 pikseļi; saraksta stils: nav; polsterējums: 5 pikseļi 10 pikseļi; apakšējā mala: 2 pikseļi; } veidlapa # kontakti ol ol li {fons: nav; robeža: nav; pludiņš: pa kreisi; } veidlapa # kontaktu iezīme {pludiņš: pa kreisi; fonta lielums: 13 pikseļi; platums: 110 pikseļi; } veidlapa # kontakti fieldset fieldset label {background: no no-pakartot pa kreisi 50%; līnijas augstums: 20 pikseļi; polsterējums: 0 0 0 30px; platums: auto; } veidlapa # kontakti fieldset fieldset label: kursors {kursors: rādītājs; } veidlapa # kontakti textarea {background: #ffffff; robeža: nav; -moz-border-rādiuss: 3 pikseļi; -webkit-border-rādiuss: 3 pikseļi; -khtml-border-rādiuss: 3 pikseļi; fonts: slīpraksts 13px Georgia, "Times New Roman", Times, serif; kontūra: nav; polsterējums: 5 pikseļi; platums: 200 pikseļi; } veidlapa # kontaktpersonu ievade: nav ([tips = iesniegt]): fokuss, veidlapa # kontaktpersonas textarea: fokuss {fons: #eaeaea; } veidlapa # kontaktpersonu poga {background: # 384313; robeža: nav; pludiņš: pa kreisi; -moz-border-rādiuss: 20 pikseļi; -webkit-border-rādiuss: 20 pikseļi; -khtml-border-rādiuss: 20 pikseļi; robežas rādiuss: 20 pikseļi; krāsa: #ffffff; displejs: bloks; fonts: 14px Georgia, "Times New Roman", Times, serif; atstarpes starp burtiem: 1px; mala: 7 pikseļi 0 0 5 pikseļi; polsterējums: 7 pikseļi 20 pikseļi; teksta ēna: 0 1px 1px # 000000; teksta pārveidošana: lielie burti; } veidlapa # kontaktpersonu poga: virziet kursoru {background: # 1e2506; kursors: rādītājs; }Pēc divu failu ierakstīšanas mēs atkal palaižam lietojumprogrammu:
cordova emulate androidMums vajadzētu redzēt šādu ekrānu:
PALIELINĀT
Failā sqlitedb.js mēs ierakstām šādu kodu:
// Mēs kā notikumu ievietojam brīdi, kad lietojumprogramma sākas un sāk saziņu ar ierīces document.addEventListener ("deviceready", onDeviceReady, false); // formas mainīgie lauki var name, email; // Es palaižu programmu Es izveidoju datu bāzes funkciju onDeviceReady () {var db = window.openDatabase ("Darba kārtība", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Katrs darījums datubāzē tiek veikts ar definētu objektu db un tiek izpildīts ar darījuma metodi. Šī metode atgriež parametru ar šīs izpildes rezultātu, kas pēc vienošanās tiek saglabāts parametrā tx, katram darījumam ir funkcija kā parametrs kas ir pats darījums, piemēram, rakstīt datus un kļūdas funkcija gadījumā, ja darījums neizdodas. Mēs turpinām ar funkciju CreateDB un errorDB funkciju CreateDB funkcija (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS kontakti (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, nosaukums TEXT NOT NULL, email TEXT NOT NULL)'); } funkcijas kļūdaDB (tx, err) {alert ("SQL kļūda:" + kļūda); } // funkcija Ievietojiet datus datu bāzes funkcijā InsertSQL (tx) {name = document.getElementById ('nosaukums'). vērtība; e -pasts = document.getElementById ('e -pasts'). vērtība; tx.executeSql ('IEVIETOJIET kontaktos (vārds, e -pasts) VĒRTĪBAS ("' + vārds + '", "' + e -pasts + '")'); brīdinājums ('Pievienots žurnāls'); } // funkcija, kas ģenerē darījumu, lai pievienotu datu funkcijas ierakstu () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Rādīt datus no tabulas db.transaction (ConsultDB, errorDB); } // Mēs apskatām visus kontaktpersonu tabulas ierakstus, un rezultāts tiek izmantots funkcijā ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Funkcija ListDB saņem darījuma parametru un ierakstu kopu ar vaicājuma saturu, mēs ejam cauri ierakstu kopai un iegūstam katru lauku, mēs izveidojam html sarakstu un pēc tam to parādām div ar saraksta identifikatoru caur internalHtml, lai dinamisks. funkcija ListDB (tx, rezultāti) {var len = results.rows.length; var saraksts = ""; listing = listing.concat ("Saraksts:" + len + "kontakti"); par (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('saraksts'). internalHTML = saraksts; }Kad mums ir viss kods, mēs pārkompilējam lietojumprogrammu no termināļa ar šādu kodu
cordova emulate androidKad emulators tiks ieviests kopā ar lietojumprogrammu, mēs sāksim pievienot ierakstus mūsu darba kārtībai, un tie parādīsies zemāk, ierīce saglabā mūsu ievadītos datus pastāvīgi virtuālajā atmiņā, proti, datu bāze netiks dzēsta katru reizi. kad mēs izpildām lietojumprogrammu emulatorā vai reālā ierīcē, mēs varēsim redzēt reģistrētos datus.
PALIELINĀT
