ਫ਼ਰੰਟਐਂਡ ਬਨਾਮ ਬੈਕਐਂਡ: ਕੀ ਫ਼ਰਕ ਹੈ?
ਫ਼ਰੰਟਐਂਡ ਐਪ ਦਾ ਉਹ ਹਿੱਸਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਪੰਨੇ, ਬਟਨ, ਫ਼ਾਰਮ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਜੋ ਉਹ ਦੇਖਦਾ ਅਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ। ਬੈਕਐਂਡ ਉਹ ਹਿੱਸਾ ਹੈ ਜੋ ਇੱਕ ਸਰਵਰ ’ਤੇ ਚੱਲਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਕਦੇ ਨਹੀਂ ਦੇਖਦਾ: ਇਹ ਡੇਟਾ ਸਟੋਰ ਅਤੇ ਵਾਪਸ ਲਿਆਉਂਦਾ ਹੈ, ਕਾਰੋਬਾਰੀ ਨਿਯਮ ਲਾਗੂ ਕਰਦਾ ਹੈ, ਜਾਂਚਦਾ ਹੈ ਕਿ ਕੌਣ ਕੀ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ ਭੁਗਤਾਨ ਤੇ ਈਮੇਲ ਵਰਗੀਆਂ ਹੋਰ ਸੇਵਾਵਾਂ ਨਾਲ ਗੱਲ ਕਰਦਾ ਹੈ। ਦੋਵੇਂ ਇੱਕ API ਰਾਹੀਂ ਗੱਲ ਕਰਦੇ ਹਨ, ਅਤੇ ਡੇਟਾਬੇਸ ਨਾਲ ਮਿਲ ਕੇ ਇਹ ਇੱਕ “ਫੁੱਲ-ਸਟੈਕ” ਐਪ ਬਣਾਉਂਦੇ ਹਨ।
ਜਦੋਂ ਤੁਸੀਂ AI ਨਾਲ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਇਹ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ
ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ AI ਬਿਲਡਰ ਨੂੰ ਐਪ ਬਾਰੇ ਦੱਸਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦੋਵੇਂ ਹਿੱਸਿਆਂ ਦਾ ਵਰਣਨ ਇੱਕੋ ਵਾਰ ਕਰ ਰਹੇ ਹੁੰਦੇ ਹੋ, ਭਾਵੇਂ ਤੁਸੀਂ ਇਹ ਸਮਝੋ ਜਾਂ ਨਾ। “ਗਾਹਕ ਇੱਕ ਸਲਾਟ ਬੁੱਕ ਕਰ ਸਕਦੇ ਹਨ” ਦਾ ਮਤਲਬ ਹੈ ਇੱਕ ਬੁਕਿੰਗ ਫ਼ਾਰਮ (ਫ਼ਰੰਟਐਂਡ), ਇਹ ਨਿਯਮ ਕਿ ਕਿਹੜੇ ਸਲਾਟ ਖਾਲੀ ਹਨ (ਬੈਕਐਂਡ), ਅਤੇ ਬੁਕਿੰਗਾਂ ਸੰਭਾਲਣ ਲਈ ਕੋਈ ਥਾਂ (ਡੇਟਾਬੇਸ)।
ਇਹ ਵੰਡ ਸਮਝਣ ਨਾਲ ਤਿੰਨ ਵਿਹਾਰਕ ਫ਼ਾਇਦੇ ਹੁੰਦੇ ਹਨ:
- ਸੁਰੱਖਿਆ। ਫ਼ਰੰਟਐਂਡ ਵਿੱਚ ਜੋ ਵੀ ਹੈ, ਉਸਨੂੰ ਯੂਜ਼ਰ ਦੇਖ ਤੇ ਬਦਲ ਸਕਦਾ ਹੈ। ਨਿਯਮ ਅਤੇ ਗੁਪਤ ਕੀਅ ਬੈਕਐਂਡ ਵਿੱਚ ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ।
- ਡੀਬੱਗਿੰਗ। “ਬਟਨ ਜਵਾਬ ਨਹੀਂ ਦਿੰਦਾ” ਅਤੇ “ਬਟਨ ਜਵਾਬ ਦਿੰਦਾ ਹੈ ਪਰ ਕੁਝ ਸੇਵ ਨਹੀਂ ਹੁੰਦਾ” ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦੇ ਹਨ, ਅਤੇ ਦੱਸਣਾ ਕਿ ਤੁਸੀਂ ਕੀ ਦੇਖ ਰਹੇ ਹੋ, AI ਨੂੰ ਕਾਰਨ ਛੇਤੀ ਲੱਭਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
- ਹੋਸਟਿੰਗ ਅਤੇ ਖ਼ਰਚਾ। ਸਿਰਫ਼ ਫ਼ਰੰਟਐਂਡ ਵਾਲੀ ਸਾਈਟ ਸਸਤੀ ਅਤੇ ਸਧਾਰਨ ਹੋਸਟ ਹੁੰਦੀ ਹੈ। ਬੈਕਐਂਡ ਕਿਤੇ ਚੱਲਣਾ ਪੈਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਖ਼ਰਚੇ ਅਤੇ ਖਾਲੀ ਹੋਣ ’ਤੇ ਐਪ ਦੇ ਵਿਹਾਰ ’ਤੇ ਅਸਰ ਪਾਉਂਦਾ ਹੈ।
ਰੋਜ਼ਾਨਾ ਦੀ ਮਿਸਾਲ
ਇੱਕ ਰੈਸਟੋਰੈਂਟ ਬਾਰੇ ਸੋਚੋ।
ਫ਼ਰੰਟਐਂਡ ਡਾਈਨਿੰਗ ਹਾਲ ਵਾਂਗ ਹੈ: ਮੀਨੂ, ਮੇਜ਼ਾਂ, ਸਜਾਵਟ ਅਤੇ ਉਹ ਵੇਟਰ ਜੋ ਤੁਹਾਡਾ ਆਰਡਰ ਲੈਂਦਾ ਹੈ। ਇਹ ਗਾਹਕਾਂ ਲਈ ਬਣਿਆ ਹੈ ਅਤੇ ਉਹ ਇਸਦਾ ਹਰ ਹਿੱਸਾ ਦੇਖ ਅਤੇ ਛੂਹ ਸਕਦੇ ਹਨ।
ਬੈਕਐਂਡ ਰਸੋਈ ਅਤੇ ਦਫ਼ਤਰ ਵਾਂਗ ਹੈ: ਸ਼ੈੱਫ ਖਾਣਾ ਬਣਾਉਂਦੇ ਹਨ, ਸਟੋਰ ਰੂਮ ਹੈ, ਕੈਸ਼ ਕਾਊਂਟਰ ਹੈ, ਅਤੇ ਮੈਨੇਜਰ ਦੇ ਨਿਯਮ ਹਨ ਕਿ ਕਿਸਨੂੰ ਛੋਟ ਮਿਲੇਗੀ। ਗਾਹਕ ਉੱਥੇ ਨਹੀਂ ਜਾਂਦੇ, ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਜਾਣਾ ਵੀ ਨਹੀਂ ਚਾਹੀਦਾ।
API ਉਹ ਰਸਤਾ ਹੈ ਜੋ ਦੋਵਾਂ ਵਿਚਕਾਰ ਹੈ — ਉਹ ਕਾਊਂਟਰ ਜਿੱਥੇ ਆਰਡਰ ਅੰਦਰ ਜਾਂਦੇ ਹਨ ਅਤੇ ਪਲੇਟਾਂ ਬਾਹਰ ਆਉਂਦੀਆਂ ਹਨ, ਇੱਕ ਤੈਅ ਕੀਤੇ ਫ਼ਾਰਮੈਟ ਵਿੱਚ। ਡੇਟਾਬੇਸ ਸਟੋਰ ਰੂਮ ਅਤੇ ਆਰਡਰ ਬੁੱਕ ਹੈ।
ਗਾਹਕ ਆਪਣੀ ਆਰਡਰ ਪਰਚੀ ਬਦਲ ਸਕਦਾ ਹੈ (ਫ਼ਰੰਟਐਂਡ ਉਸਦੇ ਕੰਟਰੋਲ ਵਿੱਚ ਹੈ), ਪਰ ਰਸੋਈ ਫਿਰ ਵੀ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਕੀ ਬਣੇਗਾ ਅਤੇ ਕਿੰਨਾ ਲੱਗੇਗਾ। ਇਸੇ ਲਈ ਜ਼ਰੂਰੀ ਜਾਂਚਾਂ ਪਿੱਛੇ ਵਾਲੇ ਪਾਸੇ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
ਹਰ ਪਾਸਾ ਕੀ ਕਰਦਾ ਹੈ
| ਫ਼ਰੰਟਐਂਡ | ਬੈਕਐਂਡ | |
|---|---|---|
| ਕਿੱਥੇ ਚੱਲਦਾ ਹੈ | ਯੂਜ਼ਰ ਦੀ ਡਿਵਾਈਸ ’ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ | ਇੱਕ ਸਰਵਰ ’ਤੇ ਜੋ ਤੁਸੀਂ (ਜਾਂ ਤੁਹਾਡਾ ਹੋਸਟ) ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ |
| ਮੁੱਖ ਕੰਮ | ਚੀਜ਼ਾਂ ਦਿਖਾਉਣਾ, ਇਨਪੁੱਟ ਲੈਣਾ, ਕਲਿੱਕਾਂ ’ਤੇ ਜਵਾਬ ਦੇਣਾ | ਡੇਟਾ ਸੰਭਾਲਣਾ, ਨਿਯਮ ਲਾਗੂ ਕਰਨਾ, ਇਜਾਜ਼ਤਾਂ ਲਾਗੂ ਕਰਨਾ, ਹੋਰ ਸੇਵਾਵਾਂ ਸੱਦਣਾ |
| ਕੀ ਯੂਜ਼ਰ ਕੋਡ ਦੇਖ ਤੇ ਬਦਲ ਸਕਦੇ ਹਨ? | ਹਾਂ — ਇਹ ਉਨ੍ਹਾਂ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਹੁੰਦਾ ਹੈ | ਨਹੀਂ |
| ਕੀ ਗੁਪਤ API ਕੀਅ ਰੱਖ ਸਕਦਾ ਹੈ? | ਨਹੀਂ | ਹਾਂ, ਐਨਵਾਇਰਨਮੈਂਟ ਵੇਰੀਏਬਲ ਵਿੱਚ |
| ਆਮ ਤਕਨਾਲੋਜੀਆਂ | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| ਕੀ ਗੜਬੜ ਹੁੰਦੀ ਹੈ | ਮੋਬਾਈਲ ’ਤੇ ਲੇਆਉਟ ਟੁੱਟਣਾ, ਬਟਨ ਕੁਝ ਨਾ ਕਰਨਾ, ਪੰਨਾ ਹੌਲੀ ਹੋਣਾ | ਡੇਟਾ ਸੇਵ ਨਾ ਹੋਣਾ, ਗ਼ਲਤ ਡੇਟਾ ਦਿਖਣਾ, ਗ਼ਲਤੀਆਂ, ਸੁਰੱਖਿਆ ਵਿੱਚ ਛੇਕ |
ਕੁਝ ਫ਼ਰੇਮਵਰਕ ਇਹ ਲਕੀਰ ਧੁੰਦਲੀ ਕਰ ਦਿੰਦੇ ਹਨ। ਉਦਾਹਰਣ ਵਜੋਂ, Next.js ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਕੋਡ ਅਤੇ ਸਰਵਰ ਕੋਡ ਦੋਵੇਂ ਰੱਖਣ ਦਿੰਦਾ ਹੈ। ਵਿਚਾਰ ਉਹੀ ਰਹਿੰਦਾ ਹੈ: ਸਵਾਲ ਹਮੇਸ਼ਾ ਇਹ ਹੈ ਕਿ ਇਹ ਹਿੱਸਾ ਕਿੱਥੇ ਚੱਲਦਾ ਹੈ?
ਇੱਕ ਕੰਮ ਕੀਤਾ ਉਦਾਹਰਣ: ਯੋਗਾ ਕਲਾਸ ਬੁੱਕ ਕਰਨਾ
ਜਦੋਂ ਕੋਈ ਯੋਗਾ ਕਲਾਸ ਬੁੱਕ ਕਰਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ, ਕਦਮ-ਦਰ-ਕਦਮ:
| ਕਦਮ | ਕਿੱਥੇ | ਕੀ ਹੁੰਦਾ ਹੈ |
|---|---|---|
| 1 | ਫ਼ਰੰਟਐਂਡ | ਸ਼ਡਿਊਲ ਵਾਲਾ ਪੰਨਾ ਲੋਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸ ਹਫ਼ਤੇ ਦੀਆਂ ਕਲਾਸਾਂ ਬੈਕਐਂਡ ਤੋਂ ਮੰਗਦਾ ਹੈ। |
| 2 | ਬੈਕਐਂਡ | ਡੇਟਾਬੇਸ ਤੋਂ ਕਲਾਸਾਂ ਅਤੇ ਬੁਕਿੰਗਾਂ ਪੜ੍ਹਦਾ ਹੈ, ਬਚੀਆਂ ਥਾਵਾਂ ਗਿਣਦਾ ਹੈ, ਸੂਚੀ JSON ਵਿੱਚ ਵਾਪਸ ਭੇਜਦਾ ਹੈ। |
| 3 | ਫ਼ਰੰਟਐਂਡ | ਹਰ ਕਲਾਸ ਸਮਾਂ, ਟੀਚਰ ਅਤੇ ਬਚੀਆਂ ਥਾਵਾਂ ਸਮੇਤ ਦਿਖਾਉਂਦਾ ਹੈ। |
| 4 | ਫ਼ਰੰਟਐਂਡ | ਯੂਜ਼ਰ ਇੱਕ ਕਲਾਸ ਚੁਣਦਾ ਹੈ ਅਤੇ ਨਾਮ ਤੇ ਈਮੇਲ ਭਰਦਾ ਹੈ। ਫ਼ਾਰਮ ਜਾਂਚਦਾ ਹੈ ਕਿ ਈਮੇਲ ਠੀਕ ਲੱਗਦੀ ਹੈ (ਇਹ ਇੱਕ ਸਹੂਲਤ ਹੈ, ਗਾਰੰਟੀ ਨਹੀਂ)। |
| 5 | ਫ਼ਰੰਟਐਂਡ → ਬੈਕਐਂਡ | API ਰਾਹੀਂ POST /api/bookings ਬੇਨਤੀ ਭੇਜਦਾ ਹੈ। |
| 6 | ਬੈਕਐਂਡ | ਇਨਪੁੱਟ ਦੁਬਾਰਾ ਜਾਂਚਦਾ ਹੈ, ਕਲਾਸ ਭਰੀ ਨਹੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ, ਬੁਕਿੰਗ ਸੇਵ ਕਰਦਾ ਹੈ, ਅਤੇ ਈਮੇਲ ਸੇਵਾ ਨੂੰ ਗੁਪਤ ਕੀਅ ਵਰਤ ਕੇ ਪੁਸ਼ਟੀ ਈਮੇਲ ਭੇਜਣ ਲਈ ਕਹਿੰਦਾ ਹੈ। |
| 7 | ਬੈਕਐਂਡ → ਫ਼ਰੰਟਐਂਡ | “ਬੁੱਕ ਹੋ ਗਿਆ” ਜਾਂ “ਮਾਫ਼ ਕਰਨਾ, ਭਰ ਗਿਆ ਹੈ” ਵਾਪਸ ਭੇਜਦਾ ਹੈ। |
| 8 | ਫ਼ਰੰਟਐਂਡ | ਪੁਸ਼ਟੀ ਵਾਲੀ ਸਕਰੀਨ ਦਿਖਾਉਂਦਾ ਹੈ। |
ਕਦਮ 4 ਅਤੇ 6 ’ਤੇ ਧਿਆਨ ਦਿਓ: ਇਨਪੁੱਟ ਦੋ ਵਾਰ ਜਾਂਚੀ ਜਾਂਦੀ ਹੈ। ਫ਼ਰੰਟਐਂਡ ਜਾਂਚ ਤੁਰੰਤ ਫ਼ੀਡਬੈਕ ਦਿੰਦੀ ਹੈ; ਬੈਕਐਂਡ ਜਾਂਚ ਅਸਲ ਵਿੱਚ ਗਿਣਤੀ ਵਿੱਚ ਆਉਂਦੀ ਹੈ, ਕਿਉਂਕਿ ਕੋਈ ਜ਼ਿੱਦੀ ਯੂਜ਼ਰ ਫ਼ਰੰਟਐਂਡ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੰਘ ਸਕਦਾ ਹੈ।
ਆਮ ਸ਼ਬਦਾਂ ਦੇ ਅਰਥ
| ਸ਼ਬਦ | ਅਰਥ |
|---|---|
| Client / server | Client ਉਹ ਬ੍ਰਾਊਜ਼ਰ (ਜਾਂ ਐਪ) ਹੈ ਜੋ ਬੇਨਤੀ ਕਰਦਾ ਹੈ; server ਉਸਦਾ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। |
| UI | ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ — ਸਕਰੀਨਾਂ ਅਤੇ ਕੰਟਰੋਲ। |
| API | ਉਹ ਤੈਅ ਤਰੀਕਾ ਜਿਸ ਰਾਹੀਂ ਫ਼ਰੰਟਐਂਡ ਬੈਕਐਂਡ ਤੋਂ ਡੇਟਾ ਜਾਂ ਕਾਰਵਾਈ ਮੰਗਦਾ ਹੈ। |
| Endpoint | API ’ਤੇ ਇੱਕ ਖ਼ਾਸ URL, ਜਿਵੇਂ /api/bookings। |
| Full stack | ਫ਼ਰੰਟਐਂਡ + ਬੈਕਐਂਡ + ਡੇਟਾਬੇਸ ਇਕੱਠੇ। ਵੇਖੋ ਫੁੱਲ-ਸਟੈਕ ਐਪ ਕੀ ਹੁੰਦਾ ਹੈ। |
| Static site | ਫ਼ਰੰਟਐਂਡ ਜਿਸਦਾ ਆਪਣਾ ਬੈਕਐਂਡ ਨਹੀਂ; ਸਾਰਿਆਂ ਲਈ ਇੱਕੋ ਫ਼ਾਈਲਾਂ। |
| SPA | Single-page application: ਫ਼ਰੰਟਐਂਡ ਜੋ ਨਵੇਂ ਪੰਨੇ ਲੋਡ ਕਰਨ ਦੀ ਥਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਪੰਨਾ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ। |
| Server-side rendering (SSR) | ਸਰਵਰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਪੰਨੇ ਦਾ HTML ਬਣਾਉਂਦਾ ਹੈ, ਜੋ ਰਫ਼ਤਾਰ ਅਤੇ SEO ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ। |
| Environment variables | ਬੈਕਐਂਡ ਨੂੰ ਚੱਲਦੇ ਸਮੇਂ ਦਿੱਤੀਆਂ ਸੈਟਿੰਗਾਂ ਅਤੇ ਸੀਕਰੇਟ, ਜੋ ਕੋਡ ਤੋਂ ਬਾਹਰ ਰੱਖੇ ਜਾਂਦੇ ਹਨ। |
ਕੀ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬੈਕਐਂਡ ਚਾਹੀਦਾ ਹੈ?
| ਜੇ ਤੁਹਾਡੀ ਐਪ… | ਬੈਕਐਂਡ ਚਾਹੀਦਾ ਹੈ? |
|---|---|
| ਸਭ ਲਈ ਇੱਕੋ ਜਾਣਕਾਰੀ ਦਿਖਾਉਂਦੀ ਹੈ | ਨਹੀਂ |
| ਸਿਰਫ਼ ਤੁਹਾਨੂੰ ਈਮੇਲ ਕਰਨ ਵਾਲਾ ਸੰਪਰਕ ਫ਼ਾਰਮ ਹੈ | ਆਮ ਤੌਰ ’ਤੇ ਇੱਕ ਛੋਟਾ, ਜਾਂ ਫ਼ਾਰਮ ਸੇਵਾ |
| ਦੂਜੇ ਲੋਕਾਂ ਵੱਲੋਂ ਦੇਖਿਆ ਜਾਣ ਵਾਲਾ ਡੇਟਾ ਸੇਵ ਕਰਦੀ ਹੈ | ਹਾਂ |
| ਲੌਗਇਨ ਅਤੇ ਨਿੱਜੀ ਡੇਟਾ ਹੈ | ਹਾਂ |
| ਭੁਗਤਾਨ ਲੈਂਦੀ ਹੈ | ਹਾਂ — ਘੱਟੋ-ਘੱਟ ਚੈੱਕਆਊਟ ਬਣਾਉਣ ਅਤੇ ਭੁਗਤਾਨ ਵੈਬਹੁੱਕ ਲੈਣ ਲਈ |
| ਗੁਪਤ ਕੀਅ ਨਾਲ ਭੁਗਤਾਨ ਵਾਲਾ AI ਜਾਂ ਹੋਰ API ਵਰਤਦੀ ਹੈ | ਹਾਂ, ਕੀਅ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਦੂਰ ਰੱਖਣ ਲਈ |
ਆਮ ਗ਼ਲਤੀਆਂ ਅਤੇ ਗ਼ਲਤਫ਼ਹਿਮੀਆਂ
- ਗੁਪਤ ਕੀਅ ਫ਼ਰੰਟਐਂਡ ਵਿੱਚ ਰੱਖਣਾ। ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ ਖੋਲ੍ਹਣ ਵਾਲਾ ਕੋਈ ਵੀ ਇਹ ਦੇਖ ਸਕਦਾ ਹੈ। AI ਨਾਲ ਬਣੀਆਂ ਐਪਾਂ ਵਿੱਚ ਇਹ ਸਭ ਤੋਂ ਆਮ ਵੱਡੀ ਗ਼ਲਤੀ ਹੈ।
- ਨਿਯਮ ਸਿਰਫ਼ ਫ਼ਰੰਟਐਂਡ ਵਿੱਚ ਲਾਗੂ ਕਰਨਾ। ਗ਼ੈਰ-ਐਡਮਿਨਾਂ ਲਈ “ਡਿਲੀਟ” ਬਟਨ ਲੁਕਾਉਣਾ ਸੁਰੱਖਿਆ ਨਹੀਂ ਹੈ; ਬੈਕਐਂਡ ਨੂੰ ਬੇਨਤੀ ਰੱਦ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
- ਇਹ ਸੋਚਣਾ ਕਿ ਬੈਕਐਂਡ “ਸਿਰਫ਼ ਡੇਟਾਬੇਸ” ਹੈ। ਡੇਟਾਬੇਸ ਡੇਟਾ ਸਟੋਰ ਕਰਦਾ ਹੈ। ਬੈਕਐਂਡ ਫ਼ੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਕੌਣ ਉਸਨੂੰ ਪੜ੍ਹ ਜਾਂ ਬਦਲ ਸਕਦਾ ਹੈ ਅਤੇ ਕਿਵੇਂ।
- ਇਹ ਸੋਚਣਾ ਕਿ JavaScript ਦਾ ਮਤਲਬ ਫ਼ਰੰਟਐਂਡ ਹੈ। JavaScript ਅਤੇ TypeScript Node.js ਨਾਲ ਸਰਵਰਾਂ ’ਤੇ ਵੀ ਚੱਲਦੇ ਹਨ।
- ਗ਼ਲਤ ਹਿੱਸੇ ਨੂੰ ਦੋਸ਼ ਦੇਣਾ। ਜੇ ਪੰਨਾ ਠੀਕ ਲੱਗਦਾ ਹੈ ਪਰ ਡੇਟਾ ਗ਼ਲਤ ਹੈ, ਤਾਂ ਸਮੱਸਿਆ ਆਮ ਤੌਰ ’ਤੇ ਬੈਕਐਂਡ ਜਾਂ ਡੇਟਾਬੇਸ ਵਿੱਚ ਹੁੰਦੀ ਹੈ, ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਨਹੀਂ।
- ਲੋੜ ਤੋਂ ਵੱਧ ਬਣਾਉਣਾ। ਪੋਰਟਫ਼ੋਲੀਓ ਨੂੰ ਕਸਟਮ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਨਹੀਂ। ਇੱਕ ਜੋੜਨ ਨਾਲ ਖ਼ਰਚਾ ਅਤੇ ਚੱਲਣ ਵਾਲੇ ਹਿੱਸੇ ਵਧਦੇ ਹਨ।
ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਮੰਗਣਾ ਹੈ
- “ਇਸ ਐਪ ਦੇ ਕਿਹੜੇ ਹਿੱਸੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ ਅਤੇ ਕਿਹੜੇ ਸਰਵਰ ’ਤੇ?”
- “ਸਾਰੀਆਂ API ਕੀਅ ਬੈਕਐਂਡ ਵਿੱਚ ਲੈ ਜਾਓ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਐਨਵਾਇਰਨਮੈਂਟ ਵੇਰੀਏਬਲ ਤੋਂ ਪੜ੍ਹੋ।”
- “ਹਰ ਫ਼ਾਰਮ ਨੂੰ ਬਰਾਊਜ਼ਰ ਦੇ ਨਾਲ-ਨਾਲ ਸਰਵਰ ’ਤੇ ਵੀ ਜਾਂਚੋ।”
- “ਬੈਕਐਂਡ ’ਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਿਰਫ਼ ਐਡਮਿਨ ਬੁਕਿੰਗ ਡਿਲੀਟ ਕਰ ਸਕਣ।”
- “ਪੰਨਾ ਠੀਕ ਲੱਗਦਾ ਹੈ ਪਰ ਡੇਟਾ ਸੇਵ ਨਹੀਂ ਹੋ ਰਿਹਾ — ਇਸ ਬੇਨਤੀ ਲਈ ਬੈਕਐਂਡ ਲੌਗ ਵੇਖੋ।”
- “ਇਹ ਇੱਕ ਸਧਾਰਨ ਮਾਰਕੀਟਿੰਗ ਸਾਈਟ ਹੈ; ਜਦ ਤੱਕ ਲੋੜ ਨਾ ਹੋਵੇ, ਇਸਨੂੰ ਸਿਰਫ਼ ਫ਼ਰੰਟਐਂਡ ਰੱਖੋ।”
Mythex ਵਿੱਚ ਫ਼ਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ
ਨਵਾਂ Mythex ਪ੍ਰੋਜੈਕਟ Vite, React, TypeScript ਅਤੇ Tailwind ਫ਼ਰੰਟਐਂਡ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਏਜੰਟ ਬੈਕਐਂਡ ਜੋੜਦਾ ਹੈ। ਜਾਂ ਤੁਸੀਂ Node, Python (FastAPI), C# ਜਾਂ Java ਵਿੱਚ ਵੱਖਰਾ API ਮੰਗ ਸਕਦੇ ਹੋ ਜੋ ਉਸੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਫ਼ਰੰਟਐਂਡ ਨਾਲ ਚੱਲੇ। ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਤੁਸੀਂ ਵੈਬਸਾਈਟ ਅਤੇ API ਸਰਵਰ ਵਿਚਕਾਰ ਬਦਲ ਸਕਦੇ ਹੋ, ਅਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਨਾਲ ਦੋਵੇਂ ਤੈਨਾਤ ਹੁੰਦੇ ਹਨ, ਲੋੜ ਪੈਣ ’ਤੇ ਡੇਟਾਬੇਸ ਅਤੇ ਫ਼ਾਈਲ ਸਟੋਰੇਜ ਸਮੇਤ। ਡੌਕਸ ਮਲਟੀ-ਸਰਵਿਸ ਐਪਾਂ ਬਾਰੇ ਦੱਸਦੇ ਹਨ, ਵੈਬ ਹੋਸਟਿੰਗ ਗਾਈਡ ਦੱਸਦੀ ਹੈ ਕਿ ਲਾਈਵ ਹੋਣ ’ਤੇ ਹਰ ਹਿੱਸਾ ਕਿੱਥੇ ਚੱਲਦਾ ਹੈ, ਅਤੇ ਐਪ ਟੈਂਪਲੇਟ ਫੁੱਲ-ਸਟੈਕ ਉਦਾਹਰਣਾਂ ਦੇਖਣ ਦਾ ਤੇਜ਼ ਤਰੀਕਾ ਹਨ।
ਸਵਾਲ
ਫ਼ਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵਿੱਚ ਕੀ ਫ਼ਰਕ ਹੈ?
ਫ਼ਰੰਟਐਂਡ ਐਪ ਦਾ ਉਹ ਹਿੱਸਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਪੰਨੇ, ਬਟਨ ਅਤੇ ਫ਼ਾਰਮ ਜੋ ਉਹ ਦੇਖਦਾ ਅਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ। ਬੈਕਐਂਡ ਇੱਕ ਸਰਵਰ ’ਤੇ ਚੱਲਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਕਦੇ ਨਹੀਂ ਦੇਖਦਾ; ਇਹ ਡੇਟਾ ਸੰਭਾਲਦਾ ਹੈ, ਕਾਰੋਬਾਰੀ ਨਿਯਮ ਲਾਗੂ ਕਰਦਾ ਹੈ, ਇਜਾਜ਼ਤਾਂ ਜਾਂਚਦਾ ਹੈ ਅਤੇ ਹੋਰ ਸੇਵਾਵਾਂ ਨਾਲ ਗੱਲ ਕਰਦਾ ਹੈ।
ਕੀ ਹਰ ਐਪ ਨੂੰ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ?
ਨਹੀਂ। ਮਾਰਕੀਟਿੰਗ ਸਾਈਟ, ਪੋਰਟਫ਼ੋਲੀਓ ਜਾਂ ਸਧਾਰਨ ਲੈਂਡਿੰਗ ਪੰਨਾ ਸਿਰਫ਼ ਫ਼ਰੰਟਐਂਡ ਹੋ ਸਕਦਾ ਹੈ। ਜਿਵੇਂ ਹੀ ਐਪ ਨੂੰ ਸਾਂਝਾ ਡੇਟਾ ਸੰਭਾਲਣਾ ਹੋਵੇ, ਯੂਜ਼ਰਾਂ ਨੂੰ ਲੌਗਇਨ ਕਰਵਾਉਣਾ ਹੋਵੇ, ਭੁਗਤਾਨ ਲੈਣੇ ਹੋਣ ਜਾਂ ਗੁਪਤ API ਕੀਅ ਵਰਤਣੀਆਂ ਹੋਣ, ਤਾਂ ਕਿਸੇ ਨਾ ਕਿਸੇ ਕਿਸਮ ਦਾ ਬੈਕਐਂਡ ਚਾਹੀਦਾ ਹੈ।
ਕੀ HTML ਫ਼ਰੰਟਐਂਡ ਹੈ ਜਾਂ ਬੈਕਐਂਡ?
ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਣ ਵਾਲੇ HTML, CSS ਅਤੇ JavaScript ਫ਼ਰੰਟਐਂਡ ਹਨ। JavaScript Node.js ਨਾਲ ਸਰਵਰ ’ਤੇ ਵੀ ਚੱਲ ਸਕਦਾ ਹੈ, ਅਤੇ ਉੱਥੇ ਉਹ ਬੈਕਐਂਡ ਕੋਡ ਬਣ ਜਾਂਦਾ ਹੈ। ਫ਼ੈਸਲਾ ਭਾਸ਼ਾ ਨਹੀਂ ਕਰਦੀ; ਫ਼ੈਸਲਾ ਇਹ ਕਰਦਾ ਹੈ ਕਿ ਕੋਡ ਕਿੱਥੇ ਚੱਲਦਾ ਹੈ।
ਫੁੱਲ ਸਟੈਕ ਦਾ ਕੀ ਮਤਲਬ ਹੈ?
ਫੁੱਲ ਸਟੈਕ ਦਾ ਮਤਲਬ ਹੈ ਫ਼ਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੋਵੇਂ (ਅਤੇ ਆਮ ਤੌਰ ’ਤੇ ਡੇਟਾਬੇਸ ਵੀ) ਸ਼ਾਮਲ ਹੋਣਾ। ਫੁੱਲ-ਸਟੈਕ ਐਪ ਵਿੱਚ ਇਹ ਤਿੰਨੇ ਹਿੱਸੇ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਫੁੱਲ-ਸਟੈਕ ਡਿਵੈਲਪਰ ਇਨ੍ਹਾਂ ਸਾਰਿਆਂ ’ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ।