Spec Custom Tool

(Solutions Study)Solutions Study

TODO

Pontos que precisa fechar

• Entrar em contato com os caras das empresas (Ver Lenny Names)
• Como sera o login?
• Melhor forma de fazer o treinamento - neste momento, sera duas abas, video e depois tab de ação
• Solucao de Chat
  • Pode ser o slack ou algo assim? Slack embedded in a page?
• Existe uma ferramenta pronta para a parte da captação (ideal)?
• Duvida: questionário com imagem da face reação?
• Dupla pode chegar até 5min atrasado. Depois disto, vai mudar o escopo.
• Caso a dupla caiu no meio - Segue o jogo, tenta fazer sozinho, mas pode ser necessário desconsiderar a avaliação para parte das analises.

Com C3PO

Frontend

General instructions

Follow PR-GUIDELINES.md for developing and creating push requests.

Open

// Define as seções alvo
let targetSections = ["Criar as rotas - Basico (placeholders)","Boiler Plates","Configuration","Integrations","CI/CD + Agentic","Platforms","FlowControl","Security & IAM","Quality","Backend","Final Touch","Frontend Admin"];
 
// Filtra as tarefas e adiciona o nome da seção ao texto
let tasks = dv.current().file.tasks
    .where(t => targetSections.some(s => s.toLowerCase() === t.section.subpath.toLowerCase()) && !t.completed)
    .map(t => {
        // Modifica o texto que será exibido, prefixando com o nome da seção em negrito
        t.text = `**${t.section.subpath}**: ${t.text}`;
        return t;
    });
 
dv.paragraph("Open tasks count: " + tasks.length);
dv.taskList(tasks);

Common prompts

Include JSDOC Do not include lint ignore flags

Criar as rotas - Basico (placeholders)

• Criar as rotas - Basico (placeholders)
  • duplicate the route video-intro as a new route training
  • Create new route - “screen” - in this route, include three buttons - “Developer”, “Customer Experience”, “Business”
  • create a new route called “wairing-formation” with a big text saying “waiting formation”
  • duplicate the route video-intro as a new route video-challenge
  • Rename the route slide-intro and SlideIntroPage to slide-confirmation and SlideConfirmation respectively
  • rename the route “evaluation1” to “workshop”
  • rename the route “evaluation1” to “workshop”
  • Multilang
  • Video Placeholder
  • VideoIntroPage and VideoChallengePage are exactly the same. What changes is the next step handled by handleClickStartSurvey function and the title. How to create a single component named VideoPage that receives as a parameter the title and the next route path as parameters.

Boiler Plates

• Boiler Plates
  • Firebase Functions: REST API & RTDB Trigger
  • Firebase Anonymous Login Button

Configuration

• Configuration
  • make all the texts of pages multilang support (I18n)
  • Workshop Configuration - in route /workshop-d/:workshopId, the videos and survey should be configurable based on the workshop id

Integrations

Co Browsing Integration

• https://github.com/search?q=webfuse.initSpace&type=code
• Create a firebase functions endpoint to receive the following events from webfuse: space.session.started, space.session.audit_logs_created, space.session.client_log_added, space.session.recording_uploaded. Documentation about the events: https://dev.webfuse.com/webhooks/

Video

LMS Integration

Chat Integration

- [x] chatlio-widget
- [ ] make chatlio-widget only appear inside routes that are under workshop/:workshopId

Slack

• Create a sample API function on google functions that responds to a command from slack and returns a hello world in “admin” channel
• https://docs.slack.dev/legacy/legacy-custom-integrations/legacy-custom-integrations-migration/#migrating_to_apps
• https://docs.slack.dev/app-management/quickstart-app-settings/

CI/CD + Agentic

Agentic / Continuos

• find crappy workarounds, like the example of supressing log, esline
• Find copy paste or repeatable codes
• deployment speed
• internationalization - https://gemini.google.com/app/86ca637229a260cd
• Otimizar - Não ter um Page para Cada Video por exemplo
• Find strings that are not in itx
• Find hard coded code
• find functions that are not listed in deployChanges.ts

CI/CD

• Criar ambiente dev no firebase

• Criar ambiente prod no firebase

• Configurar o deployment usando github actions enviroments (https://gemini.google.com/app/1a2c210f041fdbce)

• Criar branch dev

• indicate the environment and the build number (git commit id) in the bottom of the home page.

• Create github actions script to deploy firebase functions

• Github actions - run test

• Criar branch pr @low (entender channelId: live)

  • https://gemini.google.com/app/75837403d39eba93

• eslint auto fixes (husk?)

• transformar os arquivos env em LN

• Canary channel quando vai para producao

• Push request - todos exceto main e dev?

• firebase test locally with emulations and playwright, how to setup - https://gemini.google.com/app/ec4bb12d008a1f81

• Optimize firebase-deploy.yml to cache node module, specially in the step “Install Playwright Browsers” that takes a lot of time to execute

• Optimize firebase-deploy.yml to only execute “Deploy Functions” step if changes were made to functions bellow functions folder

• In firebase-deploy.yml, in case is a prod deployment, deploy to a different channelId

• Include Test to validate if deploy signature matches (is not a previous deployment) in functions, creating a backend function called version

• How to prevent GitHub actions trying to execute one github action in same branch at the same time - can it wait the other to complete? the action is firebase-deploy.yml

• Include a playwright test that checks if that the version of frontend in the soon matches the deployed version

• Configurações no firebase function

• Deploy specific function - make firebase-functions.yml to be triggered by workflow_dispatch where you can select one specific function or all. also ask if the action is to deploy/update or remove function.

• Deploy hosting- make firebase-hosting.yml to be triggered by workflow_dispatch

• Run script when loading emulator https://gemini.google.com/app/c9aad172e947539e

• Quando rodar o playwright localmente, verificar se o emulator esta rodando

• Problema de pastas no firebase storage - https://gemini.google.com/app/696a14cdd885f709

• if: steps.changes.outputs.functions == ‘true’ && hashFiles(‘functions/package.json’) != ” — Teve alterados de fato… caso que eu estou alterando o deploy

• Teve mudancas deste a versao x, ou commit x, nas regras do firestore?

• BACKEND_DEPLOYED env variable set for test

• Prod - test in preview channel prod @low

• Create a new API that returns the firebase config variables, but it is only allowed from a certain domains (like admin.domain.com), so the admin page is able to interact with multiple domains.

• Create action in github or somewhere when database.rules.json and other requivalent is changed to notify people @low

• elaborate a script similar to functions/scripts/fs_populate_workshops.ts that populates surveys in the firestore. the records to be loaded as json files in the functions/scripts/surveys folders.

• create a github action, similarly to firebase-load-secrets.yml, on which is triggered manually, to load default and sample data into the environment. The initial options are fs_populate_workshops and fs_populate_videos (scripts in functions/scripts folder).

• How to prepare a build to have the site running a certain subfolder, like /admin. (Admin FrontEnd)

• Prepare the deploy process to obtain from other gitbug repository a certain build of a frontend website, and publish it in firebase hosting under /admin path (does not combine with the rest of the frontend, isolated package)

• Aprender a usar deploy para CHANNEL_ID no firebase

Parking Lot

• How to fix package-lock problem with PR https://gemini.google.com/app/2bf54e14b5bec550 @low (pode ser que tenha corrigido com o test )
• Maybe always accept bypass this type of conflict? Como resolver este problema do Jules - However, I am encountering issues with Firebase Authentication in the test environment (likely due to missing or restricted credentials in .env), which prevents me from accessing the protected pages. Is this approach acceptable, or do you have valid .env credentials I should use? Alternatively, if you are confident in the code changes, I can finalize the work (https://jules.google.com/session/12248793528622667591/code/dev_server.log) -
• Criar ambiente QA

DONE Fazer o fluxo basico rodar (DONE)

• Fazer o fluxo basico rodar
  • Criar simulador de login - cenarios - ambiente local
  • In HomePage, create a new button called “Emulate Loggin”, that will be only available when running locally
  • Create a data structure that should be shared among pages:
  • Participant
    • Background - with is a enumeration Developer, CustomerExperience, Business
    • Group - Number As a example on how to write and read information from this data structure, in screen page, each button “Developer”, “Customer Experience”, “Business”, updates the Background variable. And then, in Waiting Formation screen, you read the Background.
  • Create a button in VideoConferencePage that goes to the next page (thank-you)
  • Make VideoConferencePage reusable, so it can be used in two routes: video-conf-design, video-conf-pitch. the next button in route video-conf-design goes to video-conf-pitch. The next button in video-conf-pitch goes to final-survey route.
  • Create a reusable SurveyPage that use surveyjs library (https://surveyjs.io/). It receives a json with the survey questions as a json. create two routes using this page - initial-survey and final survey.
  • make all routes after route workshop. example /workshop becomes the HomePage, /workshop/screen becomes ScreenPage.
  • frontend route workshop should received two parameters in the url - workshop id and invitee id. the url should work like this: /workshop/:workshopId/:inviteeId.
  • State Flow conditional, to do not have nothing hardcoded
  • VideoConferencePage - is it possible to build a layouts where the participants images are in the left, with 3 fixed positions (pre-defined participants with “role” name below it) and it the rest of the screen a placeholders.

Platforms

• initiatize firebase analytics with measurementId
• Video com Firebase https://gemini.google.com/app/84fbb6a02f1b5a24
• MuxPlayer, difference of playbackId https://gemini.google.com/app/cda0adc97a61ebf9
• EmbedVideo - viewer_user_id: “user-id-placeholder” - add firebase current logged user id
• firebaseAnalytics, record actions
• I have fixed the Cannot find module ‘@mux/mux-player-react’  error by updating tsconfig.json to use “moduleResolution”: “bundler”
• Criar um script de terminar que gera um token de assinatura para um video na plataforma mux (signed videoId) https://www.mux.com/docs/guides/video/secure-video-playback
• functions/scripts/mux_list_videos.ts
• functions/scripts/mux_sign_url.ts

FlowControl

• Advanced Flow control \

  • In Route Route path=“workshop-d/:workshopId”, validate if Workshop Exists in Realtime DB path workshops/${workshopId}
  • in getNextState function in stateMachineUtils.ts, it should log in firestore a Time Dataworkshop_transitions table that records: id_workshop, origin_state, destination_state, timestamp, and id_user. The “time in each state” will be calculated by the difference between these timestamps.
  • Do not allow the user to manually change the url to move to another page - the current page should be associated with the current state
  • No not allow user to move around (get status from firebase, certity that status can only be changed by backend)
  • Do not allow the user to manually change the url to move to another route - the current page should be associated with the current state. If all the states could be kept under /
  • Como se comportar se entrar antes ou depois
    • Create a route waiting for the workshop start time workshop-d/:workshopId with a timer showing the time until the start and playing an audio to announce that it will start and redirects the page to the home page.
    • Create a route to notify the user that, since they joined 10 minutes after the workshop started, their participation at that time would be compromised and therefore they will not be able to participate. If you have any questions, please contact the workshop organizers.
    • Implementar a logica para redicionar isto (atributto em dev, neverExpired the é ovrrided in prod)
    • Implementar um teste

• Basic Flow control

  • Create a api route called “next”, that receives a state as a parameter and it returns the next state based on a state machine defined as a json file
  • Make all pages to be logged with firebase auth, except home screen and SoonPage
  • If url is typed into a route not found, redirect the user to the root path
  • in Screen Page, handleSelect Action, intead of using a static value for navigate Action, a firebase realtime database write should be made to notify the backend that the selection was made, and it waits until a value change trigger occurs; The write should occur in the following path: /session-id/user-id/action, variable actionName. The read is made in the /session-id/user-id/status, variable path.
  • Replicate previous step into all routes
  • External Flow control
  • Bug - Tem hora que rediciona para o lugar diferente no select group
    • Verificar a necessidade de adicionar timestamp para que sempre gere evento a gravacao do proximo item do fluxo
  • Criar videos para fechar o fluxo de teste
  • Automação de teste do fluxo (Escrever baseado nas specificações)
  • Adicionar um estado entre o design e o pitch

• Intermediate Flow control

  • StateMachine considerar variaveis
  • ‘Can you optimize VideoChallengePage, VideoIntroPage and VideoPitchPage isto a single parametrized page?’
  • Survey Completion Screen is not necessary (review from previous project)
  • Only proceed to the next state if the survey is successfully saved in SurveyPage.
  • Token validation and expiration
  • OneTimeToken, include workshopId, Participant Context (Background and Group). After logged, update ParticipantContext with the information.
  • Proximo passo simples - se workshopId igual a test-id, usa o defaulr simples, se não usa o criado para o primeiro workshop (os proximos precisaria evoluir na questão do multi-company)

Security & IAM

• Security
  • create a route named /logout that forces any logged user in firebase auth to logout and goes to index page
  • Make all pages to be logged with firebase auth, except home screen and SoonPage (Falta teste ) (include a playwright test that tries to enter into a logged page and is redirected to the root fase )
  • in magic-login route, ensure to do a logout in firebase iam user before validating the token
  • config/firebaseConfig.json - Need to keep that file - not needed?
  • What are the firebase configs that should be in the frontend? See https://gemini.google.com/app/7d2bd0a260efee46
  • Revisar as permissoes do firestore - eu tirei a questao de auteticado
  • Mux - Signed playback id - Criar um script em functions/scripts que recebe como parametro um Playback ID, e ele printa no console uma url com um signed video com permissao para assistir o video por 3 horas na plataforma mux Ver documentação abaixo, signed video: https://www.mux.com/docs/guides/video/secure-video-playback](https://www.mux.com/docs/guides/video/secure-video-playback)
  • Assinar o video dinamicamente na ativação do workshop
  • Review environment variables strategy, which should be embeded in the frontend or should be dynamic obtained from backend
  • improve security, only allow user to enter /workshops/AzNjo88oHxt1vWKXVKB2/coHorts/1/coHortIdWebFuseUrl if is listed or have its data assigned into its own node
  • Teste de login logout depois do processo
  • Como assegurar que o login foi para um certo workshop (mesmo que ele descubra outro ele não entra)
  • Assegurar VITE_FIREBASE_* local mesmo
  • searchParams.get(‘embedURL’) only in DEV
  • Review Google Cloud credential security best practices

Survey

• Create a custom custom response type in surveyjs that is 5 scale likert scale. The survey to be used to implement and test is functions/scripts/surveys/dev-final-survey.json. You can add a new question if necessary. To test, use “npm run emu” and then navigate to the following page http://localhost:8081/survey-test/dev-final-survey
• in survey test route, when the API returns unathorized, the message displayed is No survey found. In this condition, it should be “Not authorized” - To test, use “npm run emu” and then navigate to the following page http://localhost:8081/survey-test/dev-final-survey Please run lint under root folder and functions folder and ensure there’s no errors generated.

Quality

• Create a test boilerplate that is able to create two browser sessions in parallel, and execute coordinated actions.
• Write a test that is able to enter into “workshop-d” route, verify if text contains fgv, and then click the button sign in. Then, in the next page, hit developer button.
• create a route named /survey-test test receives a survey-id as a parameter and renders the survey like SurveyPage, but without any saving or action after conclusion, really to test the survey rendering alone https://gemini.google.com/gem-labs/1xxGIPJED1EGRNvb7D16veBvVWXHT6u5a
• in dev_workshop_d.spec.ts, the validation texts are hardcoded. obtain then from i18n. modularize the test to be run with two languages, to ensure that all texts are localized.
• Criar um teste para testar o fluxo do workshop com localization (pt/en)
• Fazer o teste se salvou mesmo no banco de dados as respostas do form
• No caso de erro de salvar (500), como fazer com que a tela nao desapareça do form
• Script para verificar no ambiente de QA e PROD, se existem coisas que nao deveriar estar, como abaixo <Button onPress={() => handleSelect()}>Next (Debug)</Button>
• Use i18t for button descriptions in dev_workshop_d.spec
  • Token validation and expiration (Test) - https://gemini.google.com/app/76cadcef8c3a17e4
• Validar solução do jules em relação a conversão m3u8 to ts
• Playwright - specific githubaction to test multiple browsers
• include a routine in npm run, to check the json syntax of the json files in the following path functions/src/stateMachine (Exemplo stateMachineDemo.json)
• Never ending error when survey save and there’s a problem in the backend
• Created http://localhost:8081/survey-test/T1_survey route
• Padronizar a passagem de parametros? Passado const {state} = useLocation();,…
• Testar todos os testes criados
• Como dar instruções para o jules em relação a entrega dele, por exemplo, rodar o firebase deploy preview, rodar um teste X.
• Include prettier?

// In your root package.json “lint-staged”: { “frontend/src//*.{ts,tsx,js,jsx,css,scss,html}”: [ “eslint —fix”, “prettier —write” ], “backend/src//*.{ts,js}”: [ “eslint —fix”, “prettier —write” ] }

Simular caminho infeliz (forçando 500)

• Survey…
• /error e se recuperar do error
• Dinamismo de troca de state machine

Backend

• Create a CRUD API to maintain workshops. Attributes are: Title, Description, Date, Start time, Target Duration, Instructor Name, Event Cover (URL)
• in functions sampleApi.ts, add a new route similar to the /hello route, but that required to be authenticated with firebase auth. Add another that required to be authenticated and have admin permissions.
• Create a CRUD API to maintain firebase users, and include a attribute Company Name and Workshops ids (Multiple)
• Create the backend functions call (OnCall) for mainting a users list for each workshop in workshops firestore, where you can add, remove users in the list. Adding and removing users interact directly with the workshop firestore collection via functions call.
• statusHistory in realtime db
• Create a method getVideos in functions/src/api/Videos.ts, that list videos of the mux platform using the MUX API (https://www.mux.com/docs/api-reference/video/assets). This method also can receive a parameter “query” to filter the returned videos. To demonstrate it is working, create a script functions/scripts/mux_list_videos.ts that prints the results of the created api.
• Retrieve video information from the flow using a key in Firestore to avoid hardcoding the video (by title, resolve the ids in the backend)

Final Touch V0 - Professores

• Carregar surveys
• Criar roteiros dos videos
• Criar os video X
• Criar o video Y
• Make logo configurable as part of a. create two set of skins - the current that is blue with FGV logo, and another with TUe - Technology university of eindhoven logo and its red.
• Texto Magic Login → Bem vindo
• Flow test - voltar a funcionar
• Survey - Scala Likery
• Texto - Porque não puxou o correto - FGV-SP EAESP
• multilang functions/scripts/surveys
• Fazer o texto do guideline (Versão PT e EN)
• Subir os videos novamente

Final Touch V1 - Itau Video

• Slides - Remover por horaSimple ones

• Retirar o slider do fluxo - no momento não agrega

• No fechar está direcionando para a home, deveria ficar na tela final

• Textos das surveys - Estão com a questão conceitual, não a lingua do usuário

• Flow Test - PR do Jules - Funcionar deploy (incluir preview to functions)

• Ambiente PROD

• Botão record

Final Touch V2 - Versão Beta com Estudantes Conhecidos ESPM

• Entrar anonimamente (se teve o magic link) Make src/pages/Home/index.tsx only for autheticated users. Replace the button of this page with a single “Acept and Proceed to the workshop” button that triggers to handleProceed. Since this page is used for automated testing, move the Button that does the anynomous authentication for a new page called “LoginForAutoTests”, and update the tests/dev_workshop_d.spec.ts to start in this page and clicking on the anymous authentication button, that will move then to the HomePage.

• create a folder that concentrates all models and types that can be used for both frontend (src) and backend (functions/src). Examples of types that should be placed in this place: enum Background (src/context/ParticipantContext.tsx) interface Workshop (src/types/workshop.ts) The intention is to make it easier for developers to see the data model and how to glue backend and frontend.

• Como garantir o comportamento quem está falando aparece - dá para colocar um tumbnail de todos lá Please confirm that the behaviour of Pitch Layout (src/pages/VideoConferenceLiveKit/PitchLayout.tsx) is to present who is currently talking. It should be good to have the thumbnail of the other participants (small).

• Indicar quem é você. Create a color indication of “who am i” of the roles with a different color for src/pages/VideoConferenceLiveKit/DesignLayout.tsx

• Fazer funcionar o envio do pitch Create a backend function that receives a video recording from submitPitch action in src/pages/VideoConferenceLiveKit/PitchLayout.tsx, and store if in firebase Storage. Bind the backend function with the frontend.

• Revisar a sinergia do video com a tela - Pitch In Pitch Layout (src/pages/VideoConferenceLiveKit/PitchLayout.tsx), the recording should combine both the video from the current speaker with the hyperbeam content screen.

• Alguma forma de maximizar o HyperBeam In Pitch Layout (src/pages/VideoConferenceLiveKit/PitchLayout.tsx), is there a way to maximize the hyperbeam content area, maybe having the

• Design layout - Controles, ficar embaixo dos participantes In src/pages/VideoConferenceLiveKit/DesignLayout.tsx, can you put the controls bellow the speaker names to make more room for the hyperbeam and remove the option of sharing screen.

• Mudar a rota do rtdb, workshop, workshopData

• Revisão dos pontos do video

• Waiting to start (Method → start)

• Fazer os videos do exemplo do Itau

• - Artefatos: Se quiser elevar o nível, entregue o “Manual de UX do Pix” original do Banco Central (de 2020) para que eles vejam o que precisam desafiar.

• Criar pagina na rota /self-test o design e funcionamento emulado de uma pagina que tem 4 checkagens para fazer para validar se o navegador e configurações do dispositivo atendem os requisitos necessários da aplicação. Fazer um componente reusável para depois ele ser usado como um step. O legal desta página é que seja tenha a lista dos itens, do lado um icone que vai mudando de estado para cada verificação - aguardando, rodando a verificação, verificação concluida com sucesso ou com insucesso (não atende o requisito ou houve erro na validação, o que indica no final que nao atende)

• Normalizar codigo em relação ao ponto de como são carregas as informações para a pagina atual em relação ao fluxo (tinha um exemplo que obtinha os dados diretamente da configuração do workshop)

• Received response for an old action console.log - if this that protection or a real issue

• onComplete precisa mesmo ou é um caso de cleanup

• XLanguage cannot be changed during the process - Language selection only in DEV

• Survey Saved Toast - Not necessary

• Chat

• https://docs.livekit.io/intro/basics/rooms-participants-tracks/webhooks-events/

• Tapa Final

  • Limpar coisa do antigo que nao usa
  • Otimizacao de compartilhamento de userId
  • Cleanup the branches
  • Workflow nao vir do config file, e sim do remote config, para facilitar atualizacao
  • Otimizar os “t’s”

Title for the participant T1: Pre-Training Survey - To establish a baseline for participant prerequisites and general prototyping confidence.

Final Touch V3 - Versão Beta com Estudantes Desconhecidos

[ ] Acepting now existant workshop id http://localhost:8081/workshop-d/AzNjo88oHxt1vWKXVKB5/training?lang=pt-BR

Final Touch V4 - Itaú

Wish

Add the capacity to, when state will change, to execute certain actions. In this case, destroy hyperbeam

const handleClickStartSurvey = () ⇒ { runState(AppState.TRAINING); };

Associate HomePage text with workshopId

Simular analise de dados o que faltaria

Multi Company

• Variar as paginas baseado no dado da credencial (ja prevendo que vou rodar multi-company)
• How to make the stateMachine.json come from database, associated with remote id
• how to make the skin associated with the workshop id, instead of VITE_APP_SKIN
• Security - User only can route to a workshopId it has access to
• WEBFUSE_SPACE_ID e space name come from Workshop
  • New field and instruction in the create new item
  • Backend prepared

Console

• Criar user-id e manter de-para com ID deles

Frontend Admin

https://gemini.google.com/app/e57307e79742c9f2

Priority

• Based on the environment selection (dev, qa, prod), define a end-point url. Create a sample URL request to an API /hello

• Create a github acttions script to deploy firebase hosting

• Create a route to list workshops

• Make the login page to work with firebase auth

• Firebase auth domain and functions domain should be loaded as per enviroment (dev/qa/produ)

• Make pages, except login and logout, to required to be logged in with firebase auth verification

• In the header of the admin panel, display the user name from logged user in firebase auth. In case it’s not logged, redirect to login page. Make the logout option work.

• Create a sample URL request to an API /hello-auth sending the token credentials from firebase auth. Make it in the same page TestApi

• in workshops route, filter workshops by status (Upcoming, Live, Completed)

• in workshops route, create the view workshop details that is show when click in a row

• Login ainda não funciona

• create a route page /error

• Error page with ConfigService Fetches configuration for environment and Fails to load resource - like server response status of 403 (Forbidden) or 500 (error)

• in workshop route, create a button that opens a dialog that requests name and email input, and when triggered, calls a api with these values - in the moment just make the placeholders for it

• Criar uma estrutura de backend para obter configurações do firebaseConfig via backend, baseado na seleção do login (Development, QA, Production)

• Criar três botões novos no menu lateral 1/ “Videos”, que ao clicar vai para uma página externa https://dashboard.mux.com/organizations/cuqpgs/environments/l9vic6/video/assets 2/ “Co-Browsing”, que ao clicar vai para a página externa https://hyperbeam.com/dashboard/ 3/ Video Conf, que ao clicar vai para a página externa https://cloud.livekit.io/projects/p_plzgqiq852m/overview

Faça com que estas páginas venha do arquivo de configuração VITE.

• Configurar subdominio admin.aiproto.studio

• bind workshop list with api call to workshops, fields are title, description, date, startTime, targetDuration, instructorName, eventCoverUrl

• bind workshop detail api call to workshops, fields are title, description, date, startTime, targetDuration, instructorName, eventCoverUrl

• include user list commit from workshop detail api

• create button in user listing inside a workshop detail, that calls a api link that returns a url and it opens in a new tab

• API connection to a firebase function but hosted in different projects

• Dashboard Home - Show upcoming workshops only as cards

• In workshop detail page, create a tabs structure with the following tab options - workflow and users. In the workflow timeline, include a instance of WorkflowTimeline. In the users tabs, you include a users list, where you can add, remove users in the list. Adding and removing users interact directly with the workshop firestore collection via functions call. For now, create only the placeholders for the functions call not needed to test.

• When clicking in the user…

• Mostrar o workflow

• Mostrar os users

• Adicionar users

• Create Workshop “run” mode view - where it lists the workshops from the realtime database, following the structure below. Firebase Realtime DB

Not Priority

• Criar roteiro basico de testes para o jules rodar
• Visualization for stateMachineDebug.json
• Incluir o icone das plataformas (Ex. Video→MUX)
• Tem videos no painel? Da para alimentar direto com os Videos do MUX?
• Editor de maquina de estados
• User Profile from header, user information
• Tests
• Otimizar codigo de chamada de APIS
• Padronizar a questão de erros (Toast
• this_API_BASE_URLS come from VITE_CONFIG
• Preview do Survey

Com R2D2

Code

• Firebase Studio - Tela de admin

NoCode

• Elaborar video
• Elaborar as instruções iniciais
• Pesquisar Solução de chat - Sera que o firebase ja tem algo padrão?
• Pesquisar Solução de Captação (Booking - algo assim)

Flow Geral

Recebe o link. Abre a tela, confirma questões de ética.. Clica no link para a sala do teams.. Na sala do teams ja esta tudo pronto, compartilhas o tela (Ou seria zoom) .. paea que a geavacao pegue, mas todos xonseguem interagir com a ferramenta.. ai eles podem usar a ferramenta… Video do desafio… istruções de como usar a ferramenta… Intro importancia da prototipacao… product managemetn… product decelopmetn…

Logistica Captação

Captacao (neste momento tem email - gestão pelo icti para garantir confiabilidade?)

• Gerar o link dinamico - listas - cara de ux neste momento ja distribui exatamente onde o cara cai em termos de turma Tem um porem - Se for escolha por dia, muda - tipo,
• Gerar links por tipo de perfil - cara de ux, cara de ? (Checar com o ICTI se eles conseguem, ou pelo menos classificar depois)
  • Fallback - Ele seleciona no inicio
• Ou pelo link, ou pelo questionario inicial, abre uma pagina com as opções disponiveis, tipo, seg, e qua, 18hrs. Aqui leva em consideração a disponibilibidade
• Ele confirma e atualiza o inventario
• Ele pode voltar e atuallizar
• Gera um convite no calendario dele com orientacoes (cancelar, como entra,… )

Google forms resolveria isto?

Distribuição Aleatoria

• ICTI passa uma lista de ids, dia e horario selecionado, com uma coluna de link vazia (CSV)
• A rotina distribui as pessoas dentro dos grupos e gera um link
• Retornamos o csv com o link

Envio do email no dia

• ICTI passa uma lista de ids, dia e horario selecionado, com uma coluna de link vazia (CSV)

Contamos com você! Enviar o convite atualizado tb?

Prevencao - Detectar se o link foi usado em mais de uma maquina, por exemplo ou simultaneramente, participou.

Link precisa ser associado ao dia - Se entrou antes, nao funciona. Consegue entrar 5min antes.

Atrasado, o que acontece? Principalmente no setup de duplas.

Workshop Runner

Importante colocar uma gordura no tempo de execução - por causa da dupla.

Login (link mesmo, forcar o cara a digital usuario e senha da na mesma?)

Video Intro - Boas Vindas (video-intro)

1 video para cada setup Intro importancia da prototipacao… product managemetn… product decelopmetn…

Aguardando sua formação (waiting-formation)

Tela que fica esperando

Treinamento da ferramenta (training)

Istruções de como usar a ferramenta… Acklonedgw entendeu e se sente apto para seguir adiante

Video - O Desafio (video-challenge)

Video do desafio…

Slides finais para confirmar (slides-confirmation)

Worshop Run (workshop)

Na sala do teams ja esta tudo pronto, compartilhas o tela (Ou seria zoom) .. paea que a geavacao pegue, mas todos xonseguem interagir com a ferramenta.. ai eles podem usar a ferramenta…

Variacao 1 → Somente surfly Variacao 2 → Sala do Teams

Worshop Eval

• Survey

Worshop Pitch

Variacao 2 → Sala do Teams

Final Eval

Workshop Support Tool

Rough Idea? Napkin notes Como sera dado o apoio?

• Painel Integrado - Ver o status de cada sala, movimento
• Chat online e WhatsApp caso não funcione?

Divisao por atendente - Pagina - Eu fico com a pagina 1, o outro com a 2, .. assim não precisa ter mais um cadastro, mais uma definição.

Contexto: Aplicação para ajudar a dar suporte a usuarios durante a uma sessão de workshop interativa com multiplos breakout rooms. Haverão cerca de 50 pessoas simultaneamento, em combiações diferentes de sala, algumas sozinhas, algumas em dupla, com uso de ferramentas distinta.

Objetivo da Aplicação: Aplicação para ajudar a dar suporte a usuarios durante a uma sessão de workshop interativa.

A ideia é que aplicação seja utilizada pela equipe que dará suporte durante a execução do workshop, oferecendo:

• Um Painel Integrado - Ver o status de cada sala e usuario, se estão interagindo ou não, estão com duvida
• Contador de tempo, a partir do horario definido para inicio
• Chat online - que pode ser proativo, isto é, a pessoa vê que não está havendo movimentação na sala - ou reativo - uma pessoa pode pedir ajuda
• Envio de mensagens globais - exemplo, tempo acabando,

Especificação:

• Listar os workshops cadastrados com filtro por data, e data atual como default
• Detalhe do Workshop
  • Campo para definir a distribuição dos atendentes - pessoas por atendente e numero
  • Visualização em lista, que pode ser intercambiada entre:
    • Listar as salas do workshop
    • Listar os usuarios previstos para o workshop
  • Cada item da lista, tem uma caixa com o seu status atual e se tem mensagem
    • Quais são os status? R2D2
    • Detalhar melhor o status - Não entrou, entrou,..
    • Botão para iniciar uma conversa de chat, que apresentará se existem mensagens não respondidas
• Icone - Notificacoes - Para avisar que existe alguma mensagem não respondida

Workshop Admin

Contexto: Construção de um Gerenciador de workshops interativos com multiplos breakout rooms.

Objetivo da Aplicação: Aplicação administrativo deste gerenciador de workshops interativos com multiplos breakout rooms.

Spec: Criacao de uma tela administrativas:

• Cadastro de usuarios da ferramenta com role- Login via LinkedIn?
• Administração de workshops
  • Criar um workshop data inicio, data fim
  • Carregar a lista de participantes (ID, Role)
  • Iniciar a execução do workshop (Workshop Started)
  • Mudar o status do workshop (Workshop Started)
  • Encerrar execução do workshop (Workshop Started)
• Carregar pessoas no workshop

Arquitetura

Plataforms

https://www.mux.com/

Firebase Realtime DB

/workshop-id/user-id/

• workshop-id - ligado a entrada do workshop (ex. workshop dia x, tipo x)
  • coHorts
    • coHortId
    • coHortIdWebFuseUrl
    • coHortUsers
      • id
      • Name
• user-id - usuario dinamico criado pelo firebase - tabela
• detalhes:
  • coHort
  • action
    • actionName
  • status
    • page
    • startTime
  • statusHistory
    • page
    • startTime

Firebase Analytics

firebaseAnayltics vs custom logging - https://gemini.google.com/app/745f0c2b017e0540 - decision - realtime logging will be in realtime database, and after action review logging in BigQuery.

Firebase

dev-aiproto-studio qa-aiproto-studio aiproto-studio

Nomes

aiproto.studio https://gemini.google.com/app/e273c4be26984304

Tabela Comparativa para Decisão

Nome	Conceito Principal	Público-Alvo
Velo	Velocidade/Agilidade	Desenvolvedores e PMs
ProtoGen	IA Generativa	Designers e Criativos
Synapse	Inteligência/Conexão	Enterprise e Tech Heavy
Fluxia	Fluidez de Processo	Usuários No-code
https://gemini.google.com/app/e5215dc74208f6f0

https://gemini.google.com/app/11e17d421ab3fb8a