ዲዛይን እና የኋላ ክፍል አለዎት፣ እና ተጠቃሚዎች በትክክል የሚያዩትን ክፍል ያስፈልግዎታል። የFigma ስክሪኖችን ወደ React ወይም Next.js የፊት ለፊት ክፍል በTypeScript እቀይራለሁ፣ ከስልክ እስከ ዴስክቶፕ ድረስ ምላሽ ሰጪ እንዲሆን አደርጋለሁ፣ እና በመጫን፣ ባዶ እና የስህተት ሁኔታዎች ተስተናግደው ከእርስዎ ኤፒአይ ጋር አገናኘዋለሁ።
የእርስዎን React ወይም Next.js የፊት ለፊት ክፍል ከFigma ዲዛይን እገነባለሁ እና ከእርስዎ ኤፒአይ ጋር አገናኘዋለሁ።
አንድ ስክሪን ከእርስዎ Figma ፋይል፣ ምላሽ ሰጪ፣ የተተየበ እና ከእርስዎ ኤፒአይ ጋር የተገናኘ።
- አንድ ስክሪን
- ምላሽ ሰጪ ንድፍ
- ከእርስዎ ኤፒአይ ጋር የተገናኘ
- ምንጭ ኮድ
እስከ 5 ስክሪኖች ከእርስዎ ኤፒአይ ጋር የተገናኙ፣ በመጫን፣ ባዶ እና ስህተት ሁኔታዎች።
- እስከ 5 ስክሪኖች
- ምላሽ ሰጪ ንድፍ
- ከእርስዎ ኤፒአይ ጋር የተገናኘ
- ምንጭ ኮድ
እስከ 12 ስክሪኖች፣ ከእርስዎ ማረጋገጫ ጋር መግባት፣ የተጋሩ አካላት እና ሙከራዎች።
- እስከ 12 ስክሪኖች፣ መግቢያ፣ ሙከራዎች
- ምላሽ ሰጪ ንድፍ
- ከእርስዎ ኤፒአይ ጋር የተገናኘ
- ምንጭ ኮድ
ብጁ ቅናሽ ይጠይቁ
ከሽያጭ በፊት ጥያቄ ይጠይቁ
ጥያቄ ለመጠየቅ ይግቡ
የመድረክ አይፈለጌ መልዕክትን ለመቀነስ፣ ቅድመ-ሽያጭ መልዕክቶች ሊላኩ የሚችሉት በገቡ ተጠቃሚዎች ብቻ ነው።
ነፃ መለያ ይፍጠሩ ወይም ይህን Zinner በቀጥታ ለመላክ ይግቡ።
ግባ / ይመዝገቡበአጭሩ
ይህንን አገልግሎት ለመወሰን የሚረዱ ቁልፍ ዝርዝሮች። በZinn Hub የተፈጠረ፣ በሻጩ አይደለም።
የእሴት አቀማመጥ
የቴክኖሎጂ ቁልል
ተለዋዋጭ እና በተለያዩ አሳሾች ላይ የሚሰራ
የኤፒአይ ውህደት
የድጋፍ ጊዜ
የሚያገኙት
ሙሉ መግለጫ
ዲዛይኑ ተጠናቅቋል እና ኤፒአይ ዝግጁ ነው ወይም ሊጠናቀቅ ተቃርቧል፣ ነገር ግን ተጠቃሚዎች የሚያዩዋቸው ስክሪኖች ገና የሉም። የፊት ለፊት ክፍልን ብቻ ነው የምገነባው፡ የእርስዎ የኋላ ክፍል፣ የማረጋገጫ አቅራቢ እና ማስተናገጃ እንዳሉ ይቆያሉ፣ እና ኮዱ ወደ ማከማቻዎ ይገባል። ከማድረስ በኋላ ለ14 ቀናት፣ እንደተስማማነው የማይሰራውን ማንኛውንም ነገር ከክፍያ ነጻ እጠግናለሁ።
በጀማሪ አንድ ስክሪን ወይም ገጽ ከእርስዎ Figma ፋይል፣ ምላሽ ሰጪ እና የተተየበ፣ ከእርስዎ ኤፒአይ ወይም ከመጨረሻው ነጥብ እስኪኖር ድረስ ከሞክ የሚመጣ ውሂብ ያገኛሉ። ስታንዳርድ እስከ አምስት ስክሪኖች ከእርስዎ ኤፒአይ ጋር የተገናኙ፣ በመጫን፣ ባዶ እና ስህተት ሁኔታዎች እና ቅጾች ከማረጋገጫ ጋር ይሸፍናል። አድቫንስድ እስከ አስራ ሁለት ስክሪኖች ይፈቅዳል እና ከእርስዎ ማረጋገጫ አቅራቢ ጋር የሚሰሩ የመግቢያ ስክሪኖች፣ በመተግበሪያው ውስጥ ጥቅም ላይ የሚውሉ የተጋሩ አካላት እና ለዋና ፍሰቶች ሙከራዎችን ይጨምራል።
ዲዛይኑን በጥብቅ እከተላለሁ፡ ክፍተቶች፣ የዓይነት መጠን እና ቀለሞች ከFigma ፋይል ይመጣሉ። አንድ ስክሪን የሞባይል ስሪት ከሌለው፣ ከመገንባቱ በፊት ከመገመት ይልቅ አንድ አቀርባለሁ። Next.js ከApp Router ጋር የእኔ ነባሪ ነው፤ የአገልጋይ ማቅረቢያ በማይፈልጉበት ጊዜ ከVite ጋር ያለው ንጹህ React ጥሩ ነው። ለስታይል Tailwind CSS ወይም CSS Modules እጠቀማለሁ፣ የትኛውም ፕሮጀክትዎ አስቀድሞ ያለው።
ውጤቱን በChrome፣ Firefox እና Edge በዴስክቶፕ ላይ፣ እና በChrome በእውነተኛ አንድሮይድ ስልክ ላይ እፈትሻለሁ።
የእኔ የፊት-መጨረሻ ሥራ ሁለት የህዝብ ምሳሌዎች በፖርትፎሊዮ ውስጥ ይገኛሉ፡ ማጣሪያዎች፣ ጋሪ እና መውጫ ያለው Next.js የሱቅ ፊት፣ እና የእኔ የሁለት ቋንቋ ጣቢያ።
በጽሁፍ ብቻ ነው የምሰራው፣ ያለ ስብሰባ። ስክሪኖቹ እና ከኋላቸው ያሉት የመጨረሻ ነጥቦች ከመጀመሬ በፊት ተዘርዝረዋል፣ የቅድመ እይታ አገናኝ ስራው ሲያድግ ያሳያል፣ እና አጭር የሂደት ማስታወሻ በየስራ ቀን በውይይት ውስጥ ይመጣል።
ፕሮጀክትዎን ለማጠናቀቅ የሚረዱ እርምጃዎች
1. የስክሪን ዝርዝር - የFigma ፋይልዎን እና የኤፒአይ ሰነዶችዎን እመለከታለሁ እና እያንዳንዱን ስክሪን፣ ሁኔታዎቹን እና የሚጠራቸውን የመጨረሻ ነጥቦች እጽፋለሁ። ማንኛውም ኮድ ከመጻፉ በፊት ዝርዝሩን ያረጋግጣሉ።
2. መሰረታዊ እና የተጋሩ ክፍሎች - የፕሮጀክት ማዋቀር ወይም ያለዎት ማከማቻ፣ ከFigma የተገኙ ቀለሞች እና አይነቶች፣ እና እያንዳንዱ ስክሪን እንደገና የሚጠቀምባቸው አቀማመጦች እና ክፍሎች።
3. ስክሪኖች እና ዳታ - እያንዳንዱ ስክሪን በንድፍ መሰረት የተሰራ እና ከእርስዎ ኤፒአይ ጋር የተገናኘ ነው፣ ከመጫን፣ ባዶ እና ስህተት ሁኔታዎች ጋር። የጎደለ የመጨረሻ ነጥብ ለመለዋወጥ ቀላል የሆነ ሞክ ያገኛል።
4. በቅድመ እይታ ማገናኛ ላይ የግምገማ ዙር - እርስዎ ጠቅ ያደርጋሉ እና እርማቶችን በአንድ ዝርዝር ውስጥ ይልካሉ። እኔ አስተካክላቸዋለሁ እና ተመሳሳይ ማገናኛን እንደገና አሳያለሁ።
5. አሳልፎ መስጠት - ኮዱ በእርስዎ ማከማቻ ውስጥ፣ ስለ አወቃቀሩ እና እንዴት ማስኬድ እንደሚቻል አጭር ማስታወሻ፣ እና ስለ የላቁ፣ ከእያንዳንዱ ልቀት በፊት ሊያካሂዷቸው የሚችሏቸው ሙከራዎች።
የZinner ጥራት ዋስትና
እያንዳንዱ Zinner መድረኩን ከመቀላቀሉ በፊት ይገመገማል እና ይፀድቃል።
ሁሉም አገልግሎቶች በጥራት ማረጋገጫ ቁርጠኝነታችን የተደገፉ ናቸው።
የተሰጠውን ስራ እስኪያፀድቁ ድረስ ክፍያዎ የተጠበቀ ነው።
ጥቅሎችን ያወዳድሩ
| ተግባር | ጀማሪ | መደበኛ | የላቀ |
|---|---|---|---|
| የማስረከቢያ ጊዜ | 4 ቀናት | 9 ቀናት | 18 ቀናት |
| ክለሳዎች | 1 | 2 | 3 |
| ወሰን | አንድ ስክሪን | እስከ 5 ስክሪኖች | እስከ 12 ስክሪኖች፣ መግቢያ፣ ሙከራዎች |
| ምላሽ ሰጪ ንድፍ | ✓ | ✓ | ✓ |
| ከእርስዎ ኤፒአይ ጋር የተገናኘ | ✓ | ✓ | ✓ |
| ምንጭ ኮድ | ✓ | ✓ | ✓ |
ናሙናዎች
ከዚህ Zinn ጋር የተያያዙ የሻጩን የስራ ምሳሌዎች ይመልከቱ።
ፖርትፎሊዮ
ከዚህ Zinn ጋር የተያያዙ የሻጩ ሥራዎች ምሳሌዎች።
ፎርምላይን፡ Next.js ማከማቻ ከ Stripe ጋር
ሊጫኑት የሚችሉት የሱቅ ፊት ለፊት፡ 16 ፖስተሮች በ4 ስብስቦች ውስጥ፣ በማህደር ውስጥ የሚቆዩ ማጣሪያዎች እና ፍለጋዎች፣ ጋሪ፣ ቀላል እና ጨለማ ገጽታዎች፣ እና በሙከራ ሁነታ በዴሞ ትዕዛዝ ወይም በእውነተኛ የStripe Checkout ክፍለ ጊዜ የሚያልቅ ክፍያ። በNext.js ስታቲክ ኤክስፖርት በTypeScript ከTailwind CSS ጋር ገንብቼዋለሁ። የካርድ ክፍያዎች በCloudflare Worker በኩል ያልፋሉ ይህም ጋሪውን በአገልጋዩ ላይ እንደገና ይገመግማል እና የStripeን የድር መንጠቆ ፊርማ ያረጋግጣል።
ባለሁለት ቋንቋ የግል ጣቢያ በNext.js
አንድ ገጽ ያለው የግል ጣቢያ በእንግሊዝኛ እና በሩሲያኛ፣ የአገልግሎት ክፍል እና ወደ የእኔ ማሳያ ፕሮጀክቶች የሚወስዱ አገናኞች። በNext.js፣ React እና TypeScript እንደ ስታቲክ ኤክስፖርት ነድፌ ገንብቼዋለሁ፣ በቀላል CSS ሞጁሎች እና ያለ UI ማዕቀፍ። ቀላል እና ጨለማ ገጽታዎች አሉት፣ እና ለእያንዳንዱ ቋንቋ የማህበራዊ ቅድመ እይታ ምስል በግንባታ ጊዜ ይፈጠራል። GitHub Actions ይገነባል እና ወደ Bunny CDN ያሰማራዋል፣ ይህም የደህንነት ራስጌዎችን ይጨምራል እና www እና ቀላል HTTPን ወደ ዋናው HTTPS አድራሻ ያዞራል።
የአገልግሎት ዝርዝሮች
ተደጋግሞ የሚነሱ ጥያቄዎች
አዎ። እያንዳንዱን ስክሪን ከመገንባቴ በፊት የሞባይል አቀማመጡን በጽሁፍ ወይም እንደ ፈጣን ንድፍ አቀርባለሁ፣ ስለዚህ በመጨረሻ ከማግኘቱ ይልቅ አስቀድመው ያጸድቁታል።
አዎ። ያለውን የአቃፊ መዋቅር፣ ስያሜ እና ስታይል እከተላለሁ፣ ስለዚህ አዲስ ኮድ ተመሳሳይ ቅጦችን ይጠቀማል እና ቀጣዩ ገንቢ ሁለት ስታይሎችን አያገኝም።
ከፋይሉ ክፍተቶችን፣ መጠኖችን እና ቀለሞችን አዛምዳለሁ። ንድፉ እና እውነተኛው መረጃ በማይስማሙበት ቦታ፣ ለምሳሌ ከሞክአፑ የበለጠ ረጅም ስም፣ አቀማመጡ እንዳይበላሽ ከመፍቀድ ይልቅ ምልክት አደርጋለሁ እና መፍትሄ እጠቁማለሁ።
ይህ አገልግሎት የፊት ለፊት ክፍል ብቻ ነው። ለNode.js ከExpress ወይም NestJS ጋር ለተሰራ የኋላ ክፍል፣ የእኔን የኋላ ክፍል Zinn ይመልከቱ፣ ወይም ሁለቱንም ያዝዙ እና አብሬ እጠቅሳቸዋለሁ።
የደንበኛ ግምገማዎች
ደንበኞቻችን ስለዚ Zinn ምን እንደሚሉ ይመልከቱ
