├── chapters ├── 07-api │ └── README.md ├── 06-faq │ ├── README.md │ └── 01-faq.md ├── 00-home │ ├── README.md │ └── 00-home.md ├── .DS_Store ├── 05-cli │ ├── .DS_Store │ ├── README.md │ ├── 5e-info.md │ ├── 5f-platform.md │ ├── 5b-build.md │ ├── 5c-emulate.md │ ├── 5d-generate.md │ └── 5a-intro.md ├── 08-recursos │ ├── .DS_Store │ ├── README.md │ ├── 08d-editors-and-ides.md │ ├── 08e-using-npm.md │ ├── 08f-mac-setup.md │ ├── 08g-windows-setup.md │ └── 08b-ionic-developer-glossary.md ├── 01-introducao │ ├── tutorial-screen.png │ ├── README.md │ ├── 01a-welcome.md │ ├── 01c-tutorial.md │ ├── 01b-instalation.md │ ├── 01e-core-concepts.md │ └── 01d-migration.md ├── 04-temas │ ├── README.md │ ├── 4e-overriding-ionic-variables.md │ ├── 4a-intro.md │ ├── 4b-theming-your-ionic-app.md │ ├── 4c-sass-variables.md │ └── 4d-platform-vars.md ├── 03-nativo │ ├── 3za-googleMaps.md │ ├── 3g-base64togallery.md │ ├── 3d-appVersion.md │ ├── README.md │ ├── 3v-push.md │ ├── 3h-batteryStatus.md │ ├── 3b-appAvailability.md │ ├── 3w-geolocation.md │ ├── 3a-actionSheet.md │ └── 3c-appRate.md └── 02-componentes │ ├── README.md │ ├── 2a-overview.md │ ├── 2b-action-sheets.md │ ├── 2c-alertas.md │ └── 2f-cards.md ├── glossario.md ├── CONTRIBUTING.md └── README.md /chapters/07-api/README.md: -------------------------------------------------------------------------------- 1 | 7. API -------------------------------------------------------------------------------- /chapters/06-faq/README.md: -------------------------------------------------------------------------------- 1 | 6. [FAQ](01-faq.md) -------------------------------------------------------------------------------- /chapters/00-home/README.md: -------------------------------------------------------------------------------- 1 | ## 0. Home 2 | 0.1 [Home](./00-home.md) 3 | -------------------------------------------------------------------------------- /chapters/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicBrazil/ionic2-docs/HEAD/chapters/.DS_Store -------------------------------------------------------------------------------- /chapters/05-cli/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicBrazil/ionic2-docs/HEAD/chapters/05-cli/.DS_Store -------------------------------------------------------------------------------- /chapters/08-recursos/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicBrazil/ionic2-docs/HEAD/chapters/08-recursos/.DS_Store -------------------------------------------------------------------------------- /chapters/01-introducao/tutorial-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonicBrazil/ionic2-docs/HEAD/chapters/01-introducao/tutorial-screen.png -------------------------------------------------------------------------------- /chapters/01-introducao/README.md: -------------------------------------------------------------------------------- 1 | ## 1. Introdução 2 | 1.1 [Bem vindo](01a-welcome.md) 3 | 1.2 [Instalação](01b-instalation.md) 4 | 1.3 [Tutorial](01c-tutorial.md) 5 | 1.4 [Conceitos de Migração](01d-migration.md) 6 | 1.5 [Conceitos](01e-core-concepts.md) 7 | -------------------------------------------------------------------------------- /chapters/04-temas/README.md: -------------------------------------------------------------------------------- 1 | 4 Temas 2 | 3 | 4.1 [Introdução](3a-intro.md) 4 | 5 | 4.2 [Tematizando seu App](3b-theming-your-ionic-app.md) 6 | 7 | 4.3 [Variáveis SASS](3c-sass-variables.md) 8 | 9 | 4.4 [Estilos das plataformas](3d-platform-vars.md) 10 | 11 | 4.5 [Sobreescrevendo variáveis do Ionic](3e-overriding-ionic-variables.md) -------------------------------------------------------------------------------- /chapters/05-cli/README.md: -------------------------------------------------------------------------------- 1 | 5. CLI 2 | 5.1 [Introdução](./5a-intro.md) 3 | 5.2 [`build`](./5b-build.md) 4 | 5.3 [`emulate`](./5c-emulate.md) 5 | 5.4 [`generate`](./5d-generate.md) 6 | 5.5 [`info`](./5e-info.md) 7 | 5.6 [`platform`](./5f-platform.md) 8 | 5.7 `run` 9 | 5.8 `serve` 10 | 5.9 `start` 11 | 5.10 `v2` 12 | -------------------------------------------------------------------------------- /chapters/08-recursos/README.md: -------------------------------------------------------------------------------- 1 | 8. Recursos > Resources 2 | 8.1 Developer Tips 3 | 4 | 8.2 Glossário 5 | 6 | 8.3 Ionicons 7 | 8 | 8.4 [Editores e IDEs](08d-editors-and-ides.md) 9 | 10 | 8.5 [Usando NPM](08e-using-npm.md) 11 | 12 | 8.6 [Instalação em OSX](08f-mac-setup.md) 13 | 14 | 8.7 [Instalação em Windows](08g-windows-setup.md) 15 | -------------------------------------------------------------------------------- /chapters/04-temas/4e-overriding-ionic-variables.md: -------------------------------------------------------------------------------- 1 | Sobreescrevendo as variáveis Sass do Ionic 2 | --------------------------------- 3 | 4 | Há muitas variáveis que você pode substituir com Ionic. Qualquer uma das seguintes variáveis podem ser substituídas a partir do seu arquivo ```app/theme/app.variables.scss```, basta adicionar um novo valor para o arquivo: 5 | 6 | ```scss 7 | $text-color: #000099; 8 | 9 | $colors( 10 | ... 11 | ) 12 | ``` -------------------------------------------------------------------------------- /chapters/03-nativo/3za-googleMaps.md: -------------------------------------------------------------------------------- 1 | #Google Maps 2 | 3 | `$ ionic plugin add cordova-plugin-googlemaps` 4 | 5 | 6 | Repositório: [https://github.com/mapsplugin/cordova-plugin-googlemaps](https://github.com/mapsplugin/cordova-plugin-googlemaps) 7 | 8 | 9 | 10 | Métodos estáticos 11 | ----------------- 12 | 13 | `onInit()` 14 | 15 | 16 | Métodos da instância 17 | -------------------- 18 | 19 | 20 | `setDebuggable()` 21 | 22 | 23 | `setClickable()` -------------------------------------------------------------------------------- /glossario.md: -------------------------------------------------------------------------------- 1 | # Glossário 2 | Essa página tem como objetivo reunir termos técnicos (ou não) e suas respectivas traduções para mantermos uma padrão uniforme nos capítulos. Esse é um documento orgânico que irá ser atualizado de forma colaborativa a medida que novos termos forem surgindo. 3 | 4 | # Traduções (Original - Tradução) 5 | 6 | * Component - Componente 7 | * Directive - Diretiva 8 | * Selector - Seletor 9 | * Service - Serviço 10 | * Provider - provedor 11 | * Annotation - anotação -------------------------------------------------------------------------------- /chapters/05-cli/5e-info.md: -------------------------------------------------------------------------------- 1 | # info # 2 | 3 | | Comando | Descrição | 4 | |---------|-----------| 5 | | ionic info | Lista as informações sobre usuários em ambiente de execução | 6 | 7 | 8 | # Descrição # 9 | 10 | O comando **ionic info** imprime informações úteis sobre o ambiente do seu sistema Ionic e dependencias. Isso inclui coisas como seu Ionic, Cordova, Node e versão do XCode. Se enviando uma issue no GitHub, colando a saída deste comando pode ajudar os outros a diagnosticar o problema mais rapidamente. 11 | -------------------------------------------------------------------------------- /chapters/02-componentes/README.md: -------------------------------------------------------------------------------- 1 | 2. Componentes 2 | 2.1 [Overview](2a-orverview.md) 3 | 2.2 [Action Sheets](2b-action-sheets.md) 4 | 2.3 [Alerts](2c-alertas.md) 5 | 2.4 > Badges 6 | 2.5 > Buttons 7 | 2.6 > Cards 8 | 2.7 > Checkbox 9 | 2.8 > Grid 10 | 2.9 > Icons 11 | 2.10 > Inputs 12 | 2.11 > Lists 13 | 2.12 > Menus 14 | 2.13 > Modals 15 | 2.14 > Navigation 16 | 2.15 > Radio 17 | 2.16 > Searchbar 18 | 2.17 > Segment 19 | 2.18 > Select 20 | 2.19 > Slides 21 | 2.20 > Tabs 22 | 2.21 > Toggle 23 | 2.22 > Toolbar 24 | -------------------------------------------------------------------------------- /chapters/05-cli/5f-platform.md: -------------------------------------------------------------------------------- 1 | # platform # 2 | 3 | | Comando | Descrição | 4 | |---------|-----------| 5 | | ionic platform | Adicione plataformas de destino para build da aplicação Ionic | 6 | | **Flags** | | 7 | | --noresources|-r | Não adicionar aos ***resources*** os icones e splash screen padrões do Ionic | 8 | | --nosave|-e | Não salvar a plataforma no arquivo package.json | 9 | 10 | O comando **platform** adiciona uma nova plataforma a sua aplicação. Execute **ionic platform add $plataform** para adicionar uma plataforma especifica, onde **$plataform** pode ser **ios** ou **android**. 11 | 12 | -------------------------------------------------------------------------------- /chapters/02-componentes/2a-overview.md: -------------------------------------------------------------------------------- 1 | Componentes 2 | ----------- 3 | 4 | Aplicativos ionics são feitos de blocos de construção de alto nível, chamados de componentes. Componentes permitem-lhe construir rapidamente uma interface para o seu aplicativo. 5 | Ionic vem com uma série de componentes, incluindo os modais, pop-ups e cartões. Embora os componentes são principalmente HTML e CSS, alguns componentes também incluem JavaScript em sua funcionalidade. 6 | Confira os exemplos abaixo, para ver o que cada componente apresenta e para aprender como usar cada um. Depois de se familiarizar com o básico, mergulhe de cabeça na documentação da API para obter ideias, sobre como personalizar cada componente. 7 | 8 | -------------------------------------------------------------------------------- /chapters/04-temas/4a-intro.md: -------------------------------------------------------------------------------- 1 | Tematizando aplicativos Ionic 2 | ============================= 3 | 4 | Introdução 5 | ----------------------------- 6 | 7 | Nós construímos o Ionic para ser um quadro branco que você possa facilmente customiza-lo e modifica-lo para se ajustar a sua marca, enquanto ainda segue os padrões de cada plataforma. Os melhores aplicativos nas lojas de aplicativos são completamente customizáveis e nós queremos tornar fácil fazer a mesma coisa com seus aplicativos Ionic. 8 | 9 | Nós fizemos a tematização dos aplicativos do Ionic 2 mais fácil do que nunca. Os aplicativos Ionic são construídos sobre o [Sass](http://ionicframework.com/docs/what-is/#sass), que nos permite definir alguns estilos padrão para seu aplicativo, mas que torna extremamente fácil para você alterar nossos padrões. -------------------------------------------------------------------------------- /chapters/05-cli/5b-build.md: -------------------------------------------------------------------------------- 1 | # build 2 | 3 | | Comando | Descrição | 4 | |---|---| 5 | | ionic build | Fazer *build* localmente de um projeto Ionic para uma determinada plataforma | 6 | | **Flags** | | 7 | | --nohooks|-n | Não adicionar *hooks* padrão do ionic para o Cordova | 8 | 9 | 10 | # Descrição 11 | 12 | O comando **build** faz *build* do seu aplicativo para uma plataforma especifica, ou seja, irá compilar o aplicativo e gerar o executável que pode ser enviado para as lojas de aplicativos (app stores). Informe **ios** ou **android** para gerar o codigo da plataforma especifica no subdiretorio **platforms**. 13 | 14 | O comando **build** é um proxy para o [comando build do Cordova](https://cordova.apache.org/docs/en/latest/guide/cli/index.html#link-5). 15 | 16 | *Nota de tradução: Build e hooks são termos técnicos e não seria correto traduzir literalmente.* 17 | -------------------------------------------------------------------------------- /chapters/00-home/00-home.md: -------------------------------------------------------------------------------- 1 | # 0.0 IONIC DOCS 2 | 3 | 4 | [Começando](/chapters/01-introducao/01a-welcome.md) 5 | 6 | Tudo que você precisa saber para começar com o Ionic. 7 | 8 | 9 | 10 | [Componentes de Interface](/chapters/02-componentes) 11 | 12 | Uma análise compreensiva sobre os componentes de interface do ionic - tudo que você irá precisar. 13 | 14 | 15 | 16 | [API](/chapters/07-api) 17 | 18 | Explore nossa API para obter informações sobre métodos, propriedades e eventos. 19 | 20 | 21 | 22 | [Temas](/chapters/04-temas) 23 | 24 | Aprenda como facilmente customizar e modificar o desing de seus app's para se encaixar com sua marca. 25 | 26 | 27 | 28 | [Ionicons](/chapters/08-recursos) 29 | 30 | Mais de 900 ícones com desing personalizado. Licença MIT & prontos para usar com o Ionic. 31 | 32 | 33 | 34 | [Fórum da comunidade](https://forum.ionicframework.com/) 35 | 36 | Passe por lá e deixe seu Olá. Pergunte algo ou compartilhe algo interessante. 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /chapters/03-nativo/3g-base64togallery.md: -------------------------------------------------------------------------------- 1 | Base64 To Gallery 2 | ======== 3 | ```$ cordova plugin add cordova-base64-to-gallery ``` 4 | 5 | Repositório: [https://github.com/Nexxa/cordova-base64-to-gallery](https://github.com/Nexxa/cordova-base64-to-gallery) 6 | Este plugin permite a você salvar dados base64 como uma imagem no formato png em seu dispositivo. 7 | 8 | Plataformas suportadas 9 | ----- 10 | - Android 11 | - iOS 12 | - Windows Phone 8 13 | 14 | Uso 15 | ----- 16 | 17 | ``` javascript 18 | 19 | import {Base64ToGallery} from 'ionic-native'; 20 | 21 | 22 | Base64ToGallery.base64ToGallery(base64Data, 'img_').then( 23 | res => console.log("Saved image to gallery ", res), 24 | err => console.log("Error saving image to gallery ", err) 25 | ); 26 | ``` 27 | 28 | Métodos de instância 29 | ----- 30 | 31 | ``` base64ToGallery(data, prefix) ``` 32 | 33 | Converte uma string base64 em um arquivo de imagem na galeria do dispositivo 34 | 35 | | Parâmetro | Tipo | Detalhes | 36 | | --------- | ------ | ------- | 37 | | data | | | 38 | | prefixo | | | 39 | -------------------------------------------------------------------------------- /chapters/05-cli/5c-emulate.md: -------------------------------------------------------------------------------- 1 | # Emulate # 2 | 3 | | Comando | Descrição | 4 | |----------|-------------| 5 | | ionic emulate | Emular o projeto no simulador ou no emulador | 6 | | **Flags** | | 7 | | --livereload|-l | | 8 | | --address | | 9 | | --port|-p | | 10 | | --livereload-port|-r | | 11 | | --consolelogs|-c | Imprimir console logs da aplicação no Ionic CLI (requer livereload) | 12 | | --serverlogs|-s | Imprimir dev server logs no Ionic CLI (requer livereload) | 13 | | --debug|--release | | 14 | | --device|--emulator|--target=FOO | | | 15 | 16 | 17 | # Descrição # 18 | 19 | O comando **emulate** irá fazer deploy de sua aplicação para dispositivos das plataformas específicas. Você também pode rodar em **live reload¹** especificando ao emulador através da flag --livereload. A funcionalidade de **live reload¹** é similar ao do comando **ionic server**, mas em vez de desenvolver e debugar um aplicativo usando o navegador padrão, o aplicativo hibrido compilado está observando todas as mudanças aos arquvios e recarregando o aplicativo quando necessario. 20 | 21 | 22 | **Notas de tradução:** 23 | ¹Live reload: As mudanças de seus arquivos serão refletidas em tempo real. 24 | -------------------------------------------------------------------------------- /chapters/04-temas/4b-theming-your-ionic-app.md: -------------------------------------------------------------------------------- 1 | Tematizando aplicativos Ionic 2 | ============================= 3 | 4 | Tematizando seu aplicativo Ionic 5 | ----------------------------- 6 | 7 | O suporte a temas já está incorporado em seus aplicativos Ionic. Para alterar o tema, basta ajustar os valores de ```$colors``` no arquivo ```app/theme/app.variables.scss```. 8 | 9 | ```scss 10 | $colors: ( 11 | 12 | primary: #387ef5, 13 | secondary: #32db64, 14 | danger: #f53d3d, 15 | light: #f4f4f4, 16 | dark: #222, 17 | 18 | ); 19 | ``` 20 | A maneira mais rápida de alterar o tema do seu aplicativo Ionic é definir um novo valor para ```primary```, pois o Ionic usa a cor primária por padrão para botões e outros componentes. 21 | 22 | Cores personalizadas 23 | --------------------- 24 | 25 | Para adicionar cores personalizadas, basta adicioná-las em ```$colors```: 26 | 27 | ```scss 28 | $colors: ( 29 | // ... 30 | twitter: #55acee 31 | ) 32 | ``` 33 | 34 | O Ionic torna as chaves de ```$colors``` disponíveis como propriedades de muitos componentes. Por exemplo, para usar nossa cor ```twitter``` adicione a chave como uma propriedade: 35 | ```html 36 | 37 | ``` 38 | 39 | 40 | -------------------------------------------------------------------------------- /chapters/05-cli/5d-generate.md: -------------------------------------------------------------------------------- 1 | # Descrição # 2 | 3 | Ionic agora fornece uma funcionadede de gerador para criar paginas e serviços para sua aplicação. Isso faz ir de um aplicativo básico para um aplicativo cheio de recursos de navegação muito fácil. 4 | 5 | Para criar uma pagina, você pode usar o seguinte comando: 6 | 7 | ```shell 8 | # ionic g page 9 | ionic g page myPage 10 | 11 | √ Create app/pages/my-page/my-page.html 12 | √ Create app/pages/my-page/my-page.js 13 | √ Create app/pages/my-page/my-page.scss 14 | ``` 15 | 16 | Isso irá gerar um arquivo html, arquivo sass e um arquivo js com os seus componentes definidos. 17 | 18 | Para criar um um serviço, você pode substituir **page** por **provider**: 19 | 20 | ```shell 21 | ionic g provider MyData 22 | 23 | √ Create app/pages/my-data/my-data.js 24 | ``` 25 | 26 | Isso irá criar uma classe padrão com um simples **http** get request usando a classe **http** do Angular. 27 | 28 | ## Uma breve nota sobre convenções de nomenclatura ## 29 | 30 | Ionic 2 usa kebob-casing para nome de arquivos ( **my-about-page.html** ) e nome de classes css ( **.my-about-page** ) e usa PascalCasing para classes JavaScript em ES6/TypeSciprt ( MyAboutPage ). Usando está conversão, desenvolvedores podem pegar qualquer projeto Ionic 2 e rapidamente tornar-se produtivo, semelhante ao Rails. 31 | 32 | -------------------------------------------------------------------------------- /chapters/03-nativo/3d-appVersion.md: -------------------------------------------------------------------------------- 1 | App Version 2 | ======== 3 | 4 | ``` $ cordova plugin add cordova-plugin-app-version ``` 5 | 6 | Repositório: [https://github.com/whiteoctober/cordova-plugin-app-version](https://github.com/whiteoctober/cordova-plugin-app-version) 7 | 8 | Faz a leitura da versão do seu app das suas configurações de *build*. 9 | 10 | Este plugin requer: cordova-plugin-app-version. Para mais informações, por favor veja [a documentação do plugin Cordova App Version](https://github.com/whiteoctober/cordova-plugin-app-version). 11 | 12 | Platafomas suportadas 13 | ----- 14 | - Android 15 | - iOS 16 | 17 | Uso 18 | ----- 19 | 20 | ``` javascript 21 | 22 | import {AppVersion} from 'ionic-native'; 23 | 24 | AppVersion.getAppName(); 25 | AppVersion.getPackageName(); 26 | AppVersion.getVersionCode(); 27 | AppVersion.getVersionNumber(); 28 | ``` 29 | 30 | Métodos estáticos 31 | ----- 32 | ``` getAppName() ``` 33 | Retorna o nome do aplicativo 34 | **Retorna**: ``` Promise ``` 35 | 36 | 37 | ``` getPackageName() ``` 38 | Retorna o nome do pacote aplicativo 39 | **Retorna**: ``` Promise ``` 40 | 41 | 42 | ``` getVersionCode() ``` 43 | Retorna o identificador da *build* do aplicativo 44 | **Retorna**: ``` Promise ``` 45 | 46 | 47 | ``` getVersionNumber() ``` 48 | Retorna a versão do aplicativo 49 | **Retorna**: ``` Promise ``` 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /chapters/03-nativo/README.md: -------------------------------------------------------------------------------- 1 | 3 Nativo 2 | 3.1 > [ActionSheet](3a-actionSheet.md) 3 | 3.2 > [AppAvailability](3b-appAvailability.md) 4 | 3.3 > [AppRate](3c-appRate.md) 5 | 3.4 > [AppVersion](3d-appVersion.md) 6 | 3.5 > Badge 7 | 3.6 > BarCodeScanner 8 | 3.7 > [Base64ToGallery](3g-base64togallery.md) 9 | 3.8 > [BatteryStatus](3h-batteryStatus.md) 10 | 3.9 > BLE 11 | 3.10 > Calendar 12 | 3.11 > Camera 13 | 3.12 > Clipboard 14 | 3.13 > Connection 15 | 3.14 > Contats 16 | 3.15 > DatePicker 17 | 3.16 > DBMeter 18 | 3.17 > Device 19 | 3.18 > DeviceMotion 20 | 3.19 > DeviceOrientation 21 | 3.20 > Dialogs 22 | 3.21 > Facebook 23 | 3.22 > File 24 | 3.23 > Flashlight 25 | 3.24 > [Geolocation](3w-geolocation.md) 26 | 3.25 > Globalization 27 | 3.26 > Google Analytics 28 | 3.27 > [Google Maps](3za-googleMaps.md) 29 | 3.28 > Google Plus 30 | 3.29 > Hotspot 31 | 3.30 > Httpd 32 | 3.31 > IBeacon 33 | 3.32 > ImagePicker 34 | 3.33 > InAppBrowser 35 | 3.34 > Ionic Deeplinks 36 | 3.35 > Keyboard 37 | 3.36 > Launch Navigator 38 | 3.37 > Local Notifications 39 | 3.38 > MediaError 40 | 3.39 > MediaPlugin 41 | 3.40 > Network 42 | 3.41 > OneSignal 43 | 3.42 > Printer 44 | 3.43 > [Push](3v-push.md) 45 | 3.44 > SafariViewController 46 | 3.45 > Screenshot 47 | 3.46 > SMS 48 | 3.47 > Social Sharing 49 | 3.48 > Spinner Dialog 50 | 3.49 > SplashScreen 51 | 3.50 > SQLite 52 | 3.51 > StatusBar 53 | 3.52 > Toast 54 | 3.53 > TouchID 55 | 3.54 > Transfer 56 | 3.55 > Vibration 57 | 3.56 > WebIntent 58 | -------------------------------------------------------------------------------- /chapters/08-recursos/08d-editors-and-ides.md: -------------------------------------------------------------------------------- 1 | # Editores e IDEs 2 | 3 | Com o Ionic 2 compilado com base em ES6 e TypeScript, é importante que seu editor ou IDE tenha suporte para estas novas linguagens. A seguir você encontra uma lista de editores e IDEs que nós acreditamos que te darão um suporte mais eficiente. 4 | 5 | ## Visual Studio Code 6 | VS Code é um novo editor que vem com suporte para a sintaxe do ES6, assim como suporte para TypeScript. Ele irá solicitar aos usuários para incluir os arquivos de definição do TypeScript e fará download dos mesmos do [Definitely Typed](http://definitelytyped.org/). O Visual Studio Code é grátis e funciona em OSX, Windows e Linux. 7 | 8 | [Offical website](https://code.visualstudio.com/) 9 | 10 | ##Atom 11 | Atom é um editor multiplataforma construído com tecnologias web. O Atom tem vários plugins para facilitar o desenvolvimento com ES6/TypeScript. Se não existe algo disponibilizado pelo Atom ou um plugin, você pode escrever seu próprio plugin usando JavaScript. O Atom funciona no OSX, Windows e Linux. 12 | 13 | [Atom TypeScript](https://atom.io/packages/atom-typescript) 14 | 15 | [Atom official website](https://atom.io/) 16 | 17 | ##Webstorm 18 | Webstorm é uma IDE paga que disponibiliza muitos recursos, como suporte para refatoração avançada, compilação de código automatica e suporte para gulp/grunt/webpack. O Webstorm vem com suporte para ES6 e TypeScript, assim como suporte para as sintaxes do Angular e do Ionic, diretamente após instalado. 19 | 20 | [Webstorm official website](https://www.jetbrains.com/webstorm/) 21 | -------------------------------------------------------------------------------- /chapters/02-componentes/2b-action-sheets.md: -------------------------------------------------------------------------------- 1 | Action Sheets (Folhas de Ação) 2 | ----------- 3 | 4 | Action Sheets, deslizam para cima a partir da borda inferior da tela do dispositivo, e exibe um conjunto de opções com a capacidade de confirmar ou cancelar uma ação. Action Sheets podem por vezes, ser usado como uma alternativa para os menus, no entanto, eles não devem ser utilizados para a navegação. 5 | 6 | O Action Sheet aparece sempre acima de quaisquer outros componentes na página, e deve ser descartado se quer interagir com o conteúdo que fica por baixo. 7 | Quando é acionado, o resto da página escurece para dar mais foco nas opções do Action Sheet. 8 | 9 | 10 | ### Uso Básico 11 | 12 | 13 | presentActionSheet() { 14 | 15 | let actionSheet = ActionSheet.create({ 16 | 17 | title: 'Modify your album', 18 | 19 | buttons: [ 20 | { 21 | text: 'Destructive', 22 | 23 | style: 'destructive', 24 | 25 | handler: () => { 26 | 27 | console.log('Destructive clicked'); 28 | 29 | } 30 | },{ 31 | text: 'Archive', 32 | 33 | handler: () => { 34 | 35 | console.log('Archive clicked'); 36 | 37 | } 38 | },{ 39 | text: 'Cancel', 40 | 41 | style: 'cancel', 42 | 43 | handler: () => { 44 | 45 | console.log('Cancel clicked'); 46 | 47 | } 48 | } 49 | ] 50 | }); 51 | this.nav.present(actionSheet); 52 | } -------------------------------------------------------------------------------- /chapters/03-nativo/3v-push.md: -------------------------------------------------------------------------------- 1 | Ionic Push é um plugin para lidar com notificações nativas com uma única API, **sem depender de qualquer outro plugin**. 2 | 3 | ###Adicionando plugin 4 | `ionic plugin add phonegap-plugin-push` 5 | 6 | Repositório: https://github.com/phonegap/phonegap-plugin-push 7 | 8 | Registrar e receber notificações 9 | 10 | É necessário **CordovaPlugin** `phonegap-plugin-push`. Para mais informações, veja: [Documentacao Push Plugin (Inglês)](https://github.com/phonegap/phonegap-plugin-push) 11 | 12 | Para usuários de TypeScript, veja: [Push Plugin documentação sobre TypeScript](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md) 13 | 14 | ####Métodos Estáticos 15 | **init(options)** 16 | 17 | Inicialize o plugin no modo nativo 18 | 19 | ```javascript 20 | var push = Push.init({ 21 | android: { 22 | senderID: "12345679" 23 | }, 24 | ios: { 25 | alert: "true", 26 | badge: true, 27 | sound: 'false' 28 | }, 29 | windows: {} 30 | }); 31 | ``` 32 | Parâmetro | Tipo | Detalhe 33 | --- | --- | --- 34 | options | **PushOptions** | [Opcões de push (inglês)](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#parameters) 35 | 36 | ####Retornos 37 | PushNotification retorna um novo objeto [PushNotification](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushonevent-callback) 38 | 39 | `hasPermission()` 40 | Checa se as permissões para notificações push estão de acordo. 41 | 42 | ####Retorno 43 | Retorna uma **promessa** que devolve um objeto `isEnabled`, um booleano que indica se a parmissão foi concedida. 44 | 45 | -------------------------------------------------------------------------------- /chapters/03-nativo/3h-batteryStatus.md: -------------------------------------------------------------------------------- 1 | Battery Status 2 | ======== 3 | 4 | ```$ cordova plugin add cordova-plugin-batterystatus``` 5 | Repositório: [https://github.com/apache/cordova-plugin-battery-status](https://github.com/apache/cordova-plugin-battery-status) 6 | 7 | Requer o plugin cordova: cordova-plugin-batterystatus. Para mais informações, por favor veja a [documentação do plugin BatteryStatus.](https://github.com/apache/cordova-plugin-battery-status) 8 | 9 | Plataformas suportadas 10 | ----- 11 | - Amazon Fire OS 12 | - iOS 13 | - Android 14 | - BlackBerry 10 15 | - Windows Phone 7 16 | - Windows Phone 8 17 | - Windows 18 | - Firefox OS 19 | - Browser 20 | 21 | Uso 22 | ----- 23 | 24 | ``` javascript 25 | 26 | import {BatteryStatus} from 'ionic-native'; 27 | 28 | 29 | // ver diferenças no estado da bateria 30 | let subscription = BatteryStatus.onChange().subscribe( 31 | status => { 32 | console.log(status.level, status.isPlugged); 33 | } 34 | ); 35 | 36 | // deixar de ver 37 | subscription.unsubscribe(); 38 | ``` 39 | 40 | Métodos estáticos 41 | ----- 42 | 43 | ``` onChange() ``` 44 | Ver diferença no nível da bateria 45 | **Retorno** : ```Observable``` Retorna um observável que empurra o estado de um objeto 46 | 47 | ``` onLow() ``` 48 | Ver o nível da bateria quando estiver baixo 49 | **Retorno** : ```Observable``` Retorna um observável que empurra o estado de um objeto 50 | 51 | ``` onCritical() ``` 52 | Ver o nível da bateria quando estiver crítico 53 | **Retorno** : ```Observable``` Retorna um observável que empurra o estado de um objeto 54 | -------------------------------------------------------------------------------- /chapters/03-nativo/3b-appAvailability.md: -------------------------------------------------------------------------------- 1 | App Availability 2 | ======== 3 | 4 | ``` $ cordova plugin add cordova-plugin-appavailability ``` 5 | 6 | Repositório: [https://github.com/ohh2ahh/AppAvailability](https://github.com/ohh2ahh/AppAvailability) 7 | 8 | Esse plugin permite que você verifique se um aplicativo está instalado no dispositivo do usuário. Ele requer um *URI scheme* (e.g. twitter://) no iOS ou um *Package Name* (e.g com.twitter.android) no Android. 9 | 10 | Este plugin requer: cordova-plugin-appavailability. Para mais informações, por favor veja [a documentação do plugin AppAvailability](https://github.com/ohh2ahh/AppAvailability). 11 | 12 | Platafomas suportadas 13 | ----- 14 | - Android 15 | - iOS 16 | 17 | Uso 18 | ----- 19 | 20 | ``` javascript 21 | 22 | import {AppAvailability} from 'ionic-native'; 23 | 24 | 25 | var app; 26 | 27 | if(device.platform === 'iOS') { 28 | app = 'twitter://'; 29 | }else if(device.platform === 'Android'){ 30 | app = 'com.twitter.android'; 31 | } 32 | 33 | AppAvailability.check(app) 34 | .then( 35 | yes => console.log(app + " is available"), 36 | no => console.log(app + " is NOT available") 37 | ); 38 | ``` 39 | 40 | Métodos estáticos 41 | ----- 42 | 43 | ``` check(app) ``` 44 | 45 | Verifica se um aplicativo está disponível no dispositivo do usuário 46 | 47 | | Parametro | Tipo | Detalhes | 48 | |-------------------------------|--------------|----------------------------------------------| 49 | | app | | Nome do pacote no Android ou URI no iOS | 50 | 51 | **Returns**: ``` Promise ``` 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapters/01-introducao/01a-welcome.md: -------------------------------------------------------------------------------- 1 | # 1.1 Bem vindo ao Ionic 2 | 3 | Nós projetamos o Ionic para ajudar desenvolvedores web a construir grandes aplicativos móveis para as lojas de aplicativos (app stores) de forma mais natural possível. Isso significa que nós focamos em tomar as linguagens HTML, CSS e JavaScript, que você usaria para desenvolver um site, e te ajudar a transformá-las magicamente em aplicativos móveis. Estas tecnologias têm servido os desenvolvedores bem nos últimos vinte anos, e pensamos que isto às torna uma grande aposta para os próximos vinte. 4 | 5 | Muitos desenvolvedores descobrirão que seus aplicativos Ionic podem ser construídos quase inteiramente com um navegador web padrão e qualquer computador antigo. E, uma vez que você esteja pronto para ligar um sensor ou usar um novo recurso do dispositivo, o kit de ferramentas móvel está a apenas uma instalação a distância. Nós pensamos que isto é bastante elegante. 6 | 7 | Estamos orgulhosos de dizer que Ionic tem sido usado por milhões de desenvolvedores para construir milhões de aplicativos em mais países do que jamais iremos visitar em nossas vidas. Ao longo desses dois anos, temos ouvido o seu feedback sobre como desenvolver uma melhor maneira de criar aplicativos melhores. 8 | 9 | Ionic 2 representa a aprendizagem coletiva sobre como levar a web a fazer mais no celular. Reformulamos quase todas as partes, desde a forma que os usuários navegam através de suas páginas até como nós o ajudamos a manipular melhor os dispositivos. 10 | 11 | Esperamos que você ache que Ionic 2 não só torna o desenvolvimento de aplicativos mais fácil e mais rápido, mas mais divertido. Porque a tecnologia móvel é toda sobre encontrar novas maneiras de mudar a forma como os seres humanos interagem com o mundo, e não podemos pensar em nada mais divertido do que isso. 12 | -------------------------------------------------------------------------------- /chapters/04-temas/4c-sass-variables.md: -------------------------------------------------------------------------------- 1 | Variáveis Sass 2 | ----------------------------- 3 | 4 | Variáveis Sass permitem que você defina um valor uma única vez e o utilize em múltiplos lugares. Variáveis começam com o sinal de dolar ($) e são definidas como propriedades CSS. Você pode mudar o valor de uma variável em um lugar e todas as instâncias onde ela é utilizada também se alterarão. Por exemplo, se você quiser definir a mesma altura para dois seletores diferentes, você poderia criar uma variável chamada ```$control-height```: 5 | ```scss 6 | $control-height: 40px; 7 | ``` 8 | Assim, você pode usar essa variável em múltiplos lugares. Por um questão de simplicidade, vamos atribuir ```$control-height``` para o atributo ```height``` de dois seletores: 9 | ```css 10 | .header { 11 | height: $control-height; 12 | } 13 | 14 | .sub-header { 15 | height: $control-height; 16 | } 17 | ``` 18 | Quando for traduzido para CSS, o resultado é o seguinte: 19 | ```css 20 | .header { 21 | height: 40px; 22 | } 23 | 24 | .sub-header { 25 | height: 40px; 26 | } 27 | ``` 28 | Isso é extremamente útil se você decidir posteriormente mudar o valor de ```$control-height``` que está sendo usado por múltiplos seletores. Em vez de revisar todo o seu código para encontrar os lugares para mudar esse valor, bastará você atualizar a variável ```$control-height```. 29 | 30 | Variáveis Sass andam de mãos dadas com o Ionic. Com alguns frameworks CSS, você tem que criar um novo estilo e substituir os estilos do framework para alterar a aparência do seu aplicativo. Com o Ionic, você pode modificar o Sass diretamente, de modo que o arquivo CSS que é gerado tem a personalização que você deseja. 31 | 32 | Saiba como você pode substituir variáveis Sass do Ionic, a fim de obter um estilo personalizado para seu aplicativo na [próxima seção](http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/). 33 | -------------------------------------------------------------------------------- /chapters/05-cli/5a-intro.md: -------------------------------------------------------------------------------- 1 | # Ionic CLI 2 | 3 | Ionic CLI é a principal ferramenta que você usará durante o desenvolvimento do seu aplicativo Ionic. É como um canivete suiço: Ele agrupa várias ferramentas em uma única interface. O CLI contém um número de comandos crucial para o desenvolvimento com Ionic, tais como **start**, **build**, **serve** e **run**. Também contém os comandos **emulate** e **info**, que podem ser uteis em determinadas situações. 4 | 5 | 6 | # Instalando o CLI 7 | 8 | Antes de instalar o CLI, você vai precisar instalar primeiro [node](http://ionicframework.com/docs/v2/resources/what-is#node) e [npm](http://ionicframework.com/docs/v2/resources/what-is#npm). OBS: O CLI requer Node 4.X (Node 5.X é conhecida por ocasionar problemas) Após a instalação, pode executar o seguinte comando para obter a ultima versão do Ionic CLI. 9 | 10 | ```shell 11 | $ npm install -g ionic@beta 12 | ``` 13 | No Mac ou Linux, você irá precisar usar o comando **sudo** para instalar Ionic Globalmente. 14 | 15 | ```shell 16 | $ sudo npm install -g ionic@beta 17 | ``` 18 | 19 | # Uso básico 20 | 21 | **start** é um dos comandos mais importantes, usado para criar um novo projeto Ionic. Vamos testar: 22 | 23 | ```shell 24 | $ ionic start myAwesomeApp --v2 25 | ``` 26 | Isso irá criar um novo aplicativo chamado **myAwesomeApp**. Agora vamos abrir o diretorio - **cd** - e executar outro comando no Ionic CLI. 27 | 28 | ```shell 29 | $ ionic info 30 | ``` 31 | Isso irá mostrar detalhes do seu ambiente Ionic de desenvolvimento, ideal para depuração (debug). Finalmente, para ver o seu aplicativo no browser, você pode usar o comando **serve**. 32 | 33 | ```shell 34 | $ ionic serve 35 | ``` 36 | 37 | # Proximos Passos 38 | 39 | Agora você já sabe o básico, cheque o sumario para poder ver a lista completa de comandos. Se você preferir, pode ver a lista completa de comandos e suas opções, simplesmente digitando **ionic**. 40 | -------------------------------------------------------------------------------- /chapters/01-introducao/01c-tutorial.md: -------------------------------------------------------------------------------- 1 | # 1.3 Ionic 2 Tutorial 2 | 3 | Agora que você tem o [Ionic instalado juntamente com suas dependências](01b-instalation.md), você pode desenvolver seu primeiro aplicativo! Esta seção irá guiá-lo através do processo de iniciar uma nova aplicação, adicionando páginas, navegação entre as páginas, e muito mais. Vamos começar! 4 | 5 | ## Iniciano um novo aplicativo Ionic 2 6 | 7 | Vanos desenvolver um aplicativo! Use o comando **start** para inicializar um novo aplicativo Ionic. Especifique que você quer que ele seja um aplicativo Ionic 2 passando a opção **--v2**. Nós também especificamos que o modelo **tutorial** poderia ser usado. 8 | ``` 9 | $ ionic start MyIonic2Project tutorial --v2 10 | ``` 11 | 12 | Isso vai baixar o Ionic 2, instalar os [módulos npm](../../glossario.md) para a aplicação, e obter o [Cordova](../../glossario.md) configurado e pronto para utilizar. 13 | 14 | Quer usar o TypeScript em vez disso? Passe o sinalizador **--ts** e obtenha uma configuração de projeto de TypeScript em seu lugar. 15 | 16 | Você pode ter notado que nós passamos **tutorial** para o comando **ionic start**. Isto diz para o Ionic inicializar seu aplicativo usando o [modelo tutorial](https://github.com/driftyco/ionic2-starter-tutorial). Se você não especificar um modelo executando **ionic start MyIonic2Project --v2**, o [tab starter](https://github.com/driftyco/ionic2-starter-tabs) será utilizado. 17 | 18 | ## Visualizando o aplicativo em um navegador 19 | 20 | Agora, você pode **cd** para entrar na pasta que foi criada. Para obter uma visualização rápida do seu aplicativo no navegador, use o comando **serve**. 21 | ``` 22 | $ cd MyIonic2Project/ 23 | $ ionic serve 24 | ``` 25 | 26 | ![tutorial-screen](tutorial-screen.png) 27 | 28 | Você deverá ver a mensagem de boas vindas mostrada acima, se tudo foi instalado com sucesso. 29 | 30 | Na próxima seção, vamos falar sobre a estrutura do projeto criado pelo comando **ionic**. 31 | -------------------------------------------------------------------------------- /chapters/03-nativo/3w-geolocation.md: -------------------------------------------------------------------------------- 1 | # Geolocalização 2 | `$ ionic plugin add cordova-plugin-geolocation` 3 | 4 | 5 | Repositório:https://github.com/apache/cordova-plugin-geolocation 6 | 7 | 8 | Este plugin fornece informações sobre a localização do dispositivo, como a latitude e longitude. Fontes comuns de informação de localização incluindo o Sistema de Posicionamento Global (GPS) e localização inferida através de sinais de rede como Endereço de IP, RFID, WiFi, Bluetooth, endereço de MAC e IDs de células GSM/CDMA. 9 | 10 | 11 | Essa API é baseada na especificação da API de Geolocalização do W3C, e somente funciona em dispositivos que ainda não disponibilizam uma implementação. 12 | 13 | 14 | ##Uso 15 | 16 | ```javascript 17 | import {Geolocation} from 'ionic-native'; 18 | 19 | 20 | 21 | Geolocation.getCurrentPosition().then((resp) => { 22 | //resp.coords.latitude 23 | //resp.coords.longitude 24 | }) 25 | 26 | let watch = Geolocation.watchPosition(); 27 | watch.subscribe((data) => { 28 | //data.coords.latitude 29 | //data.coords.longitude 30 | }) 31 | ``` 32 | 33 | ##Métodos estáticos 34 | 35 | `getCurrentPosition(options)` 36 | 37 | Pega a posição atual do dispositivo. 38 | 39 | Parametro | Tipo | Detalhes 40 | ------------ | ------------- | ------------- 41 | Options | `GeolocationOptions` | As [opções de geolocalização](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) 42 | 43 | **Retorna:** Uma `Promise` resolvida com a [posição](https://developer.mozilla.org/en-US/docs/Web/API/Position) do dispositivo, ou rejeita com um erro. 44 | 45 | `getCurrentPosition(options)` 46 | 47 | 48 | Observa a posição atual do dispositivo. Para de observar alterações no `Observable` cancelando a assinatura. 49 | 50 | 51 | ```javascript 52 | var subscription = Geolocation.watchPosition().subscribe(position => { 53 | console.log(position.coords.longitude + ' ' + position.coords.latitude); 54 | }); 55 | 56 | // To stop notifications 57 | subscription.unsubscribe(); 58 | ``` 59 | 60 | Parametro | Tipo | Detalhes 61 | ------------ | ------------- | ------------- 62 | Options | `GeolocationOptions` | As [opções de geolocalização](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) 63 | 64 | **Retorna:** Retorna um `Observable` que notifica com a posição do dispositivo, ou erros. 65 | -------------------------------------------------------------------------------- /chapters/08-recursos/08e-using-npm.md: -------------------------------------------------------------------------------- 1 | # Usando NPM # 2 | 3 | Existe um monte de nova terminologia em Ionic V2, muitas tem a ver com Node e NPM. Vamos dar uma olhada nos conceitos chave de Node/NPM e como eles se relacionam com Ionic. 4 | 5 | ## Pacotes Ionic em NPM - Qual a Importância de um Nome? ## 6 | 7 | Existe dois pacotes relacionados ao Ionic no NPM, o pacote Ionic CLI e o pacote Ionic-Angular. 8 | 9 | ### Ionic CLI ### 10 | 11 | O CLI (Command Line Interface ou Interface de linha de comando) é a principal ferramenta que você irá utilizar para criar um projeto, fazer build de aplicativo nativo e lidar com associações de recursos do seu aplicativo. Este pacote está disponivel no NPM e tem o nome de **ionic**. Para instalar, execute: 12 | 13 | ```shell 14 | # Se esta no linux/osx, execute com sudo 15 | npm install -g ionic 16 | ``` 17 | 18 | Isto irá instalar a ultima versão estável lançada do Ionic CLI. Para instalar a ultima versão beta estável, que atualmente é necessário para o desenvolvimento da V2, execute: 19 | 20 | ```shell 21 | # Se esta no linux/osx, execute com sudo 22 | npm install -g ionic@beta 23 | ``` 24 | 25 | Então nós podemos usar CLI a partir da linha de comando executando **ionic <comando>**. 26 | 27 | ### Ionic Angular ### 28 | 29 | O framework está disponivel no NPM com o nome de **ionic-angular**. Quando você criar um projeto usando o CLI, você automaticamente vai obter a instalação do pacote Ionic Angular. O pacote e sua versão é gerenciado pelo NPM e o **package.json** de um projeto. Um projeto simples deve ter um **package.json** parecido com este aqui. 30 | 31 | ```js 32 | { 33 | "devDependencies": { 34 | // lista de dependencias de desenvolvimento 35 | }, 36 | "dependencies": { 37 | "ionic-angular": "2.0.0-beta.3" 38 | } 39 | // e qualquer outra coisa 40 | } 41 | ``` 42 | 43 | Aqui nos podemos dizer que este projeto depende do pacote **ionic-angular** e usa a versão **2.0.0-beta.3** 44 | 45 | Mas como podemos atualizar um pacote quando uma nova versão sai? Para verificar se há uma atualização, podemos executar: 46 | 47 | ```shell 48 | npm outdated 49 | 50 | Package Current Wanted Latest Location 51 | ionic-angular 2.0.0-beta.2 2.0.0-beta.2 2.0.0-beta.3 myApp 52 | ``` 53 | 54 | Isso nos diz que existe uma atualização para o pacote ionic-framework para versão 2.0.0-beta.3. Para poder obter a atualização, nos podemos executar **run install ionic-angular@latest**. 55 | Podemos tambem atualizar o **package.json** para **"ionic-angular": "2.0.0-beta.3"** e executar o comando **npm update**. 56 | 57 | -------------------------------------------------------------------------------- /chapters/04-temas/4d-platform-vars.md: -------------------------------------------------------------------------------- 1 | Estilos especificos de plataforma 2 | --------------------------------- 3 | 4 | Ionic utiliza modelos para personalizar a aparência dos componentes para coincidir com a plataforma que você está usando. Por exemplo, quando você estiver vendo o aplicativo em um dispositivo Android, o `````` terá ```class="md"``` adicionado por padrão: 5 | ```html 6 | 7 | ``` 8 | 9 | Abaixo segue uma tabela para os modelos padrão que são adicionados, baseados na plataforma: 10 | 11 | [TABELA] 12 | 13 | Você pode alterar o modelo que é atribuído na configuração do seu aplicativo. Portanto, se você queria o modelo do Material Design ```md``` no iOS, você poderia fazê-lo. 14 | 15 | Sobreescrevendo os modelos de estilos 16 | --------------------------------- 17 | 18 | Cada componente Ionic tem até três folhas de estilo utilizadas para estilizá-lo. Por exemplo, o componente de abas tem uma folha de estilo única que consiste de estilos compartilhados entre todos os modelos, uma folha de estilo para o Material que contém os estilos para o modelo ```md```, e uma folha de estilo do iOS para, você adivinhou, o modelo do ```ios```. Nem todos os componentes estão decorados de forma diferente para cada modelo, assim alguns deles somente terão a folha de estilo única, ou a folha de estilo única e uma dos modelos. 19 | 20 | É possível utilizar a classe que é aplicada ao *body* para substituir as propriedades específicas em um modelo de componentes. Por exemplo, se você queria substituir todos os botões do modelo do Material Design (md) para que tenham texto com todas as letras maiúsculas: 21 | 22 | ```css 23 | .md button { 24 | text-transform: capitalize; 25 | } 26 | ``` 27 | 28 | Os arquivos Sass para esses modelos também têm variáveis únicas que podem ser usadas para substituir os estilos. Usando o mesmo exemplo acima, nós poderíamos mudar o atributo ```border-radius``` do botão ```md```, alterando o valor da variável ```$button-md-border-radius```. Você pode fazer isso em seu próprio arquivo Sass personalizado ou em nosso arquivo principal Sass, antes do Ionic ser importado: 29 | 30 | ```scss 31 | $button-md-border-radius: 8px; 32 | 33 | // Ionic Sass 34 | // --------------------------------- 35 | @import "ionic"; 36 | ``` 37 | 38 | Definindo atributos dinâmicamente 39 | --------------------------------- 40 | 41 | Ao definir um atributo de forma dinâmica, você pode adicionar ou remover a funcionalidade de um componente com base em uma determinada condição. Para definir um atributo de forma dinâmica, use a seguinte sintaxe: 42 | 43 | ```html 44 | 45 | ``` 46 | 47 | Isto irá definir o atributo ```no-lines``` na lista de componentes se ```isMD``` for avaliada como verdadeira. 48 | -------------------------------------------------------------------------------- /chapters/03-nativo/3a-actionSheet.md: -------------------------------------------------------------------------------- 1 | ActionSheet 2 | =========== 3 | 4 | ``` 5 | $ cordova plugin add cordova-plugin-actionsheet 6 | ``` 7 | 8 | Repositório: [https://github.com/EddyVerbruggen/cordova-plugin-actionsheet](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet) 9 | 10 | O plugin ActionSheet exibe uma lista de opções que o usuário pode escolher. 11 | 12 | Esse plugin tem como dependência: ```cordova-plugin-actionsheet```. Para mais informações, por favor veja a [documentação do plugin ActionSheet](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet). 13 | 14 | Platafomas suportadas 15 | ----- 16 | - Android 17 | - iOS 18 | - Windows Phone 8 19 | 20 | Uso 21 | --- 22 | 23 | ``` javascript 24 | import {ActionSheet} from 'ionic-native'; 25 | 26 | let buttonLabels = ['Share via Facebook', 'Share via Twitter']; 27 | ActionSheet.show({ 28 | 'title': 'What do you want with this image?', 29 | 'buttonLabels': buttonLabels, 30 | 'addCancelButtonWithLabel': 'Cancel', 31 | 'addDestructiveButtonWithLabel' : 'Delete' 32 | }).then(buttonIndex => { 33 | console.log('Button pressed: ' + buttonLabels[buttonIndex - 1]); 34 | }); 35 | ``` 36 | 37 | Métodos estáticos 38 | ----------------- 39 | 40 | ``` show(Options) ``` 41 | 42 | Mostra o ActionSheet. As opções do ActionSheet é um objeto com as seguintes propriedades. 43 | 44 | | Opção | Tipo | Descrição | 45 | |-------------------------------|-----------|----------------------------------------------| 46 | | title |`string` | O título para o actionsheet | 47 | | buttonLabels |`string[]` | Labels para os botões. Usa o índice 'x' | 48 | | androidTheme |`number` | Tema para ser usado no Android | 49 | | androidEnableCancelButton |`boolean` | Habilita o botão de cancelar no Android | 50 | | winphoneEnableCancelButton |`boolean` | Habilita o botão de cancelar no Windows Phone| 51 | | addCancelButtonWithLabel |`string` | Adiciona um botão de cancelar com texto | 52 | | addDestructiveButtonWithLabel |`string` | Adiciona um botão destrutivo com texto | 53 | | position |`number[]` | No iPad, define a posição X,Y | 54 | 55 | | Parametro | Tipo | Detalhes | 56 | |-------------------------------|--------------|----------------------------------------------| 57 | | Options |```options``` | Veja tabela acima | 58 | 59 | *Retorna:* ```Promise``` 60 | 61 | Retorna uma Promise que retorna o indíce do botão pressionado (o índice começa em 1, então 1, 2, 3, etc.). 62 | 63 | ``` hide() ``` 64 | 65 | Esconde o ActionSheet. -------------------------------------------------------------------------------- /chapters/01-introducao/01b-instalation.md: -------------------------------------------------------------------------------- 1 | # 1.2 Instalando Ionic 2 | 3 | Como no Ionic 1, aplicações Ionic 2 podem ser rapidamente criadas a partir da Ionic CLI ou ferramenta GUI ou construídas e testadas diretamente no navegador. 4 | 5 | Para instalar o SDK do Ionic e criar projetos Ionic 2, você precisará instalar a versão beta mais recente: 6 | ``` 7 | $ npm install -g ionic@beta 8 | ``` 9 | 10 | Não está familiarizado com NPM? Saiba mais sobre ele e quais pacotes usamos [aqui](../07-recursos/07e-using-npm.md) 11 | 12 | Preocupado com seus projetos Ionic V1? Não se preocupe! A versão beta tem todas as funcionalidades para trabalhar com ambos projetos V1 e projetos V2. 13 | 14 | Uma vez feito isso, crie seu primeiro aplicativo Ionic: 15 | ``` 16 | $ ionic start cutePuppyPics --v2 17 | ``` 18 | 19 | Para executar o aplicativo, **cd** para o diretório que foi criado e, em seguida, execute o comando **ionic serve**: 20 | ``` 21 | $ cd cutePuppyPics 22 | $ ionic serve 23 | ``` 24 | 25 | Você pode brincar com ele diretamente no navegador! 26 | 27 | ## Desenvolvendo para um dispositivo 28 | 29 | Depois de ter instalado o Ionic, você pode desenvolver seu aplicativo para um dispositivo físico. Se você não tem um dispositivo físico na mão, você ainda pode desenvolver para um emulador de dispositivo. Confira os docs simulador iOS se você estiver em um Mac, ou os docs Genymotion se você estiver à procura para emular um dispositivo Android. Você também vai precisar de Cordova para executar seu aplicativo em um dispositivo nativo. Para instalar o Cordova, execute: 30 | ``` 31 | $ sudo npm install -g cordova 32 | ``` 33 | 34 | Depois que você tiver instalado Cordova e um dispositivo ou emulador pronto para iniciar, você pode seguir em frente e começar a construir sua app! 35 | 36 | ## Desenvolvendo para iOS 37 | 38 | Para desenvolver para iOS, precisamos adicionar o módulo de plataforma iOS para Cordova: 39 | ``` 40 | $ ionic platform add ios 41 | ``` 42 | 43 | Em seguida, você precisa instalar o [Xcode](../../glossario.md). O Xcode permite que você faça o build e compile para um dispositivo de destino executando o iOS. 44 | 45 | De lá, você deve ser capaz de executar o emulador iOS usando o seguinte comando: 46 | ``` 47 | $ ionic emulate ios 48 | ``` 49 | 50 | ## Desenvolvendo para Android 51 | 52 | Para desenvolver para o Android, será necessário você adicionar o módulo da plataforma Android para Cordova: 53 | ``` 54 | $ ionic platform add android 55 | ``` 56 | 57 | Em seguida, será necessário você instalar o [Android SDK](../../glossario.md). O SDK do Android permite que você faça o build e compile para um dispositivo de destino executando o Android. Embora o Android SDK venha com um emulador próprio, Genymotion é recomendado, uma vez que é muito mais rápido. Uma vez instalado, inicie uma imagem Android e execute: 58 | ``` 59 | $ ionic run android 60 | ``` 61 | -------------------------------------------------------------------------------- /chapters/03-nativo/3c-appRate.md: -------------------------------------------------------------------------------- 1 | App Rate 2 | ======== 3 | 4 | ``` $ cordova plugin add cordova-plugin-apprate ``` 5 | 6 | Repositório: [https://github.com/pushandplay/cordova-plugin-apprate](https://github.com/pushandplay/cordova-plugin-apprate) 7 | 8 | O plugin AppRate torna fácil a exibição da mensagem de avaliação do seu app para o usuário, seja para agora, depois ou nunca. 9 | 10 | Este plugin requer: cordova-plugin-apprate. Para mais informações, por favor veja [a documentação do plugin AppRate](https://github.com/pushandplay/cordova-plugin-apprate). 11 | 12 | Platafomas suportadas 13 | ----- 14 | - Android 15 | - iOS 16 | 17 | Uso 18 | ----- 19 | 20 | ``` javascript 21 | 22 | import {AppRate} from 'ionic-native'; 23 | 24 | AppRate.preferences.storeAppURL.ios = ''; 25 | AppRate.preferences.storeAppURL.android = 'market://details?id='; 26 | AppRate.preferences.storeAppURL.blackberry = 'appworld://content/[App Id]/'; 27 | AppRate.preferences.storeAppURL.windows8 = 'ms-windows-store:Review?name='; 28 | AppRate.promptForRating(); 29 | ``` 30 | 31 | Métodos estáticos 32 | ----- 33 | ``` preferences() ``` 34 | 35 | Opções para a janela de avaliação 36 | 37 | useLanguage {String} null - tag BCP 47 customizada 38 | displayAppName {String} ‘’ - título da aplicação 39 | promptAgainForEachNewVersion {Boolean} true - mostra a janela novamente quando a versão da aplicação for atualizada 40 | usesUntilPrompt {Integer} 3 - conta a quantidade de vezes que a aplicação é executada antes de exibir a janela de avaliação 41 | openStoreInApp {Boolean} false - sai do app ou não quando a página da aplicação é aberta na App Store (por hora, somente para iOS) 42 | useCustomRateDialog {Boolean} false - use uma view própria para exibir a janela de avaliação do seu app 43 | callbacks.onButtonClicked {Function} null - função call back. chamada quando o usuário clicou em um dos botões da janela de avaliação 44 | callbacks.onRateDialogShow {Function} null - função call back. chamada quando a janela de avaliação está sendo exibida 45 | storeAppURL.ios {String} null - id da aplicação na AppStore 46 | storeAppURL.android {String} null - URL da aplicação no GooglePlay 47 | storeAppURL.blackberry {String} null - URL da aplicação no AppWorld 48 | storeAppURL.windows8 {String} null - URL da aplicação na WindowsStore 49 | customLocale {Object} null - objeto customizado para definir sua região e idioma para o app 50 | 51 | ``` promptForRating(immediately) ``` 52 | 53 | Prompts the user for rating 54 | 55 | | Parametro | Tipo | Detalhes | 56 | |-------------------------------|--------------|----------------------------------------------| 57 | | immediately |```boolean``` | Mostra a janela de avaliação imediatamente | 58 | 59 | -------------------------------------------------------------------------------- /chapters/08-recursos/08f-mac-setup.md: -------------------------------------------------------------------------------- 1 | # OSX 2 | 3 | ## Ferramentas comuns 4 | 5 | Node e NPM vão ser usados extensivamente para o Ionic e Cordova na maioria dos casos. Voê pode usar o instalador diretamente 6 | [do site do Node.js](https://nodejs.org/) ou então vários outros gerenciadores de pacotes: 7 | 8 | - [n](https://github.com/tj/n) 9 | - [nvm](https://github.com/creationix/nvm) 10 | - [homebrew](http://brew.sh/) 11 | 12 | Uma vez instalados, você deverá ter acesso tanto ao comando `node` e ao `npm` diretamente da linha de comando. 13 | 14 | ## iOS 15 | 16 | Você irá precisar instalar o Xcode da Apple. Você pode fazer isso ou pela Mac App Store ou então pelo Portal de desenvolvimento da 17 | Apple. A Mac App Store é o jeito mais fácil. Uma vez que o XCode esteja instalado, você terá o próprio XCode, o SDK do iOS, 18 | as ferramentas de linha de comando do IDE e todas as ferramentas de build para criar um app nativo. 19 | 20 | ## Java 21 | 22 | Você precisará baixar o Java diretamente do [site oficial](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). 23 | A instalação vai colocar o Java na sua pasta `/Library/Java/JavaVirtualMachines`, então navegue até lá e escolha a versão que 24 | você acabou de instalar. Copie essa localização (incluindo o número da versão) porque ela será necessária mais tarde. 25 | 26 | ## Android 27 | 28 | Baixe o Android Studio e siga os passos do instalador para configurar a IDE. Ela deverá pedir uma localização para aonde o 29 | SDK será instalado; copie essa localização, porque ela também será usada mais tarde. 30 | 31 | Depois, dentro da pasta `SDK` que foi criada, vamos rodar o comando `tools/android` para abrir o gerenciador de versões 32 | do Android SDK. Vamos instalar: 33 | 34 | - Android Platform SDK para a sua versão escolhida do Android 35 | - Android Platform-Tools 36 | - Android SDK build-tools versão 19.1.0 ou superior 37 | - Android Support Repository (encontrado na pasta “Extras”) 38 | 39 | Aceite os termos de licença e deixe os pacotes instalando. 40 | 41 | ## Variáveis de ambiente 42 | 43 | Agora que tudo está instalado, vamos precisa setar algumas variáveis de ambiente para a nossa linha de comando. 44 | Abra o terminal e digite `touch .bash_profile`, então abra esse arquivo no seu editor de preferência. 45 | 46 | Daqui, teremos que adicionar algumas linhas. Essas serão as referências para o Java, a localização do Android SDK que 47 | copiamos anteriormente. 48 | 49 | Se você usou os caminhos que foram sugeridos, você deverá ter algo assim no final: 50 | 51 | ``` 52 | # Create a JAVA_HOME Variable, use, the name of the JDK folder 53 | export JAVA_HOME=/Library/Java/JavaVirtualMachines/{replaceWithYourJavaVersion}/Contents/Home 54 | # Add that to the global PATH variable 55 | export PATH=${JAVA_HOME}/bin:$PATH 56 | # Add the Android SDK to the PATH variable 57 | export PATH=${PATH}:~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools 58 | ``` 59 | 60 | Agora feche o terminal e abra-o novamente. Se não houve nenhum erro você poderá rodar os seguintes comandos: 61 | 62 | ``` 63 | # checa a versão do java 64 | java -version 65 | 66 | # inicia o gerenciador de SDK 67 | android 68 | ``` 69 | 70 | A partir de agora você poderá criar e compilar aplicações para android pela linha de comando. 71 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Guia de Contribuição 2 | 3 | ## Organização das Pastas 4 | Como perceberam no [README](https://github.com/IonicBrazil/ionic2-docs) do repositório, a organização dos capítulos é feita por pastas e dentro das pastas tem os arquivos que são as explicações dos tópicos. 5 | 6 | ## Como começar? 7 | Bom, se você quer cooperar com a tradução da documentação, basta você ir na seção de `issues` do repositório que fica bem [aqui](https://github.com/IonicBrazil/ionic2-docs/issues). Lá, você vai ver que as `issues` na verdade são os capítulos da documentação original. 8 | 9 | Basta você entrar numa `issue` e comentar qual tópico ou quais tópicos você pretende ter a **responsabilidade** de traduzir. 10 | Pedimos que essa parte seja levada bem à sério, já que, uma vez separada a tradução do tópico para você, outra pessoa não irá fazer. 11 | 12 | A partir do seu comentário, um dos nossos contribuidores vai colocar seu usuário na frente do tópico escolhido. 13 | Veja nesse [exemplo](https://github.com/IonicBrazil/ionic2-docs/issues/8). 14 | 15 | Depois disso, é só você `forkar` o nosso repositório e escrever suas traduções. 16 | 17 | ## Enviando as traduções 18 | 19 | ### Commits 20 | Commitar apenas os arquivos que estão sendo modificados, **NÃO** utilizar `git add .` e **SIM** `git add nome_arquivo`. Assim poderemos evitar possíveis conflitos na hora do PR. 21 | 22 | 23 | ### Pull request 24 | Depois que tiver terminado suas traduções, você só precisa fazer um `pull request` para nosso repositório. 25 | 26 | Em relação aos `pull requests`, pedimos que sejam enviados da forma mais simples possível. O que queremos dizer é que seja enviando tópico por tópico. Dessa forma, tornamos o processo de revisão e correção mais dinâmico e mais rápdido possível. 27 | 28 | Ao criar um novo PR, seguir os padrões abaixo: 29 | 30 | **1. Nome do PR:** Para um novo PR com sua tradução pronta para revisão, utilizar os termos a seguir como padrão para o nome do PR > **[Para Revisão] - Capítulo x - Nome do Capítulo - Nome do Subcapítulo** 31 | **1.1 Nome do PR:** Caso seja solicitado correções em sua tradução, por favor, feche o PR atual, efetue as devidas correções, e, ao encerrá-las, crie um novo PR com os termos a seguir como padrão para o nome do PR > **[Correções] - Capítulo x - Nome do Capítulo - Nome do Subcapítulo** 32 | **2. Conversation:** Mencionar o @juarezpaf no PR 33 | **2.1 Conversation:** Caso você tenha encontrado alguma dificuldade em algum termo, citá-lo. Exemplo: *o termo build não me senti totalmente à vontade em traduzir para compilar. O que vocês acham, mantenho como build em inglês ou deixo compilar?* 34 | 35 | **Não é necessário** linkar no [README](https://github.com/IonicBrazil/ionic2-docs/blob/master/README.md) principal e também no README de cada capítulo. Como a documentação oficial ainda vem sofrendo mudanças, nós, da *staff* iremos atualizar os capítulos posteriormente. Apenas enviem em seu PR o capítulo traduzido, conforme mencionado anteriormente. 36 | 37 | Lembrando, não creim PR que possuam conflitos. Caso, ao criar seu PR seja encontrado algum conflito, por favor, resolvam os conflitos primeiramente antes de criar o PR. Só serão aceitos PR para revisão hábeis para merge, com confitos serão fechados imediatamente. 38 | 39 | ### Revisão 40 | Em seguida, um de nossos contribuidores vai analisar todo o texto para ver se está tudo correto. Passando dessa parte, é feito um `merge` da sua tradução. 41 | 42 | No final de tudo, você ajudou a comunidade Ionite. 43 | -------------------------------------------------------------------------------- /chapters/08-recursos/08g-windows-setup.md: -------------------------------------------------------------------------------- 1 | # Windows 2 | 3 | Existem duas maneiras de configurar o Ionic em uma máquina windows. Uma delas é instalar todas ass dependências uma por uma, e 4 | a outra é instalar o plugin Tools for Cordova para o Visual Studio 2015. Nós explicamos o segundo modo, para usar o Visual Studio em 5 | [nosso blog](http://blog.ionic.io/visual-studio-tools-for-apache-cordova/). 6 | 7 | ## Ferramentas comuns 8 | 9 | Na maior parte, o Node.js e NPM serão extensivamente usados tanto para o Ionic quanto para o Cordova. Você pode usar o instalador 10 | do [próprio site do Node.js](https://nodejs.org/) para instala-lo ou o gerenciador de pacotes chamado [Chocolatey](https://chocolatey.org/). 11 | 12 | Uma vez instalado, você deve ter acesso tanto aos comandos `node` e `npm` da sua linha de comando. 13 | 14 | ## iOS 15 | 16 | O SDK para iOS não roda em ambientes Windows, então não temos o que fazer aqui... Mas se você ainda quiser criar aplicações para iOS mesmo assim, veja o [Package](http://ionic.io/platform#packaging), uma parte da plataforma Ionic. 17 | 18 | ## Java 19 | 20 | Vamos precisar instalar o Java direto do [website deles](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). O instalador coloca o Java na sua pasta `C:\Program Files\Java`, então navegue até lá e escolha a versão java que você instalou. Copie essa localização (incluindo o número da versão) porque você irá precisar disso depois. 21 | 22 | ## Android 23 | 24 | Faça o download do Android Studio e instale-o na máquina seguindo os passos para configurar o IDE completamente. Ele deve exibir uma localização para perguntar aonde você deseja instalar o Android `SDK`; copie essa localização também para uso futuro. 25 | 26 | Depois disso, dentro da pasta do novo `SDK`, vamos rodar o arquivo `android`, presente na pasta `tools` (`tools/android`) para abrir o gerenciador de downloads do Android SDK Manager. Uma vez aberto vamos instalar os seguintes componentes: 27 | 28 | - Android Platform SDK para a sua versão alvo do android 29 | - Android Platform-Tools 30 | - Android SDK build-tools version 19.1.0 ou superior 31 | - Android Support Repository (pode ser encontrado dentro da pasta "Extras") 32 | 33 | Aceite as declarações de licença de deixe os pacotes serem instalados. 34 | 35 | ## Variáveis de ambiente 36 | 37 | Agora que tudo está instalado, vamos precisar setar algumas variáveis de ambiente para a nossa linha de comando. No menu iniciar, procure por "Variáveis de ambiente do sistema" (ou "System Environment Variables"). Daqui vamos poder atualizar a variável de usuário chamada `PATH` e criar uma nova variável chamada `JAVA_HOME` 38 | 39 | - `JAVA_HOME`: O caminho que o Java foi instalado (copiado dois passos acima) 40 | - `PATH`: Vamos adicionar duas novas entradas, uma será o caminho onde o `Tools` está instalado para o Android SDK, o outro para o `Platform Tools` 41 | 42 | A partir daqui, então, poderemos rodar: 43 | 44 | ```bat 45 | # Checa a versão do java 46 | java -version 47 | 48 | # inicia o Android SDK Manager 49 | android 50 | ``` 51 | 52 | Agora poderemos criar e construir um projeto Android a partir da linha de comando. 53 | 54 | ## Aplicativos Windows Universal 55 | 56 | Para criar aplicativos compatíveis com o Windows Universal, baixe e instale o Visual Studio 2015 Community Edition. Durante a instalação, selecione opção "Tools for Cross Platform Development" juntamente com os SDK's para Windows Universal Apps. 57 | 58 | Com tudo isso instalado, você será capaz de adicionar uma plataforma windows a partir da linha de comando, com este comando: 59 | 60 | `ionic platform add windows` 61 | 62 | Por padrão, o comando `build` produz dois pacotes: Windows 8.1 e Windows Phone 8.1, o qual o Ionic não suporta. Para atualizar um pacote Windows para a versão 10, a seguinte linha de configuração deve ser adicionada no arquivo `config.xml`: 63 | 64 | `` 65 | -------------------------------------------------------------------------------- /chapters/01-introducao/01e-core-concepts.md: -------------------------------------------------------------------------------- 1 | # 1.5 Conceitos Básicos 2 | 3 | Se você é completamente novo para Ionic e/ou desenvolvimento de aplicativos híbridos para celular, ele pode ser útil para obter uma compreensão de alto nível do núcleo da filosofia, conceitos e ferramentas por trás do Ionic. As informações a seguir podem ajudá-lo a se familiarizar com o Ionic e como ele funciona. 4 | 5 | ## O que é Ionic? 6 | 7 | Ionic é um SDK de código aberto que permite aos desenvolvedores criar aplicativos móveis de desenpeho de alta qualidade utilizando tecnologias web familiares (HTML, CSS e JavaScript). 8 | 9 | Ionic está voltado principalmente para a aparência, ou a interação UI, de um aplicativo. Isto significa que não é um substituto para o PhoneGap ou o seu framework JavaScript favorito. Em vez disso, Ionic se encaixa bem com esses projetos, a fim de simplificar uma grande parte do seu processo de desenvolvimento de aplicativos: o front-end. Confira [“Where does the Ionic Framework fit in?”](http://blog.ionic.io/where-does-the-ionic-framework-fit-in/) para obter uma boa compreensão da filosofia base do Ionic e seus objetivos. 10 | 11 | **Ionic exige actualmente AngularJS a fim de trabalhar em seu pleno potencial.** Enquanto você ainda pode usar a parte CSS do frameworks, você vai perder interações poderosas de interface do usuário como gestos, animações e outras coisas. No futuro, Ionic pretende tornar-se mais agnóstico, a fim de apoiar uma ampla variedade de frameworks JavaScript. 12 | 13 | ## Como Ionic é licenciado? 14 | 15 | Ionic é completamente livre e de código aberto, lançado sob a licença permissiva [MIT](http://opensource.org/licenses/MIT), o que significa que você pode usar Ionic em projetos pessoais ou comerciais livremente. Por exemplo, o MIT é a mesma licença usada por tais projetos populares como jQuery e Ruby on Rails. 16 | 17 | Este conteúdo do site e documentação (encontrado no repo [ionic-site](https://github.com/driftyco/ionic-site)) é licenciado sob a licença Apache 2. 18 | 19 | ## O que é Ionic CLI? 20 | 21 | O [CLI](../../glossario.md), ou interface de linha de comando, é uma ferramenta que fornece uma série de comandos úteis para desenvolvedores Ionic. Além de instalar e atualizar Ionic, o CLI vem com um servidor de desenvolvimento, construção e ferramentas de depuração, e muito mais. Se você estiver usando a Plataforma Ionic, o CLI pode ser usado para exportar o código e até mesmo interagir com a sua conta por meio de programação. 22 | 23 | ## O que são componentes? 24 | 25 | Componentes em Ionic são elementos de interface do usuário reutilizáveis que servem como blocos de construção para seu aplicativo móvel. Componentes são feitos de HTML, CSS, e as vezes JavaScript. Cada componente Ionic se adapta a plataforma na qual seu aplicativo está sendo executado. Chamamos isso de **Platform Continuity** e vai mais a fundo sobre como ele funciona em Theming. 26 | 27 | ## O que é theming? 28 | 29 | Os temas (theming) são conjuntos de estilos que são aplicados a um aplicativo. Ionic utiliza um tema claro por padrão, mas ele também vem com um tema escuro. Além de theming, **Platform Continuity** do Ionic permite os componentes terem estilos específicos da plataforma. Isto significa que os estilos do aplicativo será alterada com base na plataforma (iOS, Android, etc.) em que está sendo executado, oferecendo a seus usuários uma experiência com a qual está familiarizado. 30 | 31 | ## Como funciona a navegação? 32 | 33 | Navegação funciona como uma pilha - **push** uma página para a pilha para navegar até ele, e **pop** para voltar. Modais e alertas também podem ser exibidos, empurrando-os para a pilha de navegação. 34 | 35 | ## Quem está por trás do Ionic? 36 | 37 | Ionic foi originalmente construído por [@benjsperry](https://twitter.com/benjsperry), [@adamdbradley](https://twitter.com/adamdbradley) e [@maxlynch](https://twitter.com/maxlynch). Depois de lançar uma versão alfa do Ionic em Novembro de 2013, lançou uma versão 1.0 beta em Março de 2014 e uma 1.0 final em Maio 2015. 38 | 39 | Agora, Ionic tem uma comunidade internacional maciça de desenvolvedores e colaboradores que impulsionam seu crescimento e adoção. As empresas pequenas e grandes estão usando Ionic para criar aplicativos melhores, mais rápido. Em 2015 os desenvolvedores Ionic teria criado mais de 1.3M aplicativos com o Ionic, um número que continua a crescer a cada dia. 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Documentação Ionic 2 2 | 3 | 4 | ## Capítulos 5 | 6 | ####0. Home 7 | 0.1 [Home](/chapters/00-home) 8 | 9 | ####1. Introdução 10 | 1.1 [Bem vindo](chapters/01-introducao/01a-welcome.md) 11 | 1.2 [Instalação](chapters/01-introducao/01b-instalation.md) 12 | 1.3 [Tutorial](chapters/01-introducao/01c-tutorial.md) 13 | 1.4 [Conceitos de Migração](chapters/01-introducao/01d-migration.md) 14 | 1.5 [Conceitos](chapters/01-introducao/01e-core-concepts.md) 15 | 16 | ####2. Componentes 17 | 2.1 [Overview](chapters/02-componentes/2a-overview.md) 18 | 2.2 [Action Sheets](chapters/02-componentes/2b-action-sheets.md) 19 | 2.3 [Alerts](chapters/02-componentes/2c-alertas.md) 20 | 2.4 Badges 21 | 2.5 Buttons 22 | 2.6 Cards 23 | 2.7 Checkbox 24 | 2.8 Grid 25 | 2.9 Icons 26 | 2.10 Inputs 27 | 2.11 Lists 28 | 2.12 Menus 29 | 2.13 Modals 30 | 2.14 Navigation 31 | 2.15 Radio 32 | 2.16 Searchbar 33 | 2.17 Segment 34 | 2.18 Select 35 | 2.19 Slides 36 | 2.20 Tabs 37 | 2.21 Toggle 38 | 2.22 Toolbar 39 | 40 | ####3. Nativo 41 | 3.1 > [ActionSheet](3a-actionSheet.md) 42 | 3.2 > [AppAvailability](3b-appAvailability.md) 43 | 3.3 > [AppRate](3c-appRate.md) 44 | 3.4 > [AppVersion](3d-appVersion.md) 45 | 3.5 > Badge 46 | 3.6 > BarCodeScanner 47 | 3.7 > [Base64ToGallery](3g-base64togallery.md) 48 | 3.8 > [BatteryStatus](3h-batteryStatus.md) 49 | 3.9 > BLE 50 | 3.10 > Calendar 51 | 3.11 > Camera 52 | 3.12 > Clipboard 53 | 3.13 > Connection 54 | 3.14 > Contats 55 | 3.15 > DatePicker 56 | 3.16 > DBMeter 57 | 3.17 > Device 58 | 3.18 > DeviceMotion 59 | 3.19 > DeviceOrientation 60 | 3.20 > Dialogs 61 | 3.21 > Facebook 62 | 3.22 > File 63 | 3.23 > Flashlight 64 | 3.24 > [Geolocation](3w-geolocation.md) 65 | 3.25 > [Globalization](325-globalization.md) 66 | 3.26 > [Google Analytics](326-analytics.md) 67 | 3.27 > [Google Maps](3za-googleMaps.md) 68 | 3.28 > Google Plus 69 | 3.29 > [Hotspot](329-hotspot.md) 70 | 3.30 > Httpd 71 | 3.31 > IBeacon 72 | 3.32 > [ImagePicker](332-imagepicker.md) 73 | 3.33 > [InAppBrowser](333-inappbrowser.md) 74 | 3.34 > Ionic Deeplinks 75 | 3.35 > Keyboard 76 | 3.36 > Launch Navigator 77 | 3.37 > Local Notifications 78 | 3.38 > MediaError 79 | 3.39 > MediaPlugin 80 | 3.40 > Network 81 | 3.41 > OneSignal 82 | 3.42 > Printer 83 | 3.43 > [Push](3v-push.md) 84 | 3.44 > SafariViewController 85 | 3.45 > Screenshot 86 | 3.46 > SMS 87 | 3.47 > Social Sharing 88 | 3.48 > Spinner Dialog 89 | 3.49 > SplashScreen 90 | 3.50 > SQLite 91 | 3.51 > StatusBar 92 | 3.52 > Toast 93 | 3.53 > TouchID 94 | 3.54 > Transfer 95 | 3.55 > Vibration 96 | 3.56 > WebIntent 97 | 98 | 99 | ####4. Temas 100 | 4.1 [Introdução](chapters/04-temas/4a-intro.md) 101 | 4.2 [Tematizando seu aplicativo](chapters/04-temas/4b-theming-your-ionic-app.md) 102 | 4.3 [Variáveis SASS](chapters/04-temas/4c-sass-variables.md) 103 | 4.4 [Estilos das plataformas](chapters/04-temas/4d-platform-vars.md) 104 | 4.5 [Sobreescrevendo variáveis do Ionic](chapters/04-temas/4e-overriding-ionic-variables.md) 105 | 106 | ####5. CLI 107 | 5.1 [Introdução](chapters/05-cli/5a-intro.md) 108 | 5.2 [`build`](chapters/05-cli/5b-build.md) 109 | 5.3 [`emulate`](chapters/05-cli/5c-emulate.md) 110 | 5.4 [`generate`](chapters/05-cli/5d-generate.md) 111 | 5.5 [`info`](chapters/05-cli/5e-info.md) 112 | 5.6 [`platform`](chapters/05-cli/5f-platform.md) 113 | 5.7 `run` 114 | 5.8 `serve` 115 | 5.9 `start` 116 | 5.10 `v2` 117 | 118 | ####6. [FAQ](chapters/06-faq/01-faq.md) 119 | 120 | ####7. API 121 | 122 | ####8. Recursos > Resources 123 | 8.1 Developer Tips 124 | 8.2 [Glossário](chapters/08-recursos/08b-ionic-developer-glossary.md) 125 | 8.3 Ionicons 126 | 8.4 [Editores e IDEs](chapters/08-recursos/08d-editors-and-ides.md) 127 | 8.5 [Usando NPM](chapters/08-recursos/08e-using-npm.md) 128 | 8.6 [Instalação em OSX](chapters/08-recursos/08f-mac-setup.md)
129 | 8.7 [Instalação em Windows](chapters/08-recursos/08g-windows-setup.md) 130 | 131 | 132 | ## Contribuindo com a tradução 133 | 134 | [Aqui](https://github.com/IonicBrazil/ionic2-docs/blob/master/CONTRIBUTING.md) você pode visualizar o nosso guia de contribuição. 135 | 136 | Além disso, confira nosso [glossário](https://github.com/IonicBrazil/ionic2-docs/blob/master/glossario.md) para termos técnicos em inglês e suas traduções PT-BR. 137 | 138 | 139 | ## Informações 140 | 141 | * Documentação em [inglês](http://ionicframework.com/docs/v2/) 142 | -------------------------------------------------------------------------------- /chapters/02-componentes/2c-alertas.md: -------------------------------------------------------------------------------- 1 | # Alertas 2 | 3 | Alertas são uma ótima forma de oferecer ao usuário a habilidade de escolher uma ação específica ou uma lista de ações. Eles também podem prover ao usuário importantes informações ou requerer dele que tome uma decisão (ou várias decisões). 4 | 5 | De uma perspectiva de interface de usuário, você pode imaginar os alertas como um tipo de modal flutuante, que cobre apenas uma parte da tela. Isso significa que alertas apenas podem ser usados para rápidas ações como verificaçao de senhas, pequenas notificações ou ações rápidas. O fluxo mais complexo do usuário deve ser reservado para os [modais](/chapters/02-componentes/) de tela cheia. 6 | 7 | Alertas são bastante flexíveis, e podem ser customizados facilmente. Dê uma olhada em [API docs](/chapters/07-api/) para mais informações. 8 | 9 | * Contents 10 | * Basic Alerts 11 | * Prompt Alerts 12 | * Confirmation Alerts 13 | * Radio Alerts 14 | * Checkbox Alerts 15 | 16 | ## Utilização básica: 17 | 18 | Alertas básicos são geralmente usados para notificar o usuário sobre novas informações (uma modificação no app, uma nova funcionalidade), uma situação urgente que requer reconhecimento, ou como uma confirmação para o usuário que uma ação teve sucesso ou não. 19 | 20 | ``` ts 21 | doAlert() { 22 | let alert = Alert.create({ 23 | title: 'New Friend!', 24 | subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!', 25 | buttons: ['Ok'] 26 | }); 27 | this.nav.present(alert); 28 | } 29 | ``` 30 | 31 | ## Prompt Alerta 32 | 33 | Prompt Alerta oferece ao usuário uma forma de fazer entrada de dados ou informações. Por exemplo, muitas vezes o Prompt Alerta será usado para perguntar ao usuário por confirmação de sua senha como uma forma de segurança antes de continuar seguindo o fluxo do app. 34 | 35 | 36 | ``` ts 37 | let prompt = Alert.create({ 38 | title: 'Login', 39 | message: "Enter a name for this new album you're so keen on adding", 40 | inputs: [ 41 | { 42 | name: 'title', 43 | placeholder: 'Title' 44 | }, 45 | ], 46 | buttons: [ 47 | { 48 | text: 'Cancel', 49 | handler: data => { 50 | console.log('Cancel clicked'); 51 | } 52 | }, 53 | { 54 | text: 'Save', 55 | handler: data => { 56 | console.log('Saved clicked'); 57 | } 58 | } 59 | ] 60 | }); 61 | ``` 62 | 63 | ## Alertas de confirmação 64 | 65 | Alertas de Confirmação são usados quando é requerido explicitamente que o usuário confirme uma certa escolha depois do processamento ser feito no app. Um exemplo comum desse tipo de alerta é a checagem se o usuário tem certeza se deseja apagar ou remover um contato da sua lista de contatos. 66 | 67 | ``` ts 68 | let confirm = Alert.create({ 69 | title: 'Use this lightsaber?', 70 | message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?', 71 | buttons: [ 72 | { 73 | text: 'Disagree', 74 | handler: () => { 75 | console.log('Disagree clicked'); 76 | } 77 | }, 78 | { 79 | text: 'Agree', 80 | handler: () => { 81 | console.log('Agree clicked'); 82 | } 83 | } 84 | ] 85 | }); 86 | ``` 87 | 88 | ## Radio Alerta 89 | 90 | Radio Alerta é outro tipo simples de Alerta de Confirmação, porém use esse componente quando quizer oferecer várias escolhas. Ele oferece ao usuário uma lista de opções à serem escolhidas, mas permite apenas uma escolha final, antes de continuar seguindo em frente. 91 | 92 | ``` ts 93 | doRadio() { 94 | let alert = Alert.create(); 95 | alert.setTitle('Lightsaber color'); 96 | 97 | alert.addInput({ 98 | type: 'radio', 99 | label: 'Blue', 100 | value: 'blue', 101 | checked: true 102 | }); 103 | 104 | alert.addButton('Cancel'); 105 | alert.addButton({ 106 | text: 'Ok', 107 | handler: data => { 108 | this.testRadioOpen = false; 109 | this.testRadioResult = data; 110 | } 111 | }); 112 | ``` 113 | 114 | ## Checkbox Alerta 115 | 116 | Checkbox Alerta é um outro tipo de Alerta de Confirmação, mas use o componente de Checkbox para oferecer várias escolhas. Ele oferece ao usuário uma lista de opções que podem ser escolhidas. 117 | 118 | ``` ts 119 | doCheckbox() { 120 | let alert = Alert.create(); 121 | alert.setTitle('Which planets have you visited?'); 122 | 123 | alert.addInput({ 124 | type: 'checkbox', 125 | label: 'Alderaan', 126 | value: 'value1', 127 | checked: true 128 | }); 129 | 130 | alert.addInput({ 131 | type: 'checkbox', 132 | label: 'Bespin', 133 | value: 'value2' 134 | }); 135 | 136 | alert.addButton('Cancel'); 137 | alert.addButton({ 138 | text: 'Okay', 139 | handler: data => { 140 | console.log('Checkbox data:', data); 141 | this.testCheckboxOpen = false; 142 | this.testCheckboxResult = data; 143 | } 144 | }); 145 | } 146 | ``` 147 | -------------------------------------------------------------------------------- /chapters/01-introducao/01d-migration.md: -------------------------------------------------------------------------------- 1 | # 1.4 Conceitos de Migração 2 | 3 | Ionic 2 é construído em cima de Angular 2, que é uma reescrita completa do framework original. Todas as partes do Angular que você conhece ainda estão lá, mas há nova sintaxe e as mudanças estruturais sobre os quais os desenvolvedores precisam estar cientes. Para uma visão geral das mudanças no Angular 2, dê uma olhada em [Aprenda Angular 2](http://learnangular2.com/). 4 | 5 | Em Ionic 2, devem se sentir muito familiar com as coisas. Todos os conceitos de Ionic V1 ainda estão na V2, embora eles podem ser ligeiramente diferentes. Você ainda tem visões e controladores como você faz na V1, mas em V2, elas foram fundidas em uma instância. 6 | 7 | Veja este exemplo V1. 8 | 9 | V1 10 | 11 | ```ts 12 | .config(function($stateProvider){ 13 | $stateProvider 14 | .state('main', { 15 | url: '/', 16 | templateUrl: 'templates/main.html', 17 | controller: 'MainCtrl' 18 | }) 19 | }) 20 | 21 | .controller('MainCtrl', function(){ 22 | 23 | }) 24 | ``` 25 | 26 | Você pode escrever isso em V2 como este: 27 | 28 | ```ts 29 | @Page({ 30 | templateUrl:'main/main.html' 31 | }) 32 | export class MainCmp { 33 | constructor(){ 34 | 35 | } 36 | } 37 | ``` 38 | 39 | Outras mudanças, como mudanças de navegação, são muito diferentes, mas por boas razões, como nós prometemos. Agora, você pode tratar componentes como pontos de vista arbitrários e navegar por eles do jeito que você quiser. Isto torna a navegação muito mais flexível e permite pilhas de navegação muito mais nativa de estilo. 40 | 41 | # Migrando do Angular 1 42 | 43 | Enquanto Angular 2 requer aplicativos para ser atualizado para a mudança de sintaxe, os desenvolvedores podem ser pró-ativos e certificar se o seu aplicativo é atualizável, seguindo as melhores práticas e trabalhar com o guia Angular Style de John Papa ou o guia Angular Style de Todd Motto. Ambos irão fornecer-lhe os passos necessários para preparar seu código para a migração. 44 | 45 | ## ControllerAs Syntax 46 | 47 | ControllerAs Syntax é um recurso do Angular 1.x aonde ao invés de você ligar dados para **$scope**, você pode ligar para a instância direta do controlador, como alternativa. Isso faz com que a migração de um controlador de Angular 1.x para uma classe Angular 2 seja muito mais fácil. É bastante fácil migrar para controllerAs de um controlador tradicional: 48 | 49 | _index.html_ 50 | 51 | ```ts 52 | 53 | 54 | {{data.text}} 55 | 56 | 57 | ``` 58 | 59 | _app.js_ 60 | 61 | ```ts 62 | .controller('MainCtrl', function($scope){ 63 | $scope.data ={ 64 | text: 'Hello World' 65 | } 66 | }) 67 | ``` 68 | 69 | Para converter isso em sintaxe **controllerAs** você só tem que mudar algumas coisas. 70 | 71 | _index.html_ 72 | 73 | ```ts 74 | 75 | 76 | {{data.text}} 77 | 78 | 79 | ``` 80 | 81 | _app.js_ 82 | 83 | ```ts 84 | .controller('MainCtrl', function(){ 85 | this.data ={ 86 | text: 'Hello World' 87 | } 88 | }) 89 | ``` 90 | 91 | ## TypeScript 92 | 93 | TypeScript é um super conjunto de JavaScript que fornece Classes ES6 e tipo de anotações em seu código. Agora, com a adoção de TypeScript você pode escrever seu código como Classes ES6 que serão fáceis para migrar para Ionic 2. A melhor parte é que qualquer JavaScript válido também é TypeScript válido, assim você pode converter o seu pedaço de código por parte. Se você aproveitar o seu controlador anterior, você pode facilmente convertê-lo em uma classe TypeScript como esta: 94 | 95 | _app.js_ 96 | 97 | ```ts 98 | .controller('MainCtrl', function(){ 99 | this.data ={ 100 | text: 'Hello World' 101 | } 102 | }) 103 | ``` 104 | 105 | _app.ts_ 106 | 107 | ```ts 108 | export class MainCtrl{ 109 | constructor(){ 110 | this.data ={ 111 | text: 'Hello World' 112 | } 113 | } 114 | } 115 | ``` 116 | 117 | ## Estrutura do projeto 118 | 119 | Com o Angular 1 era uma prática manter todo o seu JavaScript juntos e separados de seus modelos. Desde Ionic 2 e Angular 2 estará se migrando para uma configuração baseada em componente, você pode organizar o seu projeto para ajudar mentalmente a aplicar esse conceito. Assim, um projeto cujo diretório parecerá com isso... 120 | 121 | ``` 122 | |-www/ 123 | | 124 | |--js/ 125 | |--|-app.js 126 | |--|-HomeCtrl.js 127 | |--|-DetailCtrl.js 128 | | 129 | |--templates/ 130 | |--|-Home.html 131 | |--|-Detail.html 132 | | 133 | |-index.html 134 | ``` 135 | 136 | poderia começar a ser reorganizado para se parecer com isto: 137 | 138 | ``` 139 | |-www/ 140 | | 141 | |--Home/ 142 | |--|-HomeCtrl.js 143 | |--|-Home.html 144 | | 145 | |--Detail/ 146 | |--|-DetailCtrl.js 147 | |--|-Detail.html 148 | | 149 | |-index.html 150 | |-app.js 151 | ``` 152 | 153 | Organizar o seu projeto como este pode ajudá-lo na mentalidade de que cada um de seu aplicativo views/states são um componente, com um modelo e um controlador. 154 | -------------------------------------------------------------------------------- /chapters/02-componentes/2f-cards.md: -------------------------------------------------------------------------------- 1 | # Card 2 | 3 | Os cards são uma ótima maneira de exibir as partes importantes de conteúdo e estão emergindo rapidamente como um padrão de design para aplicativos. Eles são uma ótima maneira para conter e organizar a informação e ao mesmo tempo para criação de expectativas previsíveis ao usuário. Com tanto conteúdo a ser exibido de uma só vez e muitas vezes tão pouca tela, os cards tornaram-se rapidamente o padrão de design de escolha para muitas empresas, incluindo empresas como Google, Twitter, e Spotify. 4 | 5 | Para experiências móveis, os cards tornam fácil a exibição da mesma informação visual em diferentes tamanhos de tela. Eles permitem mais controle, são flexíveis e podem até mesmo serem animados. Os cards são geralmente colocados em cima um do outro, mas podem também ser usadas como uma "página" e deslizável entre esquerda e direita. 6 | 7 | ### Contents 8 | * [Basic Cards]() 9 | * [Card Headers]() 10 | * [Card Lists]() 11 | * [Card Images]() 12 | * [Background Images]() 13 | * [Advanced Cards]() 14 | 15 | 16 | Uso Básico: 17 | 18 | Os cartões são primeiramente um componente CSS. Para usar adicionar um cartão básico, siga esta estrutura: 19 | 20 | ``` ts 21 | 22 | 23 | 24 | Cabeçalho 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | ## Card Headers 35 | Assim como uma página normal, os cards podem ser personalizados para incluir cabeçalhos. Para adicionar o use um card header, adicionando o componente dentro do seu card: 36 | 37 | ``` ts 38 | 39 | 40 | Cabeçalho 41 | 42 | 43 | Os britânicos usam o termo "header", mas o termo americano "head-shot", o Inglês simplesmente se recusa a adotar. 44 | 45 | 46 | ``` 47 | 48 | ## Card Lists 49 | 50 | ``` ts 51 | Um card pode conter uma lista de itens. Para criar uma card-lists, adicione elementos com o atributo ion-item dentro de uma ion-list em seu card: 52 | 53 | 54 | 55 | Explore Nearby 56 | 57 | 58 | 59 | 63 | 64 | 68 | 69 | 73 | 74 | 78 | 79 | 83 | 84 | 88 | 89 | 90 | 91 | ``` 92 | 93 | ## Card Images 94 | 95 | Imagens muitas vezes variam em tamanho, por isso é importante que elas adotem um estilo consistente em todo o aplicativo. As imagens podem ser facilmente adicionadas aos cards. Adicionar uma imagem a um card vai dar a imagem uma largura constante, e uma altura variável. Listas, cabeçalhos e outros componentes do cartão pode ser facilmente combinado com os cartões de imagem. Para adicionar uma imagem a um cartão, use a seguinte marcação: 96 | 97 | ``` ts 98 | 99 | 100 | 101 | 102 | Nine Inch Nails Ao Vivo 103 | 104 |

105 | O grupo industrial mais popular de todos os tempos e em grande parte 106 | responsável por trazer a música para uma audiência em massa. 107 |

108 |
109 |
110 | ``` 111 | 112 | ## Background Images 113 | 114 | Os cards podem ser usados para atingir uma grande variedade de modelos. Nós fornecemos muitos dos elementos para conseguir projetos comuns, mas às vezes será necessário adicionar estilos personalizados. Adicionando imagens de fundo para cards é um exemplo perfeito de como a adição de estilos personalizados pode conseguir uma aparência completamente diferente. 115 | 116 | O seguinte código HTML pode ser adicionado ao conteúdo de uma página: 117 | 118 | ``` ts 119 | 120 | 121 | 122 | 123 |
São Paulo
124 |
41 Listings
125 |
126 | 127 | 128 | 129 |
Amsterdam
130 |
64 Listings
131 |
132 | 133 | 134 | 135 |
San Francisco
136 |
72 Listings
137 |
138 | 139 | 140 | 141 |
Madison
142 |
28 Listings
143 |
144 | 145 |
146 | ``` 147 | 148 | Em seguida, no arquivo Sass para a página: 149 | 150 | ``` sass 151 | .card-background-page { 152 | 153 | ion-card { 154 | position: relative; 155 | text-align: center; 156 | } 157 | 158 | .card-title { 159 | position: absolute; 160 | top: 36%; 161 | font-size: 2.0em; 162 | width: 100%; 163 | font-weight: bold; 164 | color: #fff; 165 | } 166 | 167 | .card-subtitle { 168 | font-size: 1.0em; 169 | position: absolute; 170 | top: 52%; 171 | width: 100%; 172 | color: #fff; 173 | } 174 | 175 | } 176 | ``` 177 | 178 | ## Advanced Cards 179 | 180 | Os estilos de diferentes tipos de cards podem ser combinados para criar cards avançados. Cards também podem receber um CSS personalizado. Abaixo estão alguns cards avançados que foram construídos através da combinação de vários atributos do card com uma pequena quantidade de CSS personalizado. 181 | 182 | ### Contents 183 | * Social Cards 184 | * Map Cards 185 | 186 | ### Social Cards 187 | 188 | É muitas vezes necessário para criar social cards dentro de uma aplicação. Usando uma combinação de diferentes itens em um card que você pode conseguir isso. 189 | 190 | ``` ts 191 | 192 | 193 | 194 | 195 | 196 | 197 |

Marty McFly

198 |

November 5, 1955

199 |
200 | 201 | 202 | 203 | 204 |

Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.

205 |
206 | 207 | 208 | 212 | 216 | 217 | 11h ago 218 | 219 | 220 | 221 |
222 | ``` 223 | 224 | ### Map Cards 225 | 226 | Uma combinação de componentes Ionic pode ser utilizada para criar um card que aparece como um mapa. 227 | 228 | ``` ts 229 | 230 | 231 | 232 | 235 | 236 | 237 | 238 |

Museum of Football

239 |

11 N. Way St, Madison, WI 53703

240 |
241 | 242 | 243 | 244 |

Institute of Fine Cocktails

245 |

14 S. Hop Avenue, Madison, WI 53703

246 |
247 | 248 | 249 | 18 min 250 | (2.6 mi) 251 | 255 | 256 | 257 |
258 | ``` 259 | -------------------------------------------------------------------------------- /chapters/06-faq/01-faq.md: -------------------------------------------------------------------------------- 1 |

Solucionando problemas no seu aplicativo Ionic

2 | 3 | Não consegue encontrar uma solução nesta página? Confira o [fórum oficial do Ionic](http://forum.ionicframework.com), onde os amigáveis Ionites da comunidade podem lhe ajudar! 4 | 5 |

Ajuda! A tela do meu aplicativo está em branco e não aparecem erros

6 | 7 | - Garanta que seu @App tenha `template` ou `templateUrl` 8 | - Garanta que o template do seu @App tenha um elemento `` com a propriedade `root`: 9 | ``` 10 | 11 | ``` 12 | 13 |

Meu componente ou diretiva não está carregando!

14 | 15 | Você pode fazer algumas verificações caso seu componente ou diretiva não estiver funcionando. Certifique-se que: 16 | 17 | - o componente/diretiva foi incluído no array de `directives` de quaisquer componentes cujo template contém o item com problema 18 | - seu seletor não tenha erros de ortografia 19 | - você esteja utilizando o seletor corretamente, como um atributo, elemento ou classe CSS 20 | - seu seletor tenha uma [sintaxe apropriada](http://learnangular2.com/components/): 21 | - `[attr]` se é um seletor de atributo 22 | - `element` se é um seletor de elemento 23 | - `.class` se é um seletor de classe CSS 24 | 25 | ```ts 26 | @Directive({ 27 | selector: '[my-dir]' // <-- [my-dir] porque é um atributo 28 | }) // Poderia ser my-dir, [my-dir], .my-dir 29 | class MyDir { 30 | constructor(){ console.log("Estou vivo!"); } 31 | } 32 | 33 | @Page({ 34 | template: `
Hello World
` 35 | 36 | // Ou, dependendo do tipo da sua diretiva 37 | //template: `Hello World` 38 | //template: `
Hello World
` 39 | 40 | directives: [MyDir] // <-- Não me esqueça! 41 | }) 42 | class MyPage {} 43 | ``` 44 | 45 |

Erros comuns:

46 | 47 | - Esquecer `()` depois de uma anotação: `@Injectable()`, `@Optional()`, etc. 48 | 49 | ```ts 50 | @Directive({ 51 | selector: 'my-dir' 52 | }) 53 | class MyDirective { 54 | // Errado, deveria ser @Optional() 55 | // Neste caso @Optional faz nada, então MyDirective lançará um erro se parent estiver indefinido 56 | constructor(@Optional parent: ParentComponent) {} 57 | } 58 | ``` 59 | 60 | - Adicionar provedores (providers) para cada componente quando na verdade você deseja ter a mesma instância de provedor injetada em todos (por exemplo serviços). Para uma classe ser injetável ela apenas precisa estar no array de `providers` do componente ou qualquer componente pai (por exemplo `@App`), mas não em ambos. Colocá-la tanto no componente que tem aquele provedor injetado quanto no componente-pai ou acima na hierarquia criará duas instâncias separadas do provedor. O exemplo abaixo demonstra esse problema: 61 | 62 | ```ts 63 | let id = 0; 64 | class MyService { 65 | constructor(){ this.id = id++; } 66 | } 67 | 68 | @Component({ 69 | selector: 'my-component', 70 | template: 'Hello World', 71 | providers: [MyService] // <-- Cria uma nova instância de MyService :( 72 | }) // Desnecessário pois MyService está no providers do App 73 | class MyComp { 74 | // id é 1, s é uma instância de MyService diferente daquela que está em MyApp 75 | constructor(s: MyService) { console.log("MyService id é: " + s.id); } 76 | } 77 | 78 | @App({ 79 | template: '', 80 | providers: [MyService], // MyService precisa apenas estar aqui 81 | directives: [MyComp] 82 | }) 83 | class MyApp { 84 | // id é 0 85 | constructor(s: MyService) { console.log("MyService id é: " + s.id); } 86 | } 87 | ``` 88 | Plunker: http://plnkr.co/edit/QzgR5H0r8FijHeVtv2dd 89 | 90 |

Erros comuns de JS:

91 | 92 | `Cannot resolve all parameters for YourClass(?). Make sure they all have valid type or annotations.` 93 | 94 | Também pode ser precidido por `Error during instantiation of Token(Promise)` se o erro estiver no seu componente `@App`. 95 | 96 | Isso significa que o Angular está confuso sobre um ou mais parâmetros do construtor da sua classe. Para fazer injeção de dependência o Angular precisa saber o tipo do objeto que deveria ser injetado. Você pode informá-lo especificando o tipo do parâmetro. Certifique-se que: 97 | 98 | - você está importando a classe do parâmetro 99 | - você tenha colocado anotação correta no parâmetro ou especificado seu tipo 100 | 101 | ```ts 102 | import {MyService} from 'myservice'; // Não esqueça de me importar! 103 | 104 | @Page({ 105 | template: `Hello World` 106 | }) 107 | export class MyClass { 108 | constructor(service: MyService){} 109 | /* Ou caso não esteja utilizando o pacote TypeScript */ 110 | constructor(@Inject(MyService) service){} 111 | } 112 | ``` 113 | 114 | Algumas vezes você pode ter erros de referência circular no seu código. Referência circular significa que dois objetos dependem entre si e não é possível declarar um antes do outro. Para contornar essa situação, nós podemos utilizar a função [`forwardRef`]() construída no Angular 2. 115 | 116 | ```ts 117 | import {forwardRef} from 'angular2/core'; 118 | 119 | @Component({ 120 | selector: 'my-button' 121 | template: `
122 | 123 | 124 |
` 125 | directives: [forwardRef(() => MyIcon)] // MyIcon ainda não foi definida 126 | }) // forwardRef vai resolver a dependência de MyIcon quando MyIcon for utilizada 127 | 128 | @Directive({ 129 | selector: 'icon' 130 | }) 131 | class MyIcon { 132 | constructor(containerButton: MyButton) {} // MyButton foi definida 133 | } 134 | ``` 135 | 136 | ------- 137 | 138 | `No provider for ParamType! (MyClass -> ParamType)` 139 | 140 | Isso significa que o Angular sabe qual o tipo do objeto que deveria injetar, mas não sabe como injetá-lo. Certifique-se que: 141 | 142 | - caso o parâmetro seja um serviço, você tenha adicionado a classe especificada à lista de provedores disponíveis no seu aplicativo 143 | 144 | 145 | ```ts 146 | import {MyService} from 'myservice'; 147 | 148 | @App({ 149 | templateUrl: 'app/app.html', 150 | providers: [MyService] // Não me esqueça! 151 | }) 152 | class MyApp { 153 | ``` 154 | 155 | Caso o parâmetro seja outro componente ou diretiva (por exemplo, um componente-pai), adicioná-lo à lista de providers fará com que o erro suma, mas causará o mesmo efeito que o item #2 da seção [Erros comuns](#Common_mistakes) acima. Ou seja, você criará uma nova instância da classe do componente (pense nisso como um "processo de transformação" do seu componente em um serviço), mas na verdade você não receberá a referência para a instância que deseja (aquela obtida durante a compilação do seu aplicativo, feita pelo Angular). Invés disso, certifique-se que a diretiva ou componente que você espera ser injetada esteja disponível para o seu componente (exemplo: que realmente seja um componente-pai se você está esperando que seja um pai). Veja o código abaixo para facilitar o entendimento: 156 | 157 | ```ts 158 | @Component({ 159 | selector: 'my-comp' 160 | template: '
', 161 | directives: [forwardRef(() => MyDir)] 162 | }) 163 | class MyComp { 164 | constructor(){ this.name = "Meu Component"; } 165 | } 166 | 167 | @Directive({ 168 | selector: '[my-dir]' 169 | }) 170 | class MyDir { 171 | constructor(c: MyComp) { <-- Esse é o ponto de interesse do exemplo 172 | 173 | // Ocorrerá erros quando a diretiva estiver em uma div normal por que não existe MyComp 174 | // na árvore de componentes então não há o que injetar 175 | console.log("Nome do componente host: " + c.name); 176 | } 177 | } 178 | 179 | @App({ 180 | template: "" + // Sem erro no construtor MyDir, pois MyComp é pai de MyDir 181 | "" + // Sem erro no construtor MyDir, pois MyComp é host de MyDir 182 | "
", // Erros no construtor de MyDir 183 | directives: [MyComp, MyDir] 184 | }) 185 | class MyApp {} 186 | ``` 187 | 188 | Segue um diagrama ilustrando quais injectors estão disponíveis: 189 | 190 | ``` 191 | +-------+ 192 | | App | 193 | +---+---+ 194 | | 195 | +-------------+------------+ 196 | | | 197 | +------+------+ +--------+--------+ 198 | | Div (MyDir) | | MyComp (MyDir) | <- MyComp pode ser injetado 199 | +-------------+ +--------+--------+ 200 | ^ | 201 | Sem MyComp para injetar +------+------+ 202 | | Div (MyDir) | <- MyComp pode ser injetado pela herança 203 | +-------------+ 204 | ``` 205 | 206 | 207 | Aprofundando um pouco mais o exemplo anterior, você pode utilizar a anotação `@Optional` do Angular 2 caso nem sempre você queira esperar por uma referência de um componente/diretiva: 208 | 209 | ```ts 210 | @Directive({ 211 | selector: '[my-dir]' 212 | }) 213 | class MyDir { 214 | constructor(@Optional() c: MyComp) { 215 | // Não haverá mais erros, mesmo que c seja indefinido 216 | if (c) { 217 | console.log("Nome do componente host: " + c.name); 218 | } 219 | } 220 | } 221 | ``` 222 | 223 | -------- 224 | 225 | `Can't bind to 'propertyName' since it isn't a known property of the 'elementName' element and there are no matching` 226 | `directives with a corresponding property` 227 | 228 | A mensagem acima é bem auto-explicativa. O erro acontece quando você tenta fazer um bind de uma propriedade em um elemento que não possui aquela propriedade. Exemplo: quando o elemento é um componente ou tem mais de uma diretiva, o erro ocorrerá caso nem o componente nem as diretivas tenham a propriedade. 229 | 230 | ```html 231 | 232 |
233 | ``` 234 | -------- 235 | 236 | `EXCEPTION: No provider for ControlContainer! (NgControlName -> ControlContainer)` 237 | 238 | Esta é uma versão mais específica do erro `No provider` acima. Acontece quando você utiliza um controle de formulário como [NgControlName](https://angular.io/docs/js/latest/api/core/NgControlName-class.html) sem especificar um elemento pai do tipo [NgForm](https://angular.io/docs/js/latest/api/core/NgForm-class.html) ou [NgFormModel](https://angular.io/docs/js/latest/api/core/NgFormModel-class.html). Na maioria das vezes, isso pode ser resolvido garantindo que seu controle de formulário esteja dentro do elemento de formulário atual. NgForm utiliza `form` como seletor então isso instanciará um novo NgForm: 239 | 240 | ```ts 241 | @Page({ 242 | template: 243 | '
' + 244 | '' + 245 | '
' 246 | }) 247 | ``` 248 | -------------------------------------------------------------------------------- /chapters/08-recursos/08b-ionic-developer-glossary.md: -------------------------------------------------------------------------------- 1 | # Glossário do Desenvolvedor Ionic 2 | 3 | ## Android SDK 4 | 5 | O [Android SDK](http://developer.android.com/sdk/index.html) é um kit de desenvolvimento de softwares para desenvolvedores construam aplicações para a plataforma Android, da Google. Ele inclui ferramentas para construção (*building*), testes e depuração (*debugging*) de aplicativos Android. 6 | 7 | 8 | ## Anotações 9 | 10 | Anotações são usadas para adicionar metadados em uma classe. TypeScript extende ES6 através de anotações. Enquanto você pode definir sua própria anotação, a comunidade Ionic referem-se a duas anotações fornecidas pelo Angular 2: `@Component` e `@View`. 11 | 12 | 13 | ## Autoprefixo 14 | 15 | Autoprefixo é uma ferramenta que adiciona prefixos específicos nos códigos CSS/Sass manuscritos. Isso garante que as regras CSS escritas por você sejam padronizadas e aplicada em todos os navegadores que a suportam. Por exemplo, ao invés de você conhecer cada sintaxe do *flexbox* usado para vários navegadores, o autoprefixo permite que você escreva apenas `display: flex;`; e automaticamente ele vai ser linkado no CSS correto. 16 | 17 | 18 | ## Babel 19 | 20 | [Babel](http://babeljs.io/) é um compilador JavaScript na nova geração. Atualmente, os navegadores não suportam todos os recursos da próxima geração do JavaScript (ES6). Babel resolve esse problema compilando seu código ES6 em ES5, que é a versão JavaScript suportada em todos os navegadores. 21 | 22 | 23 | ## Browserify 24 | 25 | [Browserify](http://browserify.org/) é um agrupador (*bundler*) de códigos, semelhante ao *webpack*, que vai analisar todo o código do seu projeto, e vai gerar um único arquivo (bundle). 26 | 27 | 28 | ## Agrupamento (Bundling) 29 | 30 | Agrupamento é o processo de escanear as dependências do aplicativo (seus códigos escritos mais quaisquer módulos NPM instalados) e compilar isso tudo em um único arquivo. 31 | 32 | 33 | ## CLI 34 | 35 | A CLI, ou interface de linha de comando, é uma interface baseada em texto para interagir com um programa. O terminal de linha de comando é comum para um usuário Mac/Linux, e os usuários Windows utilizam o Prompt de Comando. Muitas vezes a comunidade Ionic utiliza esse termo para se referir ao Ionic CLI. O Ionic CLI pode ser usado para inúmeras coisas, como criar *builds* de aplicativos em produção, executar o servidor de desenvolvimento, e acessar serviços do Ionic. 36 | 37 | 38 | ## CommonJS 39 | 40 | [CommonJS](https://webpack.github.io/docs/commonjs.html) é um grupo de formatos e padrões para API's JavaScript. Eles definem padrões para módulos e pacotes JavaScript. 41 | 42 | 43 | ## Cordova 44 | 45 | [Cordova](https://cordova.apache.org/) é uma saída para transformar códigos HTML/CSS/JS em um aplicativo nativo. Ele fornece a API do JavaScript para acessar recursos e funcionalidades nativas do dispositivo, como a camera ou acelerômetro. O Cordova contém as ferramentas necessárias de compilação para o empacotamento de aplicativos web para iOS, Android, e Windows Phone. 46 | 47 | 48 | ## Decorators 49 | 50 | *Decorators* são expressões que retornam uma função. Elas basicamente permitem que você pegue uma função ja existente e altere o seu comportamento. Com TypeScript, você também pode decorar classes e parâmetros. Quando você decorar uma classe, você estará encapsulando e estendendo o comportamento de seu construtor. Em outras palavras, o *decorator* irá adicionar alguma funcionalidade quando o construtor for chamado, e irá retornar o construtor original. Quando você decorar um parâmetro, você estará enrolando o argumento que foi passado para esse parâmetro. Em outras palavras, o *decorator* irá adicionar funcionalidades quando um argumento é passado para o método, e em seguida, retornar o argumento original. 51 | 52 | 53 | ## ES5 54 | 55 | ES5 refere-se ao EcmaScript 5ª Edição. Uma maneira simples de colocá-lo é que o ES5 é a versão do JavaScript que os desenvolvedores estão familizariados atualmente. 56 | 57 | 58 | ## ES2015/ES6 59 | 60 | ES2015/ES6 são dois nomes geralmente usados para a versão mais recente do JavaScript. Uma vasta gama de novas funcionalidades foram introduzidas nessa versão, incluindo classes, módulos, iteradores e *promises*. O projeto final da ES6 já foi aproviado, o que significa que os códigos ES6 podem ser interpretados diretamente pelo navegador. Para usas as funcionalidades ES6 atualmente, ferramentas como Babel e TypeScript tem que converter códigos ES6 em ES5. 61 | 62 | 63 | ## ES2016/ES7 64 | 65 | ES2016/ES7 são dois nomes geralmente usados para a versão experimental do JavaScript. A futura versão do JavaScript vai adicionar um número de novas funcionalidades à linguagem, incluindo funções assíncronas e *typed objects*. Ela está em constante revisão, e atualmente não é adequada para produção de aplicativos. 66 | 67 | 68 | ## Genymotion 69 | 70 | Genymotion é um emulador Android de terceiros. É extremamente rápido, e é útil para testar rapidamente seus aplicativos no Android. Confira a nossa sessão de [recursos](http://ionicframework.com/docs/v2/resources/developer-tips/#using-genymotion-android) na sessão Genymotion para maiores informaçõe. 71 | 72 | 73 | ## Git 74 | 75 | [Git](https://git-scm.com/) é um sistema de controle de versão para o gerenciamento de código. Ele permite que equipes de desenvolvimento possam contribuir com códigos para o mesmo projeto sem causar conflitos no código. 76 | 77 | 78 | ## Gulp 79 | 80 | [Gulp](http://gulpjs.com/) é uma ferramenta para execução de tarefas automatizadas que podem ser usadas para compilar seu aplicativo. Comumente execução de tarefas automatizadas inclui converter ES6 para ES5, transformar Sass em CSS, minificar códigos e concatenar arquivos. 81 | 82 | 83 | ## Importação 84 | 85 | ES6 traz o conceito de módulos para o javascript. Com módulos, as coisas não estão mais no escopo global e devem ser importados para serem utilizadas. Isso torna muito mais fácil para entender de onde seu código está vindo. 86 | 87 | [Importação](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 88 | 89 | 90 | ## Ionicons 91 | 92 | [Ionicons](http://ionicons.com/) é um conjunto de ícones de código aberto criados para serem usados com Ionic. Ele inclui iOS, Material Design, e ícones de redes sociais, bem como uma vasta coleção de ícones comumente usados. Ionicons é incluído por padrão em distribuições Ionic, mas eles podem ser usados em qualquer projeto. 93 | 94 | 95 | ## Karma 96 | 97 | [Karma](https://karma-runner.github.io/0.13/index.html) é um automatizador de testes que podem executar testes no seu aplicativo dentro de um navegador em tempo real. O teste é preciso, pode ser escrito sob qualquer framework, e apenas executá-los no navegador. Foi originalmente escrito para Angular 1. 98 | 99 | 100 | ## Module 101 | 102 | Módulos em JavaScript são pequenos, independentes, e reutilizáveis, pedaços de códigos podem ser isolados uns dos outros e do escopo global. 103 | 104 | 105 | ## Recarregamento Automático (Live Reload) 106 | 107 | Recarregamento Automático é uma ferramenta que recarrega seu navegador automaticamente quando detecta mudanças em seu código. Ele observa um diretório especifico e toda vez que um arquivo ou diretório é atualizado, ele envia um sinal para o navegador recarregar. Em casos de mudanças no CSS, ele vai injetar as mudanças CSS instantaneamente e recarregar a página inteira. 108 | 109 | 110 | ## Node 111 | 112 | [Node](https://nodejs.org/en/) é um ambiente de execução em tempo real que permite você escrever JavaScript do lado do servidor. Além de ser usado para serviços web, node também pode ser usado para desenvolver ferramentas, assim como o [Ionic CLI](http://ionicframework.com/docs/v2/resources/what-is/#cli). 113 | 114 | 115 | ## NPM 116 | 117 | [NPM](https://www.npmjs.com/) é o gerenciador de pacotes para Node. Com ele é possível instalar, compartilhar e adicionar pacotes aos módulos do Node. Ionic pode ser instalado com npm, juntamente com suas dependências. 118 | 119 | 120 | ## Observável (Observable) 121 | 122 | Um observável é um objeto que emite eventos (ou notificações). Um observador é um objeto que escuta esses eventos e faz alguma coisa quando um novo evento é recebido. Juntos, eles criam um padrão que pode ser utilizado para programar de forma assíncrona. 123 | 124 | 125 | ## Polyfill 126 | 127 | Um polyfill é um pedaço de código que vai adicionar uma funcionalidade ao navegador e normalizar suas diferenças. É similar ao shim, mas como o shim possui sua própria API, um polyfill vai usar uma API esperada pelo navegador. 128 | 129 | [O que é um polyfill?](https://remysharp.com/2010/10/08/what-is-a-polyfill) 130 | 131 | 132 | ## Protractor 133 | 134 | [Protractor](https://angular.github.io/protractor/#/) é um framework de testes escrito pela equipe do Angular para usar com o Angular. Ele pode ser usado juntamente com automatizadores de testes, como o Karma, para testes de front-end. Basicamente irá descobrir se seu aplicativo vai se comportar da maneira esperada. 135 | 136 | 137 | ## Sass 138 | 139 | Sass é uma linguagem de estilos que compila CSS e é usado pelo Ionic. Sass é como o CSS, porém com funcionalidades e características adicionais, tais como [variáveis](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins) e [laços de repetição](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). 140 | 141 | 142 | ## Shim 143 | 144 | Um *shim* é um pedaço de código que normaliza diferentes APIs entre os navegadores. Um *shim* muitas vezes possui sua própria API que irá lidar com os diferentes navegadores. 145 | 146 | 147 | ## SystemJS 148 | 149 | SystemJS é um carregador de módulos (assim com o RequireJS) que carrega módulos de diferentes formatos - AMD, CommonJS e ES6, e é construído em cima do [polyfill do módulo de carregamento do ES6](https://github.com/ModuleLoader/es6-module-loader) (um polyfill implementa um caminho para o JavaScript carregar módulos nativos futuramente). 150 | 151 | 152 | ## Transpiler 153 | 154 | *Transpile* significa converter o código de uma linguagem para outra linguagem. Tipicamente um *transpiler* converte códigos de linguagens de alto nível para outra linguagem de alto nível. Muitas vezes a comunidade Ionic vai falar sobre *transpiling* ES2015/ES6 ou TypeScript para ES5. 155 | 156 | 157 | ## TypeScript 158 | 159 | TypeScript é um super conjunto do JavaScript, o que siginifica que fornece um grande número de funcionalidades adicionais ao seu JavaScript, como declarações de tipo e interfaces. Embora o Ionic seja construído com TypeScript, usá-lo para criar um aplicativo Ionic é completamente opcional. 160 | 161 | 162 | ## Testes Unitários 163 | 164 | Testes unitários são uma maneira de testar pequenos pedaços de código para ver se eles se comportam conforme o esperado. Alguns frameworks de testes unitários são Jasmine, Mocha, QUnit, e muitos outros. 165 | 166 | 167 | ## Webpack 168 | 169 | [Webpack](https://webpack.github.io/) agrupa módulos e outros ativos JavaScript. Ele pode ser usado para criar pedaços simples ou múltiplos que são carregados apenas quando necessário. Basicamente você pode usar Webpack para levar seus inúmeros arquivos e dependências e empacotá-los em um único arquivo, ou conforme seu ajuste. 170 | 171 | 172 | ## XCode 173 | 174 | [XCode]() é uma IDE que permite desenvolver aplicativos para iOS. XCode inclui ferramentas que te ajudam com o *building*, testes e *debugging* do seu aplicativo. Embora muitos desenvolvedores Ionic não o usem como editor de código favorito, é muitas vezes usado para construir e assinar uma versão de produção de um aplicativo. 175 | --------------------------------------------------------------------------------