ਫਰੰਟ-ਐਂਡ ਡੋਜੋ: ਡਿਵੈਲਪਰ ਹੁਨਰਾਂ ਨੂੰ ਸਿਖਲਾਈ ਦੇਣ ਲਈ ਪ੍ਰੋਜੈਕਟ (5 ਨਵੇਂ + 43 ਪੁਰਾਣੇ)

1. ਧਾਰਨਾ ਕਲੋਨ

ਨੋਟੇਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਪਸੰਦ ਕਰਦੇ ਹਨ; ਇਹ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵਰਕਫਲੋ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ, ਦਸਤਾਵੇਜ਼ਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਕਾਰਜਾਂ ਦਾ ਸਮਾਂ ਨਿਯਤ ਕਰਨ, ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿਚਕਾਰ ਡਾਟਾ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

www.notion.so

ਨੋਸ਼ਨ ਕਲੋਨ ਬਣਾ ਕੇ ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

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

ਲੇਖ ਦਾ ਅਨੁਵਾਦ EDISON ਸੌਫਟਵੇਅਰ ਦੇ ਸਮਰਥਨ ਨਾਲ ਕੀਤਾ ਗਿਆ ਸੀ, ਜੋ ਕਿ ਐਪਲੀਕੇਸ਼ਨਾਂ ਅਤੇ ਵੈੱਬਸਾਈਟਾਂ ਦਾ ਵਿਕਾਸ ਕਰਦਾ ਹੈਅਤੇ ਸਟਾਰਟਅੱਪਸ ਵਿੱਚ ਨਿਵੇਸ਼ ਕਰਦਾ ਹੈ.

2. Repl.it ਕਲੋਨ

Repl.it ਰੀਅਲ-ਟਾਈਮ ਸਹਿਯੋਗੀ ਕੋਡ ਸੰਪਾਦਨ ਲਈ ਇੱਕ ਸਾਧਨ ਹੈ। ਤੁਸੀਂ ਕਈ ਭਾਸ਼ਾਵਾਂ ਚੁਣ ਸਕਦੇ ਹੋ: JavaScript, Python, Go ਅਤੇ ਕੋਡ ਨੂੰ ਸਿੱਧਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਾਓ। ਤੇਜ਼ ਡੈਮੋ ਅਤੇ ਕੋਡ ਇੰਟਰਵਿਊ ਲਈ ਬਹੁਤ ਲਾਭਦਾਇਕ.

repl.it

ਤੁਸੀਂ ਇੱਕ Repl.it ਕਲੋਨ ਬਣਾ ਕੇ ਕੀ ਸਿੱਖੋਗੇ:

• ਬ੍ਰਾਊਜ਼ਰ (ਕਲਾਇੰਟ-ਸਾਈਡ) ਵਿੱਚ ਕੋਡ (ਸਰਵਰ-ਸਾਈਡ) ਨੂੰ ਕਿਵੇਂ ਚਲਾਉਣਾ ਅਤੇ ਚਲਾਉਣਾ ਹੈ।
• ਇਨਪੁਟ ਡੇਟਾ (ਸਰੋਤ ਕੋਡ) ਪੜ੍ਹੋ ਅਤੇ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਨਤੀਜਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ।
• ਵੈੱਬ 'ਤੇ ਫਾਈਲਾਂ ਅਤੇ ਫੋਲਡਰਾਂ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ ਅਤੇ ਨਤੀਜਿਆਂ ਨੂੰ ਕਿਵੇਂ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਹੈ.
• ਕੋਡ ਸਿੰਟੈਕਸ ਨੂੰ ਕਿਵੇਂ ਹਾਈਲਾਈਟ ਕਰਨਾ ਹੈ।

3. ਗੂਗਲ ਫੋਟੋਜ਼ ਕਲੋਨ

Google Photos ਫੋਟੋਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਸਾਂਝਾ ਕਰਨ ਲਈ ਇੱਕ ਸੇਵਾ ਹੈ।
ਕੋਈ ਵੀ ਆਧੁਨਿਕ ਫੋਟੋ ਐਪਲੀਕੇਸ਼ਨ ਬੁਨਿਆਦੀ ਫੰਕਸ਼ਨ ਕਰ ਸਕਦੀ ਹੈ: ਅੱਪਲੋਡ, ਕੱਟਣਾ, ਆਦਿ। ਲੋਕ ਆਪਣੇ ਖੁਦ ਦੇ ਅਵਤਾਰ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ ਅਤੇ ਬਿੱਲੀਆਂ ਦੀਆਂ ਫੋਟੋਆਂ ਸਾਂਝੀਆਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣ ਦੀ ਲੋੜ ਹੈ।

www.google.com/photos/about

ਗੂਗਲ ਫੋਟੋਜ਼ ਕਲੋਨ ਬਣਾ ਕੇ ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਫ਼ੋਨਾਂ, ਟੈਬਲੇਟਾਂ, ਲੈਪਟਾਪਾਂ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਵਿਸ਼ਾਲ ਟੀਵੀ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਜਵਾਬਦੇਹ ਚਿੱਤਰ ਕਿਵੇਂ ਬਣਾਏ ਜਾਣ।
• ਚਿੱਤਰ ਅੱਪਲੋਡਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ (>1MB) ਅਤੇ ਬਲਕ ਅੱਪਲੋਡ।
• ਥੰਬਨੇਲ ਲਈ ਜਾਂ ਗੈਲਰੀ ਖੋਲ੍ਹਣ ਵੇਲੇ ਚਿੱਤਰ ਫਾਈਲਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰੋ, ਫੋਟੋਆਂ ਨੂੰ ਕੱਟੋ ਅਤੇ ਮੁੜ ਆਕਾਰ ਦਿਓ।
• ਬੋਨਸ: ਕਲਾਉਡ ਜਾਂ ਸਥਾਨਕ ਡੇਟਾਬੇਸ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟੋਰ ਕਰਨਾ ਹੈ।

4. ਗਿਫਸਕੀ ਕਲੋਨ

ਗਿਫਸਕੀ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੀਡੀਓ ਨੂੰ GIF ਵਿੱਚ ਬਦਲਦਾ ਹੈpngquant ਕੁਸ਼ਲ ਕਰਾਸ-ਫ੍ਰੇਮ ਪੈਲੇਟਸ ਅਤੇ ਟੈਂਪੋਰਲ ਐਂਟੀ-ਅਲਾਈਜ਼ਿੰਗ ਲਈ। ਨਤੀਜਾ ਪ੍ਰਤੀ ਫਰੇਮ ਹਜ਼ਾਰਾਂ ਫੁੱਲਾਂ ਵਾਲਾ ਇੱਕ GIF ਹੈ।

gif.ski

ਗਿਫਸਕੀ ਕਲੋਨ ਬਣਾ ਕੇ ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਵੀਡੀਓ ਫਾਈਲਾਂ (.mp4 ਤੋਂ .gif) ਨੂੰ ਕਿਵੇਂ ਬਦਲਿਆ ਜਾਵੇ।
• ਡਰੈਗ ਐਂਡ ਡ੍ਰੌਪ HTML API ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ।
• ਚਿੱਤਰ ਅਨੁਕੂਲਨ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ।

ਨੋਟ: ਗਿਫਸਕੀ ਇੱਕ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਹੈ ਅਤੇ GitHub 'ਤੇ ਹੈ!

5. ਕ੍ਰਿਪਟੋਕਰੰਸੀ ਦਰਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ

ਨੇਟਿਵ ਕ੍ਰਿਪਟੋਕੁਰੰਸੀ ਟਰੈਕਰ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ

ਮੁਦਰਾ ਦਰ ਟਰੈਕਰ ਬਣਾ ਕੇ ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

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

ਨੋਟ: ਇੱਥੇ GitHub ਉਦਾਹਰਨ ਰਿਪੋਜ਼ਟਰੀ.

ਪਿਛਲੇ ਪ੍ਰਕਾਸ਼ਨਾਂ ਤੋਂ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਇੱਕ ਚੋਣ।

ਲੇਅਰ

www.reddit.com/r/layer

ਲੇਅਰ ਇੱਕ ਕਮਿਊਨਿਟੀ ਹੈ ਜਿੱਥੇ ਹਰ ਕੋਈ ਇੱਕ ਸਾਂਝੇ "ਬੋਰਡ" 'ਤੇ ਇੱਕ ਪਿਕਸਲ ਖਿੱਚ ਸਕਦਾ ਹੈ। ਮੂਲ ਵਿਚਾਰ Reddit 'ਤੇ ਪੈਦਾ ਹੋਇਆ ਸੀ. ਆਰ/ਲੇਅਰ ਕਮਿਊਨਿਟੀ ਸਾਂਝੀ ਸਿਰਜਣਾਤਮਕਤਾ ਦਾ ਇੱਕ ਅਲੰਕਾਰ ਹੈ, ਕਿ ਹਰ ਕੋਈ ਇੱਕ ਸਿਰਜਣਹਾਰ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਇੱਕ ਸਾਂਝੇ ਕਾਰਨ ਲਈ ਯੋਗਦਾਨ ਪਾ ਸਕਦਾ ਹੈ।

ਆਪਣਾ ਖੁਦ ਦਾ ਲੇਅਰ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣ ਵੇਲੇ ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• JavaScript ਕੈਨਵਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਕੈਨਵਸ ਨੂੰ ਕਿਵੇਂ ਚਲਾਉਣਾ ਹੈ ਇਹ ਜਾਣਨਾ ਬਹੁਤ ਸਾਰੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹੁਨਰ ਹੈ।
• ਉਪਭੋਗਤਾ ਅਨੁਮਤੀਆਂ ਦਾ ਤਾਲਮੇਲ ਕਿਵੇਂ ਕਰਨਾ ਹੈ। ਹਰੇਕ ਉਪਭੋਗਤਾ ਬਿਨਾਂ ਲੌਗਇਨ ਕੀਤੇ ਹਰ 15 ਮਿੰਟ ਵਿੱਚ ਇੱਕ ਪਿਕਸਲ ਖਿੱਚ ਸਕਦਾ ਹੈ।
• ਕੂਕੀ ਸੈਸ਼ਨ ਬਣਾਓ।

ਸਕੂਓਸ਼

squosh.app

Squoosh ਬਹੁਤ ਸਾਰੇ ਉੱਨਤ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਚਿੱਤਰ ਕੰਪਰੈਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਹੈ।

GIF 20 MB

ਸਕੂਸ਼ ਦਾ ਆਪਣਾ ਸੰਸਕਰਣ ਬਣਾ ਕੇ ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• ਚਿੱਤਰ ਦੇ ਆਕਾਰ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ
• Drag'n'Drop API ਦੀਆਂ ਮੂਲ ਗੱਲਾਂ ਸਿੱਖੋ
• ਸਮਝੋ ਕਿ API ਅਤੇ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ
• ਫਾਈਲਾਂ ਨੂੰ ਅਪਲੋਡ ਅਤੇ ਨਿਰਯਾਤ ਕਿਵੇਂ ਕਰਨਾ ਹੈ

ਨੋਟ: ਚਿੱਤਰ ਕੰਪ੍ਰੈਸਰ ਸਥਾਨਕ ਹੈ। ਸਰਵਰ ਨੂੰ ਵਾਧੂ ਡੇਟਾ ਭੇਜਣਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ। ਤੁਸੀਂ ਘਰ ਵਿੱਚ ਕੰਪ੍ਰੈਸਰ ਲੈ ਸਕਦੇ ਹੋ, ਜਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਰਵਰ 'ਤੇ ਵਰਤ ਸਕਦੇ ਹੋ, ਤੁਹਾਡੀ ਪਸੰਦ।

ਕੈਲਕੂਲੇਟਰ

ਆ ਜਾਓ? ਗੰਭੀਰਤਾ ਨਾਲ? ਕੈਲਕੁਲੇਟਰ? ਹਾਂ, ਬਿਲਕੁਲ, ਇੱਕ ਕੈਲਕੁਲੇਟਰ। ਤੁਹਾਡੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਲਈ ਗਣਿਤ ਦੇ ਕਾਰਜਾਂ ਦੀਆਂ ਮੂਲ ਗੱਲਾਂ ਨੂੰ ਸਮਝਣਾ ਅਤੇ ਉਹ ਇਕੱਠੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਜਲਦੀ ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਤੁਹਾਨੂੰ ਸੰਖਿਆਵਾਂ ਨਾਲ ਨਜਿੱਠਣਾ ਪਏਗਾ ਅਤੇ ਜਿੰਨੀ ਜਲਦੀ ਬਿਹਤਰ ਹੈ।

jarodburchill.github.io/CalculatorReactApp

ਆਪਣਾ ਖੁਦ ਦਾ ਕੈਲਕੁਲੇਟਰ ਬਣਾ ਕੇ ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• ਸੰਖਿਆਵਾਂ ਅਤੇ ਗਣਿਤ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨਾਲ ਕੰਮ ਕਰੋ
• ਇਵੈਂਟ ਲਿਸਨਰ API ਨਾਲ ਅਭਿਆਸ ਕਰੋ
• ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਵਿਵਸਥਿਤ ਕਰਨਾ ਹੈ, ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਝਣਾ ਹੈ

ਕ੍ਰਾਲਰ (ਖੋਜ ਇੰਜਣ)

ਹਰ ਕਿਸੇ ਨੇ ਇੱਕ ਖੋਜ ਇੰਜਣ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ, ਤਾਂ ਕਿਉਂ ਨਾ ਆਪਣਾ ਖੁਦ ਦਾ ਬਣਾਓ? ਜਾਣਕਾਰੀ ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਕ੍ਰੌਲਰਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹਰ ਕੋਈ ਹਰ ਰੋਜ਼ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਤਕਨਾਲੋਜੀ ਅਤੇ ਮਾਹਰਾਂ ਦੀ ਮੰਗ ਸਿਰਫ ਸਮੇਂ ਦੇ ਨਾਲ ਵਧੇਗੀ.

ਗੂਗਲ ਖੋਜ ਇੰਜਣ

ਤੁਸੀਂ ਆਪਣਾ ਖੁਦ ਦਾ ਖੋਜ ਇੰਜਣ ਬਣਾ ਕੇ ਕੀ ਸਿੱਖੋਗੇ:

• ਕ੍ਰਾਲਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ
• ਸਾਈਟਾਂ ਨੂੰ ਇੰਡੈਕਸ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਅਤੇ ਰੇਟਿੰਗ ਅਤੇ ਪ੍ਰਤਿਸ਼ਠਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਦਰਜਾ ਦੇਣਾ ਹੈ
• ਇੱਕ ਡੇਟਾਬੇਸ ਵਿੱਚ ਇੰਡੈਕਸਡ ਸਾਈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟੋਰ ਕਰਨਾ ਹੈ ਅਤੇ ਡੇਟਾਬੇਸ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ

ਸੰਗੀਤ ਪਲੇਅਰ (Spotify, Apple Music)

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

Spotify

ਤੁਸੀਂ ਆਪਣਾ ਖੁਦ ਦਾ ਸੰਗੀਤ ਸਟ੍ਰੀਮਿੰਗ ਪਲੇਟਫਾਰਮ ਬਣਾ ਕੇ ਕੀ ਸਿੱਖੋਗੇ:

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

ਰਿਐਕਟ (ਹੁੱਕਾਂ ਨਾਲ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮੂਵੀ ਖੋਜ ਐਪ

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

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

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਹੁੱਕਾਂ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ
• ਬਣਾਓ-ਪ੍ਰਤੀਕ੍ਰਿਆ-ਐਪ
• ਜੇਐਸਐਕਸ
• CSS

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

Vue ਨਾਲ ਚੈਟ ਐਪ

ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਹੋਰ ਵਧੀਆ ਪ੍ਰੋਜੈਕਟ ਮੇਰੀ ਮਨਪਸੰਦ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਚੈਟ ਐਪ ਬਣਾਉਣਾ ਹੈ: VueJS. ਐਪਲੀਕੇਸ਼ਨ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗੀ:

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

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਵੀ
• ਵਯੂਐਕਸ
• Vue ਰਾਊਟਰ
• Vue CLI
• ਪੁਸ਼ਰ
• CSS

Vue ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਜਾਂ 2020 ਵਿੱਚ ਵਿਕਾਸ ਵਿੱਚ ਜਾਣ ਲਈ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਹੁਨਰ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਇਹ ਇੱਕ ਸੱਚਮੁੱਚ ਵਧੀਆ ਪ੍ਰੋਜੈਕਟ ਹੈ। ਤੁਸੀਂ ਲੱਭ ਸਕਦੇ ਹੋ ਇੱਥੇ ਟਿਊਟੋਰਿਅਲ.

ਐਂਗੁਲਰ 8 ਦੇ ਨਾਲ ਸੁੰਦਰ ਮੌਸਮ ਐਪ

ਇਹ ਉਦਾਹਰਣ ਐਂਗੁਲਰ 8 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸੁੰਦਰ ਮੌਸਮ ਐਪ ਬਣਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗੀ:

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

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਕੋਣੀ 8
• ਫਾਇਰਬੇਜ
• ਸਰਵਰ ਸਾਈਡ ਰੈਂਡਰਿੰਗ
• ਗਰਿੱਡ ਅਤੇ ਫਲੈਕਸਬਾਕਸ ਦੇ ਨਾਲ CSS
• ਮੋਬਾਈਲ ਦੋਸਤਾਨਾ ਅਤੇ ਅਨੁਕੂਲਤਾ
• ਡਾਰਕ ਮੋਡ
• ਸੁੰਦਰ ਇੰਟਰਫੇਸ

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

Svelte ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੂ-ਡੂ ਐਪਲੀਕੇਸ਼ਨ

Svelte ਕੰਪੋਨੈਂਟ-ਅਧਾਰਿਤ ਪਹੁੰਚ 'ਤੇ ਨਵੇਂ ਬੱਚੇ ਦੀ ਤਰ੍ਹਾਂ ਹੈ - ਘੱਟੋ ਘੱਟ ਪ੍ਰਤੀਕਿਰਿਆ, Vue ਅਤੇ Angular ਦੇ ਸਮਾਨ ਹੈ। ਅਤੇ ਇਹ 2020 ਲਈ ਸਭ ਤੋਂ ਗਰਮ ਨਵੇਂ ਉਤਪਾਦਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

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

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਹ ਟਿਊਟੋਰਿਅਲ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ Svelte 3 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸ਼ੁਰੂ ਤੋਂ ਲੈ ਕੇ ਅੰਤ ਤੱਕ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ। ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ, ਸਟਾਈਲਿੰਗ ਅਤੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• Svelte 3
• ਕੰਪੋਨੈਂਟਸ
• CSS ਨਾਲ ਸਟਾਈਲਿੰਗ
• ES 6 ਸੰਟੈਕਸ

ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਚੰਗੇ Svelte ਸਟਾਰਟਰ ਪ੍ਰੋਜੈਕਟ ਨਹੀਂ ਹਨ, ਇਸਲਈ ਮੈਨੂੰ ਮਿਲਿਆ ਇਹ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਵਧੀਆ ਵਿਕਲਪ ਹੈ.

Next.js ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਈ-ਕਾਮਰਸ ਐਪ

Next.js ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਬਾਕਸ ਦੇ ਬਾਹਰ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ।

ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ ਇੱਕ ਈ-ਕਾਮਰਸ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈਏ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ Next.js ਨਾਲ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕਰਨਾ ਹੈ—ਨਵੇਂ ਪੰਨੇ ਅਤੇ ਭਾਗ ਬਣਾਓ, ਡੇਟਾ ਐਕਸਟਰੈਕਟ ਕਰੋ, ਅਤੇ ਸਟਾਈਲ ਕਰੋ ਅਤੇ ਅਗਲੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰੋ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• Next.js
• ਭਾਗ ਅਤੇ ਪੰਨੇ
• ਡਾਟਾ ਨਮੂਨਾ
• ਸਟਾਈਲਾਈਜ਼ੇਸ਼ਨ
• ਪ੍ਰੋਜੈਕਟ ਤੈਨਾਤੀ
• SSR ਅਤੇ SPA

ਕੁਝ ਨਵਾਂ ਸਿੱਖਣ ਲਈ ਇੱਕ ਈ-ਕਾਮਰਸ ਐਪ ਵਰਗੀ ਅਸਲ-ਸੰਸਾਰ ਉਦਾਹਰਨ ਰੱਖਣਾ ਹਮੇਸ਼ਾ ਵਧੀਆ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਕਰ ਸੱਕਦੇ ਹੋ ਇੱਥੇ ਟਿਊਟੋਰਿਅਲ ਲੱਭੋ.

Nuxt.js ਦੇ ਨਾਲ ਪੂਰਾ ਬਹੁ-ਭਾਸ਼ਾਈ ਬਲੌਗ

Nuxt.js Vue ਲਈ ਹੈ, Next.js ਕੀ ਹੈ React ਲਈ: ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਅਤੇ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਸ਼ਕਤੀ ਨੂੰ ਜੋੜਨ ਲਈ ਇੱਕ ਵਧੀਆ ਫਰੇਮਵਰਕ
ਅੰਤਿਮ ਐਪਲੀਕੇਸ਼ਨ ਜੋ ਤੁਸੀਂ ਬਣਾ ਸਕਦੇ ਹੋ ਉਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗੀ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

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

ਇਹ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼ਾਨਦਾਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਫਾਇਦਾ ਉਠਾਉਂਦਾ ਹੈ ਜੋ Nuxt ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ ਪੰਨੇ ਅਤੇ ਭਾਗ, ਅਤੇ SCSS ਨਾਲ ਸਟਾਈਲਿੰਗ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਨੈਕਸਟ.ਜਸ
• ਭਾਗ ਅਤੇ ਪੰਨੇ
• ਸਟੋਰੀਬਲਾਕ ਮੋਡੀਊਲ
• ਹੈਗਫਿਸ਼
• ਰਾਜ ਪ੍ਰਬੰਧਨ ਲਈ Vuex
• ਸਟਾਈਲਿੰਗ ਲਈ SCSS
• ਨਕਸਟ ਮਿਡਲਵੇਅਰ

ਇਹ ਇੱਕ ਸੱਚਮੁੱਚ ਸ਼ਾਨਦਾਰ ਪ੍ਰੋਜੈਕਟ ਹੈ, ਜਿਸ ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼ਾਨਦਾਰ Nuxt.js ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ। ਮੈਨੂੰ ਨਿੱਜੀ ਤੌਰ 'ਤੇ Nuxt ਨਾਲ ਕੰਮ ਕਰਨਾ ਪਸੰਦ ਹੈ ਇਸਲਈ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਅਜ਼ਮਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਵਧੀਆ Vue ਡਿਵੈਲਪਰ ਵੀ ਬਣਾ ਦੇਵੇਗਾ।

ਗੈਟਸਬੀ ਨਾਲ ਬਲੌਗ

Gatsby React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਹੈ। ਇਹ ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਤੀਜਾ ਹੈ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਇੱਕ ਬਲੌਗ ਬਣਾਉਣ ਲਈ ਗਟਸਬੀ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਤੁਸੀਂ React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਖੁਦ ਦੇ ਲੇਖ ਲਿਖਣ ਲਈ ਕਰੋਗੇ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਗੈਟਸਬੀ
• ਪ੍ਰਤੀਕਿਰਿਆ
• ਗ੍ਰਾਫਕੁਅਲ
• ਪਲੱਗਇਨ ਅਤੇ ਥੀਮ
• MDX/ਮਾਰਕਡਾਊਨ
• ਬੂਟਸਟਰੈਪ CSS
• ਪੈਟਰਨ

ਜੇਕਰ ਤੁਸੀਂ ਕਦੇ ਬਲੌਗ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਇਹ ਇੱਕ ਵਧੀਆ ਉਦਾਹਰਣ ਹੈ React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ।

ਮੈਂ ਇਹ ਨਹੀਂ ਕਹਿ ਰਿਹਾ ਕਿ ਵਰਡਪਰੈਸ ਇੱਕ ਬੁਰਾ ਵਿਕਲਪ ਹੈ, ਪਰ ਗੈਟਸਬੀ ਨਾਲ ਤੁਸੀਂ ਰੀਐਕਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ਵਾਲੀਆਂ ਵੈਬਸਾਈਟਾਂ ਬਣਾ ਸਕਦੇ ਹੋ - ਜੋ ਕਿ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸੁਮੇਲ ਹੈ.

Gridsome ਨਾਲ ਬਲੌਗ

Vue ਲਈ Gridsome... ਠੀਕ ਹੈ, ਸਾਡੇ ਕੋਲ ਇਹ ਪਹਿਲਾਂ ਹੀ Next/Nuxt ਨਾਲ ਸੀ।
ਪਰ ਗ੍ਰਿਡਸੋਮ ਅਤੇ ਗੈਟਸਬੀ ਲਈ ਵੀ ਇਹੀ ਸੱਚ ਹੈ। ਦੋਵੇਂ ਗ੍ਰਾਫ਼ਕਿਊਐਲ ਨੂੰ ਆਪਣੀ ਡੇਟਾ ਲੇਅਰ ਵਜੋਂ ਵਰਤਦੇ ਹਨ, ਪਰ ਗ੍ਰਿਡਸੋਮ VueJS ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਵੀ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਵਧੀਆ ਬਲੌਗ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਸਿਖਾਏਗਾ ਕਿ Gridsome, GraphQL ਅਤੇ Markdown ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਬਲੌਗ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ। ਇਸ ਵਿੱਚ ਇਹ ਵੀ ਸ਼ਾਮਲ ਹੈ ਕਿ Netlify ਦੁਆਰਾ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਤੈਨਾਤ ਕਰਨਾ ਹੈ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਗਰੀਡਸਮ
• ਵੀ
• ਗ੍ਰਾਫਕੁਅਲ
• ਮਾਰਕਡਾਊਨ
• ਨੈੱਟਲੀਫਾਈ

ਇਹ ਨਿਸ਼ਚਿਤ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਵਿਆਪਕ ਟਿਊਟੋਰਿਅਲ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਗ੍ਰਿਡਸੋਮ ਦੀਆਂ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ ਅਤੇ ਮਾਰਕਡਾਉਨ ਇੱਕ ਵਧੀਆ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਹੋ ਸਕਦਾ ਹੈ.

Quasar ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ SoundCloud-ਵਰਗੇ ਆਡੀਓ ਪਲੇਅਰ

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

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

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

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਕਵਾਸਰ
• ਵੀ
• ਕੋਰਡੋੋਵਾ
• ਵੇਵਸਰਫਰ
• UI ਭਾਗ

ਛੋਟਾ ਪ੍ਰੋਜੈਕਟ, ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ Quasar ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨਾ।

ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਫਾਰਮ

ਨਿਰਵਿਘਨ ਅਤੇ ਮਜ਼ੇਦਾਰ ਮਾਈਕ੍ਰੋ-ਇੰਟਰੈਕਸ਼ਨਾਂ ਦੇ ਨਾਲ ਇੱਕ ਠੰਡਾ ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਸ਼ਕਲ। ਨੰਬਰ ਫਾਰਮੈਟਿੰਗ, ਤਸਦੀਕ ਅਤੇ ਆਟੋਮੈਟਿਕ ਕਾਰਡ ਕਿਸਮ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਹੈ। ਇਹ Vue.js 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਵੀ ਹੈ। (ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਇੱਥੇ.)

ਕ੍ਰੈਡਿਟ-ਕਾਰਡ-ਫਾਰਮ

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਫਾਰਮ ਦੀ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਪ੍ਰਮਾਣਿਤ ਕਰੋ
• ਘਟਨਾਵਾਂ ਨੂੰ ਸੰਭਾਲੋ (ਉਦਾਹਰਨ ਲਈ, ਜਦੋਂ ਖੇਤਰ ਬਦਲਦੇ ਹਨ)
• ਸਮਝੋ ਕਿ ਪੰਨੇ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ ਅਤੇ ਕਿਵੇਂ ਰੱਖਣਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਦੀ ਜਾਣਕਾਰੀ ਜੋ ਫਾਰਮ ਦੇ ਸਿਖਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ

ਬਾਰ ਚਾਰਟ

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

ਉਹਨਾਂ ਨੂੰ ਲੰਬਕਾਰੀ ਜਾਂ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਇੱਕ ਲੰਬਕਾਰੀ ਬਾਰ ਚਾਰਟ ਨੂੰ ਕਈ ਵਾਰ ਇੱਕ ਲਾਈਨ ਚਾਰਟ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਇੱਕ ਢਾਂਚਾਗਤ ਅਤੇ ਸਮਝਣ ਯੋਗ ਤਰੀਕੇ ਨਾਲ ਡੇਟਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ
• ਇਸ ਤੋਂ ਇਲਾਵਾ: ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਿੱਖੋ canvas ਅਤੇ ਇਸਦੇ ਨਾਲ ਤੱਤ ਕਿਵੇਂ ਖਿੱਚਣੇ ਹਨ

ਇਹ ਇਸ ਲਈ ਹੈ ਤੁਸੀਂ ਵਿਸ਼ਵ ਆਬਾਦੀ ਡੇਟਾ ਲੱਭ ਸਕਦੇ ਹੋ। ਉਹ ਸਾਲ ਦੁਆਰਾ ਕ੍ਰਮਬੱਧ ਕੀਤੇ ਗਏ ਹਨ.

ਟਵਿੱਟਰ ਹਾਰਟ ਐਨੀਮੇਸ਼ਨ

2016 ਵਿੱਚ ਵਾਪਸ, ਟਵਿੱਟਰ ਨੇ ਆਪਣੇ ਟਵੀਟਸ ਲਈ ਇਸ ਸ਼ਾਨਦਾਰ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਪੇਸ਼ ਕੀਤਾ। 2019 ਤੱਕ, ਇਹ ਅਜੇ ਵੀ ਹਿੱਸਾ ਦਿਖਦਾ ਹੈ, ਤਾਂ ਕਿਉਂ ਨਾ ਇੱਕ ਖੁਦ ਬਣਾਓ?

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• CSS ਗੁਣ ਨਾਲ ਕੰਮ ਕਰੋ keyframes
• HTML ਤੱਤਾਂ ਨੂੰ ਹੇਰਾਫੇਰੀ ਅਤੇ ਐਨੀਮੇਟ ਕਰੋ
• JavaScript, HTML ਅਤੇ CSS ਨੂੰ ਜੋੜੋ

ਖੋਜਣਯੋਗ GitHub ਰਿਪੋਜ਼ਟਰੀਆਂ

ਇੱਥੇ ਕੁਝ ਵੀ ਫੈਂਸੀ ਨਹੀਂ ਹੈ — GitHub ਰਿਪੋਜ਼ਟਰੀਆਂ ਸਿਰਫ਼ ਇੱਕ ਵਡਿਆਈ ਸੂਚੀ ਹਨ।
ਉਦੇਸ਼ ਰਿਪੋਜ਼ਟਰੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਹੈ. ਵਰਤੋ ਅਧਿਕਾਰਤ GitHub API ਹਰੇਕ ਉਪਭੋਗਤਾ ਲਈ ਰਿਪੋਜ਼ਟਰੀਆਂ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ.

GitHub ਪ੍ਰੋਫਾਈਲ ਪੇਜ - github.com/indreklasn

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• API ਤੋਂ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ
• API ਤੋਂ ਡੇਟਾ ਡਿਸਪਲੇ ਕਰੋ
• ਫਿਲਟਰ ਕਰੋ ਅਤੇ ਹਰੇਕ ਖੋਜ ਲਈ ਸੰਬੰਧਿਤ ਡੇਟਾ ਦਿਖਾਓ
• ਵਿਕਲਪਿਕ: ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਚੁਣੌਤੀ ਲਈ ਤਿਆਰ ਹੋ, ਤਾਂ ਵਰਤੋ API v4, GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ। ਜੇਕਰ ਤੁਸੀਂ GraphQL ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਮੇਰੇ ਪਿਛਲੇ ਲੇਖਾਂ ਵਿੱਚੋਂ ਇੱਕ 'ਤੇ ਜਾਓ.

Reddit ਸ਼ੈਲੀ ਚੈਟ

ਗੱਲਬਾਤ ਉਹਨਾਂ ਦੀ ਸਾਦਗੀ ਅਤੇ ਵਰਤੋਂ ਵਿੱਚ ਸੌਖ ਦੇ ਕਾਰਨ ਸੰਚਾਰ ਦਾ ਇੱਕ ਪ੍ਰਸਿੱਧ ਤਰੀਕਾ ਹੈ। ਪਰ ਅਸਲ ਵਿੱਚ ਆਧੁਨਿਕ ਚੈਟ ਰੂਮਾਂ ਨੂੰ ਕੀ ਬਾਲਣ ਦਿੰਦਾ ਹੈ? WebSockets!

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

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

ਸਟ੍ਰਿਪ ਸਟਾਈਲ ਨੈਵੀਗੇਸ਼ਨ

ਕਿਹੜੀ ਚੀਜ਼ ਇਸ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਵਿਲੱਖਣ ਬਣਾਉਂਦੀ ਹੈ ਉਹ ਇਹ ਹੈ ਕਿ ਪੋਪਓਵਰ ਕੰਟੇਨਰ ਸਮੱਗਰੀ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਬਦਲਦਾ ਹੈ। ਇੱਕ ਨਵੇਂ ਪੋਪਓਵਰ ਨੂੰ ਖੋਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਰਵਾਇਤੀ ਵਿਵਹਾਰ ਦੀ ਤੁਲਨਾ ਵਿੱਚ ਇਸ ਤਬਦੀਲੀ ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰਤਾ ਹੈ.

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਤਬਦੀਲੀਆਂ ਦੇ ਨਾਲ CSS ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜੋ
• ਸਮੱਗਰੀ ਨੂੰ ਮੱਧਮ ਕਰੋ ਅਤੇ ਫਲੋਟ ਕੀਤੇ ਤੱਤ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਲਾਸ ਲਾਗੂ ਕਰੋ

ਪਕਾਮੈਨ

Pacman ਦਾ ਆਪਣਾ ਸੰਸਕਰਣ ਬਣਾਓ। ਇਹ ਇੱਕ ਵਿਚਾਰ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਕਿ ਗੇਮਾਂ ਨੂੰ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਮੂਲ ਗੱਲਾਂ ਨੂੰ ਸਮਝਣਾ ਹੈ। ਇੱਕ JavaScript ਫਰੇਮਵਰਕ, React ਜਾਂ Vue ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• ਤੱਤ ਕਿਵੇਂ ਚਲਦੇ ਹਨ
• ਇਹ ਕਿਵੇਂ ਨਿਰਧਾਰਤ ਕਰਨਾ ਹੈ ਕਿ ਕਿਹੜੀਆਂ ਕੁੰਜੀਆਂ ਦਬਾਉਣੀਆਂ ਹਨ
• ਟੱਕਰ ਦੇ ਪਲ ਨੂੰ ਕਿਵੇਂ ਨਿਰਧਾਰਤ ਕਰਨਾ ਹੈ
• ਤੁਸੀਂ ਅੱਗੇ ਜਾ ਸਕਦੇ ਹੋ ਅਤੇ ਭੂਤ ਅੰਦੋਲਨ ਨਿਯੰਤਰਣ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ

ਤੁਹਾਨੂੰ ਇਸ ਪ੍ਰੋਜੈਕਟ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਮਿਲੇਗੀ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ GitHub

ਉਪਭੋਗਤਾ ਪ੍ਰਬੰਧਨ

ਪ੍ਰੋਜੈਕਟ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ GitHub

ਉਪਭੋਗਤਾ ਪ੍ਰਸ਼ਾਸਨ ਲਈ ਇੱਕ CRUD ਕਿਸਮ ਦੀ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ ਤੁਹਾਨੂੰ ਵਿਕਾਸ ਦੀਆਂ ਮੂਲ ਗੱਲਾਂ ਸਿਖਾਏਗਾ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਨਵੇਂ ਡਿਵੈਲਪਰਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।

ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• ਰੂਟਿੰਗ ਕੀ ਹੈ
• ਡੇਟਾ ਐਂਟਰੀ ਫਾਰਮਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ ਅਤੇ ਜਾਂਚ ਕਰੋ ਕਿ ਉਪਭੋਗਤਾ ਨੇ ਕੀ ਦਾਖਲ ਕੀਤਾ ਹੈ
• ਡੇਟਾਬੇਸ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ - ਕਾਰਵਾਈਆਂ ਬਣਾਓ, ਪੜ੍ਹੋ, ਅੱਪਡੇਟ ਕਰੋ ਅਤੇ ਮਿਟਾਓ

ਤੁਹਾਡੇ ਸਥਾਨ 'ਤੇ ਮੌਸਮ ਦੀ ਜਾਂਚ ਕਰ ਰਿਹਾ ਹੈ

ਪ੍ਰੋਜੈਕਟ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ GitHub

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

ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦਾ ਤਜਰਬਾ ਹਾਸਲ ਕਰਨ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• API ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ
• ਭੂ-ਸਥਾਨ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ
• ਟੈਕਸਟ ਇਨਪੁਟ ਜੋੜ ਕੇ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਹੋਰ ਗਤੀਸ਼ੀਲ ਬਣਾਓ। ਇਸ ਵਿੱਚ, ਉਪਭੋਗਤਾ ਇੱਕ ਖਾਸ ਸਥਾਨ ਵਿੱਚ ਮੌਸਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੀ ਲੋਕੇਸ਼ਨ ਦਰਜ ਕਰ ਸਕਣਗੇ।

ਤੁਹਾਨੂੰ ਇੱਕ API ਦੀ ਲੋੜ ਪਵੇਗੀ। ਮੌਸਮ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, OpenWeather API ਦੀ ਵਰਤੋਂ ਕਰੋ। OpenWeather API ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਇੱਥੇ.

ਚੈਟ ਵਿੰਡੋ

ਮੇਰੀ ਚੈਟ ਵਿੰਡੋ ਐਕਸ਼ਨ ਵਿੱਚ ਹੈ, ਦੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਵਿੱਚ ਖੋਲ੍ਹੋ

ਇੱਕ ਚੈਟ ਵਿੰਡੋ ਬਣਾਉਣਾ ਸਾਕਟਾਂ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ। ਤਕਨੀਕੀ ਸਟੈਕ ਦੀ ਚੋਣ ਬਹੁਤ ਵੱਡੀ ਹੈ। Node.js, ਉਦਾਹਰਨ ਲਈ, ਸੰਪੂਰਣ ਹੈ.

ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਸਾਕਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ। ਇਹ ਇਸ ਪ੍ਰੋਜੈਕਟ ਦਾ ਮੁੱਖ ਫਾਇਦਾ ਹੈ।

ਜੇ ਤੁਸੀਂ ਲਾਰਵੇਲ ਡਿਵੈਲਪਰ ਹੋ ਜੋ ਸਾਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ, ਤਾਂ ਮੇਰਾ ਪੜ੍ਹੋ ਲੇਖ

ਗਿੱਟਲਾਬ ਸੀ.ਆਈ.

ਸਰੋਤ

ਜੇਕਰ ਤੁਸੀਂ ਲਗਾਤਾਰ ਏਕੀਕਰਣ (CI) ਲਈ ਨਵੇਂ ਹੋ, ਤਾਂ GitLab CI ਨਾਲ ਖੇਡੋ। ਕੁਝ ਵਾਤਾਵਰਣ ਸੈਟ ਅਪ ਕਰੋ ਅਤੇ ਕੁਝ ਟੈਸਟ ਚਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਹ ਕੋਈ ਬਹੁਤ ਔਖਾ ਪ੍ਰੋਜੈਕਟ ਨਹੀਂ ਹੈ, ਪਰ ਮੈਨੂੰ ਯਕੀਨ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਤੋਂ ਬਹੁਤ ਕੁਝ ਸਿੱਖੋਗੇ। ਬਹੁਤ ਸਾਰੀਆਂ ਵਿਕਾਸ ਟੀਮਾਂ ਹੁਣ ਸੀ.ਆਈ. ਇਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਇਹ ਜਾਣਨਾ ਲਾਭਦਾਇਕ ਹੈ।

ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• GitLab CI ਕੀ ਹੈ?
• ਕੌਂਫਿਗਰ ਕਿਵੇਂ ਕਰੀਏ .gitlab-ci.ymlਜੋ GitLab ਉਪਭੋਗਤਾ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਕੀ ਕਰਨਾ ਹੈ
• ਹੋਰ ਵਾਤਾਵਰਨ ਵਿੱਚ ਕਿਵੇਂ ਤੈਨਾਤ ਕਰਨਾ ਹੈ

ਵੈੱਬਸਾਈਟ ਵਿਸ਼ਲੇਸ਼ਕ

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

ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

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

ਸੋਸ਼ਲ ਨੈੱਟਵਰਕ 'ਤੇ ਭਾਵਨਾ ਖੋਜ

ਸਰੋਤ

ਸੋਸ਼ਲ ਮੀਡੀਆ 'ਤੇ ਭਾਵਨਾ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਮਸ਼ੀਨ ਸਿਖਲਾਈ ਨਾਲ ਜਾਣ-ਪਛਾਣ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਹੈ।

ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਸੋਸ਼ਲ ਨੈੱਟਵਰਕ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ। ਹਰ ਕੋਈ ਆਮ ਤੌਰ 'ਤੇ ਟਵਿੱਟਰ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਮਸ਼ੀਨ ਸਿਖਲਾਈ ਦਾ ਤਜਰਬਾ ਹੈ, ਤਾਂ ਵੱਖ-ਵੱਖ ਸੋਸ਼ਲ ਨੈੱਟਵਰਕਾਂ ਤੋਂ ਡਾਟਾ ਇਕੱਠਾ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਤੁਸੀਂ ਸਿੱਖੋਗੇ:

• ਮਸ਼ੀਨ ਲਰਨਿੰਗ ਕੀ ਹੈ

Trello ਕਲੋਨ

Indrek Lasn ਤੱਕ Trello ਕਲੋਨ.

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਰੂਟਾਂ ਦਾ ਸੰਗਠਨ (ਰੂਟਿੰਗ)।
• ਖਿੱਚੋ ਅਤੇ ਸੁੱਟੋ.
• ਨਵੀਆਂ ਵਸਤੂਆਂ (ਬੋਰਡ, ਸੂਚੀਆਂ, ਕਾਰਡ) ਕਿਵੇਂ ਬਣਾਈਏ।
• ਇਨਪੁਟ ਡੇਟਾ ਦੀ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਜਾਂਚ ਕਰਨਾ।
• ਕਲਾਇੰਟ ਦੇ ਪੱਖ ਤੋਂ: ਲੋਕਲ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ, ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਡਾਟਾ ਕਿਵੇਂ ਸੇਵ ਕਰੀਏ, ਲੋਕਲ ਸਟੋਰੇਜ ਤੋਂ ਡਾਟਾ ਕਿਵੇਂ ਪੜ੍ਹਿਆ ਜਾਵੇ।
• ਸਰਵਰ ਸਾਈਡ ਤੋਂ: ਡੇਟਾਬੇਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ, ਡੇਟਾਬੇਸ ਵਿੱਚ ਡੇਟਾ ਕਿਵੇਂ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਹੈ, ਡੇਟਾਬੇਸ ਤੋਂ ਡੇਟਾ ਕਿਵੇਂ ਪੜ੍ਹਨਾ ਹੈ।

ਇੱਥੇ ਇੱਕ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ, React+Redux ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ।

ਐਡਮਿਨ ਪੈਨਲ

Github ਰਿਪੋਜ਼ਟਰੀ.

ਇੱਕ ਸਧਾਰਨ CRUD ਐਪਲੀਕੇਸ਼ਨ, ਮੂਲ ਗੱਲਾਂ ਸਿੱਖਣ ਲਈ ਆਦਰਸ਼। ਆਓ ਸਿੱਖੀਏ:

• ਉਪਭੋਗਤਾ ਬਣਾਓ, ਉਪਭੋਗਤਾਵਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੋ.
• ਡੇਟਾਬੇਸ ਨਾਲ ਗੱਲਬਾਤ ਕਰੋ - ਉਪਭੋਗਤਾ ਬਣਾਓ, ਪੜ੍ਹੋ, ਸੰਪਾਦਿਤ ਕਰੋ, ਮਿਟਾਓ।
• ਇੰਪੁੱਟ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨਾ ਅਤੇ ਫਾਰਮਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ।

ਕ੍ਰਿਪਟੋਕਰੰਸੀ ਟਰੈਕਰ (ਦੇਸੀ ਮੋਬਾਈਲ ਐਪ)

Github ਰਿਪੋਜ਼ਟਰੀ.

ਕੁਝ ਵੀ: Swift, Objective-C, React Native, Java, Kotlin.

ਆਓ ਅਧਿਐਨ ਕਰੀਏ:

• ਨੇਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
• API ਤੋਂ ਡੇਟਾ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ।
• ਨੇਟਿਵ ਪੇਜ ਲੇਆਉਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
• ਮੋਬਾਈਲ ਸਿਮੂਲੇਟਰਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ।

ਇਸ API ਨੂੰ ਅਜ਼ਮਾਓ. ਜੇ ਤੁਸੀਂ ਕੁਝ ਬਿਹਤਰ ਲੱਭਦੇ ਹੋ, ਤਾਂ ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਲਿਖੋ.

ਜੇ ਤੁਸੀਂ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਇਹ ਇੱਥੇ ਹੈ ਇੱਥੇ ਇੱਕ ਟਿਊਟੋਰਿਅਲ ਹੈ.

ਸਕ੍ਰੈਚ ਤੋਂ ਆਪਣੀ ਖੁਦ ਦੀ ਵੈਬਪੈਕ ਸੰਰਚਨਾ ਸੈਟ ਅਪ ਕਰੋ

ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ, ਇਹ ਕੋਈ ਐਪਲੀਕੇਸ਼ਨ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਸਮਝਣਾ ਬਹੁਤ ਉਪਯੋਗੀ ਕੰਮ ਹੈ ਕਿ ਵੈਬਪੈਕ ਅੰਦਰੋਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਹੁਣ ਇਹ ਇੱਕ "ਬਲੈਕ ਬਾਕਸ" ਨਹੀਂ ਹੋਵੇਗਾ, ਸਗੋਂ ਇੱਕ ਸਮਝਣ ਯੋਗ ਸਾਧਨ ਹੋਵੇਗਾ।

ਲੋੜਾਂ:

• es7 ਤੋਂ es5 (ਬੁਨਿਆਦੀ) ਨੂੰ ਕੰਪਾਇਲ ਕਰੋ।
• jsx ਨੂੰ js - ਜਾਂ - .vue ਤੋਂ .js ਕੰਪਾਇਲ ਕਰੋ (ਤੁਹਾਨੂੰ ਲੋਡਰ ਸਿੱਖਣੇ ਪੈਣਗੇ)
• ਵੈਬਪੈਕ ਦੇਵ ਸਰਵਰ ਅਤੇ ਹੌਟ ਮੋਡੀਊਲ ਰੀਲੋਡਿੰਗ ਸੈਟ ਅਪ ਕਰੋ। (vue-cli ਅਤੇ create-react-app ਦੋਵੇਂ ਹੀ ਵਰਤਦੇ ਹਨ)
• Heroku, now.sh ਜਾਂ Github ਦੀ ਵਰਤੋਂ ਕਰੋ, ਸਿੱਖੋ ਕਿ ਵੈਬਪੈਕ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ।
• css - scss, less, stylus ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਆਪਣਾ ਮਨਪਸੰਦ ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਸੈਟ ਅਪ ਕਰੋ।
• ਵੈਬਪੈਕ ਨਾਲ ਚਿੱਤਰਾਂ ਅਤੇ svgs ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਬਾਰੇ ਜਾਣੋ।

ਇਹ ਸੰਪੂਰਨ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਰੋਤ ਹੈ।

ਹੈਕਰਨਿਊਜ਼ ਕਲੋਨ

ਹਰ ਜੇਡੀ ਨੂੰ ਆਪਣੀ ਹੈਕਰਨਿਊਜ਼ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਤੁਸੀਂ ਰਸਤੇ ਵਿੱਚ ਕੀ ਸਿੱਖੋਗੇ:

• ਹੈਕਰਨਿਊਜ਼ API ਨਾਲ ਕਿਵੇਂ ਇੰਟਰੈਕਟ ਕਰਨਾ ਹੈ।
• ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈਏ।
• ਟਿੱਪਣੀਆਂ, ਵਿਅਕਤੀਗਤ ਟਿੱਪਣੀਆਂ, ਪ੍ਰੋਫਾਈਲਾਂ ਦੇਖਣ ਵਰਗੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ।
• ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਰੂਟਾਂ ਦਾ ਸੰਗਠਨ (ਰੂਟਿੰਗ)।

ਤੁਦੁਸ਼ੇਚਕਾ

TodoMVC.

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

ਸਿੱਖੋ:

• ਨਵੇਂ ਕਾਰਜ ਬਣਾਓ।
• ਜਾਂਚ ਕਰੋ ਕਿ ਖੇਤਰ ਭਰੇ ਹੋਏ ਹਨ।
• ਫਿਲਟਰ ਕਾਰਜ (ਪੂਰੇ, ਕਿਰਿਆਸ਼ੀਲ, ਸਾਰੇ)। ਵਰਤੋ filter и reduce.
• ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀਆਂ ਮੂਲ ਗੱਲਾਂ ਨੂੰ ਸਮਝੋ।

ਕ੍ਰਮਬੱਧ ਡਰੈਗ ਅਤੇ ਡ੍ਰੌਪ ਸੂਚੀ

Github ਰਿਪੋਜ਼ਟਰੀ.

ਸਮਝਣ ਲਈ ਬਹੁਤ ਮਦਦਗਾਰ ਏਪੀਆਈ ਨੂੰ ਖਿੱਚੋ ਅਤੇ ਛੱਡੋ.

ਆਓ ਸਿੱਖੀਏ:

• API ਨੂੰ ਖਿੱਚੋ ਅਤੇ ਛੱਡੋ
• ਅਮੀਰ UIs ਬਣਾਓ

ਮੈਸੇਂਜਰ ਕਲੋਨ (ਦੇਸੀ ਐਪ)

ਤੁਸੀਂ ਸਮਝ ਸਕੋਗੇ ਕਿ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਅਤੇ ਮੂਲ ਐਪਲੀਕੇਸ਼ਨ ਦੋਵੇਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਜੋ ਤੁਹਾਨੂੰ ਸਲੇਟੀ ਪੁੰਜ ਤੋਂ ਵੱਖ ਕਰ ਦੇਵੇਗਾ।

ਅਸੀਂ ਕੀ ਅਧਿਐਨ ਕਰਾਂਗੇ:

• ਵੈੱਬ ਸਾਕਟ (ਤਤਕਾਲ ਸੁਨੇਹੇ)
• ਨੇਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
• ਨੇਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਟੈਂਪਲੇਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
• ਨੇਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਰੂਟਾਂ ਦਾ ਆਯੋਜਨ ਕਰਨਾ।

ਟੈਕਸਟ ਸੰਪਾਦਕ

ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ ਦਾ ਉਦੇਸ਼ ਉਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਦੇ ਯਤਨਾਂ ਨੂੰ ਘਟਾਉਣਾ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਵੈਧ HTML ਮਾਰਕਅੱਪ ਵਿੱਚ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਨ। ਇੱਕ ਚੰਗਾ ਟੈਕਸਟ ਐਡੀਟਰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਟੈਕਸਟ ਨੂੰ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਫਾਰਮੈਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਕਿਸੇ ਸਮੇਂ, ਹਰ ਕਿਸੇ ਨੇ ਟੈਕਸਟ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਤਾਂ ਕਿਉਂ ਨਹੀਂ ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਬਣਾਓ?

Reddit ਕਲੋਨ

Reddit ਇੱਕ ਸੋਸ਼ਲ ਨਿਊਜ਼ ਏਗਰੀਗੇਸ਼ਨ, ਵੈੱਬ ਸਮੱਗਰੀ ਰੇਟਿੰਗ ਅਤੇ ਚਰਚਾ ਸਾਈਟ ਹੈ।

Reddit ਮੇਰਾ ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਲੈਂਦਾ ਹੈ, ਪਰ ਮੈਂ ਇਸ 'ਤੇ ਹੈਂਗ ਆਊਟ ਕਰਨਾ ਜਾਰੀ ਰੱਖਦਾ ਹਾਂ। ਇੱਕ Reddit ਕਲੋਨ ਬਣਾਉਣਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਿੱਖਣ ਦਾ ਇੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਹੈ (ਉਸੇ ਸਮੇਂ Reddit ਨੂੰ ਬ੍ਰਾਊਜ਼ ਕਰਦੇ ਹੋਏ)।

Reddit ਤੁਹਾਨੂੰ ਇੱਕ ਬਹੁਤ ਹੀ ਅਮੀਰ ਦੇ ਨਾਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ API. ਕਿਸੇ ਵੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਨਾ ਛੱਡੋ ਜਾਂ ਬੇਝਿਜਕ ਕੰਮ ਨਾ ਕਰੋ। ਗਾਹਕਾਂ ਅਤੇ ਗਾਹਕਾਂ ਦੇ ਨਾਲ ਅਸਲ ਸੰਸਾਰ ਵਿੱਚ, ਤੁਸੀਂ ਬੇਝਿਜਕ ਕੰਮ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਜਾਂ ਤੁਸੀਂ ਜਲਦੀ ਹੀ ਆਪਣੀ ਨੌਕਰੀ ਗੁਆ ਦੇਵੋਗੇ।

ਸਮਾਰਟ ਕਲਾਇੰਟਸ ਨੂੰ ਤੁਰੰਤ ਇਹ ਅਹਿਸਾਸ ਹੋ ਜਾਵੇਗਾ ਕਿ ਕੰਮ ਖਰਾਬ ਹੋ ਰਿਹਾ ਹੈ ਅਤੇ ਉਹ ਕਿਸੇ ਹੋਰ ਨੂੰ ਲੱਭ ਲੈਣਗੇ.

Reddit API

ਇੱਕ ਓਪਨ ਸੋਰਸ NPM ਪੈਕੇਜ ਪ੍ਰਕਾਸ਼ਿਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

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

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

ਪੈਕੇਜ ਕੁਝ ਵੀ ਹੋ ਸਕਦਾ ਹੈ. ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਕੋਈ ਵਿਚਾਰ ਨਹੀਂ ਹੈ, ਤਾਂ ਆਪਣਾ ਲੋਡਸ਼ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ।

ਲੋਦਾਸ਼: lodash.com

ਜੋ ਕੁਝ ਤੁਸੀਂ ਔਨਲਾਈਨ ਕੀਤਾ ਹੈ, ਉਹ ਤੁਹਾਨੂੰ ਦੂਜਿਆਂ ਤੋਂ 10% ਉੱਪਰ ਰੱਖਦਾ ਹੈ। ਇੱਥੇ ਕੁਝ ਉਪਯੋਗੀ ਸਰੋਤ ਹਨ ਖੁੱਲੇ ਸਰੋਤਾਂ ਅਤੇ ਪੈਕੇਜਾਂ ਬਾਰੇ।

ਮੁਫ਼ਤ ਕੋਡ ਕੈਂਪ ਪਾਠਕ੍ਰਮ

FCC ਪਾਠਕ੍ਰਮ

freeCodecamp ਨੇ ਬਹੁਤ ਸਾਰਾ ਇਕੱਠਾ ਕੀਤਾ ਹੈ ਵਿਆਪਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕੋਰਸ.

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

ਜੇਕਰ ਤੁਸੀਂ ਪੂਰਾ ਕੋਰਸ ਪੂਰਾ ਕਰਨ ਦਾ ਪ੍ਰਬੰਧ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਆਪਣੀ ਪਹਿਲੀ ਨੌਕਰੀ ਲਈ ਯੋਗਤਾ ਤੋਂ ਵੱਧ ਹੋਵੋਗੇ।

ਸਕ੍ਰੈਚ ਤੋਂ ਇੱਕ HTTP ਸਰਵਰ ਬਣਾਓ

HTTP ਪ੍ਰੋਟੋਕੋਲ ਮੁੱਖ ਪ੍ਰੋਟੋਕਾਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜਿਸ ਰਾਹੀਂ ਸਮੱਗਰੀ ਇੰਟਰਨੈੱਟ 'ਤੇ ਯਾਤਰਾ ਕਰਦੀ ਹੈ। HTTP ਸਰਵਰਾਂ ਦੀ ਵਰਤੋਂ ਸਥਿਰ ਸਮੱਗਰੀ ਜਿਵੇਂ ਕਿ HTML, CSS, ਅਤੇ JS ਦੀ ਸੇਵਾ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਸਕ੍ਰੈਚ ਤੋਂ HTTP ਪ੍ਰੋਟੋਕੋਲ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਤੁਹਾਡੇ ਗਿਆਨ ਦਾ ਵਿਸਤਾਰ ਕਰੇਗਾ ਕਿ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਪਾਉਂਦੀਆਂ ਹਨ।

ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ NodeJs ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਐਕਸਪ੍ਰੈਸ ਇੱਕ HTTP ਸਰਵਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ.

ਸੰਦਰਭ ਲਈ, ਵੇਖੋ ਕਿ ਕੀ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:

• ਕਿਸੇ ਵੀ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ ਇੱਕ ਸਰਵਰ ਸੈਟ ਅਪ ਕਰੋ
• ਸਰਵਰ ਨੂੰ HTML, CSS ਅਤੇ JS ਸਮੱਗਰੀ ਦੀ ਸੇਵਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
• ਸਕ੍ਰੈਚ ਤੋਂ ਰਾਊਟਰ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
• ਤਬਦੀਲੀਆਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰੋ ਅਤੇ ਸਰਵਰ ਨੂੰ ਅਪਡੇਟ ਕਰੋ

ਜੇ ਤੁਸੀਂ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਕਿਉਂ, ਵਰਤੋ ਲੰਗ ਜਾਓ ਅਤੇ ਇੱਕ HTTP ਸਰਵਰ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ caddy ਸ਼ੁਰੂ ਤੋਂ.

ਨੋਟਸ ਲਈ ਡੈਸਕਟਾਪ ਐਪ

ਅਸੀਂ ਸਾਰੇ ਨੋਟ ਲੈਂਦੇ ਹਾਂ, ਕੀ ਅਸੀਂ ਨਹੀਂ?

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

ਇਸ ਨੂੰ ਪਹਿਲੀ ਚੁਣੌਤੀ (ਟੈਕਸਟ ਐਡੀਟਰ) ਨਾਲ ਜੋੜਨ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ।

ਇੱਕ ਬੋਨਸ ਦੇ ਰੂਪ ਵਿੱਚ, ਆਪਣੇ ਡੈਸਕਟੌਪ ਸੰਸਕਰਣ ਨੂੰ ਵੈੱਬ ਸੰਸਕਰਣ ਨਾਲ ਸਿੰਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਪੋਡਕਾਸਟ (ਓਵਰਕਾਸਟ ਕਲੋਨ)

ਪੋਡਕਾਸਟ ਕੌਣ ਨਹੀਂ ਸੁਣਦਾ?

ਹੇਠ ਦਿੱਤੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨਾਲ ਇੱਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ:

• ਅਕਾਉਂਟ ਬਣਾਓ
• ਪੋਡਕਾਸਟ ਖੋਜੋ
• ਪੌਡਕਾਸਟਾਂ ਨੂੰ ਦਰਜਾ ਦਿਓ ਅਤੇ ਗਾਹਕ ਬਣੋ
• 30 ਸਕਿੰਟਾਂ ਲਈ ਰੁਕੋ ਅਤੇ ਚਲਾਓ, ਸਪੀਡ ਬਦਲੋ, ਅੱਗੇ ਅਤੇ ਪਿੱਛੇ ਫੰਕਸ਼ਨ ਕਰੋ।

iTunes API ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਹੋਰ ਸਰੋਤਾਂ ਬਾਰੇ ਜਾਣਦੇ ਹੋ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਪੋਸਟ ਕਰੋ।

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

ਸਕ੍ਰੀਨ ਕੈਪਚਰ

ਸਤ ਸ੍ਰੀ ਅਕਾਲ! ਮੈਂ ਇਸ ਸਮੇਂ ਆਪਣੀ ਸਕ੍ਰੀਨ ਫਿਲਮ ਕਰ ਰਿਹਾ/ਰਹੀ ਹਾਂ!

ਇੱਕ ਡੈਸਕਟਾਪ ਜਾਂ ਵੈੱਬ ਐਪ ਬਣਾਓ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੀ ਸਕ੍ਰੀਨ ਨੂੰ ਕੈਪਚਰ ਕਰਨ ਅਤੇ ਕਲਿੱਪ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ .gif

ਇੱਥੇ ਕੁਝ ਸੁਝਾਅਇਸ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ.

ਸਰੋਤ

• ਡਿਵੈਲਪਰ (ਲੇਅਰ, ਸਕੁਓਸ਼, ਕੈਲਕੁਲੇਟਰ, ਵੈੱਬਸਾਈਟ ਕ੍ਰਾਲਰ, ਸੰਗੀਤ ਪਲੇਅਰ) ਲਈ 5 ਹੋਰ ਦਲੇਰ ਸਿਖਲਾਈ ਪ੍ਰੋਜੈਕਟ
• ਤੁਹਾਡੇ ਫਰੰਟ-ਐਂਡ ਹੁਨਰ ਨੂੰ ਨਿਖਾਰਨ ਲਈ 9 ਪ੍ਰੋਜੈਕਟ
• ਇੱਕ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ ਲਈ ਛੇ ਕੰਮ
• ਇੱਕ ਡਿਵੈਲਪਰ ਲਈ ਮਜ਼ੇਦਾਰ ਅਭਿਆਸ
• 8 ਵਿਦਿਅਕ ਪ੍ਰੋਜੈਕਟ
• ਅਭਿਆਸ ਕਰਨ ਲਈ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਇੱਕ ਹੋਰ ਸੂਚੀ

ਸਰੋਤ: www.habr.com