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

De Garoa Hacker Clube
Ir para navegação Ir para pesquisar
 
(12 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 6: Linha 6:
 
'''Onde:''' Na [[Sede]] do Garoa Hacker Clube.
  
'''Onde:''' Na [[Sede]] do Garoa Hacker Clube.
 
'''Associado responsável:''' [[User:Marcelo_campos|Marcelo campos]]
  
'''Associado responsável:''' [[User:Marcelo_campos|Marcelo campos]]
−
'''Tutor do Grupo:''' [[User:Fellype Cazorino|Fellype Cazorino]]
 +
'''Tutor do Grupo de estudos:''' [[User:Fellype Cazorino|Fellype Cazorino]]
−
'''Grupo no Telegram:''' Consulte a [[lista de grupos]] do Garoa no Telegram.
 +
'''Grupo no Telegram:''' Consulte a [[Telegram|lista de grupos]] do Garoa no Telegram.
  +
  +
[https://docs.google.com/presentation/d/15KdpTf3ub6ynOUuj3SO6UzVWG07kyt2a1s8HOCtmyPY/edit?usp=sharing| Apresentação com Links para Download dos softwares necessários e instruções: ]
  +
  +
[https://groups.google.com/forum/#!topic/hackerspacesp/4LuTKlSGZdc| Thread na Lista de Emails do Garoa]
  +
  +
[https://t.me/GaroaMobile| Grupo do Telegram]
  +
  +
  +
== Primeiros Passos ==
  +
  +
criando o projeto(no terminal linux, windows, ...):
  +
$ 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 server 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>''
  +
<nowiki><h2> {{ user }} </h2></nowiki>
  +
''</ion-content>''
   
 
== 2018-AGO-17 ==
  
== 2018-AGO-17 ==
Linha 18: Linha 74:
 
* bate papo sobre
  
* bate papo sobre
 
* apresentação e introdução ao framework Ionic
  
* 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

Edição atual tal como às 15h45min de 15 de novembro 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(no terminal linux, windows, ...):
$ 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 server 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>
    <h2> {{ user }} </h2>
  </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
Disponível em “https://garoa.net.br/mediawiki/index.php?title=Programação_Mobile_no_Garoa&oldid=28236”