Mudanças entre as edições de "Programação Mobile no Garoa"

De Garoa Hacker Clube
Ir para navegação Ir para pesquisar
Linha 39: Linha 39:
 
2. Criar um ID para o input -> .html , exemplo:
 
2. Criar um ID para o input -> .html , exemplo:
 
<ion-input type text [(ngModel)] = "id"> </ion-input>
 
<ion-input type text [(ngModel)] = "id"> </ion-input>
3.Declarar a variável no .ts da tela -> .ts , exemplo:
+
3. Declarar a variável no .ts da tela -> .ts , exemplo:
 
export class Page { id : any ; }
 
export class Page { id : any ; }
 
onde "id" é a variável e "any" o tipo
 
onde "id" é a variável e "any" o tipo
  +
4. Para usar a variável passando para outra tela, exemplo:
 
  +
goToPage(){
 
  +
this.NavCtrl.push( HomePage, {
 
  +
valor.this.id } );
  +
}
  +
5. Recebendo a variável em outra tela --> HomePage.ts
  +
exemplo:
  +
export class HomePage {
  +
public user : string;
  +
constructor ( public navCtrl:NavController,
  +
public navParams ) {
  +
this.user = this.navParams.get('valor');
  +
}
  +
6. Exibir valor recebido --> HomePage.html
  +
<ion-content padding>
  +
<h2> {{ user }} </h2>
  +
</ion-content>
   
   

Edição das 16h19min de 16 de setembro de 2018

Grupo de estudos Ionic Android Framework / Desenvolvimento Mobile no Garoa Hacker Clube

O que: Grupo de estudos Ionic Android Framework / Desenvolvimento Mobile 
Quando: Às sextas-feiras, das 19:30h às 21:30h.
Onde: Na Sede do Garoa Hacker Clube.
Associado responsável: Marcelo campos
Tutor do Grupo de estudos: Fellype Cazorino
Grupo no Telegram: Consulte a lista de grupos do Garoa no Telegram.

Apresentação com Links para Download dos softwares necessários e instruções:

Thread na Lista de Emails do Garoa

Grupo do Telegram


Primeiros Passos

criando o projeto(exemplo no terminal linux):
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu>
depois, a qualquer momento durante o projeto, se desejado inserir uma página(opcional): 
$ ionic generate page <Nome_Tela>
Para subir um emulador, o Ionic usa um sever e usa o browser: 
$ ionic serve -c 
 --> importante: deve estar na pasta do projeto

Estrutura de pastas / arquivos do projeto

<Pasta_do_Projeto>
  <src> : Pages = Telas, extensões .html .scss .module.ts
<Pasta App>
   Módulos, ao criar uma tela adicionar aqui: app.module.ts : declarar "declarations" e "entryComponents"
dica: Para saber o nome da tela abrir o .ts dela (<NomePagina.ts>) e ver a linha "export class"

Passando Valores entre Telas

1. Capturar o valor desejado, exemplo: <input> -> .html
2. Criar um ID para o input -> .html , exemplo:
<ion-input type text [(ngModel)] = "id"> </ion-input>
3. Declarar a variável no .ts da tela -> .ts  , exemplo:
 export class Page { id : any ; }
onde "id" é a variável e "any" o tipo
4. Para usar a variável passando para outra tela, exemplo:
 goToPage(){
 this.NavCtrl.push( HomePage, {
    valor.this.id } );
 }
5. Recebendo a variável em outra tela --> HomePage.ts
 exemplo:
 export class HomePage {
   public user : string;
   constructor ( public navCtrl:NavController,
                 public navParams ) {
                 this.user = this.navParams.get('valor');
 }
6. Exibir valor recebido --> HomePage.html
  <ion-content padding>

Predefinição:User

  </ion-content>


2018-AGO-17

Primeiro Encontro do Grupo

Se possível, leve seu notebook

Objetivos do dia

* bate papo sobre
* apresentação e introdução ao framework Ionic

2018-AGO-24

- Instalação do framework Ionic
- Criação e configurações quick start de projeto
- Passagem de valores de variáveis entre telas

2018-AGO-31

Sugestões de atividades para essa sexta:

- Exibir o login como home page (sem exibir as abas)
- Fazer tela de cadastros
- Fazer validação de login. Se o usuário existir, exibir as abas do app, senão exibir mensagem de login inválido.
- Pesquisar como armazenar os cadastros de usuários no Storage do Ionic (Banco de Dados)
- Pesquisar como usar autenticação com o Firebird ou Autenticação com Google, Facebook através de outro serviço.

2018-SET-07

- Revisão e  1os passos no quadro / lista

2018-SET-14

- Pondo em prática alguns conceitos