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   , ampiasaina hanondroana raha misy feo mandeha. TheOpenPresenter  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   . Afaka manambatra ny soatoavina eo amin'ny plugins isika, ary raha marina ny saina dia afaka mampiseho ny kisary. isPlaying  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   tsotra aza ny plugins sasany, ny sasany kosa mety mila zavatra sarotra kokoa hanehoana ny sata milalao azy. isPlaying  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   . Koa raha mila fanjakana hafa isika dia afaka manampy azy eto. Toy izao ny mety ho endriky ny plugin: SceneState   // 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:  Ny Remote - izay ahitana ity mari-pamantarana feo ity  The Renderer - milalao ny feo  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:  Mamorona ny plugin API  Omeo ity data ity amin'ny frontend  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   izahay izay mahatonga ny fanitarana ny tetika GraphQL ho tsotra. Azontsika atao ihany koa ny manao famandrihana amin'ny alalan'ny fampidirana   amin'ny skema GraphQL. Hijery lohahevitra iray izy io ary hanavao ny sanda isaky ny miantso   momba an'io lohahevitra io. Ohatra: Postgraphile @pgSubscription pg_notify   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   rehefa mila izany isika. pg_notify  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   . Afaka mampiasa mivantana an'io sanda io izy ireo, na afaka mitazona izany mifanaraka amin'ny fananany efa misy toy izao: __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")); }, ); };  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   dia nanampy andalana vaovao 289 raha ny   dia nanampy tsipika vaovao 32. fampiharana voalohany fampiharana faharoa   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,   . Ary angamba manoratra lahatsoratra bilaogy mba hahazoanao zavatra avy amin'izany! aza tia ny kaodinao ary aza matahotra ny hanary azy  Raha mamaky hatramin'izao ianao dia mety te hanandrana   ! Izy io dia rafitra fanolorana loharano misokatra izay ahafahanao mifehy ny efijerinao avy lavitra. TheOpenPresenter  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

2022 - HackerNoon Contributor of the Year - Developer

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

Ity horonam-peo ity dia novokarina tamin'ny fiteny niandohan'ny tantara!

Lava loatra; Mamaky

Make resilience your competitive advantage

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

About Author

COMMENTS

HANG TAGS

ITY ARTICLE ITY NO NARESAKA TAMIN'NY

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps