Este post visa esclarecer os seguintes pontos sobre o uso do React na renderização de Mashups do Qlik Sense:
Depois de ler isso, você terá aprendido como implementar um componente básico usando React para conectar-se aos seus dados do Qlik Sense e renderizá-los visualmente dentro do seu App React.
Entenda os benefícios que uma implementação em React traz em relação à gestão de dados ao trabalhar com a plataforma Qlik Sense para sua análise de dados.
Contextualizando o React
React é uma biblioteca desenvolvida e mantida pelo Facebook, destinada a construir interfaces de aplicações grandes. Um dos principais objetivos que o React tenta resolver é permitir atualizações de dados a cada segundo. Em outras palavras, uma ferramenta para atualizar dados na tela em tempo real.
Isso proporciona uma grande vantagem para os esforços de Business Intelligence, onde os analistas de dados cada vez mais esperam e precisam ter acesso instantâneo aos seus dados operacionais no exato momento em que qualquer banco de dados é atualizado na origem.
No mundo Qlik, isso se traduz em uma sinergia muito útil entre a biblioteca React e o Qlik Sense Engine (o componente responsável por processar os dados brutos dos bancos de dados até a tela do usuário).
Criando Componentes
Primeiro, vamos criar um componente React para abrir a conexão com o Qlik Engine e conectar-se ao QVF onde os dados residem. Chamaremos esse componente de “QlikConnection”.
Agora continuamos construindo outro componente (vamos chamá-lo de “QlikObject”). Este será responsável por renderizar um KPI que virá do QVF que conectamos no componente anterior (QlikConnection).
Por fim, criaremos um terceiro componente chamado “App”, responsável por gerenciar o Mashup e conectar (no contexto da biblioteca React) os outros dois componentes que criamos anteriormente.
Trabalhar com React é muito simples: sua API é bem pequena e é apenas uma questão de entender o ciclo de vida do componente React, junto com algumas funções… Com isso em mãos, você já pode aproveitar os melhores recursos que essa biblioteca tem a oferecer. Para tornar a experiência ainda mais agradável, você pode usar o Babel para converter suas tags escritas em JSX (JavaScript XML) e tornar seu processo de desenvolvimento ainda mais simples.
Dito isso, vamos colocar a mão na massa com um pouco de código
1. Dentro do seu arquivo index.html, é necessário importar a biblioteca “require”, para abrir uma conexão com o Qlik, React, ReactDOM, Babel, e todos os outros componentes que criamos ou vamos criar (veja a Fig. 1)
2. Crie uma <div> e atribua um id a ela (em nosso exemplo estamos trabalhando com um id = “root”), que usaremos para iniciar nosso app.
Figura 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Mashup</title>
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script type="text/babel" src="QlikConnection.js"></script>
<script type="text/babel" src="QlikObject.js"></script>
<script type="text/babel" src="App.js"></script>
<script src="../../resources/assets/external/requirejs/require.js"></script>
</head>
<body>
<div id="root" style="background-color: black; width: 100%; height: 100%; position: fixed;"></div>
<script type="text/babel">
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>3. Depois que nosso index.html estiver pronto, continuamos programando nosso componente “QlikConnection.js”. Este componente é responsável por abrir a conexão com o QVF, que por sua vez é determinado pela propriedade “qvfName”.
4. Neste ponto, uma conexão com o servidor Qlik é feita, o que essencialmente está “executando” o mashup. Assim que o app Qlik solicitado é obtido, a função de callback é acionada, que passamos por meio de uma propriedade que chamamos de “callback”.
class QlikConnection extends React.Component {
constructor(props){
super(props);
this.state = {};
}
componentDidMount(){
this.openQlikConnection();
}
openQlikConnection(){
var me = this;
var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
var config = {
host: window.location.hostname,
prefix: prefix,
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
} );
require( ["js/qlik"], function ( qlik ) {
qlik.setOnError( function ( error ) {
me.props.callback({errorMessage: 'Error upon loading QVF from Qlik ' + error, app: null});
console.log(error);
} );
//open apps -- inserted here --
var app = qlik.openApp( me.props.qvfName, config );
var state={ errorMessage: null};
state[me.props.appName] = app;
me.props.callback(state);
} );
}
render() {
return <span/>;
}
}5. Depois de configurarmos nosso componente “QlikConnection.js”, seguimos para configurar o componente “QlikObject.js”.
Este componente recebe a conexão com o App Qlik como propriedades, junto com o id do KPI que será renderizado, e um id único que será usado para identificar a div criada para inserir o objeto Qlik.
class QlikObject extends React.Component {
constructor(props){
super(props);
this.state = {};
}
componentDidMount(){
var me = this;
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}
shouldComponentUpdate(nextProps, nextState){
return this.props.qlikId != nextProps.qlikId;
}
componentDidUpdate(){
var me = this;
if(this.state.model){
this.state.model.close();
}
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}
componentWillUnmount(){
if(this.state.model){
this.state.model.close();
}
}
render() {
return <div style={{height:300, width:700}} id={this.props.chartId} />;
}
}6. Finalmente, tendo concluído esses dois componentes chamados “QlikConnection” e “QlikObject”, seguiremos para o componente Raiz do app em React. Vamos apenas chamá-lo de “App.js”.
Esse componente Raiz é responsável pelo gerenciamento geral do nosso app. Aqui gerenciaremos as propriedades globais do app, que por sua vez iniciarão todos os outros componentes que o app usará (QlikConnection e QlikObject, neste caso particular).
No momento em que chamamos esses componentes, receberemos três propriedades que precisamos levar em conta: “callback”, “appName” e “qvfName”. Elas passarão a referência para uma função que atualiza o estado no componente App.
'use strict';
class App extends React.Component { constructor(props) {
super(props);
this.state = { };
}
onMessage(state){
this.setState(state);
}
render() {
var content = [];
if(this.state.app){
content = <div>
<QlikObject qlikId="hRZaKk" chartId="helpdesk-line-chart" app={this.state.app} />
</div>
}
return (
<div style={{backgroundColor:'black',width:'100%',height:'100%'}}>
{content}
<QlikConnection callback={this.onMessage.bind(this)} appName="app" qvfName="Helpdesk Management.qvf"/>
</div>)
}
}E Voilà… Pronto. O conjunto de componentes descrito acima exibe um Gráfico de Linha que busca e renderiza conteúdo diretamente do KPI específico dentro do nosso QVF chamado “Helpdesk Management.qvf”.
Se você precisar adicionar novos gráficos, objetos ou KPIs específicos, etc., basta replicar a chamada para uma nova instância do componente “QlikObject”. Podemos fazer isso alterando a propriedade qlikId para algo novo que também seja único.
Se você quiser obter uma cópia do código-fonte completo, visite nosso repositório no Github.
Esperamos que, com este exemplo, você consiga entender um pouco mais a fundo como o React ajuda na renderização de dados do Qlik dentro de Mashups personalizados.
Se você precisa de ajuda profissional com consultoria e desenvolvimento de um Mashup do Qlik Sense usando todos os benefícios avançados que o React tem a oferecer, entre em contato conosco para uma avaliação do seu projeto.
Para saber mais sobre mashups, experimente participar do nosso curso “Design e Desenvolvimento de Mashups Qlik Sense” (oferecido em português).
Texto de Pedro Ugioni e Andrés Ruiz Droege
