Tag: Artigos

Publicado em

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.

Publicado em

Iniciando com Chart.js

 

[download id=”404″]

Caso queira ver meu próximo artigo, acesse: Gráficos Dinâmicos com Eventos – Chart.js

Hoje em dia, criar gráficos do zero é uma missão complicada, pois além de ter que escrever todo o Javascript também precisamos pensar no design responsivo, felizmente temos bibliotecas que facilitam nossa vida e deixam o trabalho ainda mais rápido.

O Chart.js é uma biblioteca muito utilizada pela comunidade, é uma biblioteca excelente e muito fácil de usar, mesmo se você não tiver conhecimentos avançados de Javascript você vai conseguir criar gráficos bons, bonitos e responsivos.

Importando Chart.js

Para começar, precisamos escolher a forma de importação, podemos fazer isso por um CDN ou fazendo download.

Existem dois tipos de arquivos Chart.min.js e Chart.js, os arquivos com a extensão .min.js são arquivos que foram minificados, comprimidos para que o carregamento em tela seja mais rápido.

Se você deseja utilizar um CDN, basta clicar neste Link para pegar a versão mais recente do Chart.js ou simplesmente copiar a linha de código abaixo e colar no corpo do seu HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

Se você prefere fazer download dos arquivos do Chart.js basta clicar neste Link para fazer o download e fazer uma importação normal de Javascript.

<script src="SuaPasta/Chart.min.js"></script>

Gerando o primeiro gráfico

A primeira coisa que precisamos para gerar o nosso plano cartesiano é criar uma tag canvas no HTML e atribuir um id para ela:

<canvas id="primeiroGrafico"></canvas>

Indo para o arquivo Javascript, precisamos criar uma variável capturando nosso canvas e contexto:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');

O próximo passo é criar outra variável e instanciar a classe do chart.js passando por parâmetro o nosso canvas e um Objeto Javascript de preferencias deste gráfico:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');
                        
let chart = new Chart(primeiroGrafico, {});

É nesse objeto que vamos configurar nosso gráfico, em primeiro lugar vamos dizer qual é o tipo de gráfico que queremos, usando a propriedade type, atribuindo a ela o tipo que desejamos, os tipos que o chart.js disponibiliza são line (gráfico comum de linhas), bar (gráfico de barras), pie (gráfico de pizza), e muito mais, neste exemplo iremos utilizar o tipo line:

let chart = new Chart(primeiroGrafico, {
    type: 'line'             
});

Logo após iniciarmos o plano cartesiano, iremos configurar os dados do nosso gráfico usando a propriedade data:

let chart = new Chart(primeiroGrafico, {
    type: 'line',
                        
    data: {
        labels: ['2000', '2001', '2002', '2003', '2004', '2005'],
                    
        datasets: [
            {
                label: 'Crecimento Populacional',
                data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]
            }
        ]
    }
});

A propriedade data também é um objeto, no exemplo acima configuramos duas propriedades para o objeto data, que são labels e datasets.

Na propriedade labels inserimos um array de string referente aos pontos do gráfico no eixo X

Na propriedade datasets inserimos um array de Objetos, referente aos dados apresentados no Gráfico, a propriedade label é o título do gráfico, na propriedade data inserimos um array de number referente aos pontos do Gráfico no eixo Y

Importante:

Você deve inserir um array de Strings na propriedade labels, na propriedade data você deve inserir um array de Number

Os itens do array de data serão ligados aos itens correspondentes no array de labels, é importante que os dois arrays estejam na ordem desejada, por exemplo:

labels: [‘2000’, ‘2001’, ‘2002’, ‘2003’, ‘2004’, ‘2005’]
data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]

Nesse caso o primeiro ponto será colocado no ano 2000 (eixo X) e no número 173.448.346 (eixo Y), e assim sucessivamente


Continue lendo “Iniciando com Chart.js”

Publicado em

Módulo para criação de tags e componentes

[download id=”390″]

Introdução

Nesse artigo serão mostradas funções que podem ser utilizadas para a criação de componentes HTML. O projeto será uma versão simplificada de uma biblioteca que estou montando para agilizar o desenvolvimento e gerenciamento de objetos criados dinamicamente.

Como requisito, você precisa ter conhecimentos básicos de JavaScript e HTML5, acesso a biblioteca CSS w3.css e um navegador atualizado que aceite o básico do ES6.

  • Criando as Tags básicas

    Como você deve saber, o JavaScript oferece uma função que permite a criação de qualquer tag. Basta fornecer corretamente o nome da tag como uma string por parâmetro que a função retornará o elemento para que você possa manipulá-lo. Segue abaixo um exemplo:

    document.createElement("p");

    O código acima retorna um elemento do tipo paragrafo. Ele pode ser manipulado (adicionadas, classes, estilo, texto, etc..) da mesma maneira que os elementos da função getElementById() também podem ser manipulados. Mas ele é simples e dependendo das necessidades, você acabará tendo diversos trechos de código onde cria uma tag, adiciona classes e adiciona conteúdo. Para nos ajudar com isso, teremos as duas seguintes funções:

    function CriarElementoComClasse(nomeTag, listaDeClasses) {
    let element = document.createElement(nomeTag);
    if (listaDeClasses) {
        listaDeClasses.forEach(classe => {
            element.classList.add(classe);
        });
    }
    return element;
}

function CriarElementoComClasseTexto(nomeTag, listaDeClasses, texto) {
    let element = CriarElementoComClasse(nomeTag, listaDeClasses);
    element.innerHTML = texto;
    return element;
}

     

    A primeira função recebe uma string com o nome da tag e uma lista de strings com o nome das classes que serão adicionadas. Ela cria o elemento, confere se a lista não é nula ou indefinida e a percorre adicionando as classes uma a uma.

    A segunda função faz o mesmo que a primeira, mas também adiciona texto dentro da tag. É importante notar que esta função depende da anterior e que texto talvez seja uma definição muito ampla pois foi utilizado a propriedade innerHTML que permite que sejam adicionadas mais coisas. Por enquanto vamos com a ideia de adicionar texto, isso a torna uma boa candidata para criar <span>, <p>, <strong>, stc…

  • Criando Links e Imagens

    Como a parte simples e mais abstrata já foi feita, agora iremos implementar funções que nos auxiliaram a criar mais rapidamente tags de imagens e para links de hipertexto. Segue abaixo o código de implementação de ambas funções

    function CriarImagemCompleta(src, imgClasses, imgAlt = "imagem") {
    let element = CriarElementoComClasse("img", imgClasses);
    element.alt = imgAlt;
    element.src = src;
    return element;
}

function CriarLinkCompleto(link, linkClasses, texto) {
    let element = CriarElementoComClasseTexto("a", linkClasses, texto);
    element.href = link;
    return element;
}

    Após analisar o código você poderá notar que ambas funções reutilizam as rotinas que criamos anteriormente, sendo que apenas implementamos o código que falta para que a criação de tag de imagem e link possam ser implementadas sem precisarmos ficar repetindo o código adicional que cada uma precisa toda vez que precisarmos cria-las.

  • Anexando diversos elementos juntos

    Até agora vimos 4 funções que nos permitem criar alguns componentes que podem ser bem úteis. No entanto, se você trabalha com códigos mais extensos, coisas parecidas ou piores que o código abaixo podem aparecer

    let umaDiv = CriarElementoComClasse("div", ["classe1","classe2","classe3"]);
let umaDiv2 = CriarElementoComClasse("div",["classe1","classe2","classe3"]);
let umSpan = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum"); 
let umSpan2 = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum dolor"); 
let umaImagem = CriarImagemCompleta("https://mundojs.com.br/images/logo.png", ["classe1","classe2","classe3"], "Logo MundoJS"); 
let umLink = CriarLinkCompleto("https://mundojs.com.br", ["classe1","classe2","classe3"], "MundoJS"); 
let umLink2 = CriarLinkCompleto("https://mundojs.com.br/artigos/index.html", ["classe1","classe2","classe3"], "MundoJS - artigos");

umaDiv.appendChild(umSpan); 
umaDiv.appendChild(umaImagem);
umaDiv.appendChild(umLink); 
umaDiv.appendChild(umaDiv2); 

umaDiv2.appendChild(umSpan2); 
umaDiv2.appendChild(umLink2);

    E quanto mais elementos tivermos, maior será o comprimento de código repetido. Por isso, iremos criar uma função ao qual passamos o elemento onde será feito o append e uma lista dos arquivos que serão adicionados a ele.

    function AppendElementos(pai, filhos) {
    filhos.forEach(element => {
        pai.appendChild(element);
    });
}

    E isso nos permite transformar os diversos append anteriores em 2 linhas de código

    AppendElementos(umaDiv, [umSpan, umaImagem, umLink, umaDiv2]); 
AppendElementos(umaDiv2, [umSpan2, umLink2]);

  • Criação de Thumbnail

    Por padrão, um thumbnail é uma área com uma imagem no topo seguida de um titulo e/ou texto descritivo. O interessante deste tipo de componente o fato que ele pode ser facilmente incorporado em páginas responsivas devido ao seu formato. Antes de continuarmos, no seu arquivo CSS será necessário adicionar as seguintes classes:

    .mundojs-media{
    overflow: hidden;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

    Segue abaixo o código para implementarmos thumbnails utilizando nossas funções já criadas e a formatação fornecida pelo w3.css:

    function CriarThumbnail(linkArquivo, titulo, descricao, imagem) {
    let linkThumbnail = CriarLinkCompleto(linkArquivo, ["w3-third", "w3-margin-bottom", "mundojs-media"]);
    let divCard = CriarElementoComClasse("div", ["w3-card-4"]);
    linkThumbnail.appendChild(divCard);

    let imgThumbnail = CriarImagemCompleta(imagem, ["w3-image"]);

    let divConteudo = CriarElementoComClasse("div", ["w3-container", "w3-center"]);
    let h4Titulo = CriarElementoComClasseTexto("h4", null, titulo);
    let pDescricao = CriarElementoComClasseTexto("p", ["w3-small"], descricao);

    AppendElementos(divConteudo, [h4Titulo, pDescricao]);
    AppendElementos(linkThumbnail, [imgThumbnail, divConteudo]);

    return linkThumbnail;
}

    Você poderá ver pelo código que ele sempre terá 1/3 do comprimento do container dele em telas maiores e 100% em telas de smartphones. Isso pode ser adaptado simplesmente trocando as classes fornecidas no elemento linkThumbnail.

  • Criado um Media Card

    Por último criaremos o media card, uma espécie de cartão que possui uma imagem em sua lateral. Ele é um estilo bem utilizado para a criação de objetos representando notícias, lista de notícias ou posts com o gravatar.

    function CriarMedia(linkArquivo, titulo, descricao, imagem) {
    function AreaImagem() {
        let divImagem = CriarElementoComClasse("div", ["w3-quarter"]);
        divImagem.appendChild(CriarImagemCompleta(imagem, ["w3-image"]));

        return divImagem;
    }

    function AreaConteudo() {
        let divConteudo = CriarElementoComClasse("div", ["w3-threequarter", "w3-container", "w3-margin-bottom"])
        let h2Titulo = CriarElementoComClasseTexto("h2", ["w3-xlarge"], titulo);
        let pDescricao = CriarElementoComClasseTexto("p", null, descricao);
        let linkArquivo = CriarLinkCompleto(linkArquivo, ["w3-btn", "w3-theme-l4", "w3-border", "w3-border-theme", "w3-round-large"], "Saiba Mais");

        AppendElementos(divConteudo, [h2Titulo, pDescricao, linkArquivo]);

        return divConteudo;
    }

    let divMedia = CriarElementoComClasse("div", ["w3-row", "w3-margin", "w3-border-bottom", "w3-border-theme-l4", "mundojs-media"]);

    AppendElementos(divMedia, [AreaImagem(), AreaConteudo()]);

    return divMedia;
}

    Apesar de ser um pouco mais extenso que as funções anteriores, o resultado fica bem legal e pode ser utilizado facilmente para gerar uma lista de newsfeed, comentários de posts entre outras opções.

Conclusão

Como você pode ver, foi possível criar diversas ferramentas para auxiliar na montagem de itens na tela. Na minha experiência pessoal, eles não auxiliam muito se você utiliza um site estático. No entanto, caso você esteja trabalhando com dados dinâmicos ou simplesmente informações que se repetem muito, este tipo de técnica auxilia muita a reduzir o HTML e o JS comparado a criação manual sob demanda.

Publicado em

Como fazer Captcha com JavaScript

[download id=”227″]

O Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) é uma ferramenta utilizada para combater spam utilizando um método chamado de teste de Turing reverso. Normalmente o servidor pede ao usuário que termine um teste que não pode ser completado por um computador e por isso assume-se que quem respondeu corretamente é um humano.

Nesse artigo/tutorial veremos como fazer 2 “captchas” simples e rápidos usando apenas o JavaScript puro ao invés efetua-lo pelo servidor. A vantagem de fazê-lo assim é a de podermos manter o controle no front-end e fornecer uma proteção básica e rápida. Por outro lado, o código estará exposto para “não robôs” contorna-lo. Vale o julgamento de cada um para saber se este controle é o suficiente.

Soma de números aleatórios

Um jeito fácil de fazer um teste é fornecer 2 números aleatórios e pedir para o usuário digitar a resposta completa.

  • Primeiro precisamos do html que será usado no exemplo:
<form id="formContato">
   <p id="teste"></p>
   <input id="valida" type="text" />
   <input type="submit" value="Enviar" />
   <p id="mensagem"></p>
</form>
  • Agora criamos as variáveis para o cálculo e a reposta. Neste exemplo, criaremos 2 números aleatórios de 0 a 9 e vamos soma-los. Mas você poder fazer qualquer faixa e operação
var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
var resposta = num1 + num2;
  •  Adicionamos um evento para que, ao carregar a página, seja capturado o parágrafo que fará a pergunta do teste e utilizamos as variáveis para gerar uma pergunta diferente cada vez que a página recarrega:
window.onload = function () {
   document.getElementById("teste").innerHTML = "qual a soma de " + num1 + " + " + num2 + "?";
}}
  • Dentro da função anterior, adicionaremos um evento ao ser feito o submit do formulário para conferirmos se a resposta está correta. Caso esteja, a submissão dele ocorre normalmente, senão trancamos o envio e mostramos uma mensagem na tela
document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != resposta) {
    document.getElementById("mensagem").innerHTML = "A soma está errada!";
    e.preventDefault();
  }
}

Com isso temos todo o código necessário para fazer nosso captcha funcionar, execute a página e faça o teste você mesmo.

Teste x Valor

A segunda alternativa é um pouco mais complexa, mas ainda assim muito simples de implementar. Ela pode ser utilizada para mostrar uma imagem, dados complexos, etc… e um valor que corresponde a resposta correta.

  • Neste exemplo vamos tentar utilizar o máximo possível da lógica anterior para evitar complicar algo desnecessário. O form de antes será reutilizado exatamente como era e a lógica será novamente implementada dentro da função do evento window.onload
  • Vamos então adicionar as 2 variáveis que precisaremos. A Primeira será um vetor contendo objetos com 2 propriedades, teste e valor. A segunda é um gerador aleatório de índice.
window.onload = function () {
  var vetor = [
    { teste: "BBbananaAA", valor: "banana" },
    { teste: "AAabacaxiII", valor: "abacaxi" },
    { teste: "BBtomateAA", valor: "tomate" },
    { teste: "BBkiwiAA", valor: "kiwi" },
    { teste: "BBmelaoAA", valor: "melao" }
  ];
  var indice = Math.floor(Math.random() * 100) % 5;
}

Note que a propriedade teste do vetor é possível utilizar o caminho de uma imagem, uma pergunta, uma data, qualquer coisa. O importante é que o que for colocado no teste precisa ter uma reposta correspondente e a tag onde ele será inserido talvez precise ser trocada ou tratada (ex.: se for uma imagem, trocar para img com o src sendo definido pelo caminho da imagem).

  • Utilizando o gerador aleatório de índice, buscamos um item dentro do vetor e o exibimos para ser o teste. Lembrando que aqui meu vetor tem 5 itens, você provavelmente terá um vetor maior, então ajuste o gerador de acordo com a necessidade
document.getElementById("teste").innerHTML = "Qual a palavra formada pelas letras minusculas do texto " + vetor[indice].teste + "?";
  • Por último temos novamente o teste antes de efetuar o submit do formulário que irá conferir se a resposta é igual ao valor do objeto naquela mesma posição do vetor. Com isso saberemos se podemos deixar o formulário ser enviado ou se precisamos bloqueá-lo
document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != vetor[indice].valor) {
    document.getElementById("mensagem").innerHTML = "Resposta Errada";
    e.preventDefault();
  }
}

Conclusão

Como você pode ver, criar um controle de captcha pode ser bem simples e ajudará a evitar e-mails spam, pessoas clicando em enviar sem parar e outros incômodos básicos. Claro que existem outros jeitos de fazer a mesma coisa usando bibliotecas prontas ou técnicas de programação diferentes, mas acredito que a forma apresentada ajude a todos, principalmente os iniciantes.

 

Publicado em

Criando bibliotecas com TypeScript

O objetivo desse post será a demonstração através de alguns passos de como podemos criar de uma biblioteca com TypeScript e publicarmos ela no portal NPM.

Primeiro passo: Inicialização do projeto

Nosso primeiro passo será a criação de um novo diretório, para esse artigo nós criamos um com o nome ts-library, navegue até o seu diretório via CMD e execute o comando npm init -y.

O comando a cima irá criar um arquivo chamado package.json, esse será o primeiro arquivo que nós precisamos editar. Para isso, iremos precisa de em um editor de textos, nesse artigo nós iremos utilizar o VS Code (Visual Studio Code).

Com o VS aberto, agora nós precisamos atualizar o nosso arquivo package.json:

{
    "name": "typescript-library",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "main": "dist/index.js",
    "types": "dist/index.d.ts"
}
  • name: deve ser o nome da sua biblioteca;
  • version: a versão atual do seu código;
  • types: local do nosso arquivo de type definition, para quem ainda não conhece segue o link de um artigo sobre esse tema Type Definitions.

Segundo passo: Configurando TypeScript

Agora nós precisamos criar o nosso arquivo de configurações do TypeScript. Para isso, crie um novo arquivo chamado tsconfig.json na raiz do seu projeto.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "declaration": true,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ]
}

Passando pelo nosso arquivo a cima nós temos:

  • target: a versão do ecmascript que nós estamos utilizando.
  • declaration: nós deixamos como true para que ele gere o nosso arquivo de types.
  • include: local onde ele deve varrer para achar os nossos arquivos .ts.

Terceiro passo: Criação da biblioteca

Para esse passo nós iremos criar uma biblioteca para pegar o valor de um parâmetro passado pelo URL, algo bem simples somente para que possamos ver esse fluxo.

export namespace GetUrl {
    export function params(url) {

    var queryString = url ? url.split('?')[1] : window.location.search.slice(1);


    var obj = {};

    if (queryString) {
        queryString = queryString.split('#')[0];
        var arr = queryString.split('&');

        for (var i = 0; i < arr.length; i++) {

        var a = arr[i].split('=');
        var paramNum = undefined;
        var paramName = a[0].replace(/\[\d*\]/, function (v) {
            paramNum = v.slice(1, -1);
            return '';
        });

        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
        paramName = paramName.toLowerCase();
        paramValue = paramValue.toLowerCase();
        if (obj[paramName]) {

            if (typeof obj[paramName] === 'string') {
            obj[paramName] = [obj[paramName]];
            }

            if (typeof paramNum === 'undefined') {
            obj[paramName].push(paramValue);
            }
            else {
            obj[paramName][paramNum] = paramValue;
            }
        } else {
            obj[paramName] = paramValue;
        }
    }
}
    return obj;
}}

O trecho de código a cima foi retirado do site. A baixo tem uma explicação de como eles recomendam a sua utilização.

getAllUrlParams().product; // 'shirt' 
getAllUrlParams().color; // 'blue' 
getAllUrlParams().newuser; // true 
getAllUrlParams().nonexistent; // undefined 
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

Quarto passo: Criação do arquivo main

Para que possamos exportar a nossa biblioteca para o NPM, nós precisamos criar o arquivo que nós definimos no passo dois desse artigo na tag main. Para isso, crie na raiz do seu projeto um arquivo chamado index.ts e dentro dele importe o sua biblioteca.

import { GetUrl } from "./geturl-params";

Quinto passo: Publicando no NPM

Para essa etapa, nós iremos precisar de uma conta no portal NPM, caso ainda não tenha basta clicar no link e criar uma. Com o seu usuário e senha do em mãos, digite no seu terminal npm login e insira as suas credenciais, em seguida execute o comando npm publish, para que possamos verificar se o o nosso pacote foi publicado com sucesso, basta acessar o portal NPM no seu perfil.

Para quem tiver interesse em como ficou a versão final do código demonstrado nesse artigo, segue seu link no GitHub.