2.2 Introdução ao Project Firefly

Objetivos

  • Entenda o Projeto Firefly.
  • Saiba como configurar um projeto de amostra com o Project Firefly.

Pré-requisitos

Antes de iniciar este exercício, certifique-se de ter instalado e configurado o NodeJS e o Adobe I/O CLI em sua máquina. Consulte Exercício 22.1 - Configurar o ambiente para obter detalhes.

2.2.1 Configurar seu projeto pessoal

Para começar a usar o Project Firefly, usaremos o Project Firefly para configurar nosso projeto pessoal.

Faça logon em Console do desenvolvedor do Adobe usando sua Adobe ID.

Se você for bem-vindo com um novo Bem-vindo ao novo assistente do Console do Desenvolvedor do Adobe, clique em Ignorar ou em Próximo para percorrer esse caminho.

Assistente de boas-vindas

Certifique-se de selecionar a organização correta no canto superior direito: --envName--.

Organização

Clique em Criar projeto a partir do modelo.

Na tela do assistente Procurar modelos, selecione Projeto Firefly.

Firefly modelo

Na tela do assistente Configurar projeto modelo forneça os seguintes detalhes:

Modelo1

  • Título do projeto: [ldapname] Realtime Dashboard for EXP News onde você substitui [ldapname] pelo seu próprio nome LDAP do Adobe, por exemplo rmaur Realtime Dashboard for EXP News.
  • Nome do aplicativo: [ldapname]EXPNews onde você substitui [ldapname] pelo seu próprio nome LDAP do Adobe, por exemplo rmaurEXPNews.
  • Certifique-se de que Incluir Tempo de Execução com cada espaço de trabalho esteja selecionado.

Clique em + Adicionar espaço de trabalho para adicionar um espaço de trabalho adicional.

Forneça os seguintes detalhes para o espaço de trabalho:

  • Nome do espaço de trabalho: Development.

  • Descrição do espaço de trabalho: Development workspace for EXP News RT Dashboard.

Modelo2

Clique em Save para salvar o novo espaço de trabalho.

Clique em Salvar para salvar o projeto.

Seu projeto será criado e, depois de algum tempo, você o verá na tela de visão geral.

Visão geral

Clique em Desenvolvimento no bloco Desenvolvimento para ver mais detalhes sobre o ambiente de tempo de execução específico criado para seu aplicativo Project Firefly.

Visão geralDesenvolvimento

Você pode ver o ambiente de namespace de tempo de execução criado como parte do aplicativo; no exemplo é 133309-rmaurexpnews-development

Agora terminamos de criar nosso ambiente de tempo de execução Adobe I/O, que precisamos para nosso aplicativo Project Firefly.

2.2.2 Fazer logon pela Adobe I/O CLI

Para criar um aplicativo Project Firefly de amostra, precisamos usar a linha de comando no Windows ou no Mac OS. As capturas de tela usadas abaixo são baseadas no Mac OS X, mas os comandos executados são os mesmos.

Abra o Terminal no Mac OS ou um prompt de comando no Windows

Vá para o local específico na unidade em que deseja criar o primeiro projeto. Por exemplo, desenvolvimento

% cd Development

Logon, usando

% aio login

TerminalLogin

Uma janela do navegador deve ser aberta, solicitando que você faça logon com sua Adobe ID. Se a janela não tiver sido aberta automaticamente, você também poderá copiar e colar o URL impresso em seu navegador para fazer logon.

% aio login
Visit this url to log in:
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

Depois de fazer logon, você pode fechar a janela do navegador e retornar ao terminal. Você veria uma string impressa no terminal. Esse é o token de usuário. Ele é armazenado automaticamente em sua configuração, permitindo que o Project Firefly use o token para conversar com o Adobe Developer Console.

TerminalLoggedIn

2.2.3 Bootstrap um novo aplicativo da CLI do Adobe I/O

No Terminal no Mac OS ou em um prompt de comando no Windows, comece a criar um novo aplicativo, que você nomeará [ldap]HelloWorld.

Por exemplo:

% aio app init rmaurHelloWorld

Você receberá algumas perguntas sobre como deseja que o aplicativo seja inicializado e configurado:

  • Selecionar Org. Para pesquisar rapidamente a organização --envName--, digite os primeiros caracteres atrás de Selecionar Org. Em seguida, selecione --envName-- na lista resultante.

Etapa 1

  • Selecione Projeto. Para pesquisar rapidamente seu projeto, digite o nome do LDAP e selecione o projeto criado no Exercício 22.2.1. Por exemplo, pesquise por rmaur e selecione rmaur Realtime Dashboard for EXP News na lista resultante.

Etapa 1

Selecione Espaço de trabalho. Selecione o espaço de trabalho Development criado como parte do Exercício 22.2.1.

Etapa 1

Quais recursos do Adobe I/O App você deseja ativar para este projeto?

Selecione os componentes a serem incluídos. Selecione Actions: Deploy Runtime actions.

Etapa 1

Que tipo de ações de amostra você deseja criar?

Selecione o tipo de ações a serem geradas. Selecione Generic.

Etapa 1

Que tipo de interface do usuário você deseja adicionar ao seu projeto?

Selecione o template a ser gerado. Selecione React Spectrum 3. Isso indica que usaremos Adobe Spectrum, nosso sistema de design, para criar o aplicativo.

Etapa 1

Estamos prestes a criar um novo exemplo de ação que mostra como acessar uma API externa.

Como deseja nomear esta ação?. Pressione Return para aceitar o (generic) padrão.

Etapa 1

Estamos prestes a criar uma nova ação de amostra que cria mensagens no formato de eventos de nuvem e publica em Eventos do Adobe I/O.

Como deseja nomear esta ação?. Pressione Return para aceitar o (publish-events) padrão.

Etapa 1

O assistente agora gerará o código necessário para seu aplicativo e deve indicar a conclusão bem-sucedida com ✔ App initialization finished!.

Etapa 1

Acesse o diretório de aplicativo recém-criado [ladp]HelloWorld e liste os arquivos gerados.
% cd rmaurHelloWorld
% ls (Mac OS) ou
> dir (Windows)

Etapa 1

21.2.4 Criação e implantação do aplicativo

Há várias maneiras de criar/testar/implantar o aplicativo, mas para essa ativação, nós o mantemos simples e implantaremos o aplicativo imediatamente usando o Experience Cloud Shell.

Para criar e implantar o aplicativo:

No Terminal, no Mac OS ou no prompt de comando do Windows, verifique se você está no diretório criado como parte do aplicativo ([ldap]rmaurHelloWorld) e digite:
% aio app deploy

Etapa 1

A saída pode ser diferente no seu caso e com as alterações que acontecem no Project Firefly, mas é importante que você primeiro veja a mensagem Build success, seu aplicativo está pronto para ser implantado ??, que é seguida depois de um tempo com a mensagem final Bom, seu aplicativo agora está online ??.

Depois que seu aplicativo é implantado, você tem 2 URLs para exibir seu aplicativo final.

Copie o URL que está usando o Experience Cloud Shell, indicado por Para exibir seu aplicativo implantado no Experience Cloud shell:…. O URL usará o nome do espaço de trabalho de desenvolvimento de Adobe I/O como identificador exclusivo.

Abra um novo navegador incógnito e acesse https://experience.adobe.com. Depois de fazer logon, selecione a organização correta na parte superior direita: --envName--.

Cole o URL da etapa 2 no navegador. Se tudo estiver certo, você verá a tela a seguir aparecer.

Etapa 2

Selecione Suas ações do aplicativo no painel esquerdo. No Execute as ações de back-end do aplicativo

  • Selecione Generic na lista suspensa Actions (required).
  • Clique em Invocar
  • Você verá os resultados dessa invocação na caixa results. Você pode ampliá-lo para ver mais conteúdo.

Etapa 3

Agora você implantou com sucesso seu primeiro aplicativo Project Firefly e concluiu este exercício.

Próxima etapa: 22.3 Crie o painel de notícias EXP em tempo real

Voltar ao Módulo 22

Voltar para todos os módulos

Nesta página