Firebase 'ਤੇ ਕਸਟਮ ਈ-ਕਾਮਰਸ

ਮੈਂ ਸ਼ੁਰੂ ਤੋਂ ਇੱਕ ਕਸਟਮ ਈ-ਕਾਮਰਸ ਸਾਈਟ ਬਣਾਈ ਹੈ। ਮੈਂ ਬਣੇ-ਬਣਾਏ (off-the-shelf) ਪਲੇਟਫਾਰਮਾਂ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ। ਮੈਂ Firebase Realtime Database ਅਤੇ Netlify ਦੀ ਵਰਤੋਂ ਕੀਤੀ।

ਇਸਦਾ ਉਦੇਸ਼ ਇੱਕ POS terminal ਰੀਸੇਲਰ ਦੀ ਸੇਵਾ ਕਰਨਾ ਸੀ। ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਕੈਟਾਲਾਗ, ਕੀਮਤਾਂ ਦੇ ਵੱਖ-ਵੱਖ ਵਿਕਲਪ (pricing variants), ਅਤੇ ਇੱਕ ਐਡਮਿਨ ਪੈਨਲ ਦੀ ਲੋੜ ਸੀ। ਸੇਲਜ਼ ਟੀਮ ਨੂੰ ਸਿੱਧੇ ਸਾਈਟ ਤੋਂ ਆਰਡਰ ਦੇਣ ਦੀ ਲੋੜ ਸੀ।

ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਇਸਨੂੰ ਕਿਵੇਂ ਬਣਾਇਆ ਅਤੇ ਮੈਂ ਕੀ ਸਿੱਖਿਆ।

The Stack

• Vanilla HTML, CSS, ਅਤੇ JS। • ਡੇਟਾ ਲਈ Firebase Realtime Database। • ਫਾਈਲਾਂ ਲਈ Firebase Storage। • ਹੋਸਟਿੰਗ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਲਈ Netlify।

Key Decisions

1. Database Separation

ਮੈਂ ਈ-ਕਾਮਰਸ ਡੇਟਾਬੇਸ ਨੂੰ ਅੰਦਰੂਨੀ ਪ੍ਰਬੰਧਨ (internal management) ਡੇਟਾਬੇਸ ਤੋਂ ਵੱਖ ਰੱਖਿਆ। ਇਹ ਵਪਾਰਕ ਡੇਟਾ ਨੂੰ ਤਨਾਂਵਾਂ ਐਡਮਿਨ ਡੇਟਾ ਜਿਵੇਂ ਕਿ ਤਨਖਾਹਾਂ ਜਾਂ ਬਜਟ ਨਾਲ ਮਿਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

2. Global Pricing Archive

ਹਰ ਉਤਪਾਦ ਦੇ ਅੰਦਰ ਕੀਮਤ ਯੋਜਨਾਵਾਂ (pricing plans) ਰੱਖਣ ਦੀ ਬਜਾਏ, ਮੈਂ ਇੱਕ ਗਲੋਬਲ ਟੈਰਿਫ ਫੋਲਡਰ ਬਣਾਇਆ। ਉਤਪਾਦਾਂ ਵਿੱਚ ਸਿਰਫ਼ IDs ਦਾ ਇੱਕ ਐਰੇ (array) ਹੁੰਦਾ ਹੈ। ਇਹ ਡੇਟਾ ਦੇ ਦੁਹਰਾਓ (duplication) ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਯੋਜਨਾ ਬਦਲਦੀ ਹੈ, ਤਾਂ ਮੈਂ ਇਸਨੂੰ ਇੱਕ ਵਾਰ ਅਪਡੇਟ ਕਰਦਾ ਹਾਂ।

3. Atomic Orders

ਜਦੋਂ ਇੱਕੋ ਸਮੇਂ ਕਈ ਲੋਕ ਆਰਡਰ ਦਿੰਦੇ ਹਨ, ਤਾਂ ਤੁਹਾਨੂੰ 'race conditions' ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਜੇਕਰ ਦੋ ਲੋਕ ਇੱਕੋ ਆਰਡਰ ਨੰਬਰ ਨੂੰ ਪੜ੍ਹਦੇ ਹਨ, ਤਾਂ ਇੱਕ ਆਰਡਰ ਗਾਇਬ ਹੋ ਸਕਦਾ ਹੈ। ਮੈਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ Firebase runTransaction() ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਕਿ ਹਰ ਆਰਡਰ ਨੂੰ ਇੱਕ ਵਿਲੱਖਣ, ਕ੍ਰਮਵਾਰ ਨੰਬਰ ਮਿਲੇ।

4. Secure Admin Access

ਮੈਂ ਸੋਰਸ ਕੋਡ ਵਿੱਚ ਪਾਸਵਰਡ ਸਟੋਰ ਨਹੀਂ ਕੀਤੇ। ਮੈਂ Web Crypto API ਰਾਹੀਂ PBKDF2 ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਹ brute-force ਹਮਲਿਆਂ ਨੂੰ ਬਹੁਤ ਮੁਸ਼ਕਲ ਬਣਾਉਂਦਾ ਹੈ। ਕੋਡ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ salt ਅਤੇ ਇੱਕ hash ਹੁੰਦਾ ਹੈ।

Lessons Learned

• 'Falsy' ਮੁੱਲਾਂ (values) ਤੋਂ ਸਾਵਧਾਨ ਰਹੋ। JavaScript ਵਿੱਚ, 0 ਇੱਕ falsy ਮੁੱਲ ਹੈ। ਜੇਕਰ ਕਿਸੇ ਉਤਪਾਦ ਦੀ ਕੀਮਤ 0 ਹੈ, ਤਾਂ price || null ਵਰਗੀ ਸਧਾਰਨ ਜਾਂਚ ਕੀਮਤ ਨੂੰ ਡਿਲੀਟ ਕਰ ਦੇਵੇਗੀ। ਜ਼ੀਰੋ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਹਮੇਸ਼ਾ price != null ਦੀ ਵਰਤੋਂ ਕਰੋ।

• HTTP ਹੈਡਰਾਂ ਵਿੱਚ CSP ਕੌਂਫਿਗਰ ਕਰੋ। Content Security Policy ਲਈ ਮੈਟਾ ਟੈਗ ਸਬਡੋਮੇਨਾਂ ਲਈ wildcards ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। Firebase ਡਾਇਨਾਮਿਕ ਸਬਡੋਮੇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਸਨੂੰ ਕੰਮ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਣ ਲਈ ਮੈਂ CSP ਨੂੰ netlify.toml ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ।

• ਅਸਲ ਸੁਰੱਖਿਆ ਲਈ Security Rules ਦੀ ਵਰਤੋਂ ਕਰੋ। ਕਦੇ ਵੀ ਆਪਣੇ UI ਵਿੱਚ ਬਟਨਾਂ ਨੂੰ ਲੁਕਾਉਣ 'ਤੇ ਭਰੋਸਾ ਨਾ ਕਰੋ। ਇਹ ਸੀਮਤ ਕਰਨ ਲਈ ਕਿ ਕੌਣ ਡੇਟਾ ਪੜ੍ਹ ਸਕਦਾ ਹੈ ਅਤੇ ਲਿਖ ਸਕਦਾ ਹੈ, Firebase rules ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਕਸਟਮ ਹੱਲ ਬਣਾਉਣ ਲਈ ਸਾਵਧਾਨੀ ਨਾਲ ਚੁਣੇ ਗਏ ਆਰਕੀਟੈਕਚਰਲ ਵਿਕਲਪਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਟ੍ਰਾਂਜੈਕਸ਼ਨ ਹੈਂਡਲਿੰਗ ਅਤੇ ਹੈਡਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਵਰਗੀਆਂ ਛੋਟੀਆਂ ਗੱਲਾਂ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਵੱਡੀਆਂ ਅਸਫਲਤਾਵਾਂ ਨੂੰ ਰੋਕਦੀਆਂ ਹਨ।

ਸਰੋਤ: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec