{"id":216,"date":"2020-02-09T10:37:00","date_gmt":"2020-02-09T10:37:00","guid":{"rendered":"http:\/\/szatan.it\/?p=216"},"modified":"2023-01-09T10:51:44","modified_gmt":"2023-01-09T10:51:44","slug":"tworzenie-prostego-pluginu-do-vcloud-director-10","status":"publish","type":"post","link":"https:\/\/szatan.it\/index.php\/2020\/02\/09\/tworzenie-prostego-pluginu-do-vcloud-director-10\/","title":{"rendered":"TWORZENIE PROSTEGO PLUGINU DO VCLOUD DIRECTOR 10"},"content":{"rendered":"\n

Zdarza si\u0119, \u017ce w ramach naszego \u015brodowiska potrzebujemy spersonalizowanych rozwi\u0105za\u0144. Cz\u0119sto potrzebujemy funkcjonalno\u015bci prostej, ale niedost\u0119pnej w upo\u015bledzonych produktach. Mo\u017cemy tworzy\u0107 wirtualne datacenter, zarz\u0105dza\u0107 sieci\u0105, maszynami wirtualnymi, storage, ale nie mo\u017cemy doda\u0107 w\u0142asnej strony np. z dokumentacj\u0105 czy tutorialami i to jednym klikni\u0119ciem. Tak te\u017c jest w przypadku vCloud Director 10. Aby nasza strona pojawi\u0142a si\u0119 w burger menu, czyli tam gdzie najcz\u0119\u015bciej klika u\u017cytkownik, musimy utworzy\u0107 plugin. Oczywi\u015bcie tego typu plugin mo\u017ce robi\u0107 znacznie wi\u0119cej ni\u017c wy\u015bwietla\u0107 filmik z Youtuba, ale jak widzimy banalna sprawa, a tyle komplikacji.<\/p>\n\n\n\n

Potrzebujemy kilka element\u00f3w, aby taki prosty plugin przygotowa\u0107. Wymagane jest \u015brodowisko linux lub inne z zainstalowanymi pakietami npm, nodejs, git i yarp (poni\u017cej przyk\u0142ad w systemie Debian 10). Wybra\u0142em ten system ze wzgl\u0119du na szybk\u0105 instalacj\u0119. Samo przygotowanie pluginu wykona\u0142em w 6 krokach. No to zaczynajmy.<\/p>\n\n\n\n

1. W tym kroku instalujemy  niezb\u0119dne pakiety. Opr\u00f3cz git, kt\u00f3ry pobierze nam szablon, potrzebujemy samego npm do kompilacji oraz yarp i nodejs. Te dwa ostanie pakiety dostarczaj\u0105 nam dodatkowe pakiety wymagane do kompilacji. Poni\u017cej instalacja pakiet\u00f3w w systemie Debian 10. <\/p>\n\n\n\n

apt-get install npm nodejs yarp git <\/code><\/pre>\n\n\n\n
2. Potrzebujemy szablonu, kt\u00f3ry jest udost\u0119pniony na github.com. Szablon jest niewielki, wi\u0119c z pobraniem nie powinno by\u0107 problemu.  <\/p>\n\n\n\n
git clone -b plugin-seed-9.1 --single-branch https:\/\/github.com\/vmware-samples\/vcd-ext-samples.git<\/code><\/pre>\n\n\n\n
3. Po pobraniu szablonu zostanie utworzony katalog vcd-ext-samples. Zmiany wizualne dodatku wprowadzamy w plikach:<\/p>\n\n\n\n
\u2022\tsimple.component.html\n\u2022\tsimple.component.scss<\/code><\/pre>\n\n\n\n
znajduj\u0105ce si\u0119 w katalogu vcd-ext-samples\/src\/main\/simple. Opr\u00f3cz tych plik\u00f3w mo\u017cemy doda\u0107 inne i je zagnie\u017adzi\u0107. Oczywi\u015bcie nazwy plik\u00f3w mo\u017cemy zmieni\u0107, ale musimy pami\u0119ta\u0107 o zmianach nazw w innych plikach. Wspierany jest html oraz zmienne, kt\u00f3re np. b\u0119d\u0105 wy\u015bwietla\u0107 aktualnie zalogowanego u\u017cytkownika vCD. Poni\u017cej przyk\u0142adowy plik:<\/p>\n\n\n\n
<div>\n  <p><i>Logged into {{tenant | async}} as {{username | async}}<\/i><\/p>\n  <h1>{{\"tos.title\" | translate}}<\/h1>\n  <p>{{\"tos.1\" | translate}}<\/p>\n  <p>{{\"tos.2\" | translate}}<\/p>\n  <img src=\"{{assetUrl}}\/monkey.jpg\" alt=\"Thoughtful Primate\">\n   <iframe src=\"https:\/\/18.197.198.214blog\"><\/iframe>\n<\/div>\n<\/code><\/pre>\n\n\n\n
W katalogu vcd-ext-samples\/src\/main\/public znajduj\u0105 si\u0119 pozosta\u0142e elementy typu zdj\u0119cia naszej ma\u0142pki oraz tekst, jaki ma by\u0107 na stronie. Jak widzimy mo\u017cliwo\u015bci mamy sporo.<\/p>\n\n\n\n
Mamy tam te\u017c plik manifest.json. Plik ten pozwala autorowi wtyczki zdefiniowa\u0107 metadane dotycz\u0105ce wtyczki, kt\u00f3re b\u0119d\u0105 identyfikowa\u0107 wtyczk\u0119 w panelu administratora vCloud Director. Poni\u017cej przyk\u0142ad pliku wraz z opisem.<\/p>\n\n\n\n
{\n    \"urn\": \"vmware:vcloud:plugin:seed\",\n    \"name\": \"Inleo Blog\",\n    \"containerVersion\": \"9.1.0\",\n    \"version\": \"1.0.0\",\n    \"scope\": [\"service-provider\", \"tenant\"],\n    \"permissions\": [],\n    \"description\": \"Przyk\u0142adowy plugin\",\n    \"vendor\": \"Inleo\",\n    \"license\": \"Copyright (C) VMware 2017-2018.  All rights reserved.\",\n    \"link\": \"http:\/\/18.197.198.214\/blog\",\n    \"module\": \"SimplePluginModule\",\n    \"route\": \"plugin\"\n}\n<\/code><\/pre>\n\n\n\n
Pole<\/strong><\/td>Opis<\/strong><\/td><\/tr>
urn<\/strong><\/td>Unikatowy identyfikator URN<\/td><\/tr>
name<\/strong><\/td>Nazwa pluginu<\/td><\/tr>
description<\/strong><\/td>Opis pluginu<\/td><\/tr>
vendor<\/strong><\/td>Producent pluginu<\/td><\/tr>
license<\/strong><\/td>Informacje na temat licencji<\/td><\/tr>
link<\/strong><\/td>URL do pomocy technicznej<\/td><\/tr>
containerVersion<\/strong><\/td>Wersja vCD potrzebna do instalacji dodatku<\/td><\/tr>
scope<\/strong><\/td>Wska\u017anik vCD, kt\u00f3re portale maj\u0105 wykorzysta\u0107 t\u0119 wtyczk\u0119 (warto\u015bci: [\u201etenant\u201d | \u201eservice-provider\u201d])<\/td><\/tr>
module<\/strong><\/td>Nazwa g\u0142\u00f3wnego eksportowanego modu\u0142u, kt\u00f3ry ma by\u0107 dynamicznie \u0142adowany przez vCD<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
4. Aby skompilowa\u0107 dodatek nale\u017cy przej\u015b\u0107 do katalogu g\u0142\u00f3wnego np. vcd-ext-samples oraz wykona\u0107 polecenia:<\/p>\n\n\n\n
npm ci \u2013 wykonuje instalacje zale\u017cno\u015bci dla projektu\nnpm run build \u2013 kompiluje dodatek\n<\/code><\/pre>\n\n\n\n
Po poprawnym wykonaniu kompilacji powinien zosta\u0107 utworzony katalog dist z plikami\/katalogami:<\/p>\n\n\n\n
    \n
  • assets<\/li>\n\n\n\n
  • bundle.js<\/li>\n\n\n\n
  • i18n.json<\/li>\n\n\n\n
  • manifest.json<\/li>\n\n\n\n
  • plugin.zip<\/li>\n<\/ul>\n\n\n\n
    5. Po skompilowaniu instalacja wydaje si\u0119 by\u0107 ju\u017c tylko formalno\u015bci\u0105. Logujemy si\u0119 jako administrator to portalu provider\u2019a. Przechodzimy do Customize Portal 5.<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Klikamy Upload<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Po otwarciu kreatora klikamy Select Plugin File oraz wskazujemy wygenerowany plik plugin.zip z katalogu dist<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Zostanie wy\u015bwietlone podsumowanie dodatku. Przechodzimy dalej przez naci\u015bniecie NEXT<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Wybieramy w jakich tenantach ma zosta\u0107 opublikowany plugin<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Przechodzimy dalej i ko\u0144czymy dzia\u0142anie kreatora przyciskiem FINISH.<\/p>\n\n\n\n
    6. Testowanie dzia\u0142ania<\/p>\n\n\n\n
    Po poprawnej instalacji dodatek powinien pojawi\u0107 si\u0119 w menu Customize Portal oraz w burger menu<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Przechodz\u0105c do pluginu w burger menu sprawdzamy czy wszystko wy\u015bwietla nam si\u0119 poprawnie.<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Efektem ko\u0144cowym jest \u0142adnie zagnie\u017cd\u017cona strona w vCD<\/p>\n\n\n
    \n
    \"\"\/<\/figure>\n<\/div>\n\n\n
    Jak widzimy mamy spore mo\u017cliwo\u015bci tworzenia takich dodatk\u00f3w oraz publikowania ich dla konkretnych tenant\u00f3w. Dzi\u0119ki temu mo\u017cemy decydowa\u0107 kto ma dost\u0119p do jakiej\u015b zawarto\u015bci, a do jakiej nie. Samo wykonanie takiego pluginu w podstawowej wersji nie jest skomplikowane, ale czy nie mo\u017cna by\u0142o zaimplementowa\u0107 tego tak, aby zrobi\u0107 to wszystko dwoma klikni\u0119ciami myszki?<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    \u201eArtyku\u0142 zosta\u0142 opublikowany na \u0142amach bloga evoila Poland<\/em>.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"
    Zdarza si\u0119, \u017ce w ramach naszego \u015brodowiska potrzebujemy spersonalizowanych rozwi\u0105za\u0144. Cz\u0119sto potrzebujemy funkcjonalno\u015bci prostej, ale niedost\u0119pnej w upo\u015bledzonych produktach. Mo\u017cemy tworzy\u0107 wirtualne datacenter, zarz\u0105dza\u0107 sieci\u0105, maszynami wirtualnymi, storage, ale nie mo\u017cemy doda\u0107 w\u0142asnej strony np. z dokumentacj\u0105 czy tutorialami i to jednym klikni\u0119ciem. Tak te\u017c jest w przypadku vCloud Director 10. Aby nasza strona pojawi\u0142a […]<\/p>\n","protected":false},"author":1,"featured_media":221,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,36,35],"tags":[],"class_list":["post-216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-director","category-vcd","category-vmware"],"_links":{"self":[{"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":2,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions\/222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/media\/221"}],"wp:attachment":[{"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/szatan.it\/index.php\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}