[EDU-5536] Videoteca Player integration guide

src/content/docs/en/pages/guides/marketplace/integrations/videoteca-player.mdx

@@ -0,0 +1,175 @@
+---
+title: How to install the Videoteca Player integration through Azion Marketplace
+description: >-
+  Videoteca Player provides a quick way to host your own Videofront's Videoteca player.
+meta_tags: 'videoteca, video player, edge computing, integration'
+namespace: docs_use_case_videoteca_player
+permalink: /documentation/products/guides/videoteca-player/
+---
+
+import Tabs from '~/components/tabs/Tabs'
+import InterfaceNote from '~/includes/snippets/InterfaceNote/en/snippet.mdx'
+
+<InterfaceNote />
+
+The **Videoteca Player** integration offers a fast and efficient solution for hosting [Videofront's Videoteca](https://videofront.com.br/videoteca) player using the iframe embedding method. With this integration, you can seamlessly load videos by simply passing a query string argument, `video-id`, to specify the content to be displayed.
+
+---
+
+## Getting the integration
+
+To install this integration provided by Azion's Marketplace, you have to:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+1. Access [Azion Console](/en/documentation/products/guides/how-to-access-azion-console/) > **Marketplace**.
+2. On the Marketplace homepage, select the integration's card.
+3. Once the integration's page opens, click the **Install** button, at the bottom-right corner of the page.
+
+You'll see a message indicating that your integration was successfully installed.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. Access [Real-Time Manager (RTM)](https://manager.azion.com/) > **Marketplace**.
+2. On the Marketplace homepage, select the integration's card.
+3. Once the integration's page opens, click the **Get It Now** button, at the bottom-right corner of the page.
+
+You'll see a message indicating that your integration was successfully installed.
+</Fragment>
+
+</Tabs>
+
+:::tip
+You can search any integration by browsing through the cards, using the filters, or typing a keyword in the search bar. 
+:::
+
+---
+
+## Getting the keys
+
+To configure this integration, you have to provide a **Videoteca** Username and API Token. To get these credentials, you must have an account at the [Videoteca site](https://videofront.com.br/videoteca).
+
+---
+
+## Setting up the integration
+
+### Instantiating the edge function
+
+To create an instance of the integration's function:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+
+1. On the **Products Menu**, navigate to **Build** > **Edge Application**.
+2. Select the application from the list to which you want to add the integration or [create a new edge application](/en/documentation/products/build/edge-application/first-steps/).
+3. Select the **Functions Instances** tab.
+4. Click the **+ Function Instance** button.
+5. Give a name to your instance.
+6. On the dropdown menu, select the *Videoteca Player* function.
+  - This action will load the **Arguments** tab, where you can add the parameters to execute your application.
+7. In the **Arguments** tab, pass the three parameters:
+
+
+```json
+{
+"videoteca_user": "<your_username>", // Replace with your Videoteca username
+"videoteca_token": "<your_token>", // Replace with your Videoteca API token
+"custom_html": "<your_html>" // Replace with your custom html
+}
+```
+
+Where:
+
+| Variable | Required | Description |
+| ---- | ----- | ----- |
+| `videoteca_user` | Yes | The name of the account from where the function will retrieve the videos. |
+| `videoteca_token` | Yes | The token to access the Videoteca's API. |
+| `custom_html` | No | Custom HTML in the page delivered by the function. It must include the tag `<!-- videoteca_iframe -->` in the HTML, so the function will replace it with the actual iframe of the video. |
+
+:::tip
+You can get your token at: `https://<YOUR-USER>.videotecaead.com.br/Apidoc` replacing `<YOUR-USER>` with your actual Videoteca username.
+:::
+
+6. Click the **Save** button to save your configuration.
+
+Done. Now your Videoteca Player instance is saved.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. On the **Products Menu**, navigate to **BUILD** > **Edge Application**.
+2. Select the application from the list to which you want to add the integration or [create a new edge application](/en/documentation/products/build/edge-application/first-steps/).
+1. Select the **Functions** tab.
+2. Click the **Add Function** button.
+3. Give a name to your instance.
+4. On the dropdown menu, select the *Videoteca Player* function.
+- This action will load the function, showing a form with the function's source-code and, just above it, two tabs: **Code** and **Args**. By clicking on the **Code** tab, you'll be able to navigate through the source-code, but won't be able to change it.
+5. In the **Args** tab, you'll pass the two parameters:
+
+```json
+{
+"videoteca_user": "<your_username>", // Replace with your Videoteca username
+"videoteca_token": "<your_token>", // Replace with your Videoteca API token
+"custom_html": "<your_html>" // Replace with your custom html
+}
+```
+
+Where:
+
+| Variable | Required | Description |
+| ---- | ----- | ----- |
+| `videoteca_user` | Yes | The name of the account from where the function will retrieve the videos. |
+| `videoteca_token` | Yes | The token to access the Videoteca's API. |
+| `custom_html` | No | Custom HTML in the page delivered by the function. It must include the tag `<!-- videoteca_iframe -->` in the HTML, so the function will replace it with the actual iframe of the video. |
+
+:::tip
+You can get your token at: `https://<YOUR-USER>.videotecaead.com.br/Apidoc` replacing `<YOUR-USER>` with your actual Videoteca username.
+:::
+
+6. Click the **Save** button to save your configuration.
+
+Done. Now your Videoteca Player instance is saved.
+</Fragment>
+
+</Tabs>
+
+### Setting up the Edge Application Rules Engine
+
+To finish, you have to set up the **Rules Engine** to configure the *behavior* and the *criteria* to run the function.
+
+Still on the **Edge Application** page:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+1. Select the **Rules Engine** tab.
+2. Click the **+ Rule Engine** button.
+3. Give a name to the rule.
+4. In **Criteria**, define the conditions for running the function.
+5. Below, select a *behavior* for when the *criteria* are met. In this case, it'll be **Run Function**. 
+    - Select the adequate function according to the name you gave it in the instantiate step.
+6. Click the **Save** button.
+
+Done. Now the integration will run according to the criteria you set.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. Select the **Rules Engine** tab.
+2. Click the **New Rule** button.
+3. Give a name to the rule.
+4. In **Criteria**, define the conditions for running the function.
+5. Below, select a *behavior* for when the *criteria* are met. In this case, it'll be **Run Function**.
+    - Select the adequate function according to the name you gave it in the instantiate step.
+6. Click the **Save** button.
+
+Done. Now the integration will run according to the criteria you set.
+</Fragment>
+
+</Tabs>

src/content/docs/pt-br/pages/guias/marketplace/integrations/videoteca-player.mdx

@@ -0,0 +1,175 @@
+---
+title: Como instalar a integração Videoteca Player através do Azion Marketplace
+description: >-
+  O Videoteca Player oferece uma maneira rápida de hospedar seu próprio player Videoteca do Videofront.
+meta_tags: 'videoteca, video player, edge computing, integration'
+namespace: docs_use_case_videoteca_player
+permalink: /documentacao/produtos/guias/videoteca-player/
+---
+
+import Tabs from '~/components/tabs/Tabs'
+import InterfaceNote from '~/includes/snippets/InterfaceNote/en/snippet.mdx'
+
+<InterfaceNote />
+
+A integração **Videoteca Player** oferece uma solução rápida e eficiente para hospedar o player [Videoteca](https://videofront.com.br/videoteca) do Videofront utilizando o método de embedding iframe. Com esta integração, você pode carregar vídeos de forma contínua, simplesmente passando um argumento de tipo `query string` chamado `video-id`, para especificar o conteúdo a ser exibido.
+
+---
+
+## Obtenha a integração
+
+Para instalar esta integração fornecida pelo Marketplace da Azion, você deve:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+1. Acesse o [Azion Console](/pt-br/documentacao/produtos/guias/como-acessar-o-azion-console/) > **Marketplace**.
+2. Na homepage do Marketplace, selecione o card da integração.
+3. Quando a página da integração abrir, clique no botão **Install**, localizado no canto inferior direito.
+
+Aparecerá uma mensagem indicando que sua integração foi instalada com sucesso.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. Acesse o [Real-Time Manager (RTM)](https://manager.azion.com/) > **Marketplace**.
+2. Na homepage do Marketplace, selecione o card da integração.
+3. Quando a página da integração abrir, clique no botão **Get It Now**, localizado no canto inferior da direita.
+
+Aparecerá uma mensagem indicando que a integração foi instalada com sucesso.
+</Fragment>
+
+</Tabs>
+
+:::tip
+Você pode procurar qualquer integração navegando pelos cards, usando os filtros ou digitando uma palavra-chave na barra de busca.
+:::
+
+---
+
+## Obtenha as credenciais
+
+Para configurar esta integração, você deve fornecer um **Nome de Usuário** e um **Token de API** da **Videoteca**. Para obter essas credenciais, você precisa ter uma conta no [site da Videoteca](https://videofront.com.br/videoteca).
+
+---
+
+## Configure a integração
+
+### Instancie a edge funciton
+
+Para criar uma instância da função da integração:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+
+1. No **Products Menu**, navegue até **Build** > **Edge Application**.
+2. Selecione na lista a aplicação à qual você deseja adicionar a integração ou [crie uma nova edge application](/pt-br/documentacao/produtos/build/edge-application/primeiros-passos/).
+3. Selecione a aba **FUnction Instances**.
+4. Clique no botão **+ Function Instance**.
+5. Dê um nome à sua instância.
+6. No menu suspenso, selecione a função *Videoteca Player*.
+  - Esta ação carregará a aba **Arguments**, onde você pode adicionar os parâmetros para executar sua aplicação.
+7. Na aba **Arguments**, passe os três parâmetros:
+
+
+```json
+{
+"videoteca_user": "<seu_nome_de_usuario>", // Substitua pelo seu nome de usuário da Videoteca
+"videoteca_token": "<seu_token>", // Substitua pelo seu token da API da Videoteca
+"custom_html": "<seu_html_personalizado>" // Substitua pelo seu HTML personalizado
+}
+```
+
+Onde:
+
+| Variável | Obrigatório | Descrição |
+| ---- | ----- | ----- |
+| `videoteca_user` | Sim | O nome da conta de onde a função irá recuperar os vídeos. |
+| `videoteca_token` | Sim | O token para acessar a API da Videoteca. |
+| `custom_html` | Não | HTML personalizado na página entregue pela função. Deve incluir a tag `<!-- videoteca_iframe -->` no HTML, para que a função a substitua pelo iframe real do vídeo. |
+
+:::tip
+Você pode obter seu token em: `https://<SEU-USUÁRIO>.videotecaead.com.br/Apidoc`, substituindo `<SEU-USUÁRIO>` pelo seu nome de usuário da Videoteca.
+:::
+
+6. Clique no botão **Save** para salvar sua configuração.
+
+Pronto. Agora sua instância do Videoteca Player está salva.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. No **Products Menu**, navegue até **BUILD** > **Edge Application**.
+2. Selecione na lista a aplicação à qual você deseja adicionar a integração ou [crie uma nova edge application](/pt-br/documentacao/produtos/build/edge-application/primeiros-passos/).
+3. Selecione a aba **Functions**.
+4. Clique no botão **Add Function**.
+5. Dê um nome à sua instância.
+6. No menu suspenso, selecione a função *Videoteca Player*.
+   - Esta ação carregará a função, mostrando um formulário com o código-fonte da função e, logo acima, duas abas: **Code** e **Args**. Ao clicar na aba **Code**, você poderá navegar pelo código-fonte, mas não poderá alterá-lo.
+7. Na aba **Args**, você passará os dois parâmetros:
+
+```json
+{
+"videoteca_user": "<seu_nome_de_usuario>", // Substitua pelo seu nome de usuário da Videoteca
+"videoteca_token": "<seu_token>", // Substitua pelo seu token da API da Videoteca
+"custom_html": "<seu_html>" // Substitua pelo seu HTML personalizado
+}
+```
+
+Onde:
+
+| Variável | Obrigatório | Descrição |
+| ---- | ----- | ----- |
+| `videoteca_user` | Sim | O nome da conta de onde a função irá recuperar os vídeos. |
+| `videoteca_token` | Sim | O token para acessar a API da Videoteca. |
+| `custom_html` | Não | HTML personalizado na página entregue pela função. Deve incluir a tag `<!-- videoteca_iframe -->` no HTML, para que a função a substitua pelo iframe real do vídeo. |
+
+:::tip
+Você pode obter seu token em: `https://<SEU-USUÁRIO>.videotecaead.com.br/Apidoc`, substituindo `<SEU-USUÁRIO>` pelo seu nome de usuário da Videoteca.
+:::
+
+6. Clique no botão **Save** para salvar sua configuração.
+
+Pronto. Agora sua instância do Videoteca Player está salva.
+</Fragment>
+
+</Tabs>
+
+### Configure o Rules Engine
+
+Para finalizar, você deve configurar o **Rules Engine** para definir o *comportamento* e os *critérios* para executar a função.
+
+Ainda na página do **Edge Application**:
+
+<Tabs client:visible>
+    <Fragment slot="tab.console">Console</Fragment>
+    <Fragment slot="tab.rtm">Real-Time Manager</Fragment>
+
+<Fragment slot="panel.console">
+1. Selecione a aba **Rules Engine**.
+2. Clique no botão **+ Rule Engine**.
+3. Dê um nome à regra.
+4. Em **Criteria**, defina as condições para executar a função.
+5. Selecione um *behavior*(comportamento) para quando *criteria*(critérios) forem atendidos. Neste caso, escolha **Run Function**. 
+    - Selecione a função adequada de acordo com o nome que você deu na etapa de instanciação.
+6. Clique no botão **Save**.
+
+Pronto. Agora a integração será executada de acordo com os critérios que você definiu.
+</Fragment>
+
+<Fragment slot="panel.rtm">
+1. Selecione a aba **Rules Engine**.
+2. Clique no botão **New Rule**.
+3. Dê um nome à regra.
+4. Em **Criteria**, defina as condições para executar a função.
+5. Selecione um *behavior*(comportamento) para quando *criteria*(critérios) forem atendidos. Neste caso, escolha **Run Function**. 
+    - Selecione a função adequada de acordo com o nome que você deu na etapa de instanciação.
+6. Clique no botão **Save**.
+
+Pronto. Agora a integração será executada de acordo com os critérios que você definiu.
+</Fragment>
+
+</Tabs>