# Wellbeing Nutrition: Shopify ನಲ್ಲಿ ಆ್ಯಪ್‌ನ ಗ್ರೌಂಡ್-ಅಪ್ ರೀಬಿಲ್ಡ್

> Wellbeing Nutrition ನ iOS ಮತ್ತು Android ಆ್ಯಪ್ ಅನ್ನು React Native ನಲ್ಲಿ ಮೊದಲಿನಿಂದ ಮರುನಿರ್ಮಿಸುವುದು, ತೆಳುವಾದ Node ಡೇಟಾ ಲೇಯರ್ ಮೂಲಕ Shopify ಗೆ ಸಂಪರ್ಕಿಸುವುದು, ಮತ್ತು ಹಳೆಯ ಆ್ಯಪ್‌ನ ಮೇಲೆ ಸರಾಗ ಅಪ್‌ಡೇಟ್ ಆಗಿ ಶಿಪ್ ಮಾಡುವುದು.

Canonical URL: https://saifsiddiqui.in/kn/work/wellbeing-nutrition/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/work/wellbeing-nutrition/ · hi: https://saifsiddiqui.in/hi/work/wellbeing-nutrition/ · ur: https://saifsiddiqui.in/ur/work/wellbeing-nutrition/ · te: https://saifsiddiqui.in/te/work/wellbeing-nutrition/ · ar: https://saifsiddiqui.in/ar/work/wellbeing-nutrition/ · hi-Latn: https://saifsiddiqui.in/hi-latn/work/wellbeing-nutrition/

**ಪಾತ್ರ:** ಸುನ್ನಾದಿಂದ ನಿರ್ಮಿಸಿದ  
**ಸ್ಟ್ಯಾಕ್:** React Native, Node.js, Shopify Storefront API, GraphQL, GoKwik, CleverTap

**ಕೊಂಡಿಗಳು**

- iOS: https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685
- Android: https://play.google.com/store/apps/details?id=com.coffye.pjfzfc

## ಸಮಸ್ಯೆ

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 ಸೇರಿಸಿದೆ, ಇದರಿಂದ ಬ್ರ್ಯಾಂಡ್ ಆ್ಯಪ್ ನಿಜವಾಗಿ ಹೇಗೆ
ಬಳಕೆಯಾಗುತ್ತಿದೆ ಎಂದು ನೋಡಬಹುದಿತ್ತು ಮತ್ತು ಲಾಂಚ್‌ನಿಂದಲೇ ಜನರನ್ನು ಪುಶ್ ಮತ್ತು ಕ್ಯಾಂಪೇನ್‌ಗಳ
ಮೂಲಕ ತಲುಪಬಹುದಿತ್ತು, ಕತ್ತಲೆಯಲ್ಲಿ ಶಿಪ್ ಮಾಡಿ ತಿಂಗಳ ನಂತರ ಎಂಗೇಜ್‌ಮೆಂಟ್ ಸೇರಿಸುವ ಬದಲು.

## ಫಲಿತಾಂಶ

{/* TODO(saif): metrics slot, installs / MAU / share of orders via app,
    repeat-purchase rate or AOV vs web. Qualitative until real numbers land. */}

ಎರಡೂ ಆ್ಯಪ್‌ಗಳು ಶಿಪ್ ಆದವು ಮತ್ತು
[App Store](https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685) ಹಾಗೂ
[Google Play](https://play.google.com/store/apps/details?id=com.coffye.pjfzfc) ನಲ್ಲಿ
ಲೈವ್ ಆಗಿವೆ, ಹಳೆಯ App Maker ಆ್ಯಪ್‌ನ ಮೇಲೆ ಒಂದು ಸರಾಗ ಅಪ್‌ಡೇಟ್ ಆಗಿ ಡೆಲಿವರ್ ಆದವು ಇದರಿಂದ
ಈಗಿನ ಆಡಿಯನ್ಸ್ ಮತ್ತು ರೇಟಿಂಗ್ ಹಾಗೆಯೇ ಉಳಿಯಿತು. ಫಲಿತಾಂಶ ಒಂದು ವೇಗದ, ನೇಟಿವ್ ಅನುಭವ ನೀಡುವ
React Native ಆ್ಯಪ್, ಅದು ಸಂಪೂರ್ಣವಾಗಿ Shopify ಮೇಲೆ ಚಲಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಒಂದು ಚಿಕ್ಕ Node
ಡೇಟಾ ಲೇಯರ್ ಎಲ್ಲಿ ಮುಖ್ಯವೋ ಅಲ್ಲಿ ಮಾತ್ರ ಭಾರದ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಬ್ರ್ಯಾಂಡ್ ತನ್ನ ಕಾಮರ್ಸ್
ಸ್ಟ್ಯಾಕ್ ಉಳಿಸಿಕೊಂಡಿತು ಮತ್ತು ಕೊನೆಗೂ ತನ್ನ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಹೊಂದುವ ಆ್ಯಪ್ ಅನುಭವ ಪಡೆಯಿತು.

ಎಲ್ಲಾ ಕೆಲಸ: [/kn/work/](/kn/work/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages