ንፓይቶን ዝኸውን Webflow Like UI Builder ከመይ ጌረ ከም ዝሃነጽክዎ ኣብዚ ኣሎ።

ንዝሓለፉ ሒደት ሰሙናት ንፓይቶን ዝኸውን Drag and Drop builder ክሰርሕ ጸኒሐ።

ኣብዚ ክትሪእዎ ትኽእሉ ኢኹም። PyUIBuilder ዝበሃል ትካል እዩ።

ምንጪ ኮድ፤ https://github.com/ፓውልዲሞን/ፓይዩቢልደር

እቲ ሃናጺ እንታይ ክገብር ይኽእል፧

ብሓጺሩ፡ ንፓይቶን ዝኸውን UI ብቕልጡፍ ክትሃንጽን ኣብ ብዙሓት ቤተ-መጻሕፍቲ/ፍሬምዎርክታት፡ እንተላይ ኣብ Tkinterን customtkinterን UI ኮድ ክትፈጥርን ክሕግዘካ ይኽእል። ተወሳኺ ክትነብቡ ትኽእሉ ኢኹም ኣብ... ክፍሊ ባህርያት

ግን ፕሮጀክት ጥራይ ክጅምር ኣይደልን እየ፡ ተመኩሮይ እውን ከካፍለኩም እፈቱ። ኣብዚ ብሎግ፡ መስርሕ ኣተሓሳስባይን ልዑል ደረጃ ሓፈሻዊ ትዕዝብቲ ናይቲ ኣፕ ብኸመይ ከም ዝሃነጽክዎን ክኸይድ እየ።

ዝብል ሓሳብ ምምጻእ።

ብኣንጻር እቲ ህዝቢ ዝእመን ፓይቶን መብዛሕትኡ ግዜ ቅልጡፍ ኣፕሊኬሽናት ንምህናጽ ይጥቀመሉ፣ ብፍላይ ኣብቶም ኣብ ዳታ ሳይንስ፣ ኣውቶማቲክ፣ ስክሪፕቲንግ ዕማማት ወዘተ ዝሰርሑ ዲቨሎፐራት ህቡብ እዩ።ብዙሓት ውሽጣዊ መሳርሕታትን GUIsን ብፍላይ ኣብ ሳይንሳውን ምርምርን ቅጥዕታት ብፓይቶን ዝህነጹ ብሰንኪ ናቱ... ቅልልነትን ከም Tkinter, PyQtን ካልኦትን ዝኣመሰሉ ማዕቀፋት ምህላዎምን ይፍለጥ።

ሕጂ፡ ንዌብ ዝኸውን ብዙሕ Drag and drop builders ነይሩ፡ ን Python GUIs ግን ኣዝዩ ውሑድ እዩ፡ ብፍላይ ን tkinter። ውሑዳት ርእየ፡ እቲ ጸገም ግን ኣዝዮም ውሱናት ቁጽሪ ዊጀት ነይሮም ወይ ድማ ብXML ፎርማት ኮድ ይፈጥሩ ነይሮም፡ እዚ ድማ ብፓይቶን UI ትሰርሕ እንተኾንካ ምቹእ ኣይኮነን።

ስለዚ፡ ኣብ መጀመርታ፡ ንTkinter ጥራይ ዝኸውን ግቡእ drag and drop UI builder ክሃንጽ ጥራይ እየ ዝደሊ ነይረ።

ኣነ ንሓሳብ ናይ ሓደ ምቹእ GUI ሃናጺ (no pun intended) ምትዕጽጻፍ ቀጸልኩ። ብናይ Canva UI ተደሪኸ፡ ንGUI ናተይ ምቹእ ዝገብሮም ውሑዳት ባህርያት ኣምጺአ።

1. ኩሎም ዊጀት ከም ፕላጊን ክስራሕ ኣለዎ።
2. ብመልክዕ ፕላጊን 3rd party UI widgets ክድግፍ ይግባእ።
3. ንብረት ከም ምስሊ፣ ቪድዮ'ስ ወዘተ ክሰቕል ክኽእል ኣለዎ።
4. ብፓይቶን ኮድ ክፈጥር ኣለዎ።

ስለዚ፡ ኣብ ከባቢ መወዳእታ ወርሒ ሓምለ፡ ኣብቲ ፕሮጀክት ስራሕ ክጅምር ወሰንኩ

ነቲ ሓሳብ ምስፍሕፋሕ

ኣብ መጀመርታ tkbuilder ተባሂሉ ይጽዋዕ ነይሩ፡ እዚ ድማ ንTkinter UI library ዝኸውን GUI builder ምዃኑ የመልክት።

ግን፡ እንተ ኣስተብሂልኩም ኣነ ውን ኣብ ተመሳሳሊ ሓሳብ ከስፍሕ ይኽእል እየ ንብዙሓት Python GUI frameworksን librariesን ንምድጋፍ፡ ኩሉ ከም ፕላግ-ኢን ስለ ዝተሰርሐን ልክዕ ከምኡ ክገብር ዝሓሰብኩን ስለ ዝኾነ።

ናይ መጀመርታ ስሪት ውጥን።

ንመጀመርታ ስሪት፡ ንተጠቀምቲ ዝዓብለል ብዙሕ ባህርያት ክውስኽ ኣይደለኹን። ካብ ዝጥቀሙሉ ሰባት ብዝረኸብክዎ ርእይቶ መሰረት ክሃንጾ ደልየ ነይረ። በዚ መንገዲ ሰባት ዘይደልይዎ ነገራት ኣብ ምህናጽ ግዜ ኣይባኽንን እየ።

ካብ መጀመርታ ጀሚረ ድሕረ ባይታ ወይ ዝኾነ ወይ ናይ ምዝገባ ቅጥዒ ከይህልወኒ ወሲነ። በዚ መንገዲ እዚ ንዓይ ንኽምዕብልን ነቶም ዝጥቀሙሉን ኣዝዩ ቀሊል እዩ። ሰባት ክጅምሩሉ ዝኽእሉ ቀሊል ቅድመ-ገጽ ጥራይ እየ ደልየ ነይረ።

ቋንቋ JS, TS ወይ Python ምምራጽ

እወ እዚ ንሓደ ሓደ ግዜ ዘስተንትነሉ ዝነበርኩ ነገር እዩ ነይሩ፣ መብዛሕትኦም ኣብ ደገ ዘለዉ ንፓይቶን ዝኸውን GUI ሃነጽቲ ፓይቶን ተጠቒሞም እዮም ተሃኒጾም። ንፓይቶን ቀዳማይ ምርጫይ ፓይሳይድ እዩ ነይሩ።

እቲ ዝተሓላለኸ GUI based app PyQt/Pyside ተጠቂመ ዝሃነጽክዎ ሀ ኣብ መስመር መሰረት ዝገበረ ኣርታዒ ሒደት ዓመታት ንድሕሪት ተመሊስና።

ግን ነቲ ናይ መጀመርታ ስሪት ንምህናጽ ፓይቶን ምጥቃም ዘለዎ ድሩትነት ቀልጢፈ ተረዲኡኒ።

• ናይ ፓይቶን UI ቤተ መጻሕፍቲ ብዙሕ ናይ 3ይ ወገን ዊጀት የብሎምን፡ እዚ ድማ ነቲ ናይ መጀመርታ ስሪት ብቕልጡፍ ንምህናጽ ዝሕግዙኒ።
• Python app ከም exe files ምዝርጋሕ ቀሊል ኣይኮነን፣ ኣብዚ ከም JS ምጥቃም ብመልክዕ electron app ክንዝርግሖ ንኽእል።
• መብዛሕትኦም ሰባት ኣብ ክንዲ ካብ ዘይፈልጥዎ ዌብሳይት executable ምውራድ ዌብ ክጥቀሙ ይመርጹ።

ታይፕስክሪፕት እውን ኣማራጺ እዩ ነይሩ፡ ምስ ታይፕስክሪፕት ግን ኩሉ ግዜ ኣዝዩ ቃላት ዝመልኦ ኮይኑ ይስምዓኒ ነይሩ።

እዚኦም ጥራይ ብኡንብኡ ዘስተብሃልኩዎም ነገራት ስለ ዝነበሩ፡ ቀዳማይ ምርጫይ JS ምጥቃም ኮይኑ።

ፒኤስ፡ ድሒረ ብቲኤስ ዘይምጅማረይ ተጣዒሰ፡ ንኻልእ ግዜ ግን ዛንታ ክኸውን እዩ።

ማዕቀፍ ወይ ማዕቀፍ የለን።

እቲ ዝያዳ ምቹእ ዝኾንኩሉ ፍሬምዎርክ ዝመስል ቤተ-መጻሕፍቲ React.js ኮይኑ፡ ኣብስትራክሽን ንምፍጣር ግን ክላስ ምጥቃም የድሊ፡ እዚ ድማ ካብ ምትእትታው መንጠልጠሊ ጀሚሩ ኣይምከርን።

እቲ ጸገም ፍሬምዎርክ ዘይምጥቃም ኩሉ ነገር ባዕለይ ክሃንጾን ናብቲ react ዝህቦ ሰፊሕ component libraries ክበጽሕን ምተገደድኩን እዩ ነይሩ።

ክልቲኦም ምትሕውዋስ ነይርዎም፡ ግን ሪኣክት ክላሳት ክሳብ ሕጂ ክጥቀሙ ይኽእሉ እዮም፡ ስለዚ ንዓይ ርኡይ ምርጫ ኮይኑኒ።

ዕንክሊል ዝበለ ጅማሮ

ኣብ መጀመርታ ወርሒ ነሓሰ ነቲ ኣዝዩ መሰረትን ጎድናዊ ባርን ብምህናጽ እየ ጀሚረዮ፣ ብሰንኪ ሕጽረት ገንዘብ ድማ ደው ክብል ስለ ዝነበረኒ፣ ናይ ሓደ ዓሚል ስራሕ ወሲደ፣ ሕማቕ ኣጋጣሚ ኮይኑ ናይ መወዳእታ መጠን ገንዘብ ኣይከፈለን። crowd funding ፈቲነ ኣብኡ እውን ዕድለኛ ኣይነበርኩን።

ስለዚ፡ ኣብ ወርሒ መስከረም በቲ ዝተረፈኒ ንእሽቶ ገንዘብ፡ ኣብዚ ፕሮጀክት ኩሉ ክኣቱ ወሰንኩ። ከባቢ 9 መስከረም ነቲ ስራሕ ዳግማይ ጀሚረዮ።

ኣቐዲምካ ምውጣን ...

ብዙሕ ግዜ ብዛዕባ እቲ መሰረት ኣብስትራክሽን ምሕሳብ እዩ ከይዱ፣ እዚ ድማ ነቲ ድሌታት ንምምላእ ናብ ስኬል ክዝርጋሕ ይኽእል።

1. Canvas ክህልወካ ደለየ፣ ምስ Figma ዝመሳሰል ዙም ክግበርን ፓን ክግበርን ዝኽእል።

2. ኩሎም ካልኦት ዊጀት ካብኡ ክዝርግሑ ዝኽእሉሉ መሰረታዊ ዊጀት።

3. ንUI ባእታታት ናብ ካንቫስ ንምስሓብን ንምድርባይን ዝሕግዝ Drag and drop ዝብል ባህሪ።

   
   

ብReact ንምህናጽ፡ ብዝተወሰነ መንገዲ ክትሓስቦን ክትሃንጾን ኣለካ፡ ዋላ እኳ ቤተ-መጻሕፍቲ ድዩ ፍሬምዎርክ ዝብል ክትዕ እንተሃለወ፡ ኩሉ ግዜ ካብ ቤተ-መጻሕፍቲ ንላዕሊ ፍሬምዎርክ ኮይኑ ይስምዓካ።

ዲዛይን UI

ኩሉ ግዜ ካንቫ ከመይ ጌሩ ጎድናዊ ባርኦም ከም ዝሰርሖ ደስ ይብለኒ ነይሩ፣ ንሃናጺ ድራግን ድሮፕን ዝኸውን ተመሳሳሊ ነገር ክህልወኒ ደልየ።

ኣብ ኣእምሮይ ዝነበረ ኣብ ወረቐት ሰኣልክዎ። ኣብ ደገ ዘሎ ዝበለጸ ስነጥበባዊ ኣይኮነን 🙄

መስርሕ ኣተሓሳስባይ ብዛዕባ ምትእስሳር ካንቫስን ዊጀትን ዝምልከት።

ስለዚ፡ መን ሓላፍነት ናይ ምጉታት፡ ምቕያር ዓቐን፡ ምምራጽ ክኸውን ኣለዎ። እቲ ካንቫስ ወይ እቲ መሰረት ዊጀት። ኣብ ውሽጢ እቲ ዊጀት ዘለዉ ዊጀት ብኸመይ ክሕዙ እዮም?

እቲ መሰረት ዊጀት ደቆም ይፈልጥ ድዩ ወይስ ብሓደ ዳታ ስትራክቸር ብባዕሉ እቲ ካንቫስ ክመሓደር እዩ። ከመይ ጌረ እየ ንውሉዳት ኣብ ውሽጢ ውሉድ ክህቦም?

እቲ ስሕበትን ምድርባይን ኣብ ውሽጢ ካንቫስን ካልኦት ዊጀታትን ከመይ ክሰርሕ እዩ?

ኣቀማምጣታት ብኸመይ ክመሓደሩ እዮም?

እዚኦም ገለ ካብቲ ቅድሚ ንብምሉኡ ነገር ምህናጸይ ክሓቶ ዝጀመርኩ ሕቶታት እዮም።

ሕጂ እቲ UI ቀሊል እኳ እንተመሰለ፡ ነቲ መሰረት ኣብ ምህናጽ ብዙሕ ሓሳብ ስለዝተገብረ፡ ንተጠቀምቲ ኣዝዩ ቀሊል ይመስል።

HTML Canvas ዝተመርኮሰ ኣገባብ ወይ ዘይካንቫስ ኣገባብ።

ኣብ ካንቫስ ዝተመርኮሰ ኣገባብ

ሕጂ html default Canvas element ኣለዎ፣ እዚ ድማ ብዙሕ ነገራት ከም draw, add imageን ካልእን ክትገብር የኽእለካ፣ ሕጂ ንፕሮግራመይ ክጥቀመሉ ምቹእ ባእታ ይመስል።

ስለዚ፡ ኣነ ምፍታሽ ጀሚረ እንተሃልዩን ዝነበረን ኣተገባብራ ናይ ሓደ ስሕበትን ምድርባይን፡ ምቕያር ዓቐን፡ ምዕባይን ምጉርፋጥን። ረኺበዮ ፋብሪክJs ፣ እዚ ንኣጠቓቕማይ ፍሉይ ቤተ-መጻሕፍቲ ኮይኑ ተሰሚዑኒ።

ኣነ ብ Fabric.Js ክፍትን ፈቲነ ነዚ ትርእይዎ ዘለኹም ምሉእ ነገር ኣብ fabric.js ከተግብር ፈቲነ ኣተገባብራ ምዃኑ’ዩ። ፣ ብዛዕባ ካንቫስ ግን ኣቐዲመ ዘይረኣኹዎ ነገር ነይሩ።

1. ኣነ ነቲ ካንቫስ ክሃንጽ ከለኹ ብ hooks-based approach ክፍትን ጀሚረ፡ fabric.js dispose function ግን async ስለ ዝነበረ፡ ምስ Hooks ጽቡቕ ኣይምተጻወተን።
2. ካንቫስ ከም Div ወይ ካልኦት ባእታታት ዝኣመሰሉ ውላድ ባእታታት ክህልዎ ኣይክእልን እዩ እዚ ድማ ንኣቀማምጣ ኣካየድቲ ንምህናጽ ቁሩብ ዝያዳ ከቢድ ምገበሮ
3. ኣብ ካንቫስ ዝኾነ ነገር ምእራም ኣዝዩ ከቢድ እዩ ምኽንያቱ ውሽጣዊ ባእታታት ካንቫስ ኣብቲ ናይ ዲቨሎፐር መሳርሒታት ምፍታሽ ባእታ ስለዘይረኣዩ።

ኣብ ካንቫስ ዘይተመስረተ ኣገባብ

ሕጂ ድሕሪ ፈተነ፡ እቲ ዘይካንቫስ ኣገባብ ዝሓሸ መሲሉኒ፡ ምኽንያቱ ኣነ ናብ ነባሪ ኣቀማምጣ ኣመሓዳሪ ዝተዋህበኒ ምብጻሕ ስለዘለኒ፡ ብተወሳኺ ብዙሓት UI ቅድሚ ሕጂ ዝተሃንጹ ኣካላት ነይሮም፡ እዚ ድማ ኣብ እዋን ምዕባይ ነዚ ምቹእ ምርጫ ዝገብሩ ነይሮም።

ክልተ ዝተፈላለዩ div's ሓደ inner divን outer container divን ብምጥቃም ካንቫስ ንምምሳል መደብ ነይሩኒ።

ሕጂ ምፍጣር ዙምን ፓንን ንምትግባሩ ብመጠኑ ቀሊል እዩ ነይሩ፡ ምኽንያቱ ሲኤስኤስ ድሮ ትራንስፎርም፡ ስኬልን ትራንስሌትን ነይርዎ።

መጀመርታ ነዚ ንምትግባር፡ ካንቫስ ዝሕዝ መትሓዚ ክህልወኒ ነይሩኒ። ሕጂ እዚ ካንቫስ ዘይርአ ባእታ እዩ (ብዘይ ምፍሳስ ተሓቢኡ)፣ ኣብዚ እዩ ኩሎም ባእታታት ዝወድቁሉ፣ ስኬሊንግን ትርጉምን ድማ ይትግበር።

ንዞም ኢን ነቲ ስኬል ክውስኾን ንዞም ኣውት ድማ ክቕንሶን ነይሩኒ።

ነዚ ቀሊል ኣብነት ፈትኖ። ( + ቁልፊ ንምዕባይን - ንምንካይን)

ፓኒንግ እውን ብተመሳሳሊ እዩ ሰሪሑ

ስሒብካ ኣውድቕ

ክጅምር ከለኹ ኣብ ሓደ ክልተ ቤተ መጻሕፍቲ ከም... ሪኣክት-ጽብቕቲ-ዲንድ ፣ ሪኣክት ዲንድ-ኪት። እና ሪኣክት ስዋፒ .

ድሕሪ መጽናዕቲ react-beautiful-dnd ድሕሪ ሕጂ ከምዘይዕቀብ ርእየ ብ React dnd-kit ጀሚረ። ከም ዝተጀመረ ህንጻ መጠን፡ ነቲ ዝሃንጾ ዝነበርኩ ሰነዳት ናይቲ dnd-kit ኣዝዩ ድሩት ኮይኑ ረኺበዮ፡ Plus፡ ሓድሽ ምውጻእ ምስ ዓበይቲ ለውጥታት ኣብ ቤተ-መጻሕፍቲ ኣብ ቀረባ እዋን ክወጽእ ስለ ዝነበረ፡ ክሳብ እቲ ዓቢ ምውጻእ react-dnd-kit ከውድቖ ወሲነ።

DND-kit ዝጥቀመሉ ዝነበርኩ ክፋላት ብ HTML's Drag and Drop API ዳግማይ ጽሒፈዮ። ምስቲ ተወላዲ ድራግ ኤንድ ድሮፕ ኤፒኣይ ዝነበረ ድሩትነት ጥራይ፡ ክሳብ ሕጂ ብገለ ተንከስካሲ መሳርሒታት ዘይምድጋፉ እዩ ነይሩ፡ እዚ ድማ ንዓይ ቁምነገር ኣይነበሮን ምኽንያቱ ንዘይተንከስካሲ መሳርሒታት ይሃንጽ ስለ ዝነበርኩ።

ንጽል ምንጪ ሓቂ

ከምዚ ዓይነት ኣፕ ክትሃንጽ ከለኻ፡ ንኹሉ ተለዋዋጢ ነገራትን ለውጥታትን ክትስእን ቀሊል ክኸውን ይኽእል። ስለዚ፡ ሓደ ዓይነት ሓበሬታ ዝከታተሉ ብዙሓት ተቐያየርቲ ክህልዉኒ ኣይክእሉን እዮም።

ሓበሬታ/ኩነታት ነፍሲ ወከፍ ዊጀት ወይ ብካንቫስ ወይ ድማ ብባዕሉ እቲ ዊጀት ክሕዝ ኣለዎ፣ ድሕሪኡ ድማ ነቲ ሓበሬታ ምስ ተሓተተ የሕልፎ።

ወይ ድማ ከም redux ዝኣመሰለ state management library ምጥቃም ይከኣል

ኩሉ እቲ ብዛዕባ እቶም ብካንቫስ ክፍሊ ዝመሓደሩ ዊጀትስ ዝምልከት ሓበሬታ ዝተፈላለየ ኣገባባት ድሕሪ ምፍታን ክህልወኒ መሪጸ።

እቲ ኣቃውማ ዳታ ከምዚ ይመስል።

 [ { id: "", // id of the widget widgetType: WidgetClass, // base widget children: [], // children will also have the same datastructure as the parent parent: "", // id of the parent of the current widget initialData: {} // information about the widget's data that's about to be rendered eg: backgroundColor, foregroundColor etc. } ]

ሪኣክት ኣካየድቲ ዓውደ-ጽሑፍ

ሕጂ ኣብቲ ጎድናዊ ባር ዝተሰቐሉ ንብረት ብቱልባር ናይቶም ዊጀት ክበጽሖም ደልየ ነይረ። ግን ኣብ ነፍሲ ወከፍ ንጐድናዊ-ታብ ዝቕይረሉ እዋን፡ እቲ ዳግማይ ምቕራብ፡ እቶም ዝተሰቕሉ ንብረታት ከም ዝጠፍኡ ገይርዎም።

ሓደ ካብቲ ዓቢ ድሩትነት ናይ Redux ተኸታታሊ ዳታ ጥራይ ክትዕቅብ ትኽእል ኢኻ። ዘይተኸታታሊ ዳታ ከም ምስሊ፣ ቪድዮ፣ ካልኦት ንብረታት ኣብ ሪዱክስ ክኽዘኑ ኣይክእሉን። እዚ ድማ ኣብ ዙርያ ዝተፈላለየ ክፍሊ ናይ ሓባር ዳታ ንምሕላፍ ኣጸጋሚ ምገበሮ።

ነዚ ንምብዳህ ሓደ መንገዲ ሪኣክት ኮንቴክስት ምጥቃም እዩ። ብሓጺሩ ሪኣክት ኮንቴክስት ኣብ ነፍሲ ወከፍ ደረጃ ፕሮፕስ ብኢድካ ንታሕቲ ከየሕልፍካ ብኮምፖነንት ትሪ ኣቢልካ ዳታ ንምሕላፍ ዝሕግዝ መንገዲ ይህብ።

እቲ ዳታ ኣብ ዝተፈላለዩ ክፍልታት ንኽህልወኒ ክገብሮ ዝግበኣኒ ዝነበረ፡ ኣብ ዙርያ ሓደ ናይ ሪኣክት ዓውደ-ጽሑፍ ኣቕራቢ ምጥቕላል ጥራይ እዩ።

ንኽልተ ነገራት ናይ ገዛእ ርእሰይ ኣቕረብቲ ዓውደ-ጽሑፍ ፈጢረ፤

1. ስሕበትን ምውዳቕን - ካብ ጎድናዊ መስመር ምጉታትን ምውዳቕን + ኣብ ውሽጢ ውላድ ባእታታት ምጉታትን ምውዳቕን ምኽኣል።
2. ፋይል ምጽዓን - እቶም ዝተሰቕሉ ፋይላት ኣብ መሳርሒ ባር ንነፍሲ ወከፍ ዊጀት ተበጻሒ ንምግባር።

ንDrag and drop ከመይ ጌረ React context ከም ዝተጠቐምኩሉ ቀሊል ኣብነት ኣብዚ ኣሎ።

 import React, { createContext, useContext, useState } from 'react' const DragWidgetContext = createContext() export const useDragWidgetContext = () => useContext(DragWidgetContext) // Provider component to wrap around parts that need drag-and-drop functionality export const DragWidgetProvider = ({ children }) => { const [draggedElement, setDraggedElement] = useState(null) const onDragStart = (element) => { setDraggedElement(element) } const onDragEnd = () => { setDraggedElement(null) } return ( <DragWidgetContext.Provider value={{ draggedElement, onDragStart, onDragEnd }}> {children} </DragWidgetContext.Provider> ) }

እወ! ንሱ እዩ። ሕጂ ክገብሮ ዝነበርኩ፡ እቲ ዓውደ-ጽሑፍ ኣብ ዘድልየኒ ቦታ፡ ኣብ ጉዳየይ ኣብ ልዕሊ ካንቫስን ጎድናዊ ባርን ዝነበረ ክፍሊ ምጥቕላል ጥራይ’ዩ ነይሩ።

ኮድ ምፍጣር

ነፍሲ ወከፍ ዊጀት ዝተፈላለየ ባህሪ ስለዘለዎን ናይ ገዛእ ርእሱ ባህርያት ስለዘለዎን፡ ዊጀት ናይ ገዛእ ርእሶም ኮድ ናይ ምፍጣር ሓላፍነት ክህልዎምን ሓደ ኮድ ሞተር ንናይ ተለዋዋጢ ስም ግርጭታትን ነቲ ኮድ ኣብ ሓደ ምቕማጥን ጥራይ ከምዝሕዞን ወሲነ።

በዚ መንገዲ እዚ፡ ንብዙሓት ቅድሚ ሕጂ ዝተሃንጹ ዊጀት ከምኡ’ውን ንገለ 3rd party UI plugins ንምድጋፍ ብቐሊሉ ክሰፍሕ ክኢለ።

ብቐጥታ ምኻድ

ኣነ ባክኤንድ ወይ ሳይንኣፕ ኣይነበረንን ብዙሓት ትካላት ድማ ንስታቲክ ገጻት ነጻ ሆስቲንግ ዝህባ ነይረን። መጀመርታ ምስ ቨርሰል ክኸይድ ወሲነ ነይረ፡ ብዙሕ ግዜ ግን ብዙሕ ሕቶታት እንተሃልዩ ነጻ ጎማ ቨርሰል ክወርድ ርእየ እየ።

Thats when I found out about ገጻት ክላውድፍሌርስ መስዋእቲ ምቕራብ። እታ ነጻ ጎማኦም ዳርጋ ኩሉ ደረት ኣልቦ ነይርዋ። ስለዚ፡ ክላውድፍሌር ምጥቃም ቀንዲ ምርጫይ ኮይኑኒ።

እቲ እንኮ ጉድኣት እቲ ናይ ህንጸት ግዜታት ኣዝዩ ደንጉዩን ቁሩብ ሰነድ ዝጎደሎን ምንባሩ እዩ።

እቲ ኣዝዩ ዘሕርቕ ክፋል ናይቲ build step እቲ build failure እዩ ነይሩ፣ ኣብ Vercel ሰሪሑ፣ ኣብ cloudflare pages ግን ኣይኮነን??? እቲ ዕንጨይቲ እውን ክንድኡ ንጹር ኣይነበረን። ከምኡ ውን ነጻ ጎማታት ኣለና ኣብ ወርሒ 500 ህንጻ ጥራይ ስለዘለዋ ብዙሕ ከባኽን ኣይደለኹን።

ንሰዓታት ፈቲነ ድሕሪኡ ቀጻሊ ውህደት ናብ ባዶ ሕብረ-ቁጽሪ ከቐምጦ ወሲነ

 CI='' npm install

ኣብ መወዳእታ ድማ ብቐጥታ ኣትዩ።

ኣብ ምሉእ ኣዋርሕ ከመይ ከም ዝሰገረ ክትዕዘብ ትደሊ?

እዚ ኩሉ ነገር ኣብ ቅድሚ ህዝቢ ክሃንጾ ጸኒሐ። ኣነ ካብ ቀሊል ጎድናዊ መስመር ናብ ምሉእ ብምሉእ ዝተነፍሐ Drag n drop builder ከም ዝሰገረ ክትሪኦ ተገዳስነት ኣለካ ምሉእ ክትፍትሽ ትኽእል ኢኻ። ናይ ግዜ መስመር ኣብዚ .

#buildinpublic

ኦ! ሓድሽ ሓበሬታ ንምርካብ ምክትታል ኣይትረስዑ

ኮኾብ ሪፖ ⭐️

እዚ ዓይነት ትሕዝቶ እንተፈቲኹምዎ፡ ከመይ ጌረ ነገራት ከም ዝውጥንን ዝሃንጽን ብዕምቆት ዝኣቱ ተወሳኺ ብሎግ ክጽሕፍ እየ፡ ንምክትታል ኣብ substack newsletter ሳብስክራይብ ክትገብሩ ትኽእሉ ኢኹም :)