Theory
બધું સાથે બાંધો
BCA503-01 એ તમને આધુનિક web stack ટુકડે ટુકડે શીખવ્યો: data માટે MongoDB (Unit 1), અને front-end માટે React (Unit 2) તથા Angular (Unit 3). Capstone PROJECT તમને એ બધાંને એક ચાલતા application માં ભેગાં કરવાનું કહે છે.
સ્વાભાવિક પસંદગી એ જ ચાલુ દાખલો છે જેને તમે શરૂથી અનુસર્યો છે: FestConnect, એટલે કે events નું portal. MongoDB નું back-end events સાચવે છે; React કે Angular નું front-end users ને એ જોવા અને એમાં નોંધણી કરાવવા દે છે. આ સમાપન પાઠ project ની મર્યાદા બાંધવા અને એને સારી રીતે બનાવવા વિશે વ્યવહારુ માર્ગદર્શન આપે છે, જેથી એ અધૂરા ગૂંચવાડામાં ફેલાઈ જવાને બદલે ખરી નિપુણતા બતાવે.
Follow along
Capstone project ની મર્યાદા બાંધવી
- એક જ front-end framework પસંદ કરો React કે Angular, બંને નહીં. તમે એ બંને સરખાવવા માટે શીખ્યા હતા; project એકમાં ઊંડાણ બતાવે છે.
- નાનું પણ સંપૂર્ણ app પસંદ કરો FestConnect નું event portal આદર્શ છે: events ની યાદી, એક event જોવો, નોંધણી કરવી. પૂરું થાય એવું અને સુસંગત.
- Data નું સ્તર ગોઠવો Events ના collection સાથેનું MongoDB database; અને એની ઉપર નાનું REST API (JSON અંદર, JSON બહાર) ખુલ્લું મૂકો જેને front-end બોલાવી શકે.
- Front-end ધીરે ધીરે બાંધો પહેલાં એક feature શરૂથી અંત સુધી (events ની યાદી), પછી બીજું (નોંધણી), અને સાથે સાથે ચકાસતા જાઓ: બધું એકસાથે નહીં.
- જોડો અને નોંધ લખો Front-end એ API બોલાવે (fetch કે HttpClient), JSON સંભાળે, UI તાજું કરે; અને ટૂંકી નોંધ લખો: એ શું કરે છે, stack શું છે, ચલાવવું કઈ રીતે.
Theory
Full-stack ચક્ર, ફરી એક વાર
તમારો project એ જ આખું આધુનિક ચક્ર છે જે તમે બે વિષયોમાં બાંધ્યું છે: front-end (React કે Angular) નાના API ને HTTP request મોકલે છે, એ API MongoDB database માંથી વાંચે છે કે એમાં લખે છે અને JSON પાછું આપે છે, અને પછી front-end UI તાજું કરે છે.
બધું જોડાય છે: MongoDB ના documents (Unit 1) API પરથી JSON બનીને આવે છે; React ના hooks કે Angular ના services (Units 2 થી 3) એને લાવીને દેખાડે છે; forms નોંધણીઓ ઝીલીને પાછી મોકલે છે. આ ચક્ર શરૂથી અંત સુધી બાંધવાથી, ભલે નાના app માટે હોય, સાબિત થાય છે કે આધુનિક web application ખરેખર કઈ રીતે ચાલે છે એ તમે database થી માંડીને પડદા સુધી સમજો છો. Project એ જ સમજ બતાવે છે, app નું કદ નહીં.
Quiz
BCA503-01 ના capstone project માટે મર્યાદા અને framework ની પસંદગીની સૌથી સારી રીત કઈ છે?
- React અને Angular બંનેને સાથે વાપરીને શક્ય એટલું મોટું app બનાવવું
- નાનું પણ સંપૂર્ણ full-stack app બનાવવું (MongoDB વત્તા એક જ front-end framework), જેની મર્યાદા પૂરું થાય એ રીતે બાંધી હોય અને જે ધીરે ધીરે બંધાયું હોય
- Database છોડી દઈને ફક્ત static pages બનાવવાં
- ફક્ત IKS નું ગણિત વાપરવું, કોઈ web technologies નહીં
Show the answer
નાનું પણ સંપૂર્ણ full-stack app બનાવવું (MongoDB વત્તા એક જ front-end framework), જેની મર્યાદા પૂરું થાય એ રીતે બાંધી હોય અને જે ધીરે ધીરે બંધાયું હોય
સાચી રીત એ છે કે MongoDB અને એક જ front-end framework (React કે Angular) વાપરીને નાનું પણ સંપૂર્ણ full-stack app બનાવવું, જેની મર્યાદા એવી બાંધી હોય કે તમે એને પૂરું કરીને ઓપ આપી શકો, અને જે ધીરે ધીરે એક એક ટુકડે બંધાયું હોય. વિકલ્પ A એ મર્યાદા વટાવવાની જાણીતી ભૂલ છે: બંને frameworks અને વધુમાં વધુ features ઠાંસવાથી તૂટેલો, અધૂરો ગૂંચવાડો બને છે, જે સાફ અને ચાલતા નાના app કરતાં ઓછું બતાવે છે (BCA504 ના project વાળો એ જ બોધ). વિકલ્પ C આખો મુદ્દો જ છોડી દે છે, એટલે કે front-end ને ખરા database સાથે જોડવાનો. વિકલ્પ D એ IKS ના વિષયને web project સાથે ગૂંચવે છે (એ બંને અલગ કામ છે). પહોળાઈ કરતાં ઊંડાણ સારું: એક નક્કર, સંપૂર્ણ અને નોંધ સાથેનું full-stack app Unit 1 થી 3 નાં કૌશલ્યો સૌથી સારી રીતે બતાવે છે. નાનું અને પૂરું થયેલું, મોટા અને તૂટેલા કરતાં ચડિયાતું છે.
Think first
Project માટે React કે Angular?
તમે React અને Angular બંને શીખ્યા છો. Capstone માટે કયું પસંદ કરવું, અને એનાથી ફરક પડે છે ખરો? વિચારીને પછી tap કરો.
Show the answer
જેમાં તમે વધુ સહજ અને વધુ ઝડપી હો એ એક પસંદ કરો, કારણ કે project નું ધ્યેય સંપૂર્ણ ચાલતું app બતાવવાનું છે, બે frameworks સાથે રમી શકો છો એ સાબિત કરવાનું નહીં.
React અને Angular બંને FestConnect ને એકસરખી સારી રીતે બનાવી શકે છે; પસંદગી તમારી પ્રવીણતા અને project ની જરૂરિયાત પર આધારિત છે (Angular નું built-in માળખું મોટાં, વધુ ગોઠવાયેલાં apps ને બંધબેસે છે; React ની flexibility નાનાં, પોતાની રીતે ઘડેલાં apps ને, પણ capstone માટે બેમાંથી કોઈ પણ ચાલે).
કયું framework છે એના કરતાં ઘણું વધારે અગત્યનું એ છે કે app સંપૂર્ણ હોય, MongoDB સાથે જોડાયેલું હોય અને એને ઓપ અપાયો હોય. બંને વાપરવા જતાં તમારી મહેનત વહેંચાઈ જાય અને બંને અડધિયાં અધૂરાં રહી જવાની શક્યતા વધે.
એટલે: એક પસંદ કરો, એમાં ઊંડા ઊતરો, અને શરૂથી અંત સુધી ચાલતું કંઈક બહાર પાડો. Framework તો સાધન છે; ચાલતું full-stack app એ સિદ્ધિ છે.
Watch out
Project માં પડતી ભૂલો
મર્યાદા વટાવવી: મોટું પણ અડધું બંધાયેલું app નાના પણ સંપૂર્ણ app કરતાં ઓછું બતાવે છે; મર્યાદા એવી બાંધો કે પૂરું થાય.
બંને frameworks વાપરવાં: એક પસંદ કરો; પહોળાઈ કરતાં ઊંડાણ ચડિયાતું છે.
Back-end સાથે connection જ ન હોવું: project માં front-end API દ્વારા MongoDB સાથે જોડાયેલું હોવું જોઈએ, એ ફક્ત static pages ન હોય.
ટુકડે ટુકડે ચકાસવાનું છોડી દેવું: એક feature શરૂથી અંત સુધી બાંધો, ચકાસો, પછી બીજું: બધું બનાવીને પછી ભૂલોનો ડુંગર ઉકેલવા બેસવું નહીં.
નોંધ ન લખવી: સ્પષ્ટ લખાણ વગરનું (શું કરે છે, stack શું છે, ચલાવવું કઈ રીતે) project અધૂરું ગણાય.
(મૂલ્યાંકનના ચોક્કસ માપદંડ તમારી સંસ્થા નક્કી કરે છે; એની ખાતરી કરી લેવી.)
Theory
BCA503-01 પૂરું
તમે આધુનિક web stack શરૂથી અંત સુધી બાંધ્યો: MongoDB માં NoSQL data, React અને Angular બંનેમાં front-ends, અને એમને સાથે બાંધતો capstone project, અને એની સાથે Lilavati માંથી શાસ્ત્રીય ભારતીય ગણિતનો હકીકતલક્ષી અભ્યાસ. Advance Web Designing નો આખો પ્રવાસ આ જ છે. આ unit માટે તમારી સંસ્થા જે સૂચના આપે તે પ્રમાણે કરો; ગણિત ચોકસાઈથી રજૂ કરો અને તમારા સ્રોતોનો ઉલ્લેખ કરો. Documents થી components સુધી અને ત્યાંથી ચાલતા full-stack app સુધી: હવે તમે આધુનિક web માટે બનાવી શકો છો.
Summary
Key takeaways
- Capstone project Units 1 થી 3 ને ભેગાં કરે છે: MongoDB નું back-end અને React કે Angular નું front-end.
- એવા નાના પણ સંપૂર્ણ full-stack app ની મર્યાદા બાંધો (FestConnect નું event portal આદર્શ છે) જેને તમે પૂરું કરીને ઓપ આપી શકો.
- એક જ front-end framework પસંદ કરો (જેમાં તમે પ્રવીણ હો), બંને નહીં: પહોળાઈ કરતાં ઊંડાણ.
- MongoDB નો data નાના REST API (JSON) પાછળ ગોઠવો, અને front-end પાસે એ API બોલાવડાવો.
- ધીરે ધીરે બાંધો (એક feature શરૂથી અંત સુધી, પછી બીજું) અને project ની નોંધ લખો.
- Full-stack ચક્ર: front-end થી API, API થી MongoDB, પછી JSON અને UI નું તાજું થવું, આ આખા વિષયને સાથે બાંધે છે.
- યાદ રાખવાની કડી: એક framework, એક નાનું સંપૂર્ણ app, શરૂથી અંત સુધી બાંધેલું અને નોંધ સાથેનું.