App postos de gasolina

Primeiramente vamos criar nosso formulário de cadastro de usuários vamos criar um componente e começar pelo HTML

<ion-content  color=“primary”>
	<form  [formGroup]=“userForm” (ngSubmit)=“onSubmit()” >
		<ion-grid>
			<ion-row color=“primary” justify-content-center>
				<ion-col class=“ion-text-center” size-md=“6” size-lg=“5” size-xs=“12”>
					<div text-center>
						<h3>Cadastre-se</h3>
					</div>
					<div class=“ion-padding”>
						<ion-item>
							<ion-input  name=“name” type=“text” placeholder=“Nome” formControlName=“name”  required></ion-input>
						</ion-item>
						<ion-item>
							<ion-input name=“email” type=“email” placeholder=“[[email protected]](<mailto:[email protected]>)” formControlName=“email”  required></ion-input>
						</ion-item>
						<ion-item>
							<ion-input name=“phone” type=“text” placeholder=“phone” formControlName=“phone” required></ion-input>
						</ion-item>
						<ion-item>
							<ion-input name=“password” type=“password” placeholder=“Senha” formControlName=“password”  required></ion-input>
						</ion-item>
					</div>
					<div class=“ion-padding”>
						<ion-button  size=“large” type=“submit” [disabled]=“!userForm.valid” expand=“block”>Cadastrar</ion-button>
					</div>
				</ion-col>
			</ion-row>
		</ion-grid>
	</form>
</ion-content>

Modificamos a tag form para ela receber o formGroup.

<form  [formGroup]=“userForm” (ngSubmit)=“onSubmit()” >

Agora vamos no nosso componente e adicionar o formGroup.

user: User = new User(‘’,‘’,‘’,‘’,‘’);
userForm = this.fb.group({
	name: [‘’, Validators.required],
	email: [‘’, [Validators.required, Validators.email]],
	phone: [‘’, Validators.required],
	password: [‘’, Validators.required],
});

Vamos criar também uma classe User.

export class User {
  constructor(
    public id: string,
    public name: string,
    public phone: string,
    public email: string,
    public password: string
  ) {}
}

Agora criamos nosso construtor

constructor(
	private fb: FormBuilder,
	private db: DbService,
	private service: UserService) {}

No module do componente vamos fazer as seguintes alterações.

@NgModule({
	imports: [
		CommonModule,
		FormsModule,
		IonicModule,
		HttpClientModule,
		ReactiveFormsModule,
		RegisterPageRoutingModule
	],
	declarations: [RegisterPage],
	providers: [UserService, DbService]
})
export class RegisterPageModule {}

Adicionamos as bibliotecas HttpClienteModule e ReactiveFormsModule, pois o formulário que estamos criando será reativo.

Agora criamos a função para salvar os dados.

onSubmit(): void {
	if(this.userForm.controls[‘name’].value)
		this.user.name= this.userForm.controls[‘name’].value;
	if(this.userForm.controls[‘email’].value)
		this.user.email= this.userForm.controls[‘email’].value;
	if(this.userForm.controls[‘phone’].value)
		this.user.phone = this.userForm.controls[‘phone’].value;
	if(this.userForm.controls[‘password’].value)
		this.user.password = this.userForm.controls[‘password’].value;
		this.db.addUser(this.user);

Primeiramente vamos gravar os dados no SQLite e posteriormente vamos gravar na Rest API.

Para criar nosso banco de dados vamos alterar nosso componente principal para executar o SQL e criar o banco caso ele ainda não esteja criado.

const SQL = ‘CREATE TABLE IF NOT EXISTS user(id INTEGER PRIMARY KEY, name TEXT NOT NULL,email TEXT NOT NULL,’+
	‘phone TEXT NOT NULL,password TEXT NOT NULL);’+
	‘CREATE TABLE IF NOT EXISTS gas_station ( id INTEGER PRIMARY KEY, title TEXT NOT NULL,’+
	‘address TEXT NOT NULL, address TEXT NOT NULL, number TEXT NOT NULL, city TEXT NOT NULL,lat TEXT NOT NULL, lng TEXT NOT NULL);’+
	‘CREATE TABLE IF NOT EXISTS gas (id INTEGER PRIMARY KEY AUTOINCREMENT, posto_id INTEGER,’+
	‘Name TEXT NOT NULL,Price NUMERIC,FOREIGN KEY(gas_station_id) REFERENCES gas_station(id));’;
constructor(private sqlite: SQLite) {}
ngOnInit() {
	this.sqLiteGenerateDB();
}
sqLiteGenerateDB(){
	this.sqlite.create({
		name: ‘data.db’,
		location: ‘default’
})
.then((db: SQLiteObject) => {
	console.log(SQL);
	db.executeSql(SQL, [])
	.then(() => console.log(‘Executed SQL’))
	.catch(e => console.log(e));
})
.catch(e => console.log(e));
}

A função acima executa o SQL e caso o banco não tenha sido criado ele cria o mesmo e posteriormente as tabelas.