[Anderson Paraibano]

!
Nos últimos anos, o desenvolvimento de aplicativos móveis tem se tornado cada vez mais popular, com ferramentas como AngularJS, Ionic e WebSQL permitindo aos desenvolvedores criar aplicativos eficientes e interativos. Uma funcionalidade comum em muitos aplicativos é a capacidade de adicionar itens a um banco de dados local à medida que o usuário seleciona itens em uma lista. Neste artigo, exploraremos como implementar essa funcionalidade usando AngularJS, Ionic e WebSQL.

AngularJS é um framework JavaScript amplamente utilizado para o desenvolvimento de aplicativos web. Ele fornece uma estrutura poderosa para a criação de aplicativos de página única, onde as alterações de estado são refletidas automaticamente na interface do usuário. Ionic, por sua vez, é uma plataforma para o desenvolvimento de aplicativos móveis híbridos usando tecnologias web, como HTML, CSS e JavaScript. Ele combina a facilidade de desenvolvimento web com a capacidade de acessar recursos nativos do dispositivo.

WebSQL é uma especificação de API do HTML5 que permite aos desenvolvedores armazenar dados no banco de dados local do navegador. Ele fornece uma interface SQL familiar para executar operações de banco de dados, como inserção, atualização e consulta. Embora tenha sido descontinuado pelo W3C, ainda é amplamente suportado pelos navegadores modernos e continua sendo uma escolha popular para armazenamento de dados em aplicativos móveis.

Para começar, é necessário configurar um projeto com AngularJS e Ionic. Certifique-se de ter o Node.js instalado em seu sistema e execute os seguintes comandos:

bash
Copy code
npm install -g @ionic/cli
ionic start meuApp blank
cd meuApp
ionic serve
Isso irá instalar as dependências necessárias e iniciar um servidor de desenvolvimento para o seu aplicativo. Agora, vamos adicionar uma lista de itens ao aplicativo. Abra o arquivo src/app/home/home.page.html e substitua o conteúdo pelo seguinte código:

html
Copy code
<ion-header>
<ion-toolbar>
<ion-title>
Minha Lista
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item *ngFor=”let item of items” (click)=”adicionarItem(item)”>
{{ item }}
</ion-item>
</ion-list>
</ion-content>
Em seguida, abra o arquivo src/app/home/home.page.ts e substitua o conteúdo pelo seguinte código:

typescript
Copy code
import { Component } from ‘@angular/core’;
import { Platform } from ‘@ionic/angular’;
import { SQLite, SQLiteObject } from ‘@ionic-native/sqlite/ngx’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
private db: SQLiteObject;
private items: string[] = [‘Item 1’, ‘Item 2’, ‘Item 3’];

constructor(private platform: Platform, private sqlite: SQLite) {
this.platform.ready().then(() => {
this.sqlite.create({
name: ‘mydb.db’,
location: ‘default’
}).then((db: SQLiteObject) => {
this.db = db;
db.executeSql(‘CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)’, [])
.then(() => console.log(‘Tabela criada com sucesso’))
.catch(error => console.error(‘Erro na criação da tabela’,

[Autor]

Posts