Skip to content

Commit

Permalink
Merge pull request #35 from wgrafael/master
Browse files Browse the repository at this point in the history
Tradução CLI (parcial) (#5) e Using NPM (#8)
  • Loading branch information
juarezpaf committed Mar 29, 2016
2 parents 399bb03 + 5eb013b commit 1f39a98
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 5 deletions.
Binary file added chapters/.DS_Store
Binary file not shown.
Binary file added chapters/05-cli/.DS_Store
Binary file not shown.
23 changes: 23 additions & 0 deletions chapters/05-cli/5c-emulate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Emulate #

| Comando | Descrição |
|----------|-------------|
| ionic emulate | Emular o projeto no simulador ou no emulador |
| **Flags** | |
| --livereload|-l | |
| --address | |
| --port|-p | |
| --livereload-port|-r | |
| --consolelogs|-c | Imprimir console logs da aplicação no Ionic CLI (requer livereload) |
| --serverlogs|-s | Imprimir dev server logs no Ionic CLI (requer livereload) |
| --debug|--release | |
| --device|--emulator|--target=FOO | | |


# Descrição #

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.


**Notas de tradução:**
¹Live reload: As mudanças de seus arquivos serão refletidas em tempo real.
31 changes: 31 additions & 0 deletions chapters/05-cli/5d-generate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Descrição #

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.

Para criar uma pagina, você pode usar o seguinte comando:

```shell
# ionic g page <nomePagina>
ionic g page myPage

√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.js
√ Create app/pages/my-page/my-page.scss
```

Isso irá gerar um arquivo html, arquivo sass e um arquivo js com os seus componentes definidos.

Para criar um um serviço, você pode substituir **page** por **provider**:

```shell
ionic g provider MyData

√ Create app/pages/my-data/my-data.js
```

Isso irá criar uma classe padrão com um simples **http** get request usando a classe **http** do Angular.

## Uma breve nota sobre convenções de nomenclatura ##

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.

10 changes: 10 additions & 0 deletions chapters/05-cli/5e-info.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# info #

| Comando | Descrição |
|---------|-----------|
| ionic info | Lista as informações sobre usuários em ambiente de execução |


# Descrição #

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 changes: 11 additions & 0 deletions chapters/05-cli/5f-platform.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# platform #

| Comando | Descrição |
|---------|-----------|
| ionic platform | Adicione plataformas de destino para build da aplicação Ionic |
| **Flags** | |
| --noresources&#124;-r | Não adicionar aos ***resources*** os icones e splash screen padrões do Ionic |
| --nosave&#124;-e | Não salvar a plataforma no arquivo package.json |

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**.

8 changes: 4 additions & 4 deletions chapters/05-cli/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
5. CLI
5.1 [Introdução](./5a-intro.md)
5.2 [`build`](./5b-build.md)
5.3 `emulate`
5.5 `generate`
5.5 `info`
5.6 `platform`
5.3 [`emulate`](./5c-emulate.md)
5.4 [`generate`](./5d-generate.md)
5.5 [`info`](./5e-info.md)
5.6 [`platform`](./5f-platform.md)
5.7 `run`
5.8 `serve`
5.9 `start`
Expand Down
Binary file added chapters/08-recursos/.DS_Store
Binary file not shown.
56 changes: 56 additions & 0 deletions chapters/08-recursos/08e-using-npm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Usando NPM #

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.

## Pacotes Ionic em NPM - Qual a Importância de um Nome? ##

Existe dois pacotes relacionados ao Ionic no NPM, o pacote Ionic CLI e o pacote Ionic-Angular.

### Ionic CLI ###

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:

```shell
# Se esta no linux/osx, execute com sudo
npm install -g ionic
```

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:

```shell
# Se esta no linux/osx, execute com sudo
npm install -g ionic@beta
```

Então nós podemos usar CLI a partir da linha de comando executando **ionic &#60;comando&#62;**.

### Ionic Angular ###

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.

```js
{
"devDependencies": {
// lista de dependencias de desenvolvimento
},
"dependencies": {
"ionic-angular": "2.0.0-beta.3"
}
// e qualquer outra coisa
}
```

Aqui nos podemos dizer que este projeto depende do pacote **ionic-angular** e usa a versão **2.0.0-beta.3**

Mas como podemos atualizar um pacote quando uma nova versão sai? Para verificar se há uma atualização, podemos executar:

```shell
npm outdated

Package Current Wanted Latest Location
ionic-angular 2.0.0-beta.2 2.0.0-beta.2 2.0.0-beta.3 myApp
```

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**.
Podemos tambem atualizar o **package.json** para **"ionic-angular": "2.0.0-beta.3"** e executar o comando **npm update**.

2 changes: 1 addition & 1 deletion chapters/08-recursos/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
8.2 Glossário
8.3 Ionicons
8.4 [Editores e IDEs](08d-editors-and-ides.md)
8.5 Usando NPM
8.5 [Usando NPM](08e-using-npm.md)

0 comments on commit 1f39a98

Please sign in to comment.