Como usar JQuery UI – JavaScript

A dica de hoje usará o JQuery UI, que é uma biblioteca muito boa, ela tem muitas interações, widgets, temas, que foram construídos usando, obviamente, a biblioteca JQuery.

Essa é uma boa ferramenta para o caso de você estar querendo colocar interações como, seletor de data, drag and drop, tooltips, sliders e etc… de forma simples no seu web site.

Continue lendo “Como usar JQuery UI – JavaScript”

Ionic 3: Infinite Scroll

Infinite scroll é uma das formas que temos de criar paginação em nossos sistemas. Veja nesse artigo como implementar ele em um projeto mobile criado com Ionic na versão 3.

No final desse artigo você terá criado um app como o da imagem abaixo.

Para que possamos ter uma lista com dados reais, eu irei utilizar uma das API`s disponibilizadas pelo The New York Times (NYT). Para utilizar essa API, você irá precisar de uma KEY que pode ser encontrada no link: Developer NYT.

Criação do projeto

Nosso primeiro passo será a criação de um novo projeto. Para isso, execute o comando abaixo no seu terminal:

ionic start ionic-nyt blank

O comando a cima irá criar um novo projeto com uma configuração básica. Para testar ele, execute o seguinte comando ionic serve no seu terminal e abra o seguinte endereço no seu navegador: http://localhost:8100/.

Criação do provider

O próximo passo será a criação de um provider para buscar os dados na API do NYT. Para isso, execute o seguinte comando no seu terminal:

ionic g provider nyt-api

Agora abra o projeto em uma IDE de sua preferência, para esse artigo eu irei utilizar o VS Code. Em seguida, atualize o seu provider com o código abaixo:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import {NewsModel} from '../..//models/news-model'

/*
  Generated class for the NytApiProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class NytApiProvider {

  private apiUrl = 'https://api.nytimes.com/svc/topstories/v2/home.json?api-key={your key}';


  constructor(public http: Http) {}

  getTopStories(page): Observable<NewsModel[]> {
    return this.http.get(this.apiUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }

  private handleError (error: Response | any) {
    let errMsg = `${error.status} - ${error.statusText || ''}`;
   console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

Agora para organizar o código, vamos criar uma Model para o nosso APP. Para isso, crie um novo diretório chamado Models e dentro dele um arquivo chamado news-model.ts, em seguida atualize ele com o código abaixo:

export class NewsModel {
constructor(
   public title?: string,
   public date?: Date) { }
}

Não podemos esquecer de adicionar HttpModule e NytApiProvider no nosso arquivo app.module.ts.

O próximo passo será injetar o NytApiProvider na nossa HomePage. Para isso, atualize o seu arquivo home.ts com o código abaixo:

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { NytApiProvider } from "../../providers/nyt-api/nyt-api";
import { NewsModel } from "../..//models/news-model";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  data: any;
  news: NewsModel[] = [];
  errorMessage: string;
  page = 1;
  perPage = 0;
  totalData = 0;
  totalPage = 0;

  constructor(public navCtrl: NavController, private nyt: NytApiProvider) {
    this.getTopStories();
  }

  getTopStories() {
    this.nyt.getTopStories(this.page).subscribe(res => {
      this.data = res;

      for (let i = 0; i <= 10; i++) {
        let n = new NewsModel(
          this.data.results[i].title,
          this.data.results[i].published_date
        );
        this.news.push(n);
      }

      this.perPage = 10;
      this.totalData = this.data.num_results;
      this.totalPage = 10;
    }, error => (this.errorMessage = <any>error));
  }

  doInfinite(infiniteScroll) {
    this.totalPage = this.page * 10;
    setTimeout(() => {
      let result = this.data.results.slice(this.page * 10);

      for (let i = 1; i <= this.perPage; i++) {
        if (result[i] != undefined) {
          
          let n = new NewsModel(result[i].title, result[i].published_date);
          this.news.push(n);
        }
      }

      this.page += 1;

      infiniteScroll.complete();
    }, 2000);
  }
}

Analisando o código acima nós temos dois métodos: getTopStories que faz um request ao nosso provider e popula a nossa NewsModel e o doInfinite que é requisitado no nosso scroll.

Como a API do NWT não tem paginação, eu precisei fazer a páginação no APP, mas em cenário real, a melhor forma seria que essas regras ficassem no backend.

Agora atualize o seu arquivo home.html com o código abaixo:

<ion-header>
  <ion-navbar>
    <ion-title>
      <img src="https://a1.nyt.com/assets/homepage/20171218-150818/images/foundation/logos/nyt-logo-379x64.png"/>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <ion-list>
    <ion-item *ngFor="let n of news">
      <h1>{{n.title}}</h1>
      <h6>{{n.date}}</h6>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="totalPage < totalData">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>

O ponto mais importando do código a cima está entre as linhas 18 e 20, onde utilizamos ion-infinite-scroll para fazer um request ao nosso método doInfinite() toda vez que o componente apresentar todos os itens que estão na nossa Model, até que o total da Model seja maior que o total de itens.

Caso você queira baixar a versão final do projeto criado nesse artigo, segue o seu link no GitHub.

Jest: Teste Unitário de JavaScript

Usado e recomendado pelo Facebook ao lado de uma variedade de aplicativos React, o Jest é bem suportado. Jest também relata uma biblioteca de testes muito rápida devido ao seu teste paralelo inteligente.

Passo a Passo Simples:

instale Jest usando npm:

npm install --save-dev jest

Ou pelo yarn:

yarn add --dev jest

Comecemos por escrever um teste para uma função hipotética que acrescenta dois números. Primeiro, crie um arquivo sum.js:

function soma(a, b) {
  return a + b;
}
module.exports = soma;

Em seguida, crie um arquivo chamado sum.test.js. Isso conterá o nosso teste real:

const soma= require('./soma);

test('somar 1 + 2 é igual a 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Adicione a seguinte seção ao seu pacote.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finalmente, execute o teste npm e Jest imprimirá esta mensagem:

PASS  ./soma.test.js
✓ somar 1 + 2 é igual a 3 (5ms)

Considerações

  • Enquanto as globais são uma desvantagem, Jest é uma biblioteca rica em recursos que está sendo constantemente desenvolvida. Possui uma série de guias facilmente acessíveis para ajudar e suporta uma variedade de ambientes diferentes, o que é ótimo para ver ao construir qualquer projeto.
  • Para projetos menores você pode não se preocupar muito com isso inicialmente, ter um desempenho aumentado é ótimo para projetos maiores que desejam implantar continuamente o aplicativo ao longo do dia
  • Enquanto os desenvolvedores utilizam principalmente o Jest para testar aplicativos React, o Jest pode se integrar facilmente em outras aplicações, permitindo que você use suas características mais exclusivas em outros lugares
  • O teste de instantâneo é uma ótima ferramenta para garantir que a UI do seu aplicativo não mude inesperadamente entre os lançamentos. Embora mais especificamente projetado e usado no React, ele funciona com outros frameworks se você puder encontrar os plugins corretos
  • Ao contrário de outras bibliotecas na lista, o Jest vem com uma ampla API, não exigindo que você inclua bibliotecas adicionais a menos que você realmente precise
  • Jest continua a melhorar consideravelmente com cada atualização que eles fazem