[EDU-5536] Videoteca Player integration guide (#1386)

* feat: add videoteca integration guide * fix: add suggested changes * Apply suggestions from code review Co-authored-by: Mariana Bellorín Aguilera <[email protected]> * fix: apply suggestions from review * Apply suggestions from code review Co-authored-by: Mariana Bellorín Aguilera <[email protected]> * feat: add entry to guides home * Apply suggestions from code review --------- Co-authored-by: Mariana Bellorín Aguilera <[email protected]>
aziontech · Jan 16, 2025 · ba7ce58 · ba7ce58
1 parent 0566ec0
commit ba7ce58
Show file tree

Hide file tree

Showing 4 changed files with 352 additions and 3 deletions.
diff --git a/src/content/docs/en/pages/guides/index.mdx b/src/content/docs/en/pages/guides/index.mdx
@@ -222,6 +222,4 @@ permalink: /documentation/products/guides/
 - [How to install the Signed Cookies integration through Azion Marketplace](/en/documentation/products/guides/signed-cookies/)
 - [How to install the Upstash Rate Limiting integration through Azion Marketplace](/en/documentation/products/guides/upstash-rate-limiting-integration/)
 - [How to install the Upstash Waiting Room integration through Azion Marketplace](/en/documentation/products/guides/waiting-room/)
-
-
-
+- [How to install the Videoteca Player integration through Azion Marketplace](/en/documentation/products/guides/videofront-player/)
diff --git a/src/content/docs/en/pages/guides/marketplace/integrations/videoteca-player.mdx b/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/videofront-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 load videos by simply passing the `video-id` query string argument to specify the content to be displayed.
+
+---
+
+## Requirements
+
+To set up this integration, you need to provide a **Username** and an **API Token** from **Videoteca**. To obtain these credentials, you need to have an account on the [Videoteca website](https://videofront.com.br/videoteca).
+
+---
+
+## Getting the integration
+
+To install this integration provided by Azion 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. 
+:::
+
+---
+
+## 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 these 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 which the function will retrieve the videos |
+| `videoteca_token` | Yes | The token to access the Videoteca's API |
+| `custom_html` | No | Custom HTML for the page delivered by the function. It must include the tag `<!-- videoteca_iframe -->` in the HTML, as 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.
+:::
+
+8. 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/).
+3. Select the **Functions** tab.
+4. Click the **Add Function** button.
+5. Give a name to your instance.
+6. 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.
+7. In the **Args** tab, you'll pass these 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 which the function will retrieve the videos |
+| `videoteca_token` | Yes | The token to access the Videoteca's API |
+| `custom_html` | No | Custom HTML for the page delivered by the function. It must include the tag `<!-- videoteca_iframe -->` in the HTML, as 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.
+:::
+
+8. 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 the **Run Function** behavior. 
+    - 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 the **Run Function** behavior. .
+    - 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>
diff --git a/src/content/docs/pt-br/pages/guias/guides.mdx b/src/content/docs/pt-br/pages/guias/guides.mdx
@@ -222,3 +222,4 @@ permalink: /documentacao/produtos/guias/
 - [Como utilizar a integração Signed Cookies do Marketplace da Azion](/pt-br/documentacao/produtos/guias/signed-cookies/)
 - [Como utilizar a integração Upstash Rate Limiting através do Marketplace da Azion](/pt-br/documentacao/produtos/guias/upstash-rate-limiting-integration/)
 - [Como utilizar a integração Upstash Waiting Room através do Marketplace](/pt-br/documentacao/produtos/guias/waiting-room/)
+- [Como utilizar a integração Videoteca Player através do Marketplace da Azion](/pt-br/documentacao/produtos/guias/videofront-player/)
diff --git a/src/content/docs/pt-br/pages/guias/marketplace/integrations/videoteca-player.mdx b/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 Marketplace da Azion
+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/videofront-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 simplesmente passando o argumento `video-id` como uma `query string` para especificar o conteúdo a ser exibido.
+
+---
+
+## Requisitos
+
+Para configurar esta integração, você deve fornecer um **Username** e um **API Token** da **Videoteca**. Para obter essas credenciais, você precisa ter uma conta no [site da Videoteca](https://videofront.com.br/videoteca).
+
+---
+
+## Obtenha a integração
+
+Para instalar esta integração fornecida pelo Marketplace da Azion:
+
+<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.
+:::
+
+---
+
+## Configure a integração
+
+### Instancie a edge function
+
+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 esses 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 da qual 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 para a 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.
+:::
+
+8. 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á esses 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 da qual 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 para a 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.
+:::
+
+8. 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 o *behavior* (comportamento) **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 o *behavior* (comportamento) **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>