npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

packs-template-baseweb

v1.0.9

Published

Package with default functions to create any packs web application

Downloads

546

Readme

[toc]

npm

Descrição

Esse pacote contem as funções básicas e comuns ao desenvolvimento de todas as aplicações WEB para o time de Packs. O objetivo desse projeto é simplificar e padronizar o uso de recursos de modo que o desenvolvedor não precise re-implementar todas as vezes e de diferentes formas.

Funcionalidades

Para utilizar 100% do pacote as seguintes chaves devem estar no arquivo .env de cada ambiente:

  • REACT_APP_LOG_LEVEL
  • REACT_APP_ENVIRONMENT
  • REACT_APP_NAME
  • REACT_APP_LOG_USER
  • REACT_APP_LOG_PASSWORD
  • REACT_APP_LOG_SERVER
  • REACT_APP_FLAG_SERVER
  • REACT_APP_FLAG_USERNAME
  • REACT_APP_FLAG_PASSWORD
  • REACT_APP_FLAG_SYSTEM_KEY

Segue abaixo a lista de funcionalidades disponíveis no pacote.

AppData

Para implementação de módulos que trabalham com a query string AppData, existe uma funcionalidade para capturar e preparar o parse automático e um objeto do tipo:

{
  "accountToken": "string",
  "profile": {
    "name": "string",
    "website": "string",
    "email": "string",
    "phone_number": "string"
  }
}

Base64

De modo a facilitar, as funções encode() e decode() estão disponíveis. Gerando um base64 a partir de uma string e uma string a partir de um base64 respectivamente.

Blip

Realizar comandos no Blip é sempre um desafio e todas as aplicações precisam realizar. Para deixar bem simples esse uso foi implementado uma abstração da seguinte forma:

import {blip} from "packs.template.baseweb"
...

function test(){

    // Criar um cliente do blip autorizado
    let client = blip.configure("BOT AUTHORIZATION");

    // A partir daí as seguintes funções estão disponíveis

    // Realizar tracking de bots
    await client.trackAsync(eventName, value, contactIdentity);

    // Realizar upload de arquivos
    await client.uploadFileAsync(blob);

    // Realizar quaisquer outros comandos no BLiP
    await client.sendCommandAsync(route, request);
}

As requests são do tipo CommandRequest. Tipo já exportado. Alguns tipos que também são exportados de modo a facilitar a contrução do requisição:

  • route
  • method
  • to
  • type

Environments

Tem a funcionalidade de gerir o ambiente da aplicação para definir fluxos que devem ser executados em determinados ambientes.

Ex: Segment que só deve ser usado em ambiente produtivo

É carregado do arquivo .env o ambiente atual.

As seguintes funções podem ser usadas:

  • isDevelopment()
  • isStaging()
  • isProduction()

Json

Uma coisa simples mas muito útil para efetuar logs é a formatação do objeto a ser logado. E por isso foi disponibilizado a função Json.format(object) que gera uma string a partir do objeto de forma identada.

Local storage

Facilita o armazenamento e recuperação de dados no navegador. As seguintes funções estão disponíveis:

  • add(key, value): Adicionar um novo valor
  • get(key): recupera um valor
  • check(key): verifica se a chave existe
  • remove(key): remove um valor a partir da chave
  • clear(): limpa todo o storage

Logger

Talvez a principal funcionalidade desse pacote é o Logger. Logar as aplicações é de extrema importancia para se obtér métricas.

Para isso utilize das seguintes funções:

  • currentLevel: Retorna o nível de log atual. Não influencia nos logs enviados para o servidor, somente nos exibidos no navegador
  • levels: A lista disponível de nível de log
  • getStatus(): Obtém o nível de preparo da aplicação para logar. 0 -> Não está apta | 1 -> Somente no navegador | 2 -> Loga no servidor
  • configure(): Busca no arquivo .env as seguintes chaves para instanciar o logger:
    • ApplicationName
    • User
    • Password
    • Server
  • debug(message, args): Loga com o níver de "debug"
  • info(message, args): Loga com o nível de "information"
  • warn(message, args): Loga com o nível de "warning"
  • error(message, args): Loga com o nível de "error"
  • fatal(message, args): Loga com o nível de "fatal"

Query string

Para obter um objeto a partir da query string, utilize o queryString.parse(). Todos os campos na query string são recuperados e um objeto json é devolvido.

Segment

Para realizar trackeamento utlizando o segment, esse pacote abstraí as principais funcionalidades a seguir:

  • configure(): Busca no arquivo .env asseguinte chave para instanciar o segment:
    • SegmentKey
  • isReady(): Verifica se à aplicação está preparada para trackear
  • autoTrackPages(userId): Executa o comando page(), para cada nova página acessada pelo usuário
  • identify(userId, traits): Identifica o usuário atual
  • page(userId, category, name, properties): Registra a página visitada pelo usuário
  • track(userId, event, properties): Identifica a ação executada pelo usuário

Feature flags

As features flags permitem que em tempo de execução uma ação seja feita ou exibida. As flags são controladas por outro sistema. Essa biblioteca tem as seguintes chamadas para facilitar a execução:

  • configure(): Busca no arquivo .env asseguinte chave para instanciar as flags:
    • REACT_APP_FLAG_SERVER
    • REACT_APP_FLAG_USERNAME
    • REACT_APP_FLAG_PASSWORD
    • REACT_APP_FLAG_SYSTEM_KEY
  • isEnabledAsync(flagKey): Verifica na API se a flag correspondente está ativa.
  • getSummaryAsync(flagKey): Obtém a porcentagem de uso da flag. Permite verificar quantos porcento tem sido ativo ou não.

Para cadastrar, ativar ou desativar flags acesse: FlagsAPI