Wellbeing Nutrition: Shopify పై యాప్ యొక్క గ్రౌండ్-అప్ రీబిల్డ్

సమస్య

Wellbeing Nutrition ఒక D2C న్యూట్రిషన్ బ్రాండ్, దీని వెబ్‌సైట్ Shopify పై నిర్మించబడి పాలిష్‌గా ఉంది. దీనికి లేనిది ఒక మంచి యాప్. ప్రస్తుత యాప్ Shopify యొక్క App Maker తో నిర్మించబడింది, మరియు అనుభవంలో ఇది స్పష్టంగా కనిపించింది: ఇది పని చేసేది, కానీ ఎప్పుడూ స్మూత్‌గా అనిపించేది కాదు. నేను దీన్ని Infinite Locus లో చేపట్టాను, మరియు బ్రీఫ్ చాలా స్పష్టంగా ఉంది: React Native లో స్క్రాచ్ నుండి ఒక పూర్తిగా కొత్త iOS మరియు Android యాప్‌ను నిర్మించడం, అది వేగంగా మరియు పాలిష్‌గా అనిపించాలి, మరియు దీన్ని ఏ కొత్త బ్యాకెండ్ లేకుండా చేయడం. ఆర్డర్లు, క్యాటలాగ్, మరియు డ్యాష్‌బోర్డ్ Shopify పైనే నడుస్తూ ఉంటాయి, సరిగ్గా వెబ్‌లో నడిచినట్లే.

ఆసక్తికరమైన కన్‌స్ట్రెయింట్ ఆ చివరి భాగమే. Shopify వెబ్ React యాప్‌లో సులభంగా కనెక్ట్ అవుతుంది; React Native కి అలాంటి పోల్చదగిన మార్గం లేదు.

నిర్ణయాలు

నేరుగా Shopify తో మాట్లాడండి, దీని కోసం రూపొందించబడని క్లయింట్ నుండి. వెబ్ SDK ను దాని స్థానం లేని చోట బలవంతంగా అమర్చడానికి బదులు, నేను Shopify యొక్క GraphQL API ను ఉపయోగించి స్టోర్‌కి కనెక్ట్ అయ్యాను మరియు యాప్‌కి అవసరమైన అన్నింటినీ లాగాను: ప్రొడక్ట్‌లు, కలెక్షన్‌లు, కార్ట్‌లు, ఆర్డర్లు. దీనితో నిజమైన Shopify డేటా మధ్యలో ఏ అదనపు సర్వీస్ లేకుండా ఒక React Native యాప్‌లోకి ప్రవహించడం మొదలైంది.

డేటాను చౌకగా ఉండే చోట రీషేప్ చేయండి, భారంగా ఉండే చోట కాదు. Shopify డేటాను దాని స్వంత షేప్‌లో తిరిగి ఇస్తుంది, నా స్క్రీన్‌లకు అవసరమైన షేప్‌లో కాదు, కాబట్టి మొదటి వెర్షన్ Shopify నుండి డేటాను లాగి ప్రతి రెస్పాన్స్‌ను డివైస్‌పైనే క్లీన్ చేసింది. ఇది పని చేసేది, కానీ ప్రతి క్వెరీని ఫోన్‌పై ప్రాసెస్ చేయడం వల్ల యాప్ భారంగా మరియు నెమ్మదిగా అయింది, అది బ్రీఫ్‌కి పూర్తిగా వ్యతిరేకం. కాబట్టి నేను బ్రీఫ్‌లో మొదట లేని ఆ ఒక్క భాగాన్ని జోడించాను: Shopify మరియు యాప్ మధ్య కూర్చునే ఒక సన్నని Node సర్వీస్. ఇది భారమైన GraphQL క్వెరీలను నడుపుతుంది, డేటాను క్లీన్ చేసి రీషేప్ చేస్తుంది, మరియు యాప్‌కి ఒక సింపుల్ API ద్వారా అవసరమైనదాన్నే అందిస్తుంది. ఆ ఒక్క కదలికే యాప్‌ను స్మూత్‌గా చేసింది. ప్రతిదీ దీని ద్వారా వెళ్ళదు: తేలికపాటి క్వెరీలు ఇప్పటికీ యాప్ నుండి నేరుగా Shopify కి వెళ్తాయి, తద్వారా నాకు అవసరం లేని హాప్ ఖర్చు చెల్లించాల్సిన అవసరం లేదు.

తప్పిపోయిన భాగాలను metaobjects తో మోడల్ చేయండి. స్టోర్‌ఫ్రంట్ యాప్‌కి అవసరమైనదాన్ని నేటివ్‌గా ఎక్స్‌పోజ్ చేయని చోట, నేను దాన్ని ఉంచడానికి Shopify metaobjects సృష్టించి వాటిని అదే పైప్‌లైన్ ద్వారా పంపాను, తద్వారా యాప్‌కి ఏ కస్టమ్ సిస్టమ్ ఆఫ్ రికార్డ్ నిలబెట్టకుండా ఒక క్లీన్, కన్సిస్టెంట్ డేటా మోడల్ లభించింది.

దీన్ని కొత్త యాప్‌గా కాదు, ఒక అప్‌డేట్‌గా షిప్ చేయండి. WBN టీమ్ రీబిల్డ్ ప్రస్తుత యూజర్లకు పాత App Maker యాప్ యొక్క అప్‌డేట్‌గా చేరాలని కోరుకుంది, ఒక కొత్త లిస్టింగ్‌గా కాదు. ప్రస్తుత యాప్‌ను ఎలా టేక్ ఓవర్ చేయాలో నేను కనుగొన్నాను, తద్వారా కొత్త బిల్డ్ దాని స్థానంలో షిప్ అయింది: అవే యూజర్లు, అదే స్టోర్ లిస్టింగ్, రేటింగ్ చెక్కుచెదరకుండా. ఎవరూ ఏదీ మళ్ళీ డౌన్‌లోడ్ చేయాల్సిన అవసరం లేదు, మరియు బయటి నుండి ఈ మార్పు అదృశ్యంగా ఉంది.

లాగిన్ మరియు చెకౌట్, కట్టలేదు, తీసుకున్నాను. నో-బ్యాకెండ్ లాజిక్ రెండు ఫ్లోలపై అత్యధికంగా వర్తించింది, వాటిని నేను చేతితో కట్టడానికి అతి తక్కువ కోరుకున్నాను: లాగిన్ మరియు పేమెంట్స్. నేను రెండింటికీ GoKwik ఇంటిగ్రేట్ చేశాను, తద్వారా తిరిగి వచ్చే కస్టమర్లకు వేగవంతమైన ఫోన్-నంబర్ లాగిన్ మరియు ఇండియన్ పేమెంట్స్ కోసం ట్యూన్ చేసిన చెకౌట్ లభించింది, మరియు ఏ ఆథ్ లేదా పేమెంట్ ఇన్‌ఫ్రాస్ట్రక్చర్ నాపై పడలేదు.

ముందు ఇన్‌స్ట్రుమెంట్ చేయి, తర్వాత ఎంగేజ్ చేయి. నేను ప్రొడక్ట్ అనలిటిక్స్ మరియు లైఫ్‌సైకిల్ మెసేజింగ్ కోసం CleverTap జోడించాను, తద్వారా బ్రాండ్ యాప్ నిజంగా ఎలా వాడబడుతోందో చూడగలిగింది మరియు లాంచ్ నుండే ప్రజలను పుష్ మరియు క్యాంపెయిన్‌ల ద్వారా చేరుకోగలిగింది, చీకటిలో షిప్ చేసి నెలల తర్వాత ఎంగేజ్‌మెంట్ జోడించే బదులు.

ఫలితం

రెండు యాప్‌లు షిప్ అయ్యాయి మరియు App Store మరియు Google Play లో లైవ్‌గా ఉన్నాయి, పాత App Maker యాప్ పైన ఒక సీమ్‌లెస్ అప్‌డేట్‌గా డెలివర్ చేయబడ్డాయి తద్వారా ప్రస్తుత ఆడియన్స్ మరియు రేటింగ్ చెక్కుచెదరకుండా ఉన్నాయి. ఫలితం ఒక వేగవంతమైన, నేటివ్‌గా అనిపించే React Native యాప్, అది పూర్తిగా Shopify పై నడుస్తుంది, దీనిలో ఒక చిన్న Node డేటా లేయర్ ఎక్కడ ముఖ్యమో అక్కడ మాత్రమే భారమైన పని చేస్తుంది. బ్రాండ్ తన కామర్స్ స్టాక్‌ను నిలుపుకుంది మరియు చివరకు తన వెబ్‌సైట్‌కి సరిపోయే యాప్ అనుభవాన్ని పొందింది.