Դուք ունեք դիզայն և բեքենդ, և ձեզ անհրաժեշտ է այն մասը, որն իրականում տեսնում են օգտատերերը։ Ես Figma էկրանները վերածում եմ React կամ Next.js ֆրոնտենդի TypeScript-ում, որը հարմարեցված է հեռախոսից մինչև աշխատասեղան, և միացնում եմ այն ձեր API-ին՝ մշակված բեռնման, դատարկ և սխալի վիճակներով։
Ես կստեղծեմ ձեր React կամ Next.js ֆրոնտենդը Figma դիզայնից և կմիացնեմ այն ձեր API-ին
Մեկ էկրան ձեր Figma ֆայլից, արձագանքող, տպված և միացված ձեր API-ին։
- Մեկ էկրան
- Արձագանքող դիզայն
- Միացված է ձեր API-ին
- Աղբյուրի կոդ
Մինչև 5 էկրան միացված ձեր API-ին, բեռնման, դատարկ և սխալի վիճակներով։
- Մինչև 5 էկրան
- Արձագանքող դիզայն
- Միացված է ձեր API-ին
- Աղբյուրի կոդ
Մինչև 12 էկրան, մուտք ձեր հավաստագրման միջոցով, ընդհանուր բաղադրիչներ և թեստեր։
- Մինչև 12 էկրան, մուտք, թեստեր
- Արձագանքող դիզայն
- Միացված է ձեր API-ին
- Աղբյուրի կոդ
Հարցնել անհատական առաջարկ
Մուտք գործեք՝ անհատական առաջարկ հարցնելու համար
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ այս Zinner-ից անհատական առաջարկ հարցնելու համար։
Մուտք / ԳրանցումՀարց տալ մինչև վաճառքը
Մուտք գործեք՝ հարց տալու համար
Հարթակի սպամը նվազեցնելու համար մինչև վաճառքի հաղորդագրությունները կարող են ուղարկվել միայն մուտք գործած օգտատերերի կողմից։
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ անմիջապես այս Zinner-ին հաղորդագրություն ուղարկելու համար։
Մուտք / ԳրանցումՊահանջվում է մուտք
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ այս Zinner-ին հաղորդագրություն ուղարկելու համար։
Մուտք / ԳրանցումՊահանջվում է մուտք
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ անհատականացված առաջարկ խնդրելու համար։
Մուտք / ԳրանցումՄի հայացքից
Այս ծառայության հիմնական մանրամասները, որոնք կօգնեն ձեզ որոշում կայացնել: Ստեղծվել է Zinn Hub-ի կողմից, ոչ թե վաճառողի:
Արժեքային դիրք
Տեխնոլոգիական փաթեթ
Արձագանքող և բազմաբրաուզերային
API ինտեգրում
Աջակցության ժամանակահատված
Ինչ կստանաք
Ամբողջական նկարագրություն
Դիզայնը արված է, և API-ն պատրաստ է կամ գրեթե պատրաստ է, բայց այն էկրանները, որոնք կտեսնեն օգտատերերը, դեռ գոյություն չունեն։ Ես կառուցում եմ միայն ֆրոնտենդը. ձեր բեքենդը, հավաստագրման մատակարարը և հոսթինգը մնում են այնպես, ինչպես կան, և կոդը գնում է ձեր պահոց։ Առաքումից հետո 14 օրվա ընթացքում ես անվճար շտկում եմ այն ամենը, ինչը չի աշխատում, ինչպես մենք համաձայնեցրել ենք։
Starter-ի հետ դուք ստանում եք մեկ էկրան կամ էջ ձեր Figma ֆայլից, արձագանքող և տպված, որի տվյալները գալիս են ձեր API-ից, կամ մոդելից, մինչև վերջնակետը գոյություն ունենա։ Standard-ը ներառում է մինչև հինգ էկրան, որոնք միացված են ձեր API-ին, բեռնման, դատարկ և սխալի վիճակներով և ձևերով՝ վավերացումով։ Advanced-ը թույլ է տալիս մինչև տասներկու էկրան և ավելացնում է մուտքի էկրաններ, որոնք աշխատում են ձեր հավաստագրման մատակարարի հետ, ընդհանուր բաղադրիչներ, որոնք օգտագործվում են հավելվածում, և թեստեր հիմնական հոսքերի համար։
Ես ուշադիր հետևում եմ դիզայնին. բացատները, տիպի մասշտաբը և գույները գալիս են Figma ֆայլից։ Այնտեղ, որտեղ էկրանը չունի բջջային տարբերակ, ես առաջարկում եմ մեկը՝ այն կառուցելուց առաջ, այլ ոչ թե գուշակելով։ Next.js-ը App Router-ի հետ իմ լռելյայնն է. պարզ React-ը Vite-ով լավ է, երբ ձեզ անհրաժեշտ չէ սերվերի ռենդերինգ։ Ոճավորման համար ես օգտագործում եմ Tailwind CSS կամ CSS Modules, որն էլ ձեր նախագիծն արդեն ունի։
Ես ստուգում եմ արդյունքը Chrome-ում, Firefox-ում և Edge-ում աշխատասեղանի վրա, և Chrome-ում իրական Android հեռախոսի վրա։
Իմ ֆրոնտենդ աշխատանքի երկու հանրային օրինակ կա պորտֆոլիոյում. Next.js խանութ՝ ֆիլտրերով, զամբյուղով և վճարումով, և իմ սեփական երկլեզու կայքը։
Ես աշխատում եմ միայն գրավոր, առանց հանդիպումների։ Էկրանները և դրանց հետևում գտնվող վերջնակետերը նշվում են նախքան ես սկսելը, նախադիտման հղումը ցույց է տալիս աշխատանքը, քանի որ այն աճում է, և կարճ առաջընթացի նշումը գալիս է չաթում ամեն աշխատանքային օր։
Ձեր նախագիծը ավարտելու քայլերը
1. Էկրանների ցուցակ - Ես անցնում եմ Figma ֆայլի և ձեր API փաստաթղթերի միջով և գրում յուրաքանչյուր էկրան, դրա վիճակները և այն վերջնակետերը, որոնք այն կանչում է։ Դուք հաստատում եք ցուցակը ցանկացած կոդից առաջ։
2. Հիմնական և ընդհանուր մասեր - Նախագծի կարգավորում կամ ձեր առկա պահոցը, գույները և տիպը Figma-ից, և դասավորությունը և բաղադրիչները, որոնք յուրաքանչյուր էկրան վերաօգտագործում է։
3. Էկրաններ և տվյալներ - Յուրաքանչյուր էկրան կառուցվում է դիզայնին համապատասխան և միացվում է ձեր API-ին՝ բեռնման, դատարկ և սխալի վիճակներով։ Բացակայող վերջնակետը ստանում է մոդել, որը հեշտ է փոխել։
4. Վերանայման փուլ նախադիտման հղումով - Դուք սեղմում եք և ուղարկում ուղղումներ մեկ ցուցակով։ Ես շտկում եմ դրանք և նորից ցույց տալիս նույն հղումը։
5. Հանձնում - Կոդը ձեր պահոցում, կարճ նշում կառուցվածքի և այն գործարկելու մասին, և Advanced-ի վրա, թեստեր, որոնք կարող եք գործարկել յուրաքանչյուր թողարկումից առաջ։
Zinner Որակի Երաշխիք
Յուրաքանչյուր Zinner վերանայվում և հաստատվում է հարթակին միանալուց առաջ:
Բոլոր ծառայություններն ապահովված են մեր որակի ապահովման պարտավորությամբ:
Ձեր վճարումը պաշտպանված է մինչև առաքված աշխատանքը հաստատելը:
Համեմատել փաթեթները
| Ֆունկցիա | Սկսնակ | Ստանդարտ | Ընդլայնված |
|---|---|---|---|
| Առաքման ժամանակը | 4 օր | 9 օր | 18 օր |
| Վերանայումներ | 1 | 2 | 3 |
| Շրջանակ | Մեկ էկրան | Մինչև 5 էկրան | Մինչև 12 էկրան, մուտք, թեստեր |
| Արձագանքող դիզայն | ✓ | ✓ | ✓ |
| Միացված է ձեր API-ին | ✓ | ✓ | ✓ |
| Աղբյուրի կոդը | ✓ | ✓ | ✓ |
Նմուշներ
Դիտեք վաճառողի աշխատանքի օրինակները, որոնք կապված են այս Zinn-ի հետ:
Պորտֆոլիո
Վաճառողի աշխատանքի օրինակներ՝ կապված այս Zinn-ի հետ։
Formline: Next.js խանութ Stripe-ով
Խանութ, որի միջով կարող եք սեղմել. 16 պաստառներ 4 հավաքածուներում, զտիչներ և որոնում, որոնք մնում են URL-ում, զամբյուղ, բաց և մուգ թեմաներ, և վճարում, որն ավարտվում է դեմո պատվերով կամ իրական Stripe Checkout նիստով թեստային ռեժիմում։ Ես այն կառուցել եմ որպես Next.js ստատիկ արտահանում TypeScript-ում Tailwind CSS-ով։ Քարտային վճարումները անցնում են Cloudflare Worker-ի միջոցով, որը վերագնահատում է զամբյուղը սերվերում և ստուգում է Stripe-ի վեբհուկի ստորագրությունը։
Երկլեզու անձնական կայք Next.js-ում
Մեկ էջանոց անձնական կայք անգլերեն և ռուսերեն լեզուներով, ծառայությունների բաժնով և հղումներով դեպի իմ դեմո նախագծերը։ Ես այն նախագծել և կառուցել եմ Next.js-ով, React-ով և TypeScript-ով որպես ստատիկ արտահանում, ձևավորված պարզ CSS Modules-ով և առանց UI շրջանակի։ Այն ունի բաց և մուգ թեմաներ, և յուրաքանչյուր լեզվի համար սոցիալական նախադիտման պատկերը ստեղծվում է կառուցման ժամանակ։ GitHub Actions-ը կառուցում և տեղակայում է այն Bunny CDN-ում, որն ավելացնում է անվտանգության վերնագրեր և վերահղում է www-ն և պարզ HTTP-ն դեպի հիմնական HTTPS հասցեն։
Ծառայության մանրամասներ
Հաճախ տրվող հարցեր
Այո։ Ես առաջարկում եմ յուրաքանչյուր էկրանի բջջային դասավորությունը՝ այն կառուցելուց առաջ, գրավոր կամ արագ էսքիզի տեսքով, որպեսզի դուք այն հաստատեք նախապես, այլ ոչ թե հայտնաբերեք վերջում։
Այո։ Ես հետևում եմ առկա թղթապանակի կառուցվածքին, անվանմանը և ոճավորմանը, որպեսզի նոր կոդը օգտագործի նույն օրինաչափությունները, և հաջորդ մշակողը չգտնի երկու ոճ։
Ես համապատասխանեցնում եմ բացատները, չափերը և գույները ֆայլից։ Այնտեղ, որտեղ դիզայնը և իրական տվյալները չեն համընկնում, ինչպես օրինակ՝ մոդելից ավելի երկար անունը, ես դա նշում եմ և առաջարկում շտկում, այլ ոչ թե թույլ տալիս, որ դասավորությունը խախտվի։
Այս ծառայությունը միայն ֆրոնտենդն է։ Node.js-ում Express-ով կամ NestJS-ով բեքենդի համար տես իմ բեքենդ Zinn-ը, կամ պատվիրեք երկուսն էլ, և ես դրանք միասին կգնահատեմ։
Հաճախորդների ակնարկներ
Տեսեք, թե ինչ են ասում մեր հաճախորդները այս Zinn-ի մասին
Կատեգորիաներ
Zinner Քաղաքականություն
Առնչվող Zinns
կատարել php, css, javascript, html, prestashop, mailchimp, rest, json, xml, joomla
