በቃ ትማሊ ዝጸሓፍክዎም ኣማኢት መስመራት ኮድ ደምሲሰ ብ32 መስመራት ሓድሽ ኮድ ተኪአዮም። እዚ ንሓደ ባህሪ ናይ   , ድምጺ ይጻወት እንተኾይኑ ንምምልካት ዝውዕል እዩ ነይሩ። TheOpenPresenter  በብእዋኑ፡ ንምትግባሩ ኣዝዩ ቀጥታዊ ዝመስል ተግባር ምሰራሕኩ። ኣብ ከምዚ ኩነታት ድምጺ ክጻወት ከሎ ነዛ ምልክት ምርኣይ ጥራይ እዩ ዘድልየኒ ነይሩ።   ቀሊል እኹል እዩ። ነፍሲ ወከፍ ካብዚኦም ብዙሓት ፕላጊናት ዝሓዘ ትርኢት እዩ። ነፍሲ ወከፍ ፕላግ-ኢን ከም   ዝኣመሰለ ናይ ገዛእ ርእሱ ንብረት ኣለዎ። ኣብ መንጎ እቶም ፕላጊናት ዘለዉ ክብርታት ክንወሃሃድ ንኽእል ኢና፡ እቲ ሰንደቕ ዕላማ ሓቂ እንተኾይኑ ድማ ነቲ ምልክት ከነርእዮ ንኽእል። isPlaying  ፍታሕ ምህናጽ  እቲ ቀንዲ ጉዳይ ነዚ ዳታ ብኸመይ ንረኽቦ ዝብል እዩ። ርኣዩ፡ ብቐጥታ ነቲ ዳታ ክንረኽቦ ንኽእል ኔርና። ነፍሲ ወከፍ ፕላግ-ኢን ግን ናይ ገዛእ ርእሱ ስኪማ ክህልዎ ይኽእል እዩ። ገለ ፕላጊናት ቀሊል   ባህሪ ክህልዎም ይኽእል እዩ፡ ገለ ካልኦት ግን ንኹነታቱ ንምውካል ዝያዳ ዝተሓላለኸ ነገር ከድልዮም ይኽእል እዩ። isPlaying ዝብል  ቀሊል፡ ንምንታይ እቲ ፕላግ-ኢን ነቲ ኩነታት ዝመልስ ምምላስ ጻውዒት/ተግባር ክምዝግብ ዘይንፈቅድ?  እዚ እቲ TheOpenPresenter ንብዙሓት ፕላጊናቱ ዝጥቀመሉ ቅዲ እዩ። ኣብኡ እናሃለና ድማ ናብ   object ክንኣስትራክት ንኽእል ኢና። ስለዚ ካልእ ግዝኣት እንተድኣ ኣድልዩና ኣብዚ ክንውስኾ ንኽእል ኢና። ንፕላግ-ኢን ከመይ ክመስል ከም ዝኽእል ኣብዚ ኣሎ፤ 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), } }, );  ኣተሓሕዛ ኣገልጋሊ  ኣብ ላዕሊ ዘሎ ኮድ ኣብቲ ሰርቨር ከም ዝሕዞ ኣስተውዕል። እዚ ዝኾነሉ ምኽንያት ድማ TheOpenPresenter 3 ዝተፈላለዩ ኣካላት ስለዘለዎ እዩ፤  እቲ ሪሞት - እዚ ናይ ድምጺ ምልክት ዝረኣየሉ።  እቲ Renderer - ነቲ ድምጺ ይጻወት።  እቲ ሰርቨር - ንኽልቲኦም የራኽቦም  ብዝበለጸ ነዚ ኣብ ፍሮንትኤንድ (ሪሞት) ክንሕዞ ይግባእ ምእንቲ ተወሳኺ ጽዕነት ኣብቲ ሰርቨር ከይንውስኽ። ይኹን እምበር ነዚ ተግባር ምምዝጋብ ዕግርግር ክኸውን ይኽእል እዩ። ፍሮንትኤንድና ብናይ ዌብ ክፍልታት ዝተጻዕነ ማይክሮ-ፍሮንትኤንድ ኣርኪቴክቸር ይጥቀም።  ኣብ ታሕቲ ዘሎ ቀይሕ ቦታ ሪኣክት ሸል እዩ። እቲ ቀጠልያ ቦታ ብመንገዲ ክፍልታት መርበብ ሓበሬታ ዝጽዓን ኮይኑ ብነፍሲ ወከፍ ፕላግ-ኢን ይመሓደር።   እቲ ናይ ድምጺ ምልክት ኣብ ጸጋማይ ሸነኽ ናይቲ ሸል ከም ዝርከብ ኣስተውዕል። ከመይ ጌርና ኢና ነቲ ሸል ዘድልየና ፋንክሽን ነቕርቦ? ኣብቲ web component bundle JS function ከነእቱ ንኽእል ኢና ግን ኣብ ነዊሕ ግዜ ዕግርግር ኮይኑ ይስማዕ።  ነዚ ኣብ ሰርቨር ምሕላው ነዚ ንምግባር እቲ ግቡእ መንገዲ ይመስል።  ነቲ ዳታ ብፕሉምቢንግ ምግባር  እዚ ምስ ተወሰነ፡ ትግባረ ዝግበረሉ ግዜ በጺሑ ኣሎ። ውሑዳት ክትገብሮም ዘለካ ነገራት ኣለዉ፤  እቲ ፕላግ-ኢን ኤፒኣይ ምፍጣር  ነዚ ዳታ ናብቲ ቅድመ-ገጽ ኣቕርቦ  ነቲ UI ሃልክዎን ኣዘምንዎ።  ምትግባር  ብዝርዝር ኣይሰልችወኩምን እየ ስለዚ ሓፈሻዊ ትሕዝቶ ኣብዚ ኣሎ። ዳታና ኣዝዩ ምድንጋር ክህልዎ ስለ ዝኽእል እቲ ኤፒኣይ ምሉእ ብምሉእ ቀጥታዊ ኣይነበረን። ብሓጺሩ፦ ሓደ ትርኢት ብዙሓት ፕላጊናት ክህልዎም ይኽእል። ከምኡውን ብዙሓት ረንደርስ ክህልዉ ይኽእሉ እዮም፣ ነፍሲ ወከፎም ንሓደ ትርኢት ብዝተፈላለየ መንገዲ ይርእይዎ። ስለዚ ሓደ ፕላግ-ኢን ብዝተፈላለየ መንገዲ ዘርእይዎ ብዙሓት ረንደርስ ክህልዎም ይኽእል እዩ። ቁሩብ ዳታ ምትላል ግን ጸገም ተፈቲሑ።   UI ምውሳድን ምዕራፍን።  ነቲ ዋጋ ምብላዕ ቀጥታዊ እዩ ነይሩ። እቲ ዳታ ኣብ ሓቀኛ ግዜ ስለ ዝኾነን እቲ ማዕቀፍ ድሮ ኣብ ቦትኡ ስለዘሎን ንምሃብ ናይ Yjs ንቕሓት ፕሮቶኮል ምጥቃም ኣስተንቲነዮ። እቲ መንግስቲ ብኸምዚ እዩ ዝኽዘን። ይኹን እምበር ነዚ ካብ ሰርቨር ዝመጽእ ዳታ ምሕዋስ ናይ ገዛእ ርእሱ ጸገም እዩ። ስለዚ ኣብ ክንድኡ GraphQL ክጥቀም ወሲነ - እቲ ንኹሉ ካልእ ኣብቲ መድረኽ ንጥቀመሉ ዘለና ፕሮቶኮል።  ስለዚ ክንገብሮ ዘለና ነቲ መወዳእታ ነጥቢ ደዊልና፡ ናይ GraphQL ምዝገባ ተጠቒምና ክንሰምዖ፡ ከም ኣድላይነቱ ድማ ነቲ ምልክት ምርኣይ ጥራይ እዩ። ምውዳእ።   ነዚ ዳታ ናብ ቅድመ-ገጽ ምቕራብ  ምስጋና ይግበኦ   ንጥቀም እዚ ድማ ምዝርጋሕ GraphQL schema ኣዝዩ ቀጥታዊ ይገብሮ። ከምኡ ውን ኣብ GraphQL ስኪማ   ብምውሳኽ ጥራይ ምዝገባ ክንገብሮ ንኽእል ኢና። ብድሕሪኡ ሓደ ኣርእስቲ ክከታተልን ኣብቲ ኣርእስቲ   ኣብ እንደወለሉ እዋን ነቲ ዋጋ ከዘምኖን እዩ። ንኣብነት፥ Postgraphile @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

2022 - HackerNoon Contributor of the Year - Developer

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

እዚ ድምጺ ብኦርጅናል ቋንቋ ናይቲ ዛንታ ዝተሰርሐ እዩ!

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

About Author

ርእይቶታት

ሃንግ ታግስ

እዚ ጽሑፍ ኣብ...

Related Stories

In The Fourth Year by H. G. Wells - Table of Links

Meet Azamat Nurkhojayev, Android Developer

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Our Knowledge of the External World as a Field for Scientific Method in Philosophy - Table of Links

In The Fourth Year by H. G. Wells - Table of Links

Meet Azamat Nurkhojayev, Android Developer

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Our Knowledge of the External World as a Field for Scientific Method in Philosophy - Table of Links

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps