Ndakafarira Code Yangu, Ndokuzoiuraya

Ndangobvisa mazana emitsara yekodhi yandakanyora nezuro uye ndikaitsiva nemitsara makumi matatu nemaviri yekodhi nyowani. Iyi yaive yechinhu cheTheOpenPresenter , yaishandiswa kuratidza kana odhiyo iri kutamba.

Nguva zhinji, ini ndaishanda pane mashandiro anoita seakatwasuka kuita. Mune ino kesi, ini ndaingoda kuratidza iyi icon kana odhiyo iri kutamba.

Nyore zvakakwana. Imwe neimwe yeiyi chiitiko chine akawanda plugins. Imwe neimwe plugin ine yayo pfuma senge isPlaying . Tinogona kubatanidza kukosha pakati pemapulagi, uye kana mureza uri wechokwadi, tinogona kuratidza chiratidzo.

Architecting mhinduro

Nyaya huru ndeye nzira yekuwana iyi data. Munoona, isu taigona kuwana iyo data zvakananga. Asi imwe neimwe plugin inogona kuve neyayo schema. Nepo mamwe maplugins angave ane iri nyore isPlaying pfuma, mamwe mamwe angangoda chimwe chinhu chakaomarara kumiririra chimiro chayo chekutamba.

Zviri nyore, wadii kubvumidza iyo plugin kunyoresa callback / basa rinodzosa nyika?

Iyi ndiyo nzira imwechete iyo TheOpenPresenter inoshandisa kune akawanda emapulagi ayo. Uye tichiri pazviri, tinogona kuzvibvisa muchinhu cheSceneState . Saka kana tikazomboda imwe nyika, tinogona kuiwedzera pano. Heano maitiro angaite senge plugin:

 // The pattern we use for plugins serverPluginApi.onPluginDataCreated(pluginName, onPluginDataCreated); serverPluginApi.onPluginDataLoaded(pluginName, onPluginDataLoaded); serverPluginApi.registerRemoteViewWebComponent( pluginName, remoteWebComponentTag, ); // Example of how the new API might look like serverPluginApi.registerSceneState( pluginName, (_, rendererData) => { return { audioIsPlaying: !!rendererData.find((x) => x.isPlaying), } }, );

Server kubata

Ziva kuti kodhi iri pamusoro inobatwa pane server. Izvi zvinodaro nekuti TheOpenPresenter ine zvikamu zvitatu zvakasiyana:

1. Iyo Remote - panoratidzwa ichi chiratidzo

2. Renderer - inoridza odhiyo

3. Sevha - inobatanidza maviri

   
   

Zvakanaka, isu tinofanirwa kubata izvi kumberi (kure) kuitira kuti tisawedzere mamwe mutoro kune server. Zvisinei, kunyoresa basa iri kunogona kukanganisa. Yedu yekumberi inoshandisa micro-frontend architecture yakatakura zvinhu zveWebhu.

Nzvimbo dzvuku pazasi ndeye React shell. Nzvimbo yakasvibira inotakurwa kuburikidza newebhu zvikamu uye inotungamirwa nechero plugin.

Ziva kuti iyoodhiyo icon iri kuruboshwe rwegoko. Isu tinopa sei basa ratinoda kune goko? Isu tinogona kusanganisira basa reJS muwebhu chikamu bundle asi izvo zvinonzwika senge bongozozo munguva refu.

Kubata izvi pane server kunoita senzira chaiyo yekuita izvi.

Kupinza data kuburikidza

Nezvo zvasarudzwa, inguva yekushandiswa. Pane zvinhu zvishoma zvekuita:

1. Gadzira iyo plugin API
2. Ipa iyi data kune yekumberi
3. Kushandisa uye kugadzirisa UI

Implementing

Ini handisi kuzokufinha nemadetails saka heino mhedziso. Iyo API yanga isiri yakatwasuka nekuti data redu rinogona kuvhiringa. Muchidimbu: Chiitiko chinogona kuva nemapulagi akawanda. Uye panogona kuve nevazhinji vanopa, mumwe nemumwe achiona chiitiko nenzira yakasiyana. Saka plugin inogona kuva nevazhinji vanoiratidza vachiiratidza nenzira dzakasiyana. Asi nekamwe data manipulation, dambudziko rakagadziriswa.

Kushandisa uye kugadzirisa UI

Kushandisa kukosha kwaive kwakatwasuka. Ndakafunga kushandisa Yjs's awareness protocol kuti ndipe iyo data sezvo iri chaiyo-nguva uye hurongwa hwatove panzvimbo. Aya ndiwo machengeterwo ehurumende. Nekudaro, kusanganisira iyi data kubva kune server idambudziko rayo. Saka ndakafunga kushandisa GraphQL pachinzvimbo - iyo protocol yatiri kushandisa kune zvese zvimwe zviri papuratifomu.

Saka zvese zvatinofanira kuita kufonera iyo yekupedzisira, kuiteerera uchishandisa GraphQL's kunyoreswa, uye kuratidza chiratidzo sezvinodiwa. Ndapedza.

Kupa iyi data kune kumberi

Nechemumoyo, isu tinoshandisa Postgraphile inoita kuwedzera iyo GraphQL schema yakatwasuka. Isu tinogona zvakare kuzviita kunyorera nekuwedzera @pgSubscription kune GraphQL schema. Inobva yaona dingindira uye nekugadzirisa kukosha kwese patinofonera pg_notify pane iyo nyaya. Semuyenzaniso:

 await pgPool.query( `select pg_notify('graphql:sceneState:${id}','{}');`, [], );

Kubata data kwaishungurudza asi kungoita moyo murefu uye zvaitwa!

Chikamu chekupedzisira chepuzzle chiri kufona pg_notify patinenge tichida.

Kune izvi, isu tinogona kuwedzera muteereri kune iyo nyika (Yjs) uye kufonera iyo ziviso pese painochinja:

 state.observeDeep(async () => { // Call pg_notify here });

Chinhu chasara kuita kuvandudzwa kwekuita. Parizvino, basa racho rinodaidzwa kushanduko diki yega yega, inogadziridzwawo kumberi. Isu tinogona kuverenga iyo inokonzeresa mamiriro uye kuenzanisa kana chero chinhu chachinja tisati tasundira iyo update.

Zvirinani mhinduro

Zvino mhinduro iyi inoshanda zvechokwadi. Asi ndakavenga kuti taiteerera kuchinja kwega kwega. Izvo hazvina basa uye handina chokwadi chekuti kuita kwacho kuchakwira sei. Pane imwe mhinduro iri nani here?

Saka ndakadzokera kumashure kwechipiri uye imwe pfungwa yakauya: Ko isu tiende kune izvo zvekutanga toshandisa iyo data kubva kuYjs?

Dambudziko raive rekuti plugin yega yega inogona kushandisa nzira dzakasiyana kuratidza mamiriro ekutamba. Saka taida nzira yekuziva maverengero azvinoita isu pachedu. Asi pane kurega mushandisi achipfuura basa, wadii kuchengetera nzvimbo yavanogona kushandisa kuratidza izvi?

Pane kupfuudza basa rekuverenga mamiriro, plugin yega yega inogona kuseta iyo yakachengetwa yakananga padivi pe data rayo iripo ine zvivakwa zvakaita se __audioIsPlaying . Vaigona kushandisa kukosha uku zvakananga, kana kuti vaigona kuichengeta ichienderana nezvivakwa zvavo zviripo sekudaro:

 const onRendererDataLoaded = ( rendererData, ) => { watchYjs( // Watch the isPlaying property (x) => x.isPlaying, () => { // And if it changes, sync the __audioIsPlaying property rendererData.set("__audioIsPlaying", rendererData.get("isPlaying")); }, ); };

Kudzima kodhi yekare

Nzira itsva inopenya. Hapana wekuwedzera muteereri, hapana yekuwedzera API, ingori nyore yakachengetwa pfuma.

Mutengo wacho? Zvakanaka, ini ndakatonyora makumi mapfumbamwe neshanu muzana ekutanga kuita 🫣

“Zvichave zvinonyadzisa kuti ndidzime izvi ini ndashanda nazvo kwenguva yakareba. Zvimwe zvese zvakakwana kunze kwechinhu chimwe chete ichi! " - Pfungwa dzangu

Aka hakasi kekutanga. Kwete yechipiri kana yechitatu zvakare. Apa aingova maawa mashoma ebasa. Iyo inotora nguva yakareba kuti iite, zvinonyanya kuoma kurega. Asi kana isu tisingafanirwe kunamatira kumaseva, isu hatifanirwe kubatanidzwa kune kodhi yatinonyora kana.

Zviri pachena kuti kushandiswa kwechipiri kuri nani. Inokurumidza, isinganyanyi kufamba zvikamu, shoma API pamusoro, uye shoma kodhi yekuchengeta. Kuitwa kwekutanga kwakawedzera mitsara mitsva mazana maviri nemakumi masere nepfumbamwe ukuwo kuita kwechipiri kwakangowedzera mitsara mitsva makumi matatu nemaviri.

Ndechipi chidzidzo chekudzidza ipapo?

Zvakanaka, pamwe tsvaga mhinduro yakapusa kutanga. Asi dzimwe nguva hatisi kuwana mhinduro yakanaka nekungofunga nezvazvo. Kana zviri izvo, usade kodhi yako uye usatya kuirasa . Uye pamwe nyora blog post kuitira kuti uwane chimwe chinhu kubva mairi!

Kana iwe ukaverenga kusvika apa, ungada kuedza TheOpenPresenter ! Iyo yakavhurika-sosi mharidzo sisitimu iyo inokutendera iwe kudzora chero yako skrini uri kure.

Ratidza masiraidhi, tamba mavhidhiyo, shandisa semadhibhodhi uye zvimwe zvakawanda. Iyo software ichiri yekutanga mukusimudzira sezvaunga taurira kubva pane ino positi asi yakagadzikana zvakakwana kuti ushandise nguva dzose. Ini pachangu ndinoishandisa kumisangano yangu svondo rega rega.

Chero mibvunzo, bvunza. Kana kuti inzwa wakasununguka kutaura nyaya muGithub repo .