Ndangobvisa mazana emitsara yekodhi yandakanyora nezuro uye ndikaitsiva nemitsara makumi matatu nemaviri yekodhi nyowani. Iyi yaive yechinhu   , yaishandiswa kuratidza kana odhiyo iri kutamba. cheTheOpenPresenter  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   . Tinogona kubatanidza kukosha pakati pemapulagi, uye kana mureza uri wechokwadi, tinogona kuratidza chiratidzo. isPlaying  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   pfuma, mamwe mamwe angangoda chimwe chinhu chakaomarara kumiririra chimiro chayo chekutamba. isPlaying  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   . Saka kana tikazomboda imwe nyika, tinogona kuiwedzera pano. Heano maitiro angaite senge plugin: cheSceneState   // 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:  Iyo Remote - panoratidzwa ichi chiratidzo  Renderer - inoridza odhiyo  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:  Gadzira iyo plugin API  Ipa iyi data kune yekumberi  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   inoita kuwedzera iyo GraphQL schema yakatwasuka. Isu tinogona zvakare kuzviita kunyorera nekuwedzera   kune GraphQL schema. Inobva yaona dingindira uye nekugadzirisa kukosha kwese patinofonera   pane iyo nyaya. Semuyenzaniso: Postgraphile @pgSubscription pg_notify   await pgPool.query( `select pg_notify('graphql:sceneState:${id}','{}');`, [], );  Kubata data kwaishungurudza asi kungoita moyo murefu uye zvaitwa!  Chikamu chekupedzisira chepuzzle chiri kufona   patinenge tichida. pg_notify  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   . Vaigona kushandisa kukosha uku zvakananga, kana kuti vaigona kuichengeta ichienderana nezvivakwa zvavo zviripo sekudaro: __audioIsPlaying   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.   kwakawedzera mitsara mitsva mazana maviri nemakumi masere nepfumbamwe ukuwo   kwakangowedzera mitsara mitsva makumi matatu nemaviri. Kuitwa kwekutanga kuita kwechipiri   Ndechipi chidzidzo chekudzidza ipapo?  Zvakanaka, pamwe tsvaga mhinduro yakapusa kutanga. Asi dzimwe nguva hatisi kuwana mhinduro yakanaka nekungofunga nezvazvo. Kana zviri izvo,   . Uye pamwe nyora blog post kuitira kuti uwane chimwe chinhu kubva mairi! usade kodhi yako uye usatya kuirasa  Kana iwe ukaverenga kusvika apa, ungada kuedza   ! Iyo yakavhurika-sosi mharidzo sisitimu iyo inokutendera iwe kudzora chero yako skrini uri kure. TheOpenPresenter  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

2022 - HackerNoon Contributor of the Year - Developer

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

Odhiyo iyi inogadzirwa mumutauro wekutanga wenyaya!

Kurebesa; Kuverenga

Make resilience your competitive advantage

Ndakafarira Code Yangu, Ndokuzoiuraya

About Author

MACOMMENTS

HONGA TAGS

NYAYA IYI YAKAPIWA MUNA

Related Stories

On the Position of Large Factories

Empowering Senior Professionals: Interview with Startups of the Year 2024 Nominee, SNATIKA

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

On the Position of Large Factories

Empowering Senior Professionals: Interview with Startups of the Year 2024 Nominee, SNATIKA

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps