Criando aplicativos mobile – Ionic

 

Ementa: De forma bastante dinâmica, o curso tem como objetivo ensinar a desenvolver aplicativos para Android e iOS, utilizando a estrutura do IONIC, uma ferramenta que, junto ao Cordova, trabalha com conceito híbrido, permitindo criar aplicativos multiplataformas. O aprendizado do aluno contemplará tanto os conceitos básicos envolvendo essas ferramentas, até conceitos mais complexos, passando desde as instalações dos programas necessários, até o aprendizado sobre componentes, como listas, guias, botões, itens de data e hora, menus e personalizações. Assim, o aluno estará apto a criar diferentes tipos de aplicações.

 

Mercado de trabalho/Público-alvo: Este curso é direcionado às pessoas que queiram aprender a desenvolver aplicativos com o Ionic, o qual é capaz de criar o front-end, ou seja a parte visual de apps tanto para o Android quanto para o iOS. O mercado de trabalho dessa área é bastante abrangente, de modo que as pessoas com a formação adequada podem atuar como produtores independentes, freelancers ou, até mesmo, trabalhar para grandes empresas de diversos ramos, já que o consumo de aplicativos para dispositivos móveis é grande e vem crescendo cada vez mais, fazendo com que diferentes negócios queiram ter seus próprios aplicativos para se aproximarem de seus clientes.

 

Carga horária: 17h

 

Conteúdo Programático

 

Aula 1 – Conhecendo o universo de Apps

• Compreender o que são as ferramentas Ionic e Cordova;
• Instalar o Node.js  e o Angular-CLI;
• Instalar o Ionic e o Cordova;
• Entender o comando ionic start; 
• Criar o primeiro projeto; 
• Entender o comando ionic serve e seus argumentos -port, -p e –lab; 
• Realizar testes para mudar a porta do localhost;
• Compreender o que são as ferramentas Ionic e Cordova; 
• Entender o que é um template; 
• Conhecer os tipos de templates do Ionic.

 

Aula 2 – Descobrindo a funcionalidade de alguns itens

• Compreender o que é Toolbar, Header e footer, Title e Navbar;
• Conhecer o Ionic Icon;
• Conhecer, na prática, o funcionamento do cabeçalho e do rodapé de um projeto;
• Compreender alguns componentes do Ionic; 
• Aprender o que é Ionic icon.

 

Aula 3 – Ion-button

• Conhecer o ion-button;
• Criar botões no cabeçalho do aplicativo;
• Inserir botões no rodapé e configurar categorias e estilos.

 

Aula 4 – Ion-list e ion-toggle

• Conhecer o componente <ion-list> e <ion-toggle>;
• Aprender sobre o componente <ion-list>; 
• Criar uma lista de itens para o aplicativo de uma pizzaria;
• Transformar alguns conteúdos em título; 
• Adicionar botões (toggles e button); 
• Inserir cores; 
• Incluir o atributo de cheked.

 

Aula 5 – Checkbox e radio button

• Entender a diferença entre checkbox e radio button: Compreender as suas estruturas de códigos;
• Criar caixa de seleção: Definir cores para as opções selecionadas, deixar uma opção previamente marcada e desabilitar uma opção. 
• Entender a diferença entre checkbox e radio button; 
• Criar uma lista de radio button.

 

Aula 6 – Adicionando componentes de controles

• Conhecer o ionic-range; 
• Entender o range-label; 
• Aprender atributos: steps e snaps;
• Aprender sobre o ionic-range, ionic label, step, snaps: Colocar cor, quantidade mínima, máxima e ícones;
• Compreender o funcionamento do ionic-range, renge-label, steps e snaps; 
• Entender como adicionar ações aos elementos de uma lista;
• Criar um aplicativo de Quiz.

 

Aula 7 – Ion-select

• Trabalhar com o ion-select;
• Adicionar o atributo multiple; 
• Inserir cabeçalho e margem.

 

Aula 8 – Ion-tabs

• Entender o que é a ion-tabs e a sua aplicação;
• Aprender sobre o componente <ion-list>; 
• Criar uma lista de itens para o aplicativo de uma pizzaria;
• Conhecer os componentes ion-toggle; 
• Transformar alguns conteúdos em título; 
• Adicionar botões (toggles e button); 
• Inserir cores; 
• Incluir o atributo de checked.

 

Aula 9 – Ion-card

• Compreender o que é um card; 
• Compreender o que é CSS (Cascading Style Sheets);
• Adicionar cards a um aplicativo.

 

Aula 10 – Layout responsivo

• Conhecer o layout responsivo; 
• Aprender sobre a Grid;
• Utilizar o componente de grid, com linhas e colunas;
• Conhecer o layout responsivo; 
• Ajustar o título e os conteúdos; 
• Inserir um rodapé; 
• Atribuir estilo ao aplicativo.

 

Aula 11 – Trabalhando com estilos de plataformas

• Entender o que é o estilo de plataforma;
• Iniciar a criação de um layout para um app de reprodução de músicas utilizando o template tabs;
• Visualizando os estilos de plataforma.

 

Aula 12 – Modal, Alert e Toast

• Aprender sobre Modal, Alert e Toast;
• Criar um modal;
• Definir o layout da página modal e incluir programação para fechá-la; 
• Configurar um Alert e utilizar o Toast.

 

Aula 13 – Álbum de fotos

• Entender o que é a folha de ação e a sua aplicação;
• Criar um álbum de fotos: Adicionar título, inserir botão e colocar imagem. 
• Configurar folha de ação;
• Entender o funcionamento das folhas de ação; 
• Ajustar a aparência do álbum de fotos: Aplicar estilo e Adicionar mais imagens.

 

Aula 14 – Loading e popover

• Aprender sobre loading e popover;
• Adicionar e configurar o loading;
• Criar e configurar o popover; 
• Inserir estilos.

 

Aula 15 – Ion-datetime

• Conhecer o componente <ion-datetime>;
• Adicionar compromissos: Criar método Array com os dados e utilizar o componente datetime para configurar datas;
• Conhecer o componente data e hora; 
• Ajustar a aparência da agenda; 
• Verificar Status;
• Adicionar novos compromissos.

 

Aula 16 – Navegação entre páginas

• Entender o funcionamento do NavController: Compreender o conceito de matriz. 
• Conhecer métodos de navegação: Push e Pop. 
• Iniciar a criação de um aplicativo de notícias: Inserir três páginas, adicionar uma imagem e os botões na tela inicial e preparar a programação da navegação entre as páginas;
• Criar estilos, adicionar conteúdo às páginas e personalizar botão de voltar.

 

Aula 17 – Menu lateral

• Entender a aplicação e o funcionamento de um menu lateral;
• Criar projeto: Adicionar novas páginas;
• Inserir menu: Definir a lista de opções;
• Configurar visual da página Home e preparar as páginas “Empresa” e “Tecnologia”; 
• Definir rotas.