Ionic workshop

  • Published on
    13-Apr-2017

  • View
    459

  • Download
    0

Embed Size (px)

Transcript

  • I O N I C W O R K S H O PD E S E N V O LV E N D O A P L I C A T I V O S C O M I O N I C F R A M E W O R K

    1

  • Alvaro ViebrantzAnalista de TI - Sefaz-MTCTO na Startup ProcurixFounder na Startup DeliverixCincia da Computao - UFMT

    Cuiab, MT, Brasil

    alvarowolfx

    @alvinhuuu

  • R O A D M A P

    Ferramentas de Desenvolvimento Web Modernas

    Ambiente

    Projeto FindMyPet

    Estrutura Inicial

    Primeiro Controller

    Listagem de Posts

    Criao de Post

    3

  • F E R R A M E N TA S

    4

  • F E R R A M E N TA S

    Node.js

    Gerenciamento de dependncias

    Pr processadores css

    Task runners

    5

  • N O D E . J S Javascript server side

    Aplicaes inteiras com javascript

    Aplicaes isomrficas - http://isomorphic.net

    Foi adotado para o desenvolvimento de vrias ferramentas de terminal

    NPM - Node package manager

    6

    https://nodejs.org

  • G E R E N C I A M E N T O D E D E P E N D N C I A S

    7

    jQuery

    Bootstrap

    Minha aplicao web

    getBootstrap.com

    jquery.com

    depende

    depende

  • G E R E N C I A M E N T O D E D E P E N D N C I A S

    J temos ferramentas em vrias linguagens

    Maven - Java

    Composer - PHP

    Sbt - Scala

    Lein - Clojure

    pip - Python

    8

  • M A S E N O C L I E N T- S I D E ? Bower

    9

    Bower

    https://bower.io

    https://bower.io

  • B O W E R

    10

    bower.json

  • B O W E R

    11

  • P R P R O C E S S A D O R E S C S S

    Extendem o que conhecemos do css:

    Variveis

    Herana

    Mixins

    Nesting

    Modularizao

    12

  • V R I A S L I N G U A G E N S

    13

    E extenseshttp://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/

    http://bourbon.io/

  • E X E M P L O C O M S A S S

    14

  • TA S K R U N N E R S Executam atividades de forma automatizada

    Minificao

    Compilao

    Concatenao de arquivos

    Resoluo de dependncias

    Deploy

    15

  • O S M A I S FA M O S O S TA S K R U N N E R S

    16

    http://gulpjs.com http://gruntjs.com

  • C O N F I G U R A N D O A M B I E N T E

    17

  • A R R U M A N D O O A M B I E N T E

    Instalao Node.js

    https://nodejs.org

    Instalao do Ionic

    npm install -g ionic cordova

    18

  • A R R U M A N D O O A M B I E N T E

    Instalao Android Studio e Android SDK

    Android tools no PATH

    Ionic Sublime Snippets

    Preciso do package manager do Sublime Text

    19

  • F I N D M Y P E TP R O J E T O D O C U R S O

  • O Q U E O P R O J E T O

    Pequena rede social de animais perdidos

    Listagem de animais perdidos

    Criar nova postagem

    Foto

    Titulo e Descrio

    Recompensa

    Geo localizao

    21

  • I N I C I A N D O O P R O J E T O

    22

    Para criar um projeto ionic:

    ionic start nomeDoApp nomeDoTemplate

    blank: Projeto em branco apenas com estrutura de arquivos. tabs: Projeto com navegao em abas. sidemenu: Projeto com navegao de menu lateral.

  • I N I C I A N D O O P R O J E T O

    Utilizar o Ionic-cli

    Criar projeto em branco

    ionic start find-my-pet blank

    Configurar Sass

    ionic setup sass

    Demo dos comandos bsicos

    23

  • P R I M E I R O C O N T R O L L E RM O N A M A S S A

    24

  • E X P R E S S E S

    Pequenos trechos em javascript envolvidos em {{ expresso }}

    Exemplos

    1 + 2

    user.name

    items[index]

    Internamente o framework utiliza o servio $parse

    25

  • C O N T R O L L E R

    Controla uma parte da pagina, conectando a view com o model da sua aplicao.

    Temos a diretiva ng-controller para referenciar um controller em uma parte da aplicao

    View e Controller so ligados pelo $scope

    Toda informao deve ser colocada no $scope para ser utilizada na view

    Podemos dizer que o $scope uma dependncia dos controller

    26

  • I N J E O D E D E P E N D N C I A E M A N G U L A R J S Todo components do angular pode receber suas

    dependncias de 3 formas.

    Via nome dos argumentos

    27

    moduleObject.controller(ControllerName, ControllerFunction)

    function ControllerFunction($scope)

  • I N J E O D E D E P E N D N C I A E M A N G U L A R J S Passando um array com as dependncias na

    declarao do componente

    28

    moduleObject.controller(ControllerName, [$scope, ControllerFunction])

    function ControllerFunction(whateverName){}

  • I N J E O D E D E P E N D N C I A E M A N G U L A R J S Via atributo $inject

    29

    moduleObject.controller(ControllerName,ControllerFunction)

    ControllerFunction.$inject = [$scope];

    function ControllerFunction(whateverName){}

  • D I R E T I VA NG-REPEAT

    Itera em uma coleo de items e repete o html filho para cada iterao

    Sintaxe da expresso repeat

    varivel in expression

    (chave, valor) in expression

    Pode ser aplicado um filtro antes da iterao (veremos mais tarde detalhes sobre filtros)

    Gera as variveis $index, $first, $last, $middle, $even e $odd para serem utilizadas na view

    30

  • P R I M E I R O C O N T R O L L E R

    Criar o modulo findmypet

    Criar o controller PostController

    PostController recebe $scope como parmetro

    PostController passa uma mensagem para a view

    31

    app.controller(PostController, PostController)

  • P R I M E I R O C O N T R O L L E R

    Criar uma lista fictcia de postagens

    Titulo

    Recompensa

    Descrio

    Foto com lorempixel

    http://lorempixel.com/300/150/animals/{id}

    32

    http://lorempixel.com/300/150/animals/

  • C O M P O N E N T E D E L I S TA G E M

    Ionic possui 3 componentes principais de listagem

    List

    Card

    Collection

    Vamos alterar nossa listagem para usar cards

    33

  • C O M P O N E N T E D E L I S TA G E M

    ion-card ou class card

    class item-text

    class item-image

    class item-text-wrap

    Cards podem ter aes

    34

  • D I R E T I VA NG-CL ICK

    Cria um bind entre uma funo no controller e um evento de click na view

    Cards podem ter aes

    Adicionar aes de curtir e ligar para a pessoa

    Apenas logar o evento (console.log ou $log)

    35

  • F I N A L I Z A N D O P R I M E I R O C O N T R O L L E R

    Deixar a lista redonda com dados fake

    Eventos de teste

    36

    Todo mundo ok ?

  • C R I A R N O V O P O S TM O D A L E T E M P L A T E E X T E R N O

    37

  • M O D A L

    Um modal um painel de contedo que fica temporariamente a frente da tela principal. Geralmente usada para que o usurio veja detalhes rapidamente de algum item, faa edies ou faa alguma escolha em uma lista mais complexa.

    38

  • M O D A L

    $ionicModal service e ion-modal-view directive

    $ionicModal.fromTemplate

    Caminho do template do modal

    $scope

    retorna o modal em uma Promise

    39

  • C I C L O D E V I D A D O M O D A L

    Com a instncia do modal pronta podemos :

    Mostrar com modal.show()

    Remover com modal.remove()

    Fechar com modal.hide()

    De preferncia a remover ele para no ficar lixo na memria

    40

  • C H A M A N D O M O D A L

    Criar boto na header bar

    Criar template do modal

    Injetar o service $ionicModal no controller

    Criar modal com $ionicModal

    Mostrar instancia do modal

    41

  • C R I A N D O U M N O V O P O S T

    E N T R A D A D E D A D O S

    42

  • D ATA - B I N D I N G

    jQuery Way

    43

  • D ATA - B I N D I N G

    Temos dois tipos de data-binding

    44

  • D I R E T I VA NG-MODEL

    Cria um bind entre um componente de entrada na view para o controller

    45

  • VA L I D A E S

    Todo formulrio em conjunto com a diretiva ng-model possibilita a validao da entrada dos dados

    Sintaxe: formulario.atributo. ou formulario.

    Vrias validaes built-in : required, number, min, max, minlength, maxlength, pattern

    Pode ser extendida

    46

    https://docs.angularjs.org/guide/forms

    https://docs.angularjs.org/api/ng/directive/input

    Estado Significado$error Contm erros$pristine Os dados so novos$touched e $dirty J foi alterada a informao$valid Os dados so vlidos$invalid Os dados so invlidos

  • I O N I C C O M P O N E N T E S D E E N T R A D A

  • C R I A N D O U M N O V O P O S T

    Criar entrada de dados para:

    Titulo - Validar tamanho e requerido

    Usar validao + ng-show/if/hide

    Descrio

    Recompensa - Mobile Input Range

    Criar botes de camera e galeria

    48

    https://docs.angularjs.org/guide/forms

    https://docs.angularjs.org/api/ng/directive/input

  • P R I M E I R A L I B E X T E R N AM A S C A R A D E T E L E F O N E

    49

  • G E R E N C I A M E N T O D E D E P E N D E N C I A S C O M B O W E R

    Precisamos de uma mascara de entrada de dados

    No reinvente a roda

    angular-input-masks uma tima lib

    bower install save angular-input-m