Mudanças entre as edições de "Programação Mobile no Garoa"
Ir para navegação
Ir para pesquisar
m (Juca moveu a página Programacao Mobile no Garoa para Programação Mobile no Garoa) |
|||
(9 revisões intermediárias por um outro usuário não estão sendo mostradas) | |||
Linha 9: | Linha 9: | ||
'''Grupo no Telegram:''' Consulte a [[Telegram|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 28: | Linha 77: | ||
== 2018-AGO-24 == |
== 2018-AGO-24 == |
||
− | - Instalação do framework Ionic |
+ | - Instalação do framework Ionic |
− | - Criação e configurações quick start de projeto |
+ | - Criação e configurações quick start de projeto |
− | - Passagem de valores de variáveis entre telas |
+ | - Passagem de valores de variáveis entre telas |
== 2018-AGO-31 == |
== 2018-AGO-31 == |
||
Linha 36: | Linha 85: | ||
Sugestões de atividades para essa sexta: |
Sugestões de atividades para essa sexta: |
||
− | - Exibir o login como home page (sem exibir as abas) |
+ | - Exibir o login como home page (sem exibir as abas) |
− | - Fazer tela de cadastros |
+ | - 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. |
+ | - 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 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. |
+ | - 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
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