giorgiofellipe/workshop.md

## workshop.md

      
    Raw
  

              workshop.md
            
          
    Projetos utilizados para demonstração ou construídos durante o workshop


Jokes App - PouchDB + CouchDB - com a estrutura Folder-by-feature finalizada - https://github.com/giorgiofellipe/jokes-app
Conference App - PouchDB + CouchDB (não finalizado) - https://github.com/giorgiofellipe/conference-pouch-app

Design Patterns


IIFE (Immediately-invoked Function Expression) - isolar escopo com o propósito de não misturar variáveis criadas globalmente
'use strict' forçar o uso do JavaScript no modo restrito à versão EC5 ou superior (é ignorado pelas anteriores), não permitindo por exemplo: usar variáveis não declaradas

Preparando Ambiente


npm install -g bower jasmine karma-cli ionic cordova

Criando projeto Angular


bower init
bower install angular angular-mocks --save-dev
npm init
npm install karma karma-jasmine karma-chrome-launcher jasmine-core --save-dev
karma init karma.conf.js

(function() {
  'use strict';

  describe('MyController', function() {

    var ctrl, $scope;

    beforeEach(module('myApp'));

    beforeEach(function() {
      inject(function ($rootScope, $controller) {
        // create a scope object for us to use.
        $scope = $rootScope.$new();

        ctrl = $controller('MyController', {
          $scope: $scope
        });
      });
    });

    it('should have a title defined', function() {
      expect($scope.title).toBeDefined();
    });
  })
})();
Criando Ionic App


1- Preparar a view inicial
2- Adicionar a imagem
3- Criar JokesController
4- Buscar e exibir dados da API http://api.icndb.com/jokes/random
5- Criar botão Favorite e salvar na localStorage
6- Adicionar MENU
7- Adicionar Favorites ao menu
8- Criar view favorites.html
9- Criar FavoritesController
10- Listar jokes salvas na localStorage
11- Criar JokeDetailController
12- Criar view joke.html
13- Adicionar ação na lista para visualizar detalhes da joke

####1
  <body ng-app="jokesApp">

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>
    $stateProvider
      .state('app', {
        url: '/app',
        templateUrl: 'templates/jokes.html',
        controller: 'JokesController'
      });

    $urlRouterProvider.otherwise('/app');
####6
<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/jokes">
          Jokes
        </ion-item>
        <ion-item menu-close href="#/app/favorites">
          Favorites
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
    $stateProvider
      .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppController'
      })
      .state('app.jokes', {
        url: '/jokes',
        views: {
          'menuContent': {
            templateUrl: 'templates/jokes.html',
            controller: 'JokesController'
          }
        }
      })
PouchDB + CouchDB

Local dos arquivos .ini (local de instalação do Couch): C:\Program Files\CouchDB\etc\couchdb
Configurações a serem adicionadas no local.ini:
[httpd]
port = 5984
bind_address = 0.0.0.0
enable_cors = true

[cors]
credentials = true
origins = *
methods = GET, PUT, POST, HEAD, DELETE
headers = accept, authorization, content-type, origin, referer, x-csrf-token

localDB.changes({
        since: 'now',
        continuous: true
      }).on('change', function(change) {
        if (!change.deleted) {
          $rootScope.$apply(function() {
            localDB.get(change.id, function(err, doc) {
              $rootScope.$apply(function() {
                if (err) {
                  console.log(err);
                }
                $rootScope.$broadcast('add', doc);
              })
            });
          })
        } else {
          $rootScope.$apply(function() {
            $rootScope.$broadcast('delete', change.id);
          });
        }
      });