History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 4: ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸੰਕਲਪ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼

ਪਰਿਚਯ

ਜਿਵੇਂ ਜਿਵੇਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਧਦੀ ਹੈ, ਸਾਰੇ ਡਾਟਾ ਫਲੋਜ਼ ਦਾ ਟ੍ਰੈਕ ਰੱਖਣਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਜਾਂਦਾ ਹੈ। ਕਿਹੜਾ ਕੋਡ ਡਾਟਾ ਲੈਂਦਾ ਹੈ, ਕਿਹੜਾ ਪੇਜ ਇਸਨੂੰ ਵਰਤਦਾ ਹੈ, ਕਿੱਥੇ ਅਤੇ ਕਦੋਂ ਇਸਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ...ਇਹ ਸੌਖਾ ਹੈ ਕਿ ਕੋਡ ਗੁੰਝਲਦਾਰ ਹੋ ਜਾਵੇ ਜੋ ਸੰਭਾਲਣਾ ਮੁਸ਼ਕਲ ਹੋਵੇ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਸੱਚ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਪੇਜਾਂ ਵਿੱਚ ਡਾਟਾ ਸਾਂਝਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਯੂਜ਼ਰ ਡਾਟਾ। ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦਾ ਸੰਕਲਪ ਹਮੇਸ਼ਾ ਹਰ ਕਿਸਮ ਦੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਮੌਜੂਦ ਰਿਹਾ ਹੈ, ਪਰ ਜਿਵੇਂ ਵੈੱਬ ਐਪਸ ਦੀ ਜਟਿਲਤਾ ਵਧਦੀ ਜਾ ਰਹੀ ਹੈ, ਇਹ ਹੁਣ ਵਿਕਾਸ ਦੌਰਾਨ ਸੋਚਣ ਲਈ ਇੱਕ ਮੁੱਖ ਬਿੰਦੂ ਬਣ ਗਿਆ ਹੈ।

ਇਸ ਆਖਰੀ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਉਸ ਐਪ ਨੂੰ ਦੁਬਾਰਾ ਦੇਖਾਂਗੇ ਜੋ ਅਸੀਂ ਬਣਾਇਆ ਸੀ, ਸਟੇਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਮੈਨੇਜ ਕਰਨ ਲਈ ਦੁਬਾਰਾ ਸੋਚਾਂਗੇ ਕਿ ਇਹ ਕਿਸੇ ਵੀ ਸਮੇਂ ਬ੍ਰਾਊਜ਼ਰ ਰਿਫ੍ਰੈਸ਼ ਦਾ ਸਮਰਥਨ ਕਰੇ ਅਤੇ ਯੂਜ਼ਰ ਸੈਸ਼ਨਜ਼ ਵਿੱਚ ਡਾਟਾ ਸਟੋਰ ਕਰ ਸਕੇ।

ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਲਈ ਵੈੱਬ ਐਪ ਦੇ ਡਾਟਾ ਫੈਚਿੰਗ ਭਾਗ ਨੂੰ ਪੂਰਾ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ। ਤੁਹਾਨੂੰ Node.js ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ ਸਰਵਰ API ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਚਲਾਉਣਾ ਵੀ ਲੋੜੀਂਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਖਾਤੇ ਦੇ ਡਾਟੇ ਨੂੰ ਮੈਨੇਜ ਕਰ ਸਕੋ।

ਤੁਸੀਂ ਟਰਮੀਨਲ ਵਿੱਚ ਇਹ ਕਮਾਂਡ ਚਲਾ ਕੇ ਜਾਂਚ ਸਕਦੇ ਹੋ ਕਿ ਸਰਵਰ ਠੀਕ ਤਰ੍ਹਾਂ ਚੱਲ ਰਿਹਾ ਹੈ:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਨੂੰ ਦੁਬਾਰਾ ਸੋਚੋ

ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਐਪ ਵਿੱਚ ਸਟੇਟ ਦੇ ਇੱਕ ਬੁਨਿਆਦੀ ਸੰਕਲਪ ਨੂੰ ਗਲੋਬਲ account ਵੈਰੀਏਬਲ ਦੇ ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਸੀ, ਜੋ ਮੌਜੂਦਾ ਲੌਗਇਨ ਕੀਤੇ ਗਏ ਯੂਜ਼ਰ ਲਈ ਬੈਂਕ ਡਾਟਾ ਰੱਖਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਸਾਡੀ ਮੌਜੂਦਾ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਕੁਝ ਖਾਮੀਆਂ ਹਨ। ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਹੋਣ ਦੌਰਾਨ ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਹੁੰਦਾ ਹੈ?

ਮੌਜੂਦਾ ਕੋਡ ਵਿੱਚ 3 ਸਮੱਸਿਆਵਾਂ ਹਨ:

ਸਟੇਟ ਸਟੋਰ ਨਹੀਂ ਹੁੰਦੀ, ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਰਿਫ੍ਰੈਸ਼ ਤੁਹਾਨੂੰ ਵਾਪਸ ਲੌਗਇਨ ਪੇਜ 'ਤੇ ਲੈ ਜਾਂਦਾ ਹੈ।
ਕਈ ਫੰਕਸ਼ਨ ਸਟੇਟ ਨੂੰ ਮੋਡੀਫਾਈ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਐਪ ਵਧਦਾ ਹੈ, ਇਹ ਬਦਲਾਵਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਮੁਸ਼ਕਲ ਬਣਾ ਸਕਦਾ ਹੈ ਅਤੇ ਅਸਾਨੀ ਨਾਲ ਇੱਕ ਅਪਡੇਟ ਭੁੱਲ ਸਕਦੇ ਹੋ।
ਸਟੇਟ ਕਲੀਨ ਨਹੀਂ ਹੁੰਦੀ, ਇਸ ਲਈ ਜਦੋਂ ਤੁਸੀਂ Logout 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ ਤਾਂ ਖਾਤੇ ਦਾ ਡਾਟਾ ਅਜੇ ਵੀ ਉੱਥੇ ਹੁੰਦਾ ਹੈ, ਭਾਵੇਂ ਤੁਸੀਂ ਲੌਗਇਨ ਪੇਜ 'ਤੇ ਹੋ।

ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਇਨ੍ਹਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਅਪਡੇਟ ਕਰ ਸਕਦੇ ਹਾਂ, ਪਰ ਇਸ ਨਾਲ ਹੋਰ ਕੋਡ ਡੁਪਲੀਕੇਸ਼ਨ ਬਣੇਗਾ ਅਤੇ ਐਪ ਹੋਰ ਜਟਿਲ ਅਤੇ ਸੰਭਾਲਣਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਵੇਗਾ। ਜਾਂ ਅਸੀਂ ਕੁਝ ਮਿੰਟਾਂ ਲਈ ਰੁਕ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੀ ਰਣਨੀਤੀ ਨੂੰ ਦੁਬਾਰਾ ਸੋਚ ਸਕਦੇ ਹਾਂ।

ਅਸੀਂ ਇੱਥੇ ਅਸਲ ਵਿੱਚ ਕਿਹੜੀਆਂ ਸਮੱਸਿਆਵਾਂ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ?

ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਾਰੇ ਇਸ ਗੱਲ ਦਾ ਹੱਲ ਲੱਭਣ ਬਾਰੇ ਹੈ ਕਿ:

ਐਪ ਵਿੱਚ ਡਾਟਾ ਫਲੋਜ਼ ਨੂੰ ਕਿਵੇਂ ਸਮਝਣਯੋਗ ਬਣਾਇਆ ਜਾਵੇ?
ਸਟੇਟ ਡਾਟਾ ਨੂੰ ਹਮੇਸ਼ਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਦੇ ਨਾਲ (ਅਤੇ ਇਸਦੇ ਉਲਟ) ਕਿਵੇਂ ਸਿੰਕ ਵਿੱਚ ਰੱਖਿਆ ਜਾਵੇ?

ਇਨ੍ਹਾਂ ਗੱਲਾਂ ਦਾ ਧਿਆਨ ਰੱਖਣ ਤੋਂ ਬਾਅਦ, ਹੋਰ ਕੋਈ ਵੀ ਸਮੱਸਿਆ ਜੋ ਤੁਹਾਡੇ ਕੋਲ ਹੋ ਸਕਦੀ ਹੈ, ਸ਼ਾਇਦ ਪਹਿਲਾਂ ਹੀ ਹੱਲ ਹੋ ਸਕਦੀ ਹੈ ਜਾਂ ਹੱਲ ਕਰਨਾ ਸੌਖਾ ਹੋ ਸਕਦਾ ਹੈ। ਇਨ੍ਹਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਕਈ ਸੰਭਾਵਿਤ ਤਰੀਕੇ ਹਨ, ਪਰ ਅਸੀਂ ਇੱਕ ਆਮ ਹੱਲ ਦੀ ਪਾਲਣਾ ਕਰਾਂਗੇ ਜੋ ਡਾਟਾ ਅਤੇ ਇਸਨੂੰ ਬਦਲਣ ਦੇ ਤਰੀਕਿਆਂ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ। ਡਾਟਾ ਫਲੋਜ਼ ਇਸ ਤਰ੍ਹਾਂ ਜਾਣਗੇ:

ਅਸੀਂ ਇੱਥੇ ਉਸ ਭਾਗ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰਾਂਗੇ ਜਿੱਥੇ ਡਾਟਾ ਆਪਣੇ ਆਪ ਵਿਊ ਅਪਡੇਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ Reactive Programming ਦੇ ਹੋਰ ਉੱਚੇ ਸੰਕਲਪਾਂ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ। ਜੇ ਤੁਸੀਂ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣ ਲਈ ਤਿਆਰ ਹੋ, ਤਾਂ ਇਹ ਇੱਕ ਵਧੀਆ ਅਗਲਾ ਵਿਸ਼ਾ ਹੈ।

✅ ਬਾਜ਼ਾਰ ਵਿੱਚ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਲਈ ਕਈ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ Redux ਇੱਕ ਲੋਕਪ੍ਰਿਯ ਵਿਕਲਪ ਹੈ। ਇਸਦੇ ਸੰਕਲਪਾਂ ਅਤੇ ਪੈਟਰਨਜ਼ ਨੂੰ ਦੇਖੋ ਕਿਉਂਕਿ ਇਹ ਵੱਡੀਆਂ ਵੈੱਬ ਐਪਸ ਵਿੱਚ ਤੁਹਾਡੇ ਸਾਹਮਣੇ ਆ ਸਕਣ ਵਾਲੀਆਂ ਸੰਭਾਵਿਤ ਸਮੱਸਿਆਵਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੇ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ।

ਕੰਮ

ਅਸੀਂ ਕੁਝ ਰੀਫੈਕਟੋਰਿੰਗ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ। account ਡਿਕਲੇਅਰਸ਼ਨ ਨੂੰ ਬਦਲੋ:

let account = null;

ਇਸ ਨਾਲ:

let state = {
  account: null
};

ਇਸ ਵਿਚਾਰ ਦਾ ਮਕਸਦ ਸਾਰੇ ਐਪ ਡਾਟੇ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਸਟੇਟ ਆਬਜੈਕਟ ਵਿੱਚ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨਾ ਹੈ। ਅਜੇ ਸਟੇਟ ਵਿੱਚ ਸਿਰਫ account ਹੈ, ਇਸ ਲਈ ਇਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਹੀਂ ਬਦਲਦਾ, ਪਰ ਇਹ ਵਿਕਾਸ ਲਈ ਰਸਤਾ ਬਣਾਉਂਦਾ ਹੈ।

ਸਾਨੂੰ ਇਸਨੂੰ ਵਰਤਣ ਵਾਲੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਵੀ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ। register() ਅਤੇ login() ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ, account = ... ਨੂੰ state.account = ... ਨਾਲ ਬਦਲੋ;

updateDashboard() ਫੰਕਸ਼ਨ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ, ਇਹ ਲਾਈਨ ਸ਼ਾਮਲ ਕਰੋ:

const account = state.account;

ਇਹ ਰੀਫੈਕਟੋਰਿੰਗ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਸੁਧਾਰ ਨਹੀਂ ਲਿਆਉਂਦੀ, ਪਰ ਇਸਦਾ ਮਕਸਦ ਅਗਲੇ ਬਦਲਾਵਾਂ ਲਈ ਨੀਂਹ ਰੱਖਣਾ ਸੀ।

ਡਾਟਾ ਬਦਲਾਵਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ

ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਸਟੇਟ ਆਬਜੈਕਟ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਰੱਖਿਆ ਹੈ, ਅਗਲਾ ਕਦਮ ਅਪਡੇਟਸ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨਾ ਹੈ। ਮਕਸਦ ਇਹ ਹੈ ਕਿ ਕਿਸੇ ਵੀ ਬਦਲਾਅ ਅਤੇ ਇਹ ਕਦੋਂ ਹੁੰਦੇ ਹਨ, ਇਸਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਸੌਖਾ ਬਣਾਇਆ ਜਾਵੇ।

ਸਟੇਟ ਆਬਜੈਕਟ ਵਿੱਚ ਬਦਲਾਅ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ, ਇਸਨੂੰ immutable ਮੰਨਣਾ ਵੀ ਇੱਕ ਵਧੀਆ ਅਭਿਆਸ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਸਨੂੰ ਬਿਲਕੁਲ ਵੀ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼

ਅਸਾਈਨਮੈਂਟ

"Add transaction" ਡਾਇਲਾਗ ਨੂੰ ਲਾਗੂ ਕਰੋ

ਹੇਠਾਂ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਇੱਕ ਉਦਾਹਰਨ ਨਤੀਜਾ ਦਿੱਤਾ ਗਿਆ ਹੈ:

ਅਸਵੀਕਾਰਨਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।