# Apostila Ionic

## O que é Ionic?
É um framework para desenvolvimento de aplicações mobile hibridas, criado em 2013 Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co e com um grande suporte da comunidade.

É possível criar aplicações com o look and feel de uma aplicação nativa, mas ter apenas uma base de código, e no final, gerar instaladores para iOS, Android e Windows, mas nem contamos o windows pois já está em declínio.
Um APP escrito com **IONIC**, utiliza, JavaScript, HTML, CSS(SASS) e Angular (TypeScript).

## Recursos nativos?
São aqueles fornecidos pelo hardware do seu dispositivo móvel, digamos que pelo seu aplicativo seja necessário utilizar a camera, para ler um QR code, ou usar geolocalização, estes dois exemplos são recursos nativos, e para você fazer uso deles, é necessário instalar um plugin que no ecosistema **IONIC** chamamos de **IONIC NATIVE.**

## Ionic Icons
Mais de 700 icones para sua aplicação, já se preocupando com as dierenças entre sistemas operacionais.

## Platform Continuity
É um conceito, que quer dizer que, se você desenvolve sua aplicação para uma plataforma, os componentes disponíveis pelo **IONIC** se adaptam e mudam a aparência de acordo com o sistema operacional do dispositivo. Observe a imagem abaixo, demonstrando o mesmo app aberto nos três sistemas operacionais suportados.

## Ionic view
É uma solução para testar sua aplicação entre diversos dispositivos. Você envia a aplicação para a nuvem do **IONIC**, faz o download do aplicativo chamado **IONIC VIEW**, e apartir dele baixa o seu aplicativo em desenvolvimento.

O **IONIC VIEW** não está sendo descontinuado, ele foi divido em dois projetos, um focado em testes rápidos entre dispositivos, chamado **IONIC DEVAPP** e outro projeto chamado **IONIC VIEW** focado em compartilhamento e teste da aplicação entre pessoas e dispositivos pelo mundo todo.

Cuidado com o **IONIC VIEW**, apesar de ser possível testar sua aplicação nele, há limitações. Quando você utiliza recursos nativos, muitos dos plugins podem não funcionar, verifique a lista de plugins compatíveis.

## Ionic Devapp
É uma nova solução para testar suas aplicações entre dispositivos, que NÃO vem substituir o **IONIC VIEW**, que funciona apenas na rede interna onde está rodando o comando ‘ionic serve’, veja o gif abaixo demonstrando o funcionamento.

Esta ferramenta é foca em casos em que é necessário testes rápidos, sem a necessidade de diversas dependências como XCode, Android SDK, Cordova, etc. adequadamente configurados pra o seu dispositivo.

> As of August, 2017, the Ionic View app has “split” into two apps: Ionic DevApp focused on rapid local development and testing, and the new Ionic View focused on helping developers share and test their apps with external users, co-workers, clients, and more

## Angular & Ionic
No **Angular** temos um algo chamado Service, já no **IONIC** extamente a mesma coisa se chama Provider.

No **Angular** temos a API de rotas, que apesar de estar disponível para uso no **IONIC**, não é usado, no **IONIC** utilizamos o conceito de pilha, onde você empilha e desempilha telas.

Nem todos componentes escritos para funcionar com Angular vão funcionar bem no **IONIC**, por exemplo, existe um para fazer scrolldown infinito, que funciona bem no Angular, no IONIC não. É por isto que sempre que precisar de algo, primeiro olhe no site oficial se já existe algo pronto, se tiver utilize-o, neste exemplo, temos um componente para fazer scolldown infinito.

Em uma aplicação com web escrita com **Angular**, rapidamente você poderá decidir utilizar o Bootstrap, em uma aplicação escrita com **IONIC**, você não deve tomar esta decisão sem antes conhecer a alternativa de ‘responsive grid’.

## Ciclo de vida
Além do ciclo de vida dos componentes Angular, você também conta com os do próprio **IONIC** que te ajudará a controlar sua aplicação. Dá uma olhada na tabela a baixo que resume o ciclo de vida do **IONIC**.

## Vantagens
Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:
* Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;
* Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.
* Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;
* Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;
* Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;
* Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

## Cordova
**Cordova** permite criar aplicações híbridas para diferentes plataformas mobile com base no componente WebView. Este funciona como um browser, mas sem aquela barra de endereço ou botões para o usuário. Por ele apenas visualizamos os dados.

O **Cordova** usa apenas HTML, CSS e JavaScript, então o desenvolvedor web que já utiliza essas linguagens pode aproveitar todo o conhecimento e alcançar novos públicos, pois suas aplicações usarão recursos nativos dos dispositivos mobile

O ambiente de desenvolvimento é multiplataforma, ou seja, podemos usá-lo em diversos sistemas. Vale lembrar que compilamos para iOS se usarmos o MAC OS, e só compilamos para o Windows Phone usando o Windows. Contudo, ambos os sistemas operacionais compilam para Android.

## Node js

https://nodejs.org/en/

Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Node.js usa um modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos.

Node.js é um interpretador, com código aberto, de código JavaScript de modo assíncrono e orientado a eventos, focado em migrar a programação do Javascript do lado do cliente para os servidores, criando assim aplicações de alta escalabilidade (como um servidor web), capazes de manipular milhares de conexões/requisições simultâneas em tempo real, numa única máquina física. O Node.js é baseado no interpretador V8 JavaScript Engine (interpretador de JavaScript open source implementado pelo Google em C++ e utilizado pelo Chrome). Foi criado por Ryan Dahl em 2009, e seu desenvolvimento é mantido pela fundação Node.js em parceria com a Linux Foundation.

### Como o Node funciona?
O Node roda em uma JavaScript V8 VM. Mas espere, JavaScript no servidor? Isso, você leu certo. JavaScript no lado do servidor pode ser um conceito novo para todos que trabalharam exclusivamente com o JavaScript no lado do cliente, mas a idéia em sí não é tão absurda – porque não usar a mesma linguagem de programação no cliente que você usa no servidor?

O que é V8? O motor JavaScript V8 é o motor que a Google usa com seu navegador Chrome. Poucas pessoas pensam sobre o que realmente acontece com o JavaScript no lado do cliente. Bem, a engine JavaScript realmente interpreta o código e o executa. Com o V8 a Google criou um ultra-rápido interpretador escrito em C++, com um outro aspecto único: você pode baixar a engine e incorporá-la em qualquer aplicação desejada. Isso não está restrito em rodar em um navegador. Então Node atualmente usa o motor JavaScript V8 escrito pela Google e propõe que seja usado no servidor.

## Typescript

TypeScript é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona tipagem e alguns outros recursos a linguagem. Anders Hejlsberg, arquiteto da linguagem C# e criador das linguagens Delphi e Turbo Pascal, trabalhou no desenvolvimento do TypeScript. A linguagem pode ser usada para desenvolver aplicações JavaScript no lado cliente e lado servidor (Node.js).
Foi considerada pelo público a 4ª linguagem "mais amada", de acordo com uma pesquisa conduzida pelo site Stack Overflow em 2018, e está entre as 15 linguagens mais populares, de acordo com uma pesquisa conduzida pela RedMonk

**TypeScript é um superconjunto de JavaScript**
Isso significa que o TypeScript estende JavaScript com funcionalidade extra que não está presente na versão atual do JavaScript suportada pela maioria dos navegadores. Então, quais são esses recursos?
Se você estiver familiarizado com linguagens como Java ou C #, provavelmente sabe que cada variável requer um tipo e esse tipo deve ser declarado antecipadamente . JavaScript é uma linguagem fracamente tipada ou digitada dinamicamente. As variáveis em JavaScript não estão diretamente associadas a nenhum tipo de valor específico, e qualquer variável pode ser atribuída (e reatribuída) a todos os tipos de valores:

var foo = 42;    // foo is now a Number
var foo = 'bar'; // foo is now a String
var foo = true;  // foo is now a Boolean

Em uma linguagem fracamente tipada, o tipo de um valor depende de como ele é usado . Por exemplo, se eu puder passar uma string para o operador de adição e ela será automaticamente interpretada como um número ou causará um erro se o conteúdo da string não puder ser traduzido em um número . Da mesma forma, posso concatenar cadeias e números ou usar strings como booleanos, etc.
Em uma linguagem fortemente tipada, uma variável tem um tipo e esse tipo não pode mudar . O que você pode fazer com uma variável depende do seu tipo. Se tentarmos compilar o código acima no TypeScript, obteremos o erro:

> [ts] Subsequent variable declarations must have the same type.
> Variable 'foo' must be of type 'number', but here has type 'boolean'.[color=red]

A vantagem de uma linguagem fortemente tipada é que você é forçado a tornar explícito o comportamento do seu programa . Se você quiser adicionar um número e uma string ao seu código, você deve traduzir a string em um número a ser usado como um operando do operador de adição. Isso torna o código mais fácil de entender porque não há comportamento (ou menos) oculto . Isso também torna seu código mais detalhado.

Lembrar:
> A tipificação forte é opcional no TypeScript, mas o uso desse recurso torna seu aplicativo mais previsível e facilita a depuração, portanto, você deve definitivamente usá-lo.[color=blue]

### Orientado a Objeto
A programação orientada a objetos (OOP) é um conceito antigo usado por vários idiomas, como Java ou C #, para ajudar o desenvolvedor a associar dados e métodos em um "objeto". Em OOPobjeto são criados e são capazes de interagir uns com os outros usando os métodos de enfrentamento público um do outro. JavaScript em si não é uma linguagem orientada a objetos na maneira que C ++, C # ou Java são. O TypeScript, por outro lado, pode ser tratado como uma linguagem orientada a objetos por causa das construções de linguagem introduzidas sobre os fechamentos de JavaScript.
O TypeScript traz muitos recursos orientados a objetos que perdemos no JavaScript por um longo tempo. Temos conceitos explícitos de:
* Classes
* Interfaces
* Construtores
* Modificadores de acesso (públicos e privados)

### Erro de tempo de compilação
Deixe-me explicar primeiro o que run-time error é como este é um caso comum. Estamos falando sobre run-time error quando enfrentamos qualquer problema ao usar nosso aplicativo. Em outras palavras - se você cometer um erro ao criar seu site e escrever algum código, você o verá apenas enquanto estiver usando o aplicativo / site. Por exemplo, se você cometer um erro de digitação em um arquivo de página da Web, o console do seu navegador mostrará um erro quando você carregar essa página.

Devido à fraca tipagem em JavaScript, muitas vezes acontece que tentamos realizar operações em uma variável com um tipo diferente. Se a nossa lógica de aplicativo for complexa, talvez não percebamos que estamos tentando atribuir elementos de um tipo diferente uns aos outros. Em JavaScript, só saberemos sobre o erro quando alguém acionar um código e ele falhar . Por outro lado, o TypeScript pode nos fornecer erros de tempo de compilação, o que significa que ele pode detectar erros ao compilar código para JavaScript e corrigi-lo antes de implantar na produção. Claro que não vai pegá-los todos, mas ainda muito.

### Fundamentos do TypeScript
O TypeScript fornece aos desenvolvedores conceitos orientados a objeto e compila a verificação do tipo de tempo em cima do JavaScript, o que ajuda a escrever código mais estruturado, sustentável e robusto. O TypeScript introduz alguns dos termos orientados a objetos padrão, como Classes, Interfaces, Module e Variables, que no final são convertidos em várias formas diferentes de JavaScript. A estrutura de código para um arquivo TypeScript típico é mostrada abaixo.

### Módulo
O módulo é como um namespace no mundo .NET e pode conter classes e interfaces. Os módulos não possuem nenhum recurso próprio, eles apenas fornecem um contêiner que pode ser usado para estruturar o código de forma lógica. Olhe para o módulo apenas como um contêiner de entidade lógica / comercial.

### Interface
Interfaces são exatamente como interfaces no .NET que fornecem um contrato para as classes implementarem. O TypeScript ajuda a fornecer verificação de erros de tempo de compilação para as classes que implementam essas interfaces. Se todos os métodos não foram implementados corretamente (incluindo a assinatura do método), o TypeScript sinaliza aqueles em tempo de design, bem como o tempo de compilação. Coisa interessante sobre Interfaces é que eles não existem em JavaScript e, portanto, quando compilamos um arquivo TypeScript em JavaScript, as Interfaces são omitidas.

### Classes
O conceito de Classes é novamente muito semelhante ao mundo .NET / Java. Classes contém variáveis, propriedades e métodos que formam uma entidade lógica. O TypeScript também permite definir o escopo da variável e funções com palavras-chave como “ private” e “ public”, embora esse escopo não tenha qualquer efeito sobre o JavaScript gerado.

### Funções
Funções são métodos em que a lógica é implementada. O TypeScript fornece suporte de tempo de compilação para garantir que qualquer pessoa que chame a função mencionada concorde com o argumento de entrada e com o tipo de valor de retorno.

### Variáveis
Variáveis são os campos definidos dentro de uma classe ou função. O TypeScript nos permite definir uma variável usando a palavra-chave “ var” e atribuir um tipo de dados a ela. Uma vez que um tipo de dado é atribuído, qualquer uso adicional da variável deve ser com o mesmo tipo de dados, caso contrário, o TypeScript gerará erro no design e no tempo de compilação. O TypeScript também é inteligente o suficiente para inferir o tipo de uma variável e depois tratá-la como esse tipo quando uma variável é declarada e inicializada. Nos casos em que o TypeScript não é capaz de inferir o tipo, ele atribuirá esse tipo de variável “ any”.
Tipos de TypeScript
O TypeScript fornece alguns tipos primitivos (mostrados abaixo), bem como um tipo dinâmico “ any”. " Any" É como " dynamic" palavra-chave em c # em que podemos atribuir qualquer tipo de valor para a variável. O TypeScript não sinaliza erros de tipo para variáveis do tipo “ any”.
No TypeScript, definimos uma variável com um tipo apenas acrescentando o nome da variável com dois-pontos, seguido do nome do tipo, como mostrado no exemplo abaixo.

var num: number = 30; //variable num is of type number

Abaixo está a lista de tipos primitivos disponíveis no TypeScript:
* **Number:** “ number” É um tipo de número primitivo em TypeScript. Não existe um tipo diferente para float ou double no TypeScript
* **Boolean:** O boolean tipo " " representa true ou false condição
* **String:** O " string" representa uma seqüência de caracteres semelhantes ao C #
* **Null:** “ null” É um tipo especial que atribui null valor a uma variável
* **Undefined:** O “ undefined” também é um tipo especial e pode ser atribuído a qualquer variável

### Classes e Interface
**Classes**
Classes TypeScript são uma unidade básica de abstração muito semelhante às classes C # / Java. No TypeScript, uma classe pode ser definida com a palavra-chave “ class” seguida do nome da classe. Classes TypeScript podem conter construtor, campos, propriedades e funções. O TypeScript permite que os desenvolvedores definam o escopo da variável dentro das classes como “ public” ou “ private”. É importante notar que as palavras-chave “ public/ private” só estão disponíveis no TypeScript, uma vez convertido para JavaScript, não há como distinguir entre os dois e ambos podem ser chamados. O TypeScript define um construtor usando a palavra-chave " constructor".

Exemplo em Typescript:

class Student {
    private firstName: string;
    private lastName: string;
    yearOfBirth: number;    //Public scope by default
    schoolName: string;
    city: string;
    //Constructor            
    constructor(firstName: string, lastName: string, schoolName: string, 
                city: string, yearOfBirth: number) {

        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
        this.city = city;
        this.schoolName = schoolName;

    }
    //Function
    age() {
        return 2014 - this.yearOfBirth;
    }         
    //Function
    printStudentFullName(): void {
        alert(this.lastName + ',' + this.firstName);
    }
}

Exemplo em Javascript:

var Student = (function () {
    //Constructor
    function Student(firstName, lastName, schoolName, city, yearOfBirth) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
        this.city = city;
        this.schoolName = schoolName;
    }
    //Function
    Student.prototype.age = function () {
        return 2014 - this.yearOfBirth;
    };

    //Function
    Student.prototype.printStudentFullName = function () {
        alert(this.lastName + ',' + this.firstName);
    };
    return Student;
})();

No construtor acima definido em TypeScript, temos poucas variáveis de entrada que são então mapeadas para variáveis locais dentro de uma classe, podemos modificar esse construtor para implementar declaração e mapeamento de variáveis implícitas definindo o escopo juntamente com o nome da variável na definição do construtor, como mostrado abaixo:

constructor(private firstName: string, private lastName: string, 
public schoolName: string, 
            public yearOfBirth: number) {}

No caso acima, as variáveis agora são definidas e declaradas apenas dentro do argumento do construtor. O escopo mencionado junto com o argumento se torna o escopo da variável para essa classe.

Para consumir a classe, o comportamento é semelhante ao C #, onde usamos a new palavra-chave “ ” para inicializar o objeto de classe, passar quaisquer parâmetros se o construtor exigir e, em seguida, chamar as funções ou acessar as publicvariáveis da classe.

var student = new Student('Tom', 'Hanks', 'World Acting School',1950);
 var age = student.age();
 var fullName = student.printStudentFullName();
 var schoolName = student.schoolName;

**Interfaces**
O TypeScript oferece suporte para Interfaces para usá-los como um contrato para classes semelhantes a C #. Para declarar uma interface, usamos a palavra-chave “ interface” seguida do nome da interface. O importante a saber sobre interfaces é que, quando compilado em JavaScript, o código da interface é ignorado e não há JavaScript correspondente gerado.

interface IStudent {
     yearOfBirth: number;
     age : () => number;
   }

As classes implementam interfaces usando a palavra-chave “ implement” seguida do nome da interface. Como em C #, as classes podem implementar várias interfaces e o TypeScript faz uma verificação de tempo de design para garantir que a classe esteja implementando todos os métodos dessa interface.

class Student implements IStudent

Aqui, a Student classe agora terá que implementar o agemétodo “ ” e definir a propriedade ” yearOfBirth”. Caso contrário, o TypeScript mostrará o erro de tempo de projeto com o erro mencionando qual propriedade / método não foi implementada na classe.

**Herança**
Ter classes e interface significa que o TypeScript também suporta herança, que é um recurso muito poderoso e alinha a escrita do código do lado do cliente com a maneira como escrevemos código C #. Usando herança, podemos estender classes, implementar e estender interfaces e escrever código que seja reconhecido de perto com OOPs. Em TypeScript, quando estendemos uma classe base na classe filha, usamos a palavra-chave “ super” para chamar o construtor da classe base ou até mesmo os publicmétodos da classe base.

Para estender uma classe no TypeScript, usamos “ extend” palavra-chave após o nome da classe e, em seguida, seguimos pela classe pela qual precisamos estender. Também podemos herdar interfaces em outras interfaces.

//Interface
interface IStudent {
    yearOfBirth: number;
    age : () => number;
}
//Base Class
class College {
    constructor(public name: string, public city: string) {
    }
    public Address(streetName: string) {             
        return ('College Name:' + this.name + ' City: ' + this.city 
        + ' Street Name: ' + streetName);
    }
}
//Child Class implements IStudent and inherits from College
class Student extends College implements IStudent {
    firstName: string;
    lastName: string;
    yearOfBirth: number;
    //private _college: College;
    //Constructor            
    constructor(firstName: string, lastName: string, name: string, 
    city: string, yearOfBirth: number) {
        super(name, city);
        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
    }
    age () { 
        return 2014 - this.yearOfBirth;
    }
    CollegeDetails() {
        var y = super.Address('Maple Street');
        alert(y);
    }
    printDetails(): void {
        alert(this.firstName + ' ' + this.lastName + ' College is: ' 
        + this.name);
    }
}

No TypeScript, também podemos definir qualquer parâmetro com um valor padrão e, ao chamar essa função, não precisamos passar o valor desses parâmetros. Se não passarmos o valor, então a função recebe o valor padrão atribuído, senão o valor passado na chamada de função é obtido como mostrado no exemplo abaixo:

constructor(private firstName: string, private lastName: string, 
public schoolName: string, 
            public yearOfBirth: number = 1990){}

No exemplo acima, atribuímos um valor opcional ao yearOfBirthcampo “ ” e se no caso a função de chamada não passar nenhum valor para este campo, o construtor irá inicializá-lo com 1990.

Similar é o caso dos parâmetros Opcionais, podemos definir um parâmetro adicionando um “ ?” após o nome do parâmetro. Nesse caso, quando a função é chamada, não precisamos passar o valor para esse parâmetro.

Subject(subjectList?: string[]) {
   if (subjectList == null) {
      alert('Oh, You have not subscribed to any course');
    }
  }

Aqui, se chamarmos o método de assunto sem passar nenhum valor de parâmetro, o TypeScript não mostrará nenhum erro.

### Operadores aritméticos

Os operadores aritméticos são aqueles que nós estudamos na escola, aquelas funções básicas de somar, subtrair, multiplicar e dividir. Utilizando esses operadores nós podemos criar operações matemática com valores numéricos.

Abaixo você tem uma lista com os operadores que nós podemos utilizar com JavaScript:
* adição (+)
* subtração (-)
* multiplicação (*)
* divisão (/)
* módulo — resto da divisão — (%
* exponenciação (**)
* incremento (++)
* decremento (- -)

**Adição (+)**
Nós utilizamos esse operador para somar valores numéricos:

var num1 = 13;
var num2 = 7;
console.log(num1 + num2); // resultado 20

**Subtração (-)**
Nós utilizamos esse operador para subtrair valores numéricos, retornando a diferença entre eles

var num1 = 20;
var num2 = 10;
console.log(num1 - num2); // resultado 10

**Multiplicação (*)**
Nós utilizamos esse operador multiplicar valores numéricos

var num1 = 3;
var num2 = 5;
console.log(num1 * num2); // resultado 15

**Divisão (/)**
Esse operador produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor. Para que você possa relembrar, segue uma imagem abaixo retirada do Google.

var num1 = 20;
var num2 = 5;
console.log(num1 / num2); // resultado 4

**Módulo (%)**
Esse operador retorna o resto da divisão

var num1 = 3;
var num2 = 2;
console.log(num1 % num2); // resultado 1var num3 = 20;
var num4 = 5;
console.log(num3 % num4); // resultado 0var num5 = -1;
var num6 = 2
console.log(num5 % num6); // resultado -1

**Exponenciação (**)**
Esse operador retorna o valor do primeiro operando elevado ao segundo operado

var num1 = 3;
var num2 = 2;
console.log(num1 ** num2); // resultado 9

**Incremento (++)**
Esse operador incrementa um valor ao operando.
* Caso ele seja utilizado depois do operando Ex.: operando++, ele retorna o valor antes de incrementar.
* Caso ele seja utilizado antes do operando Ex.: ++ operando, ele retorna o valor já incrementado

var num1 = 3;
console.log(num1++); // resultado 3var num2 = 1;
console.log(++num2); // resultado 2

**Decremento (- -)**
Esse operador decrementa (subtrai um de) seu operando e retorna um valor.
* Caso ele seja utilizado depois do operando Ex.: operando ==-== -ele retorna o valor antes de decrementar
* Caso ele seja utilizado antes do operando Ex.: — operando, ele retorna o valor já decrementado

Esses são os operadores básicos para que possamos criar as nossas expressões do dia a dia.

### Operadores lógicos

Operadores lógicos são utilizados para comparar dois ou mais valores, retornando um valor Boolean. Abaixo você tem uma breve descrição deles:
* **&& (And):** O operador (and) irá retornar true somente se todos os valores da expressão forem verdadeiros
* **|| (OR):** O operador (or) irá retornar true se um dos valores comparados forem verdadeiros
* **! (NOT):** O operador (not) irá retornar o inverso do esperado na expressão

Para ficar mais claro, veja abaixo alguns exemplos:

**&& (and)**

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 == num2;
let valida2 = num1 > num2;
let valida3 = num1 < num2;

console.log(valida); //false
console.log(valida2); //false
console.log(valida3); //true

Analisado os exemplos acima nós temos:
* **num1 == num2:** retorna false porque num1 e num2 são diferentes
* **num1 > num2:** retorna false porque num1 não é maior que num2
* **num1 < num2:** retorna true porque num2 é maior que num1 || (or)

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 > 3 || num2 < 10;
let valida2 = num1 > 1 || num2 > 3;
let valida3 = num1 >= 1 || num2 >= 3;

console.log(valida); //true
console.log(valida2); //false
console.log(valida3); //true

Analisado o exemplo acima nós temos:
* **num1 > 3 || num2 < 10:** retorna true porque mesmo que num1 seja menor que 3, num2 é menor que 10 (temos uma expressão verdadeira)
* **num1 > 1 || num2 > 3:** retorna false porque num1 não é maior que 1 e nem num2 é maior que 3
* **num1 >= 1 || num2 >= 3:** retorna true porque estamos comparando se os valores são maior ou igual aos valores iniciados nas nossas variáveis

! (not)

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 != num2;

console.log(valida); //true

Resultado:
> num1 != num2: retorna true porque num1 e num2 são diferentes. [color=blue]

## LocalStorage

**LocalStorage** e **SessionStorage**, parte da API de armazenamento da web, são duas ótimas ferramentas para salvar pares chave / valor localmente. Se você clicar no botão Salvar na parte superior desta postagem, o localStorage é o que é usado para armazenar suas postagens salvas.

Tanto o **localStorage** quanto o sessionStorage oferecem vantagens em comparação ao uso de cookies:

* Os dados são salvos apenas localmente e não podem ser lidos pelo servidor, o que elimina o problema de segurança que os cookies apresentam.
* Ele permite que muito mais dados sejam salvos ( 10Mb para a maioria dos navegadores).
* É mais simples de usar e a sintaxe é muito simples.
* Também é suportado em todos os navegadores modernos, para que você possa usá-lo hoje sem problemas. Obviamente, como os dados não podem ser lidos no servidor, os cookies ainda têm um uso, especialmente quando se trata de autenticação.

### LocalStorage vs SessionStorage
**LocalStorage** e **sessionStorage** realizam exatamente a mesma coisa e têm a mesma API, mas com **sessionStorage** os dados são mantidos até que a janela ou a guia seja fechada, enquanto com **localStorage** os dados persistem até que o usuário limpe manualmente o cache do navegador ou até o aplicativo da web limpa os dados. Os exemplos nesta postagem são para **localStorage**, mas a mesma sintaxe funciona para sessionStorage.

### Usando o localStorage
O **LocalStorage** salva dados no computador do visitante, que ficam vinculados ao (e apenas acessíveis pelo) seu domínio. E pra usar é bem simples:

Use o método setItem(nome, valor) para criar/salvar novos itens e o depois o método getItem(nome) para recuperar o valor.

// Cria um item "usuario" com valor "Belem"
window.localStorage.setItem('usuario', 'Belem');
	
// Depois, em outra página ou aba, recupera esse item
var usuario = window.localStorage.getItem('usuario');
	
// Remove o item
window.localStorage.removeItem('usuario');

## [Json](http://www.json.org/ "Ir para o site oficial")

JSON (JavaScript Object Notation) é um modelo para armazenamento e transmissão de informações no formato texto. Apesar de muito simples, tem sido bastante utilizado por aplicações Web devido a sua capacidade de estruturar informações de uma forma bem mais compacta do que a conseguida pelo modelo XML, tornando mais rápido o parsing dessas informações. Isto explica o fato de o JSON ter sido adotado por empresas como Google e Yahoo, cujas aplicações precisam transmitir grandes volumes de dados.

### Sintaxe no Json
A ideia utilizada pelo JSON para representar informações é simples: para cada valor representado, atribui-se um nome (ou rótulo) que descreve o seu significado. Esta sintaxe é derivada da forma utilizada pelo JavaScript para representar informações.
Um valor pode ser uma string entre aspas duplas, ou um número, ou verdadeiro ou falso ou nulo, ou um objeto ou uma matriz. Essas estruturas podem ser aninhadas.


Uma string é uma seqüência de zero ou mais caracteres Unicode, agrupados em aspas duplas, usando escapes de barra invertida. Um caractere é representado como uma única cadeia de caracteres. Uma string é muito parecida com uma string C ou Java.


Um número é muito parecido com um número C ou Java, exceto que os formatos octal e hexadecimal não são usados.


* Representando o ano de 2018
"ano": 2018

Um par nome/valor deve ser representado pelo nome entre aspas duplas, seguido de dois pontos, seguido do valor. Os valores podem possuir apenas 3 tipos básicos: numérico (inteiro ou real), booleano e string. As Listagens 2, 3, 4 e 5 apresentam exemplos. Observe que os valores do tipo string devem ser representados entre aspas.

* Representando um número real
"altura": 1.72

* Representando uma string
"site": “www.cotiinformatica.com.br”

* Representando um número negativo
"temperatura": -2

* Representando um valor booleano
"casado": true

A partir dos tipos básicos, é possível construir tipos complexos: array e objeto. Os arrays são delimitados por colchetes, com seus elementos separados entre vírgulas. As listagens 6 e 7 mostram exemplos.

* Representando Array de Strings
[“RJ”, “SP”, “MG”, “ES”]

* Representando Matriz de Inteiros
[
[1,5],
[-1,9],
[1000,0]
]

Os objetos são especificados entre chaves e podem ser compostos por múltiplos pares nome/valor, por arrays e também por outros objetos. Desta forma, um objeto JSON pode representar, virtualmente, qualquer tipo de informação! O exemplo da Listagem 8 mostra a representação dos dados de um filme.

Um objeto é um conjunto não ordenado de pares nome / valor. Um objeto começa com {(chave esquerda) e termina com} (chave direita). Cada nome é seguido por: (dois pontos) e os pares nome / valor são separados por (vírgula).


* Representando: Objeto

{
  “titulo”: “JSON x XML”,
  “resumo”: “o duelo de dois modelos de representação de informações”,
  “ano”: 2012,
  “genero”: [“aventura”, “ação”, “ficção”]   
 }

Uma matriz é uma coleção ordenada de valores. Um array começa com [(colchete esquerdo) e termina com] (colchete direito). Os valores são separados por (vírgula).


* Representando: Array de Objetos

[
   {
     “titulo”: “JSON x XML”,
     “resumo”: “o duelo de dois modelos de representação de informações”,
     “ano”: 2012,
     “genero”: [“aventura”, “ação”, “ficção”]   
    },
   {
     “titulo”: “JSON James”,
     “resumo”: “a história de uma lenda do velho oeste”,
     “ano”: 2012,
     “genero”: [“western”]  
    }
]

A palavra-chave “null” deve ser utilizada para a representação de valores nulos.

* Representando um valor nulo
"site":null

### Json x xml

Podemos entender o JSON como uma espécie de “concorrente” da XML na área de troca de informações.

**Semelhanças:**
• Os dois modelos representam informações no formato texto.
• Ambos possuem natureza auto-descritiva (ou seja, basta “bater o olho” em um arquivo JSON ou em um arquivo XML para entender o seu significado).
• Ambos são capazes de representar informação complexa, difícil de representar no formato tabular. Alguns exemplos: objetos compostos (objetos dentro de objetos), relações de hierarquia, atributos multivalorados, arrays, dados ausentes, etc.
• Ambos podem ser utilizados para transportar informações em aplicações AJAX.
• Ambos podem ser considerados padrões para representação de dados. XML é um padrão W3C, enquanto JSON foi formalizado na RFC 4627.
• Ambos são independentes de linguagem. Dados representados em XML e JSON podem ser acessados por qualquer linguagem de programação, através de API’s específicas.

**Diferenças:**
• JSON não é uma linguagem de marcação. Não possui tag de abertura e muito menos de fechamento!
• JSON representa as informações de forma mais compacta.
• JSON não permite a execução de instruções de processamento, algo possível em XML.
• JSON é tipicamente destinado para a troca de informações, enquanto XML possui mais aplicações. Por exemplo: nos dias atuais existem bancos de dados inteiros armazenados em XML e estruturados em SGBD’s XML nativo.

### Json no Java

Ao acessar a home page oficial do JSON (www.json.org) você verá que existem parsers disponíveis para quase todas as linguagens: Delphi, PHP, Java, Matlab, C++, C#, etc.

No XML a coisa é bem mais fácil, pois existem duas API’s básicas para o parsing de informações: SAX e DOM. Ambas já são instaladas junto com o Java e, daí, basta utilizá-las. Adicionalmente, o princípio de funcionamento das API’s SAX e DOM é bastante conhecido pelos desenvolvedores: DOM importa o documento todo para a memória, criando uma árvore, enquanto o SAX percorre o arquivo sequencialmente disparando eventos, sem realizar a importação de informações para a memória.

O JSON parece ainda não ter atingido esse grau maturidade. Várias pessoas/empresas implementaram os seus próprios parsers, com diferentes princípios de funcionamento. Como ainda não há um padrão, fica difícil decidir qual utilizar!

Para converter um objeto Java para JSON, utiliza-se o método toJson. E para fazer ao contrário, ou seja, atribuir o conteúdo de um objeto Java a partir de uma string Json, utiliza-se fromJson.

### Algumas API's
* [JsonPlaceholder](http://jsonplaceholder.typicode.com/
"Ir para o site oficial")
* [Mocky.io](https://www.mocky.io/ "Ir para o site oficial")

## Json-server

### O que é o JSON Server?
Ter uma API pronta para começar o desenvolvimento do front-end da sua aplicação as vezes pode ser um problema. Com isso te apresento o JSON Server. JSON Server é uma biblioteca capaz de criar uma API Fake em 30 segundos e sem precisar escrever nenhuma linha de código.

### O Que É REST?
REST vem de REpresentational State Transfer. É um estilo de arquitetura para projetar aplicações conectadas, usando os simples verbos HTTP para permitir a comunicação entre as máquinas. Assim, ao invés de usar uma URL para manipular informação do usuário, REST enviar uma requisição HTTP, como GET, POST, DELETE, etc., para uma URL manipular os dados.

### Por Que Precisamos de uma API REST Falsa?
APIs REST formam o backend de aplicações web e móveis. Ao criar aplicações, algumas vezes não temos APIs REST prontas para uso no durante o desenvolvimento. Para ver um app web ou móvel em ação, precisamos de um servidor que retorne dados JSON falsos. É aí que uma API REST falsa entra em ação. ==json-server== provê a funcionalidade para configurar um servidor de API REST falso com mínimo de esforço.

## Componentes:

### Grid
**Ion-Grid** fornece um layout personalizado do flexbox. Ele possui principalmente três componentes: grade, linhas e colunas.

As colunas são colocadas horizontalmente em uma linha que pode caber automaticamente, redimensionando sua largura de acordo com o espaço disponível nessa linha.

Por padrão, 12 colunas podem ser adicionadas em uma linha, mas podem ser personalizadas, o que veremos em outros exemplos.

A **ion-grid** é usado para adicionar um invólucro em torno linhas e colunas da grade. Sob o invólucro da grade, as linhas são adicionadas como estruturas verticais, que são divididas em colunas para ocupar espaço horizontal para preencher a área da linha.

### Row
O componente de linha de íons é usado para criar uma única linha no layout da grade. Linhas são a estrutura horizontal com vários números de colunas para preencher a largura total da linha.

Por padrão, as colunas na linha podem ocupar espaço total horizontalmente e agrupar as colunas na próxima linha, se compactadas. Usando as propriedades abaixo, podemos modificar as propriedades do CSS flexbox para substituir o comportamento padrão.

| Comando | Descrição |
| ------ | ----------- |
| **fixed** | assume valor booleano; Se definido como **true** a grade, terá uma largura fixa no tamanho da tela. |

### Quebra de coluna:
| Comando | Descrição |
| ------ | ----------- |
|**nowrap** | Se a **nowrap** propriedade for adicionada na linha de íons, as colunas não cairão para a próxima linha; Adiciona propriedade CSS **flex-wrap: nowrap**.|
| **wrap-reverse** | as colunas serão quebradas inversamente. Adiciona propriedade css **flex-wrap: wrap-reverse**.|

### Alinhamento vertical de colunas

| Comando | Descrição |
| ------ | ----------- |
| **align-items-start** | todas as colunas serão alinhadas verticalmente na parte superior, a menos que especifiquem seu próprio alinhamento. Adiciona propriedade css **flex-wrap: nowrap**.|
| **align-items-center** | todas as colunas serão alinhadas verticalmente no centro, a menos que especifiquem seu próprio alignment. Adiciona a propriedade CSS **flex-wrap: nowrap**.|
| **align-items-end** | todas as colunas serão alinhadas verticalmente na parte inferior, a menos que especifiquem seu próprio alinhamento. Adiciona propriedade css **flex-wrap: nowrap**.|
| **align-items-stretch** | todas as colunas serão esticadas para ocupar toda a altura da linha, a menos que especifiquem seu próprio alinhamento. Adiciona propriedade CSS **align-items: stretch**.|
| **align-items-baseline** | todas as colunas serão alinhadas verticalmente em suas linhas de base, a menos que especifiquem seu próprio alinhamento. Adiciona propriedade CSS **align-items: baseline**. |

### Alinhamento horizontal de colunas:

| Comando | Descrição |
| ------ | ----------- |
| **justify-content-start** | todas as colunas serão alinhadas horizontalmente no início. Adiciona propriedade CSS **justify-content: start**. |
| **justify-content-center** | todas as colunas serão alinhadas horizontalmente no centro. Adiciona propriedade CSS **justify-content: center**. |
| **justify-content-end** | todas as colunas serão alinhadas horizontalmente no final. Adiciona propriedade CSS **justify-content: end**. |
| **justify-content-around** | adiciona justify-content: space-around. Todas as colunas serão alinhadas horizontalmente com espaço igual ao seu redor. Adiciona propriedade CSS **justify-content: space-around**. |
| **justify-content-between** | adiciona justify-content: space-between. Todas as colunas serão alinhadas horizontalmente com um espaço de meio tamanho em cada extremidade. Adiciona propriedade CSS **justify-content: space-between**. |

### IonCol
O **ion-col** componente cria uma célula / coluna na linha. As colunas são adicionadas dentro de uma linha. Eles ocupam todo o espaço disponível da linha, dividido por colunas adicionadas na linha.

O alinhamento da coluna pode ser modificado usando as propriedades abaixo:

| Comando | Descrição |
| ------ | ----------- |
| **align-self-start** | a coluna será alinhada verticalmente na parte superior; Adiciona propriedade CSS **align-self: flex-start**. |
| **align-self-center** | a coluna será alinhada verticalmente no centro; Adiciona propriedade CSS **align-self: center**. |
| **align-self-end** | a coluna será alinhada verticalmente na parte inferior; Adiciona propriedade CSS **align-self: flex-end**. |
| **align-self-stretch** | a coluna será esticada para ocupar toda a altura da linha; Adiciona propriedade CSS **align-self: stretch**. |
| **align-self-baseline** | a coluna será alinhada verticalmente em sua linha de base; Adiciona propriedade CSS **align-self: baseline**. |
| **size** | o número de espaço da coluna que ocupará do total de slots de colunas disponíveis é 12. O padrão é definido como automático para ajustar automaticamente de acordo com o espaço disponível na linha. |
| **offset** | quantidade de margem adicionada no início da coluna com base no total de colunas disponíveis nessa linha. |
| **pull** | isso adiciona a propriedade CSS correta para puxar a coluna para o início do total disponível |
| **push** | Isso adiciona a propriedade CSS esquerda à coluna e empurra para o final da linha. |

## Alguns Comandos
:link: `https://ionicframework.com/docs/v3/cli/`
:link: `https://github.com/orgs/ionic-team/projects`

| Comando | Descrição |
| ------ | ----------- |
| ionic start **--list** | Listar os tipos disponiveis de projeto |
| ionic start nome_do_projeto blank **--type=react** | Criar projeto em branco em React|
| ionic start nome_do_projeto **blank** | Criar projeto em branco em Angular |
| ionic start nome_do_projeto **tabs** | Criar projeto com abas |
| ionic start nome_do_projeto **sidemenu** | Criar projeto com menu lateral |
| ionic start nome_do_projeto **super** | Criar projeto completo de exemplo |
| ionic start nome_do_projeto **tutorial** | Criar projeto com tutorial |
| ionic start nome_do_projeto **conference** | Criar projeto real |
| ionic serve | Iniciar o projeto|

###### tags: `ionic` `apostila`