ምስ ኮደይ ኣብ ፍቕሪ ወዲቐ፡ ድሕሪኡ ክቐትሎ ግድን ኮይኑኒ።

በቃ ትማሊ ዝጸሓፍክዎም ኣማኢት መስመራት ኮድ ደምሲሰ ብ32 መስመራት ሓድሽ ኮድ ተኪአዮም። እዚ ንሓደ ባህሪ ናይ TheOpenPresenter , ድምጺ ይጻወት እንተኾይኑ ንምምልካት ዝውዕል እዩ ነይሩ።

በብእዋኑ፡ ንምትግባሩ ኣዝዩ ቀጥታዊ ዝመስል ተግባር ምሰራሕኩ። ኣብ ከምዚ ኩነታት ድምጺ ክጻወት ከሎ ነዛ ምልክት ምርኣይ ጥራይ እዩ ዘድልየኒ ነይሩ።

ቀሊል እኹል እዩ። ነፍሲ ወከፍ ካብዚኦም ብዙሓት ፕላጊናት ዝሓዘ ትርኢት እዩ። ነፍሲ ወከፍ ፕላግ-ኢን ከም isPlaying ዝኣመሰለ ናይ ገዛእ ርእሱ ንብረት ኣለዎ። ኣብ መንጎ እቶም ፕላጊናት ዘለዉ ክብርታት ክንወሃሃድ ንኽእል ኢና፡ እቲ ሰንደቕ ዕላማ ሓቂ እንተኾይኑ ድማ ነቲ ምልክት ከነርእዮ ንኽእል።

ፍታሕ ምህናጽ

እቲ ቀንዲ ጉዳይ ነዚ ዳታ ብኸመይ ንረኽቦ ዝብል እዩ። ርኣዩ፡ ብቐጥታ ነቲ ዳታ ክንረኽቦ ንኽእል ኔርና። ነፍሲ ወከፍ ፕላግ-ኢን ግን ናይ ገዛእ ርእሱ ስኪማ ክህልዎ ይኽእል እዩ። ገለ ፕላጊናት ቀሊል isPlaying ዝብል ባህሪ ክህልዎም ይኽእል እዩ፡ ገለ ካልኦት ግን ንኹነታቱ ንምውካል ዝያዳ ዝተሓላለኸ ነገር ከድልዮም ይኽእል እዩ።

ቀሊል፡ ንምንታይ እቲ ፕላግ-ኢን ነቲ ኩነታት ዝመልስ ምምላስ ጻውዒት/ተግባር ክምዝግብ ዘይንፈቅድ?

እዚ እቲ TheOpenPresenter ንብዙሓት ፕላጊናቱ ዝጥቀመሉ ቅዲ እዩ። ኣብኡ እናሃለና ድማ ናብ SceneState object ክንኣስትራክት ንኽእል ኢና። ስለዚ ካልእ ግዝኣት እንተድኣ ኣድልዩና ኣብዚ ክንውስኾ ንኽእል ኢና። ንፕላግ-ኢን ከመይ ክመስል ከም ዝኽእል ኣብዚ ኣሎ፤

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

ኣተሓሕዛ ኣገልጋሊ

ኣብ ላዕሊ ዘሎ ኮድ ኣብቲ ሰርቨር ከም ዝሕዞ ኣስተውዕል። እዚ ዝኾነሉ ምኽንያት ድማ TheOpenPresenter 3 ዝተፈላለዩ ኣካላት ስለዘለዎ እዩ፤

1. እቲ ሪሞት - እዚ ናይ ድምጺ ምልክት ዝረኣየሉ።

2. እቲ Renderer - ነቲ ድምጺ ይጻወት።

3. እቲ ሰርቨር - ንኽልቲኦም የራኽቦም

   
   

ብዝበለጸ ነዚ ኣብ ፍሮንትኤንድ (ሪሞት) ክንሕዞ ይግባእ ምእንቲ ተወሳኺ ጽዕነት ኣብቲ ሰርቨር ከይንውስኽ። ይኹን እምበር ነዚ ተግባር ምምዝጋብ ዕግርግር ክኸውን ይኽእል እዩ። ፍሮንትኤንድና ብናይ ዌብ ክፍልታት ዝተጻዕነ ማይክሮ-ፍሮንትኤንድ ኣርኪቴክቸር ይጥቀም።

ኣብ ታሕቲ ዘሎ ቀይሕ ቦታ ሪኣክት ሸል እዩ። እቲ ቀጠልያ ቦታ ብመንገዲ ክፍልታት መርበብ ሓበሬታ ዝጽዓን ኮይኑ ብነፍሲ ወከፍ ፕላግ-ኢን ይመሓደር።

እቲ ናይ ድምጺ ምልክት ኣብ ጸጋማይ ሸነኽ ናይቲ ሸል ከም ዝርከብ ኣስተውዕል። ከመይ ጌርና ኢና ነቲ ሸል ዘድልየና ፋንክሽን ነቕርቦ? ኣብቲ web component bundle JS function ከነእቱ ንኽእል ኢና ግን ኣብ ነዊሕ ግዜ ዕግርግር ኮይኑ ይስማዕ።

ነዚ ኣብ ሰርቨር ምሕላው ነዚ ንምግባር እቲ ግቡእ መንገዲ ይመስል።

ነቲ ዳታ ብፕሉምቢንግ ምግባር

እዚ ምስ ተወሰነ፡ ትግባረ ዝግበረሉ ግዜ በጺሑ ኣሎ። ውሑዳት ክትገብሮም ዘለካ ነገራት ኣለዉ፤

1. እቲ ፕላግ-ኢን ኤፒኣይ ምፍጣር
2. ነዚ ዳታ ናብቲ ቅድመ-ገጽ ኣቕርቦ
3. ነቲ UI ሃልክዎን ኣዘምንዎ።

ምትግባር

ብዝርዝር ኣይሰልችወኩምን እየ ስለዚ ሓፈሻዊ ትሕዝቶ ኣብዚ ኣሎ። ዳታና ኣዝዩ ምድንጋር ክህልዎ ስለ ዝኽእል እቲ ኤፒኣይ ምሉእ ብምሉእ ቀጥታዊ ኣይነበረን። ብሓጺሩ፦ ሓደ ትርኢት ብዙሓት ፕላጊናት ክህልዎም ይኽእል። ከምኡውን ብዙሓት ረንደርስ ክህልዉ ይኽእሉ እዮም፣ ነፍሲ ወከፎም ንሓደ ትርኢት ብዝተፈላለየ መንገዲ ይርእይዎ። ስለዚ ሓደ ፕላግ-ኢን ብዝተፈላለየ መንገዲ ዘርእይዎ ብዙሓት ረንደርስ ክህልዎም ይኽእል እዩ። ቁሩብ ዳታ ምትላል ግን ጸገም ተፈቲሑ።

UI ምውሳድን ምዕራፍን።

ነቲ ዋጋ ምብላዕ ቀጥታዊ እዩ ነይሩ። እቲ ዳታ ኣብ ሓቀኛ ግዜ ስለ ዝኾነን እቲ ማዕቀፍ ድሮ ኣብ ቦትኡ ስለዘሎን ንምሃብ ናይ Yjs ንቕሓት ፕሮቶኮል ምጥቃም ኣስተንቲነዮ። እቲ መንግስቲ ብኸምዚ እዩ ዝኽዘን። ይኹን እምበር ነዚ ካብ ሰርቨር ዝመጽእ ዳታ ምሕዋስ ናይ ገዛእ ርእሱ ጸገም እዩ። ስለዚ ኣብ ክንድኡ GraphQL ክጥቀም ወሲነ - እቲ ንኹሉ ካልእ ኣብቲ መድረኽ ንጥቀመሉ ዘለና ፕሮቶኮል።

ስለዚ ክንገብሮ ዘለና ነቲ መወዳእታ ነጥቢ ደዊልና፡ ናይ GraphQL ምዝገባ ተጠቒምና ክንሰምዖ፡ ከም ኣድላይነቱ ድማ ነቲ ምልክት ምርኣይ ጥራይ እዩ። ምውዳእ።

ነዚ ዳታ ናብ ቅድመ-ገጽ ምቕራብ

ምስጋና ይግበኦ Postgraphile ንጥቀም እዚ ድማ ምዝርጋሕ GraphQL schema ኣዝዩ ቀጥታዊ ይገብሮ። ከምኡ ውን ኣብ GraphQL ስኪማ @pgSubscription ብምውሳኽ ጥራይ ምዝገባ ክንገብሮ ንኽእል ኢና። ብድሕሪኡ ሓደ ኣርእስቲ ክከታተልን ኣብቲ ኣርእስቲ pg_notify ኣብ እንደወለሉ እዋን ነቲ ዋጋ ከዘምኖን እዩ። ንኣብነት፥

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

ዳታ ምትዕጽጻፍ ዘሕርቕ እዩ ነይሩ ግን ቁሩብ ትዕግስቲ ጥራይ እዩ ተዛዚሙ!

ናይ መወዳእታ ቁራጽ ናይቲ ሕንቅልሕንቅሊተይ ኣብ ዘድልየና እዋን pg_notify ምጽዋዕ እዩ።

ነዚ ድማ ኣብቲ ስቴት (Yjs) ሰማዒ ክንውስኽን ዝኾነ ነገር ኣብ ዝቕየርሉ እዋን ናብቲ notify ክንጽውዕን ንኽእል ኢና፤

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

እቲ እንኮ ዝተረፈ ምምሕያሽ ኣፈፃፅማ ስራሕ እዩ። ኣብዚ ሕጂ እዋን፡ እቲ ፋንክሽን ንነፍሲ ወከፍ ንእሽቶ ለውጢ ይጽዋዕ፡ ናብ ቅድመ-ገጽ እውን ይመሓየሽ። ነቲ ውጽኢት ዝኾነ ኩነታት ክንሕስቦን ቅድሚ ነቲ update ምድፋእና ዝኾነ ነገር እንተተቐይሩ ከነነጻጽሮን ንኽእል።

ዝሓሸ ፍታሕ

ሕጂ እዚ ፍታሕ ብርግጽ ይሰርሕ እዩ። ንነፍሲ ወከፍ ለውጢ ንሰምዖ ምህላውና ግን ጸሊአዮ። ኣድላዪ ኣይኮነን እቲ ኣፈጻጽማ ብኸመይ ከም ዝዓቢ ርግጸኛ ኣይኮንኩን። ካብዚ ዝሓሸ መፍትሒ ኣሎ ድዩ?

ስለዚ ንሓንቲ ካልኢት ንድሕሪት ተመሊሰ ሓደ ሓሳብ መጸ ፡ ከመይ ንኸውን ናብ መሰረታዊ ነገራት ከይድና ካብ Yjs ዝመጸ ዳታ ንጥቀም?

እቲ ጸገም ነፍሲ ወከፍ ፕላግ-ኢን ዝተፈላለየ መገድታት ተጠቒሙ ኩነታት ምጽዋት ንምምልካት እዩ ነይሩ። ስለዚ ነቲ ውጽኢት ዝኾነ ኩነታት ባዕልና ከመይ ጌርና ከም እንሕስቦ እንፈልጠሉ መንገዲ የድልየና ነይሩ። ግን እቲ ተጠቃሚ ሓደ ፋንክሽን ከሕልፍ ካብ ምፍቃድ ፡ ንምንታይ ነዚ ንምምልካት ክጥቀሙሉ ዝኽእሉ ንብረት ዘይሕዙ?

ነፍሲ ወከፍ ፕላግ-ኢን ነቲ ኩነታት ንምሕሳብ ፋንክሽን ኣብ ክንዲ ምሕላፍ፡ ነቲ ዝተሓዝአ ኩነታት ብቐጥታ ጎኒ ጎኒ እቲ ዝጸንሐ ዳታኡ ብከም __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")); }, ); };

ናይ ቀደም ኮድ ምድምሳስ

እቲ ሓድሽ ኣገባብ ብሉጽ እዩ። ተወሳኺ ሰማዒ የለን፣ ተወሳኺ ኤፒኣይ የለን፣ ቀሊል ዝተሓዝአ ንብረት ጥራይ።

እቲ ወጻኢታት? ጽቡቕ ድሮ 95% ናይቲ ቀዳማይ ኣተገባብራ 🫣 ጽሒፈዮ ኣለኹ

“እዚ ንነዊሕ እዋን ክሰርሓሉ ከለኹ ምድምሳስ ከምዚ ዝኣመሰለ ነውሪ ክኸውን እዩ። ብዘይካ እዛ ሓንቲ ነገር ካልእ ኩሉ ፍጹም እዩ!” - ኣእምሮይ

እዚ ንመጀመርታ ግዜይ ኣይኮነን። ካልኣይ ወይ ሳልሳይ እውን ኣይኮነን። ኣብዚ ግዜ እዚ ንውሑዳት ሰዓታት ስራሕ ጥራይ እዩ ነይሩ። ንምትግባሩ ዝነውሐ ግዜ ብዝወሰደ መጠን፡ ምፍናው ይኸብድ። ምስ ሰርቨር ክንተሓሓዝ እንተዘይብልና ግን ምስቲ ንጽሕፎ ኮድ እውን ክንተሓሓዝ የብልናን።

እቲ ካልኣይ ኣተገባብራ ዝሓሸ ምዃኑ ርዱእ እዩ። ዝቐልጠፈ፡ ውሑድ ምንቅስቓስ ዘለዎም ክፍልታት፡ ዝወሓደ ኤፒኣይ ገጽ፡ ከምኡ’ውን ውሑድ ኮድ ንምሕላው እዩ። እቲ ቀዳማይ ኣተገባብራ 289 ሓደሽቲ መስመራት ክውስኽ እንከሎ እቲ ካልኣይ ኣተገባብራ ድማ 32 ሓደሽቲ መስመራት ጥራሕ ወሲኹ።

ሽዑ እንታይ ትምህርቲ ኣሎ?

ጽቡቕ ምናልባት መጀመርታ ዝቐለለ ፍታሕ ድለዩ። ሓደ ሓደ ግዜ ግን ብሓሳብ ጥራይ ኣብ ዝበለጸ ፍታሕ ኣይንበጽሕን ኢና። ከምኡ እንተኾይኑ ኮድካ ኣይትፈትዎ ክትድርብዮ ድማ ኣይትፍራሕ . ምናልባት ድማ ገለ ነገር ምእንቲ ክትረክብ ብሎግ ፖስት ጽሓፍ!

ክሳብ ሕጂ ተነቢብኩም እንተኾይንኩም ፡ TheOpenPresenter ክትፍትኑ ትኽእሉ ኢኹም ! ዝኾነ ስክሪናትካ ብርሑቕ ክትቆጻጸሮ ዘኽእለካ ክፉት ምንጪ ዘለዎ ናይ ኣቀራርባ ስርዓት እዩ።

ስላይድ ሾው ምርኣይ፣ ቪድዮ ምጽዋት፣ ከም ዳሽቦርድ ምጥቃምን ካልእ ብዙሕን እዩ። እቲ ሶፍትዌር ገና ኣዝዩ ብኣጋኡ ኣብ ምምዕባል ከምዘሎ ካብዚ ጽሑፍ ክትፈልጥዎ ትኽእሉ ኢኹም ግን ብስሩዕ ክትጥቀሙሉ እትኽእሉ ርጉእ እዩ። ኣነ ብውልቀይ ኣብ ሰሙን ኣብ ዝግበር meetups እየ ዝጥቀመሉ።

ዝኾነ ሕቶ እንተሃልዩኩም ሕተቱ። ወይ ድማ ኣብ Github repo ንዘጋጥሙ ጉዳያት ክትሕብሩ ናጻ ትኾኑ ።