Raiki-pitia tamin'ny Code-ko aho, dia voatery namono an'ilay izy

Vao avy nofafako andalana an-jatony ny kaody nosoratako omaly ary nosoloiko andalana 32 kaody vaovao. Ity dia natao ho an'ny endri-javatra ho an'ny TheOpenPresenter , ampiasaina hanondroana raha misy feo mandeha.

Matetika aho no miasa amin'ny fampiasa iray izay toa tsotra ny fampiharana. Amin'ity tranga ity, mila mampiseho an'io kisary io fotsiny aho rehefa mandeha ny feo.

Tsotra ampy. Ny tsirairay amin'ireo dia sehatra misy plugins marobe. Ny plugin tsirairay dia manana ny fananany manokana toy isPlaying . Afaka manambatra ny soatoavina eo amin'ny plugins isika, ary raha marina ny saina dia afaka mampiseho ny kisary.

Architecting vahaolana

Ny olana lehibe dia ny fomba hidirana amin'ity data ity. Hitanareo, afaka miditra mivantana amin'ny angona izahay. Saingy ny plugin tsirairay dia afaka manana ny schema manokana. Na dia mety manana fananana isPlaying tsotra aza ny plugins sasany, ny sasany kosa mety mila zavatra sarotra kokoa hanehoana ny sata milalao azy.

Tsotra, maninona raha mamela ny plugin hisoratra anarana callback/function izay mamerina ny fanjakana?

Io no modely ampiasain'ny TheOpenPresenter amin'ny ankamaroan'ny plugins. Ary na dia eo aza izany, dia azontsika atao ny manaisotra azy ho zavatra SceneState . Koa raha mila fanjakana hafa isika dia afaka manampy azy eto. Toy izao ny mety ho endriky ny 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), } }, );

Fikarakarana ny mpizara

Mariho fa ny kaody etsy ambony dia raisina amin'ny mpizara. Izany dia satria TheOpenPresenter dia ahitana singa 3 misaraka:

1. Ny Remote - izay ahitana ity mari-pamantarana feo ity

2. The Renderer - milalao ny feo

3. Ny Server - mampifandray ny roa

   
   

Raha ny tokony ho izy, dia tokony handamina izany eo amin'ny frontend (lavitra) isika mba tsy hampiditra entana fanampiny amin'ny mpizara. Na izany aza, ny fisoratana anarana ity asa ity dia mety ho korontana. Mampiasa maritrano micro-frontend feno singa amin'ny Internet ny frontend anay.

Ny faritra mena etsy ambany dia akorandriaka React. Ny faritra maitso dia entina amin'ny alàlan'ny singa web ary tantanin'ny plugin tsirairay.

Mariho fa eo amin'ny ilany havia amin'ny akorandriaka no misy ny kisary audio. Ahoana no hanomezana ny asa ilaintsika amin'ny shell? Azontsika atao ny mampiditra asa JS ao amin'ny fehezam-boninkazo amin'ny Internet saingy toa korontana izany ao anatin'ny fotoana maharitra.

Ny fitantanana izany amin'ny mpizara dia toa ny fomba mety hanaovana izany.

Famoahana ny angon-drakitra amin'ny alàlan'ny

Miaraka amin'izany fanapahan-kevitra izany, tonga ny fotoana hanatanterahana izany. Misy zavatra vitsivitsy tokony hatao:

1. Mamorona ny plugin API
2. Omeo ity data ity amin'ny frontend
3. Manjifa sy manavao ny UI

fampiharana

Tsy hankaleo anao amin'ny antsipiriany aho ka indro misy topimaso. Ny API dia tsy dia tsotra satria ny angon-drakitray dia mety manakorontana. Raha fintinina: Mety misy plugins maromaro ny sehatra iray. Ary mety misy mpamadika maro, samy mijery sehatra iray amin'ny fomba hafa. Noho izany ny plugin iray dia mety manana mpandefa maromaro mampiseho azy amin'ny fomba samihafa. Saingy miaraka amin'ny fanodinkodinana data kely dia voavaha ny olana.

Manjifa sy manavao ny UI

Ny fandaniana ny sandany dia tsotra. Nieritreritra ny hampiasa ny protocole fahatsiarovan-tena an'i Yjs aho mba hanomezana ny angon-drakitra satria amin'ny fotoana tena izy io ary efa misy ny rafitra. Izany no fomba fitahirizana ny fanjakana. Na izany aza, ny fampidirana ity data avy amin'ny mpizara ity dia ny olan'izy ireo manokana. Noho izany dia nanapa-kevitra aho fa hampiasa GraphQL ho solon'izay - ny protocola ampiasainay amin'ny zavatra hafa rehetra ao amin'ny lampihazo.

Ka ny hany tokony hataontsika dia miantso ny teboka farany, mihaino azy amin'ny fampiasana ny famandrihana GraphQL, ary asehoy ny kisary raha ilaina. vita.

Manome ity data ity amin'ny frontend

Soa ihany fa mampiasa Postgraphile izahay izay mahatonga ny fanitarana ny tetika GraphQL ho tsotra. Azontsika atao ihany koa ny manao famandrihana amin'ny alalan'ny fampidirana @pgSubscription amin'ny skema GraphQL. Hijery lohahevitra iray izy io ary hanavao ny sanda isaky ny miantso pg_notify momba an'io lohahevitra io. Ohatra:

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

Ny fanodinkodinana ny angon-drakitra dia mahasosotra fa ny faharetana kely dia vita!

Ny ampahany farany amin'ny piozila dia miantso pg_notify rehefa mila izany isika.

Noho izany dia afaka manampy mpihaino ny fanjakana (Yjs) izahay ary miantso ny fampahafantarana isaky ny misy fiovana:

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

Ny hany sisa azo atao dia ny fanatsarana ny fampisehoana. Amin'izao fotoana izao, ny fiasa dia antsoina ho an'ny fiovana kely rehetra, havaozina amin'ny frontend ihany koa. Afaka manao kajy ny toetry ny vokatra isika ary mampitaha raha misy fiovana alohan'ny hanosehana ny fanavaozana.

Vahaolana tsara kokoa

Ankehitriny ity vahaolana ity dia azo antoka fa miasa. Tsy tiako anefa ny nihaino ny fiovana rehetra. Tsy ilaina izany ary tsy azoko antoka hoe ahoana no hampitombo ny fampisehoana. Misy vahaolana tsara kokoa ve?

Dia nihemotra kely aho ary tonga ny hevitra hoe: Ahoana raha mandeha any amin'ny fototra sy mampiasa ny angona avy amin'ny Yjs?

Ny olana dia ny plugin tsirairay dia mety mampiasa fomba samihafa hanondroana ny satan'ny lalao. Noho izany dia nila fomba ahafantarana ny fomba kajy ny fanjakana ateraky ny tenanay. Fa toy izay mamela ny mpampiasa handalo asa iray, maninona raha mitahiry fananana azony ampiasaina hanondroana izany?

Raha tokony handalo asa kajy ny fanjakana, ny plugin tsirairay dia afaka mametraka mivantana ny fanjakana voatokana miaraka amin'ny angona misy azy miaraka amin'ny fananana toy ny __audioIsPlaying . Afaka mampiasa mivantana an'io sanda io izy ireo, na afaka mitazona izany mifanaraka amin'ny fananany efa misy toy izao:

 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")); }, ); };

Famafana ny kaody taloha

Ny fomba vaovao dia mamirapiratra. Tsy misy mpihaino fanampiny, tsy misy API fanampiny, fananana tsotra voatokana fotsiny.

Ny vidiny? Eny, efa nanoratra ny 95% amin'ny fampiharana voalohany 🫣 aho

“Tena mahamenatra ny mamafa an'io rehefa niasa ela be aho. Ny zavatra hafa rehetra dia tonga lafatra afa-tsy ity zavatra iray ity!” - Ny saiko

Tsy sambany aho izao. Tsy faharoa na fahatelo koa. Ora vitsy monja no niasa tamin'ity indray mitoraka ity. Arakaraky ny ela ny fampiharana no sarotra kokoa ny mamela azy. Fa raha tsy tokony hifikitra amin'ny mpizara isika dia tsy tokony hifikitra amin'ny kaody soratanay koa.

Hita fa tsara kokoa ny fampiharana faharoa. Haingana kokoa izy io, kojakoja tsy mihetsika, tsy dia misy API loatra, ary kaody kely kokoa hokarakaraina. Ny fampiharana voalohany dia nanampy andalana vaovao 289 raha ny fampiharana faharoa dia nanampy tsipika vaovao 32.

Inona no lesona azo tsoahina avy eo?

Eny ary, tadiavo aloha ny vahaolana tsotra indrindra. Saingy indraindray isika dia tsy mahatratra ny vahaolana tsara indrindra amin'ny fieritreretana azy fotsiny. Raha izany no izy, aza tia ny kaodinao ary aza matahotra ny hanary azy . Ary angamba manoratra lahatsoratra bilaogy mba hahazoanao zavatra avy amin'izany!

Raha mamaky hatramin'izao ianao dia mety te hanandrana TheOpenPresenter ! Izy io dia rafitra fanolorana loharano misokatra izay ahafahanao mifehy ny efijerinao avy lavitra.

Asehoy ny sary mihetsika, milalao horonan-tsary, ampiasao ho dashboard sy ny maro hafa. Ny logiciel dia mbola vao manomboka amin'ny fivoarana araka ny azonao lazaina amin'ity lahatsoratra ity saingy azo antoka fa azo ampiasaina tsy tapaka. Izaho manokana dia mampiasa azy io amin'ny fihaonako isan-kerinandro.

Raha misy fanontaniana dia apetraho. Na aza misalasala mitatitra olana ao amin'ny repo Github .