Conteúdo


Crie um IBM Watson Explorer com React

Use React e a biblioteca de componentes Material-IU para desenvolver um app no IBM Bluemix que explore os serviços Watson

Comments

Sem dúvidas você ouviu durante anos sobre o sistema de computação cognitiva IBM Watson. Hoje, graças ao Bluemix™, todos — inclusive os hackers noturnos de JavaScript — podem incluir o poder do Watson em seus próprios apps em minutos e disponibilizar esse poder globalmente.

Neste tutorial, você criará um app no Bluemix para explorar os três principais serviços Watson:

  • Identificação de Idioma: Identifica o idioma do texto no qual o usuário digita.
  • Pergunta e Resposta: Analisa uma pergunta e seleciona uma passagem de um corpus— um corpo de dados reunidos. As informações retornadas incluem um nível de confiança entre 0 e 1 associado a cada item.
  • Tradução por Máquina: Traduz o texto inserido on the fly de e para uma seleção de idiomas suportados.

Você usará a biblioteca Javascript de software livre React para criar a interface com o usuário do app. Se já estiver familiarizado com o React, você sabe que ele é excelente para o desenvolvimento de IUs da web de alto desempenho. (Se você for novo no React, é possível obter uma introdução abrangente lendo meu artigo do developerWorks "React: Criar componentes de UI sustentáveis de alto desempenho.")

O app Watson Explorer implementa Material-IU: uma biblioteca de componentes React de software livre que implementa um subconjunto de design de material que você pode integrar a seus aplicativos. O design material fornece nuances e feedback de estilo tátil virtualmente agradável que espelham papel e tinta:

Screenshot of the Watson Explorer UI
Screenshot of the Watson Explorer UI

Além de ser uma biblioteca de criação de UI de alto desempenho, o React pode aumentar a produtividade do desenvolvedor, pois coloca quase tudo relacionado a cada componente dentro de um único arquivo de origem.

O uso de React ajuda a manter o código Watson Explorer estruturado, organizado e fácil de entender.

O que você precisará?

Execute o aplicativoObtenha o código

Etapa 1. Explore a UI do app

Clique no botão Executar o aplicativo acima dessa etapa e explore os serviços Watson:

  1. Clique no botão laranja redondo no canto inferior direito da tela inicial para iniciar o app e acessar o serviço de identificação de idioma.
  2. Digite cerca de 10 palavras no idioma de sua escolha e clique no botão redondo para ver o Watson identificar rapidamente o idioma.
  3. Clique no botão de hambúrguer no lado superior esquerdo para acessar o menu deslizante; selecione o serviço de tradução.
  4. Digite uma ou duas sentenças. Escolha os idiomas de origem e destino e clique no botão redondo. O Watson traduz sua entrada.
  5. Clique no serviço Q e A do menu. Escolha Turismo ou Assistência Médica, digite uma pergunta relacionada e clique no botão redondo. O Watson recupera o texto do documento mais relevante para sua pergunta que a responde parcialmente. Se você não estiver obtendo nenhuma resposta, tente diminuir o limite ajustando a régua de controle.

Etapa 2. Clonar e explorar o código do projeto

Role para cima e clique no botão desse tutorial Obtenha o código. Na página de visão geral do projeto singli | Create an IBM Watson explorer with React no DevOps Services, clique no ícone de download, salve o arquivo ZIP em seu sistema de arquivo local e extraia-o. (Alternativamente, copie a URL do Git em sua área de transferência e clone o repositório Git do projeto em seu PC via git clone giturl.)

  • O diretório clientsrc contém o código de origem do React do lado do navegador para o app.
  • O diretório bluemixdeploy contém o proxy do lado do servidor e o código do cliente otimizado em um formato pronto para implementar no Bluemix.

O código do componente React do lado do navegador faz solicitações para um servidor proxy no lado do servidor. O servidor proxy então formula solicitações do Watson e as inclui em suas próprias credenciais privadas. A solicitação é encaminhada para os serviços Watson para processamento. Quando o Watson retorna os resultados, uma resposta é empacotada pelo servidor proxy e retornada para o código do lado do navegador:

Diagram illustrating that browser-side code places Watson requests via a proxy server
Diagram illustrating that browser-side code places Watson requests via a proxy server

Essa abordagem mantém o código da solicitação do lado do navegador simples — é apenas um formulário HTML POST— e também protege as credenciais do Watson de acesso privado no lado do servidor.

Os arquivos-chave para iniciar sua exploração são:

  • clientsrc/src/www/index.html: O ponto de partida para o código do lado do navegador.
  • clientsrc/src/app/app.js: O ponto de partida para o código Javascript carregado por index.html.

Outros arquivos e diretórios de origem chave incluem:

  • clientsrc/src/app/app-routes.jsx: Especificação de roteador do React especificando a hierarquia de visualizações interrelacionadas.
  • clientsrc/src/app/components/main.jsx: A visualização de alto nível do app, contendo a estrutura externa.
  • clientsrc/src/app/less/custom-overrides.less: Substituição dos estilos padrão em Material-IU e estilos CSS customizados usados pelo app.
  • clientsrc/src/app/components/views: Diretório contendo todas as visualizações funcionais no app.
  • clientsrc/src/app/components/stores: Diretório contendo todos os armazenamentos de mock Flux no app. Com o padrão Flux, visualiza-se o registro a ser notificado das mudanças de dados nos armazenamentos. Aqui, armazenamentos são shims over as chamadas Ajax de proxy para serviços Watson.

Etapa 3. Implementar seu próprio app Watson Explorer no Bluemix

Para implementar com sucesso sua própria versão do app Bluemix, você só precisa do conteúdo do diretório bluemixdeploy.

  1. Efetue login no Bluemix.
  2. No painel, crie um app, selecione o modelo WEB e comece com SDK for Node.js. (Você sobrescreverá o projeto existente nas etapas subsequentes).
  3. Dê ao app um nome exclusivo quando solicitado (não use caracteres especiais ou em branco).
  4. Use Incluir um serviço para ligar uma instância do serviço Identificação de Idioma ao seu app. Chame o serviço watlidserv.
  5. Inclua e ligue uma instância do serviço Tradução por Máquina ao seu app. Chame o serviço wattransserv.
  6. Inclua e ligue uma instância do serviço Pergunta e Resposta ao seu app. Dê a ele o nome watqaserv.
  7. Em seu sistema de arquivos local, altere para o diretório bluemixdeploy do app.
  8. Edite o manifest.xml e altere o valor name para o nome do app exclusivo.
  9. No bluemixdeploy, execute o comando cf push para implementar sua própria versão do Watson Explorer, que pode ser acessada em http://your app name.mybluemix.net/.

Em seguida, você verá como é possível modificar ou adaptar o app instalando um rápido ambiente de desenvolvimento usando a cadeia de ferramentas de atualização em tempo real sincronizadas e desenvolvimento Material-IU.

Etapa 4. Configurar um rápido ambiente de desevnvolvimento/construção para Material-IU

Usando a cadeia de ferramentas de desenvolvimento e construção Material-IU (com BrowserSync integrado), é possível modificar o código enquanto se exibe o app em um ou mais navegadores (ou seja, um no Firefox, um no Safari móvel e um terceiro no Chrome), e as mudanças são refletidas instantaneamente:

  1. No Repositório Material-IU GitHub, faça o download do arquivo ZIP da liberação v0.7.0. O app Watson Explorer requer v0.7.0.
  2. No mesmo nível que o nível raiz do código retirado, onde é possível ver os diretórios de documentos e exemplos, copie o diretório clientsrc inteiro.
  3. Na raiz do código do Material-IU code, run, execute npm install.
  4. Altere para o diretório clientsrc e execute npm install.
  5. No diretório clientsrc, execute gulp para iniciar uma instância de um navegador com o app em execução.
  6. Inicie os navegadores adicionais apontando para a URL do app (a partir do console ou a partir de uma instância de navegador em execução) se desejar. Todas as instâncias do navegador serão sincronizadas, conforme você faz mudanças.
  7. Modifique qualquer arquivo de origem e observe a rápida reconstrução e a atualização do navegador.
  8. Quando concluir as mudanças de código e testes, divida a sessão gulp. Construa os artefatos implementáveis com gulp build .
  9. No diretório clientsrc/build estão os artefatos implementáveis para o código do React. Copie clientsrc/build no diretório bluemixdeploy/public (sobrescrevendo os arquivos existentes) para reimplementação.

Etapa 5. Estender o app para explorar outros serviços Watson (opcional)

Atualmente, este app Explorer suporta apenas três dos doze serviços Watson disponíveis. A inclusão de suporte de app para um ou mais serviços adicionais é um exercício que vale a pena. Esse exercício pode lhe ajudar a perceber como o React torna UIs complexas compreensíveis e sustentáveis — pois a inclusão de uma nova UI para os serviços neste app é direta.

  1. Se você não configurou o ambiente de desenvolvimento do Material-IU na Etapa 4, faça isso agora.
  2. Efetue login no Bluemix, inclua uma nova instância de serviço Watson, ligue o serviço ao seu app e dê um nome a ele. Edite o arquivo manifest.yml do projeto para incluir esse nome.
  3. Leia a documentação da API dos serviços Watson para entender como usar o novo serviço e como chamar sua API. Modifique bluemixdeploy/app.js para incluir suporte ao proxy para o novo serviço usando o código de proxy existente como referência.
  4. Inclua o código JSX para a visualização do React para suportar entrada para seu serviço, colocando o código no diretório clientsrc/src/app/components/views. Use o código para as outras visualizações que já estão lá como referência.
  5. Defina quaisquer novos estilos CSS que podem ser necessários no arquivo clientsrc/src/app/less/custom-overrides.less.
  6. Inclua o código JSX para uma visualização do React para renderizar resultados retornados do Watson e coloque o código no diretório clientsrc/src/app/components/view. Veja outras visualizações de resultado no diretório como referência. Na verdade, o que você está incluindo é uma visualização do controlador do React que enviará uma ação para o armazenamento Flux (mock).
  7. Em clientsrc/src/app/components/store, inclua um armazenamento para suportar seu serviço. Deve-se incluir um método no clientsrc/src/app/components/store/callwatson.js para chamar o proxy para seu serviço. Use o código para outros armazenamentos como referência.
  8. Inclua um novo manipulador de rota no arquivo bluemixdeploy/app.js (o servidor proxy) para transformar solicitações POST recebidas do cliente em chamadas para o serviço Watson e para transformar resultados do Watson para o cliente.
  9. Em clientsrc/src/app/app-routes.jsx, modifique as rotas do aplicativo (react-router) para incluir em sua nova visualização.

Durante o desenvolvimento, é possível executar o proxy e o código do React em seu PC local — consulte README.TXT para obter informações.

Conclusão

O uso de React ajuda a manter o código Watson Explorer estruturado, organizado e fácil de entender. Aderir às melhores práticas de codificação do React melhora a sustentabilidade do código e permite que novos membros da equipe (ou leitores deste pequeno tutorial) avancem rapidamente em projetos de app da web. A disponibilidade de bibliotecas de componentes React de alta qualidade, como Material-IU, torna a rápida criação de apps da web de alto calibre uma realidade. É possível começar a aprender e aproveitar a sintaxe multifuncional JSX de aprimoramento de produtividade do React e depois avançar para projetos mais complexos (ou com a colaboração de várias pessoas).


Recursos para download


Temas relacionados


Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cloud computing
ArticleID=1004808
ArticleTitle=Crie um IBM Watson Explorer com React
publish-date=04302015