ChatGPT በመጠቀም ድረ-ገጽ እንዴት መስራት እንደሚቻል፡ ሦስት ሰርተው የሚያሳዩ መንገዶች

ድረ-ገጽ ለመስራት ከChatGPT ጋር ሦስት መንገዶች አሉ፡ የጣቢያውን HTML እና CSS እንዲጽፍ ጠይቀው ፋይሎቹን ራስዎ በማስተናገጃ አገልግሎት ላይ ማስቀመጥ፤ ገጾቹን ለማቀድና ጽሑፉን ለመጻፍ ተጠቅመው ከዚያ በድረ-ገጽ ገንቢ ውስጥ መገንባት፤ ወይም እንደ Mythex ያለ AI ገንቢ በChatGPT ውስጥ በማገናኘት ጣቢያውን ከዚሁ ውይይት ገንብቶ፣ አስተናግዶና አሳትሞ እንዲሰጥዎ ማድረግ። የመጀመሪያው መንገድ ነጻ ሲሆን ለአንድ ገጽ ጣቢያ ጥሩ ነው፤ ሦስተኛው ጣቢያው መረጃ የሚያስቀምጡ ቅጾች፣ መግቢያዎችና መደበኛ ዝመናዎች ሲፈልግ የሚያስፈልግ ነው። ይህ መመሪያ እያንዳንዱን መንገድ በፕሮምፖች ያሳያል፤ እያንዳንዱ የሚቆምበትንም ቦታ በግልጽ ይናገራል።

ChatGPT በራሱ ምን ማድረግ ይችላል እና ምን አይችልም

ChatGPT ኮድ፣ ርዕሶችን፣ የገጽ ጽሑፍንና እቅዶችን በመጻፍ በጣም ጥሩ ነው። ከሳጥኑ ውጭ ግን የማስተናገጃ ኩባንያ አይደለም። ለጣቢያዎ የህዝብ አድራሻ አይሰጥም፣ ዳታቤዝ አያሄድም፣ እና በፕሮጀክቶች መካከል የጣቢያዎን ፋይሎች እንደ ገንቢ አይይዝም። ከዚህ በታች ያሉት እያንዳንዳቸው ዘዴዎች ለዚህ ክፍተት የተለያየ መልስ ናቸው።

ዘዴ 1፡ ChatGPT ኮዱን ይጽፋል፣ እርስዎ ያስተናግዱታል

ይህ ባህላዊ አካሄድ ሲሆን ለቀላል ስታቲክ ጣቢያ እንደ ፖርትፎሊዮ፣ የማረፊያ ገጽ ወይም የሰርግ ገጽ በጣም ጥሩ ይሰራል።

ደረጃ 1፡ ሙሉ ነጠላ-ፋይል ገጽ ይጠይቁ

ስለይዘቱና አቀማመጡ በግልጽ ይግለጹ፡

ሙሉ ነጠላ-ገጽ ድረ-ገጽ እንደ አንድ HTML ፋይል ጻፍ፣ CSS በstyle tag ውስጥ። ለማያ ሃዳድ ነው፤ በአማን ውስጥ የምትሰራ ነጻ ገላጭ (illustrator) ነች። ክፍሎች፡ ስሟና “ለመጻሕፍትና ብራንዶች ሥዕል” የሚል ርዕስ ያለው ራስጌ፣ ስድስት የፖርትፎሊዮ ምስሎች ፍርግርግ (የምተካቸው ቦታ ያዥ የምስል መንገዶችን ተጠቀም)፣ አጭር ስለ እሷ አንቀጽ፣ ሦስት አገልግሎቶች ከመነሻ ዋጋቸው ጋር፣ እና ኢሜሏን እንደ mailto ማገናኛ የያዘ የመገናኛ ክፍል። ንጹህ፣ ዘመናዊ፣ ሰፊ ነጭ ቦታ ያለው፣ በስልክም የሚሰራ። JavaScript ፍሬምወርክ አይጠቀም።

አንድ ፋይል መጠየቅ ማስቀመጥና መስቀል ቀላል ያደርገዋል።

ደረጃ 2፡ አስቀምጠው ክፈተው

ኮዱን ወደ የጽሑፍ አርታኢ ገልብጠው እንደ index.html አስቀምጡት፣ በአሳሽዎ ይክፈቱት። የሆነ ነገር ትክክል ካልመሰለ ለChatGPT ይግለጹ፡ “የምስል ፍርግርግ በዴስክቶፕ ላይ አንድ አምድ ነው፤ ከ900px ስፋት በላይ ሶስት አምዶች አድርጉት።”

ደረጃ 3፡ ቦታ ያዦችን ይተኩ

የቦታ ያዥ ምስሎቹን በእርስዎ ይተኩ፣ ChatGPT የፈጠረውን ጽሑፍም ይቀይሩ። ዋጋዎችን፣ ኢሜሎችንና ስሞችን በጥንቃቄ ያረጋግጡ፤ AI ክፍተቶችን በልበ ሙሉነት ይሞላል።

ደረጃ 4፡ በኢንተርኔት ላይ ያድርጉት

ፋይሉን እንደ GitHub Pages ወደ ነጻ ስታቲክ ማስተናገጃ ይስቀሉ፣ ወይም አስቀድመው የሚከፍሉበትን ማንኛውንም የድረ-ገጽ አስተናጋጅ ይጠቀሙ። የህዝብ አድራሻ ያገኛሉ። የራስዎን ጎራ ለመጠቀም የአስተናጋጁን መመሪያ ይከተሉ፤ ብጁ ጎራ ማገናኘት መመሪያችን የDNS ክፍሉን ያብራራል።

ዘዴ 1 የሚቆምበት ቦታ

• መረጃ የሚያስቀምጡ ቅጾች። የመገናኛ ቅጽ ማስገቢያዎቹን የሚልክበት ቦታ ያስፈልገዋል። የቅጽ አገልግሎት ወይም ሰርቨር ያስፈልግዎታል።
• መግቢያዎችና የአባላት ክፍሎች። እነዚህ ለጀርባ ስርዓትና ዳታቤዝ ያስፈልጋሉ።
• ብዙ ገጾች። በእጅ ለጠፏቸው አሥር ፋይሎች ራስጌና ምናሌ ወጥ ማድረግ አድካሚ ይሆናል።
• ዝመናዎች። እያንዳንዱ ለውጥ አዲስ ኮድ መጠየቅ፣ መለጠፍና እንደገና መስቀልን ይጠይቃል።

ዘዴ 2፡ ChatGPT ያቅዳል፣ ገንቢ ይገነባል

እዚህ ChatGPT ማሰብና መጻፍን ይሰራል፤ የድረ-ገጽ ገንቢ ግን መገንባትና ማስተናገድን ይሰራል።

ደረጃ 1፡ ድረ-ገጹን ከChatGPT ጋር ያቅዱ

በማንቸስተር ውስጥ የኬክ ትዕዛዝ የሚቀበል አነስተኛ የቤተሰብ ዳቦ ቤት እሰራለሁ። ድረ-ገጼ የሚፈልጋቸውን ገጾች፣ እያንዳንዱ ገጽ ምን ማለት እንዳለበትና ጎብኚዎች በእያንዳንዱ ገጽ ላይ እንዲወስዱት የምፈልገውን አንድ እርምጃ ጠቁም። እስከ አምስት ገጾች ብቻ አድርግ።

ደረጃ 2፡ ጽሑፉን ጻፉ

የእያንዳንዱን ገጽ ጽሑፍ ጠይቁ፣ ከዚያ በራሳችሁ አገላለጽ ቀይሩት። ChatGPT የማያውቃቸውን እውነተኛ ዝርዝሮች ጨምሩ፡ የመክፈቻ ሰዓት፣ ዋጋዎች፣ የማድረሻ አካባቢዎች፣ ኬኮቻችሁን ልዩ የሚያደርገው ምንድን ነው።

ደረጃ 3፡ በገንቢ ውስጥ ገንቡት

እቅዱንና ጽሑፉን ወደ ድረ-ገጽ ገንቢ ለጥፉ። በድራግ-ኤንድ-ድሮፕ መሳሪያ ጽሑፉን ወደ አብነት ታስቀምጣላችሁ። በAI ገንቢ ግን ሙሉ እቅዱን በአንድ መልዕክት መስጠት ይቻላል፤ ለምሳሌ በMythex ድረ-ገጽ ገንቢ፦

ለማንቸስተር የቤተሰብ ዳቦ ቤት ይህን እቅድና ጽሑፍ በመጠቀም ድረ-ገጽ ገንባ፡ [ለጥፍ]። እያንዳንዱን የኬክ ትዕዛዝ (ስም፣ ስልክ፣ የኬክ ዓይነት፣ የሚፈለግበት ቀን፣ መልዕክት) የሚያስቀምጥ የትዕዛዝ ቅጽ አካትት፤ እኔ ብቻ መግባት በምችልበት የአስተዳዳሪ ገጽ ላይ ላየው። ሞቅ ያለ የቤት ዲዛይን፣ በስልክ የሚሰራ።

እዚህ የትዕዛዝ ቅጹ እውነተኛ ዳታቤዝ ላይ ያስቀምጣል፤ የተለጠፈ HTML ፋይል ይህን ማድረግ አይችልም። ስለዚህ መንገድ ተጨማሪ ለማወቅ AI በመጠቀም ድረ-ገጽ እንዴት መስራት እንደሚቻል ይመልከቱ።

ዘዴ 3፡ ከChatGPT ውስጥ ገንብተው ያሳትሙ

አዲሱ አማራጭ ገንቢን ከChatGPT ጋር በማገናኘት ChatGPT የገንቢውን መሳሪያዎች በቀጥታ እንዲጠቀም ማድረግ ነው። በChatGPT ውይይቱ ውስጥ ይቆያሉ፤ ገንቢው ፕሮጀክቱን፣ ቅድመ-እይታውን፣ ዳታቤዙንና ማስተናገጁን ያቀርባል።

Mythex በዚህ መንገድ ይሰራል፣ በChatGPT መተግበሪያው (MCP አያያዥ) በኩል። በMythex የመለያ ቅንብር ውስጥ ታገናኙታላችሁ፤ ማገናኘቱ በማንኛውም እቅድ ይሠራል፤ የፕሮጀክትዎን ሳንድቦክስ የሚያሄዱ መሳሪያዎች ግን Pro ያስፈልጋቸዋል። ከተገናኘ በኋላ እንደዚህ ያለ ነገር ይጠይቁ፡

Mythex በመጠቀም ለዳቦ ቤቴ አዲስ ድረ-ገጽ ፍጠር፤ መነሻ ገጽ፣ ኬኮችና ዋጋቸውን የሚያሳይ የምናሌ ገጽ፣ እና ወደ ዳታቤዝ የሚያስቀምጥ የትዕዛዝ ቅጽ ይኑረው። ቅድመ-እይታውን አሳየኝ፤ ጥሩ ሲመስል ከዚያ አሳትመው።

ከዚያ ChatGPT ፕሮጀክቱን ይፈጥራል፣ ኮዱን ይጽፋል፣ ያሄዳል፤ ካጸደቁት በኋላ ወደ ህዝባዊ URL ያሳትመዋል። ለውጦች በዚሁ ውይይት ተጨማሪ መልዕክቶች ናቸው። ተመሳሳዩ አያያዥ ከClaude፣ Cursor እና Codex ጋርም ይሰራል። ይህ እንዴት እንደሚሰራና የትኞቹ ገንቢዎች እንደሚደግፉት ለማወቅ AI መተግበሪያ ገንቢዎች ከMCP ጋር ይመልከቱ።

የትኛውን መንገድ መምረጥ አለብዎት?

ለማንኛውም ዘዴ የሚሰሩ የፕሮምፕት ምክሮች

• እውነታዎችን ቀድመው ይስጡ። ስም፣ ቦታ፣ አገልግሎቶች፣ ዋጋዎች፣ የመገናኛ ዝርዝሮች። ያልተፈጠሩ ዝርዝሮች ባነሱ ቁጥር ማጽዳቱ ቀላል ይሆናል።
• ጎብኚውንና ግቡን ይግለጹ። “የልደት ኬክ የሚፈልግ ወላጅ፣ በመጨረሻ የትዕዛዝ ጥያቄ መላክ ያለበት።”
• በስልክ ለሚሰራ አቀማመጥ ጠይቁ። አብዛኞቹ ጎብኚዎች ስልክ ይጠቀማሉ።
• የመጀመሪያው ስሪት ከተገኘ በኋላ በአንድ መልዕክት አንድ ነገር ይቀይሩ።
• የSEO መሠረቶችን በግልጽ ጠይቁ፡ ለእያንዳንዱ ገጽ ልዩ ርዕስና መግለጫ፣ እውነተኛ ርዕሶች፣ ለምስሎች alt ጽሑፍ። ለAI የተገነቡ ድረ-ገጾች SEO ይመልከቱ።

የለAI መተግበሪያ ገንቢዎች ፕሮምፖችን መጻፍ መመሪያችን ተጨማሪ ንድፎች አሉት።

የተለመዱ ችግሮችና መፍትሄዎቻቸው

• ዲዛይኑ አጠቃላይ ይመስላል። ማጣቀሻ ይስጡ፡ “ጸጥ ያለ የስካንዲኔቪያን ካፌ ዓይነት፣ ብዙ ነጭ እና አንድ የደበዘዘ አረንጓዴ።”
• ኮዱ ተቆርጧል። ChatGPT ከመጨረሻው መስመር እንዲቀጥል ወይም ገጹን ወደ ክፍሎች ከፍሎ አንድ በአንድ እንዲሰጥ ይጠይቁ።
• የፈጠራቸው ምስክርነቶችን ወይም ስታቲስቲክሶችን ነው። ያስወግዱአቸው። የውሸት ግምገማዎች እምነትን ይጎዳሉ፤ በብዙ ቦታዎችም የሸማቾች ጥበቃ ሕጎችን ይጥሳሉ።
• ከለውጥ በኋላ ድረ-ገጹ ይሰበራል። አዲስ ኮድ ከመለጠፍዎ በፊት የመጨረሻውን የሚሰራ ስሪት ቅጂ ያስቀምጡ። እንደ Mythex ያሉ ገንቢዎች ወደ ኋላ መመለስ እንዲችሉ ቼክፖይንቶችን ያስቀምጣሉ።

ከማሳተምዎ በፊት

በእያንዳንዱ ገጽ ላይ ያለውን ጽሑፍ ሁሉ ያንብቡ። የመገናኛ ዝርዝሮቹ መስራታቸውን ያረጋግጡ። ድረ-ገጹን በስልክ ይክፈቱ። ምስሎቹ የእርስዎ ወይም በፈቃድ የተያዙ መሆናቸውን ያረጋግጡ። ከዚያ ያሳትሙ፣ ጎብኚዎችዎ ባሉበትም ያጋሩ። ሙሉ ጉዳዩ ምንም ወጪ እንዳያስከፍል ከፈለጉ፣ ለነጻ ድረ-ገጽ እንዴት መስራት እንደሚቻል ስለ ነጻ ማስተናገጃ አማራጮች በዝርዝር ያብራራል።

ጥያቄዎች