Web-Dev-For-Beginners/translations/sw/7-bank-project/4-state-management/README.md

Jenga Programu ya Benki Sehemu ya 4: Dhana za Usimamizi wa Hali

Maswali ya Awali ya Somo

Maswali ya awali ya somo

Utangulizi

Usimamizi wa hali ni kama mfumo wa urambazaji kwenye chombo cha Voyager – kila kitu kinapofanya kazi vizuri, huwezi hata kugundua kuwa upo. Lakini mambo yanapokwenda vibaya, inakuwa tofauti kati ya kufika anga za mbali na kupotea katika ulimwengu wa nyota. Katika ukuzaji wa wavuti, hali inawakilisha kila kitu ambacho programu yako inahitaji kukumbuka: hali ya kuingia kwa mtumiaji, data ya fomu, historia ya urambazaji, na hali za muda za kiolesura.

Kadri programu yako ya benki imeendelea kutoka fomu rahisi ya kuingia hadi kuwa programu ya kisasa zaidi, huenda umekutana na changamoto za kawaida. Ukiboresha ukurasa, watumiaji huingia tena bila kutarajia. Ukifunga kivinjari, maendeleo yote yanapotea. Ukijaribu kutatua tatizo, unatafuta kupitia kazi nyingi zinazobadilisha data kwa njia tofauti.

Hizi si dalili za uandishi mbaya wa programu – ni changamoto za kawaida zinazotokea programu zinapofikia kiwango fulani cha ugumu. Kila msanidi programu hukutana na changamoto hizi programu zao zinapobadilika kutoka "uthibitisho wa dhana" hadi "tayari kwa uzalishaji."

Katika somo hili, tutaweka mfumo wa usimamizi wa hali ulio katikati ambao utabadilisha programu yako ya benki kuwa programu ya kuaminika na ya kitaalamu. Utajifunza kudhibiti mtiririko wa data kwa njia inayotabirika, kuhifadhi vikao vya watumiaji ipasavyo, na kuunda uzoefu laini wa mtumiaji ambao programu za wavuti za kisasa zinahitaji.

Mahitaji ya Awali

Kabla ya kuingia kwenye dhana za usimamizi wa hali, unahitaji kuwa na mazingira yako ya ukuzaji yamewekwa vizuri na msingi wa programu yako ya benki uko tayari. Somo hili linajengwa moja kwa moja juu ya dhana na msimbo kutoka sehemu za awali za mfululizo huu.

Hakikisha una vipengele vifuatavyo tayari kabla ya kuendelea:

Mazingira Yanayohitajika:

• Kamilisha somo la upatikanaji wa data - programu yako inapaswa kupakia na kuonyesha data ya akaunti kwa mafanikio
• Sakinisha Node.js kwenye mfumo wako kwa ajili ya kuendesha API ya nyuma
• Anzisha API ya seva kwa ndani ili kushughulikia shughuli za data ya akaunti

Kujaribu Mazingira Yako:

Thibitisha kuwa seva yako ya API inafanya kazi kwa usahihi kwa kutekeleza amri hii kwenye terminal:

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

Kile amri hii inafanya:

• Inatuma ombi la GET kwa seva yako ya API ya ndani
• Inajaribu muunganisho na kuthibitisha kuwa seva inajibu
• Inarudisha taarifa ya toleo la API ikiwa kila kitu kinafanya kazi vizuri

---

Kutambua Masuala ya Hali ya Sasa

Kama Sherlock Holmes akichunguza eneo la uhalifu, tunahitaji kuelewa kinachotokea katika utekelezaji wetu wa sasa kabla ya kutatua fumbo la vikao vya watumiaji vinavyopotea.

Tufanye jaribio rahisi linaloonyesha changamoto za usimamizi wa hali:

🧪 Jaribu Uchunguzi Huu:

1. Ingia kwenye programu yako ya benki na nenda kwenye dashibodi
2. Boresha ukurasa wa kivinjari
3. Angalia kinachotokea kwa hali yako ya kuingia

Ikiwa unarudishwa kwenye skrini ya kuingia, umegundua tatizo la kawaida la uhifadhi wa hali. Tabia hii hutokea kwa sababu utekelezaji wetu wa sasa huhifadhi data ya mtumiaji kwenye vigezo vya JavaScript vinavyofutwa kila ukurasa unapobadilishwa.

Matatizo ya Utekelezaji wa Sasa:

Kigezo rahisi cha account kutoka somo letu la awali kinazalisha matatizo matatu makubwa yanayoathiri uzoefu wa mtumiaji na utunzaji wa msimbo:

Tatizo	Sababu ya Kiufundi	Athari kwa Mtumiaji
Upotevu wa Kikao	Kuboresha ukurasa hufuta vigezo vya JavaScript	Watumiaji wanapaswa kuingia mara kwa mara
Mabadiliko Yaliyotawanyika	Kazi nyingi hubadilisha hali moja kwa moja	Utatuzi wa matatizo unakuwa mgumu zaidi
Usafishaji Usio Kamili	Kuondoka hakufuti marejeleo yote ya hali	Wasiwasi wa usalama na faragha

Changamoto ya Kimuundo:

Kama muundo wa sehemu za Titanic ulioonekana kuwa thabiti hadi sehemu nyingi zilipojaa maji kwa wakati mmoja, kutatua matatizo haya moja moja hakutashughulikia tatizo la kimuundo lililopo. Tunahitaji suluhisho la kina la usimamizi wa hali.

💡 Tunajaribu kufanikisha nini hapa?

Usimamizi wa hali kimsingi ni kuhusu kutatua mafumbo mawili ya msingi:

1. Data Yangu Iko Wapi?: Kufuatilia taarifa tuliyonayo na inatoka wapi
2. Je, Kila Mtu Yuko Ukurasa Mmoja?: Kuhakikisha kile watumiaji wanachoona kinawiana na kinachotokea

Mpango Wetu wa Mchezo:

Badala ya kuzunguka bila mwelekeo, tutaunda mfumo wa usimamizi wa hali ulio katikati. Fikiria kama kuwa na mtu mmoja aliyeandaliwa vizuri anayesimamia mambo yote muhimu:

Kuelewa mtiririko huu wa data:

• Unakusanya hali yote ya programu katika eneo moja
• Unapanga mabadiliko yote ya hali kupitia kazi zilizodhibitiwa
• Unahakikisha UI inabaki kulingana na hali ya sasa
• Unatoa muundo wazi na unaotabirika wa usimamizi wa data

💡 Ujuzi wa Kitaalamu: Somo hili linazingatia dhana za msingi. Kwa programu ngumu, maktaba kama Redux hutoa vipengele vya hali ya juu vya usimamizi wa hali. Kuelewa kanuni hizi za msingi kutakusaidia kumudu maktaba yoyote ya usimamizi wa hali.

⚠️ Mada ya Juu: Hatutashughulikia masasisho ya UI yanayotokea moja kwa moja kutokana na mabadiliko ya hali, kwani hili linahusisha dhana za Programu ya Kijibu. Fikiria hili kama hatua nzuri inayofuata katika safari yako ya kujifunza!

Kazi: Kuweka Muundo wa Hali Katikati

Tuanzishe mabadiliko ya usimamizi wa hali uliotawanyika kuwa mfumo ulio katikati. Hatua hii ya kwanza inaweka msingi wa maboresho yote yanayofuata.

Hatua ya 1: Unda Kitu cha Hali Katikati

Badilisha tamko rahisi la account:

let account = null;

Na kitu cha hali kilichopangwa:

let state = {
  account: null
};

Kwa nini mabadiliko haya ni muhimu:

• Unakusanya data yote ya programu katika eneo moja
• Unatayarisha muundo wa kuongeza mali zaidi za hali baadaye
• Unaunda mpaka wazi kati ya hali na vigezo vingine
• Unaanzisha muundo unaokua kadri programu yako inavyopanuka

Hatua ya 2: Sasisha Mifumo ya Ufikiaji wa Hali

Sasisha kazi zako kutumia muundo mpya wa hali:

Katika kazi za register() na login(), badilisha:

account = ...

Na:

state.account = ...

Katika kazi ya updateDashboard(), ongeza mstari huu juu:

const account = state.account;

Kile masasisho haya yanayofanikisha:

• Yanaweka utendaji uliopo huku yakiboresha muundo
• Yanatayarisha msimbo wako kwa usimamizi wa hali wa kisasa zaidi
• Yanaanzisha mifumo thabiti ya kufikia data ya hali
• Yanaweka msingi wa masasisho ya hali yaliyo katikati

💡 Kumbuka: Urekebishaji huu hauwezi kutatua matatizo yetu mara moja, lakini unaweka msingi muhimu kwa maboresho yenye nguvu yanayokuja!

Kutekeleza Masasisho ya Hali Yaliyo Dhibitiwa

Kadri hali yetu inavyokusanywa, hatua inayofuata inahusisha kuanzisha mifumo iliyodhibitiwa ya mabadiliko ya data. Mbinu hii inahakikisha mabadiliko ya hali yanayotabirika na utatuzi rahisi wa matatizo.

Kanuni ya msingi inafanana na udhibiti wa trafiki ya anga: badala ya kuruhusu kazi nyingi kubadilisha hali kwa uhuru, tutapanga mabadiliko yote kupitia kazi moja iliyodhibitiwa. Muundo huu unatoa usimamizi wazi wa wakati na jinsi data inavyobadilika.

Usimamizi wa Hali Isiyobadilika:

Tutachukulia kitu chetu cha state kama kisichobadilika, ikimaanisha hatutabadilisha moja kwa moja. Badala yake, kila mabadiliko yataunda kitu kipya cha hali na data iliyosasishwa.

Ingawa mbinu hii inaweza kuonekana kuwa isiyo na ufanisi mwanzoni ikilinganishwa na mabadiliko ya moja kwa moja, inatoa faida kubwa kwa utatuzi wa matatizo, upimaji, na kudumisha utabiri wa programu.

Faida za usimamizi wa hali isiyobadilika:

Faida	Maelezo	Athari
Utabiri	Mabadiliko hutokea tu kupitia kazi zilizodhibitiwa	Rahisi kutatua matatizo na kupima
Ufuatiliaji wa Historia	Kila mabadiliko ya hali huunda kitu kipya	Inawezesha utendakazi wa kurudisha/kufanya upya
Kuzuia Athari za Pembeni	Hakuna mabadiliko ya bahati mbaya	Huzuia hitilafu za ajabu
Uboreshaji wa Utendaji	Rahisi kugundua wakati hali imebadilika	Inawezesha masasisho ya UI yenye ufanisi

Usimamizi wa Hali Isiyobadilika kwa JavaScript na Object.freeze():

JavaScript inatoa Object.freeze() kuzuia mabadiliko ya vitu:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

Kufafanua kinachotokea hapa:

• Inazuia uwekaji wa mali moja kwa moja au ufutaji
• Inatupa makosa ikiwa majaribio ya mabadiliko yanafanywa
• Inahakikisha mabadiliko ya hali lazima yapitie kazi zilizodhibitiwa
• Inaunda mkataba wazi wa jinsi hali inavyoweza kusasishwa

💡 Uchambuzi wa Kina: Jifunze kuhusu tofauti kati ya vitu vya juu juu na vilivyo ndani kabisa visivyobadilika katika mdokumentari ya MDN. Kuelewa tofauti hii ni muhimu kwa miundo ya hali ngumu.

Kazi

Tuunde kazi mpya ya updateState():

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

Katika kazi hii, tunaunda kitu kipya cha hali na kunakili data kutoka hali ya awali kwa kutumia spread (...) operator. Kisha tunabadilisha mali fulani ya kitu cha hali na data mpya kwa kutumia bracket notation [property] kwa uwekaji. Hatimaye, tunafungia kitu ili kuzuia mabadiliko kwa kutumia Object.freeze(). Kwa sasa tuna mali ya account tu iliyohifadhiwa katika hali, lakini kwa mbinu hii unaweza kuongeza mali nyingi unavyohitaji katika hali.

Tutasasisha pia uanzishaji wa state kuhakikisha hali ya awali imefungwa pia:

let state = Object.freeze({
  account: null
});

Baada ya hapo, sasisha kazi ya register kwa kubadilisha uwekaji wa state.account = result; na:

updateState('account', result);

Fanya vivyo hivyo na kazi ya login, ukibadilisha state.account = data; na:

updateState('account', data);

Sasa tutatumia fursa ya kutatua tatizo la data ya akaunti kutosafishwa mtumiaji anapobofya Logout.

Unda kazi mpya logout():

function logout() {
  updateState('account', null);
  navigate('/login');
}

Katika updateDashboard(), badilisha uelekezaji return navigate('/login'); na return logout();

Jaribu kusajili akaunti mpya, kutoka na kuingia tena ili kuhakikisha kila kitu bado kinafanya kazi vizuri.

Kidokezo: unaweza kuangalia mabadiliko yote ya hali kwa kuongeza console.log(state) chini ya updateState() na kufungua console katika zana za ukuzaji za kivinjari chako.

Kutekeleza Uhifadhi wa Data

Tatizo la upotevu wa kikao tulilobaini awali linahitaji suluhisho la uhifadhi linalodumisha hali ya mtumiaji katika vikao vya kivinjari. Hii inabadilisha programu yetu kutoka uzoefu wa muda hadi kuwa zana ya kuaminika na ya kitaalamu.

Fikiria jinsi saa za atomiki zinavyodumisha muda sahihi hata wakati wa kukatika kwa umeme kwa kuhifadhi hali muhimu katika kumbukumbu isiyopotea. Vivyo hivyo, programu za wavuti zinahitaji mifumo ya uhifadhi wa kudumu ili kuhifadhi data muhimu ya mtumiaji katika vikao vya kivinjari na ubadilishaji wa ukurasa.

Maswali ya Kistratejia kwa Uhifadhi wa Data:

Kabla ya kutekeleza uhifadhi, fikiria mambo haya muhimu:

Swali	Muktadha wa Programu ya Benki	Athari ya Uamuzi
Je, data ni nyeti?	Mizani ya akaunti, historia ya miamala	Chagua mbinu salama za uhifadhi
Inapaswa kudumu kwa muda gani?	Hali ya kuingia vs. mapendeleo ya muda ya UI	Chagua muda wa uhifadhi unaofaa
Je, seva inaihitaji?	Tokeni za uthibitishaji vs. mipangilio ya UI	Amua mahitaji ya kushiriki

Chaguo za Uhifadhi wa Kivinjari:

Vivinjari vya kisasa vinatoa mifumo kadhaa ya uhifadhi, kila moja imeundwa kwa matumizi tofauti:

API za Uhifadhi wa Msingi:

1. localStorage: Uhifadhi wa Key/Value wa kudumu

   • Hudumu data katika vikao vya kivinjari bila kikomo
   • Husalia hata kivinjari kinapofungwa na kompyuta kuanzishwa upya
   • Imefungwa kwa kikoa maalum cha tovuti
   • Inafaa kwa mapendeleo ya mtumiaji na hali za kuingia

2. sessionStorage: Uhifadhi wa kikao cha muda

   • Hufanya kazi sawa na localStorage wakati wa vikao hai
   • Hufutwa kiotomatiki kivinjari kinapofungwa
   • Inafaa kwa data ya muda ambayo haipaswi kudumu

3. HTTP Cookies: Uhifadhi unaoshirikiwa na seva

   • Hutumwa kiotomatiki na kila ombi la seva
   • Inafaa kwa uthibitishaji wa tokeni
   • Imewekewa mipaka kwa ukubwa na inaweza kuathiri utendaji

Mahitaji ya Usawazishaji wa Data:

Zote localStorage na sessionStorage huhifadhi tu nyuzi:

// Convert objects to JSON strings for storage
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// Parse JSON strings back to objects when retrieving
const savedAccount = JSON.parse(localStorage.getItem('account'));

Kuelewa usawazishaji:

• Hubadilisha vitu vya JavaScript kuwa nyuzi za JSON kwa kutumia JSON.stringify()
• Hujenga upya vitu kutoka JSON kwa kutumia JSON.parse()
• Hushughulikia vitu vilivyopangwa kwa kina na safu kiotomatiki
• Hushindwa kwa kazi, thamani zisizoelezwa, na marejeleo ya mzunguko

💡 Chaguo la Juu: Kwa programu ngumu za nje ya mtandao zenye hifadhidata kubwa, fikiria kutumia IndexedDB API. Inatoa hifadhidata kamili upande wa mteja lakini inahitaji utekelezaji tata zaidi.

Kazi: Tekeleza Uhifadhi wa localStorage

Tutaweka uhifadhi wa kudumu ili watumiaji wabaki wameingia hadi watakapoamua kujiondoa. Tutatumia localStorage kuhifadhi data ya akaunti kati ya vikao vya kivinjari.

Hatua ya 1: Fafanua Usanidi wa Uhifadhi

const storageKey = 'savedAccount';

Kile ambacho kigezo hiki kinatoa:

• Hutengeneza kitambulisho thabiti kwa data yetu iliyohifadhiwa
• Huzuia makosa ya herufi katika marejeleo ya funguo za uhifadhi
• Hufanya iwe rahisi kubadilisha ufunguo wa uhifadhi ikiwa inahitajika
• Hufuata mbinu bora za msimbo unaoweza kudumishwa

Hatua ya 2: Ongeza Uhifadhi wa Kiotomatiki

Ongeza mstari huu mwishoni mwa kazi ya updateState():

localStorage.setItem(storageKey, JSON.stringify(state.account));

Kufafanua kinachotokea hapa:

• Hubadilisha kitu cha akaunti kuwa kamba ya JSON kwa uhifadhi
• Huokoa data kwa kutumia ufunguo wetu thabiti wa uhifadhi
• Hutekeleza kiotomatiki kila mabadiliko ya hali yanapotokea
• Hakikisha data iliyohifadhiwa inalingana na hali ya sasa

💡 Faida ya Usanifu: Kwa sababu tulizingatia mabadiliko yote ya hali kupitia updateState(), kuongeza uhifadhi kulihitaji mstari mmoja tu wa msimbo. Hii inaonyesha nguvu ya maamuzi mazuri ya usanifu!

Hatua ya 3: Rudisha Hali Wakati Programu Inapopakia

Tengeneza kazi ya uanzishaji ili kurudisha data iliyohifadhiwa:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Kuelewa mchakato wa uanzishaji:

• Hurejesha data yoyote ya akaunti iliyohifadhiwa awali kutoka localStorage
• Huchambua kamba ya JSON kurudi kuwa kitu cha JavaScript
• Husasa hali kwa kutumia kazi yetu ya kusasisha iliyodhibitiwa
• Hurudisha kikao cha mtumiaji kiotomatiki wakati ukurasa unapopakia
• Hutekeleza kabla ya masasisho ya njia ili kuhakikisha hali inapatikana

Hatua ya 4: Boresha Njia ya Kawaida

Sasisha njia ya kawaida ili kutumia uhifadhi:

Katika updateRoute(), badilisha:

// Replace: return navigate('/login');
return navigate('/dashboard');

Kwa nini mabadiliko haya yana mantiki:

• Hutumia mfumo wetu mpya wa uhifadhi kwa ufanisi
• Huruhusu dashibodi kushughulikia ukaguzi wa uthibitisho
• Huelekeza kiotomatiki kwenye kuingia ikiwa hakuna kikao kilichohifadhiwa
• Hutengeneza uzoefu wa mtumiaji usio na mshono

Kupima Utekelezaji Wako:

1. Ingia kwenye programu yako ya benki
2. Fanya upya ukurasa wa kivinjari
3. Thibitisha unakaa umeingia na uko kwenye dashibodi
4. Funga na fungua tena kivinjari chako
5. Rudi kwenye programu yako na thibitisha bado uko umeingia

🎉 Ufanisi Umefikiwa: Umefanikiwa kutekeleza usimamizi wa hali ya kudumu! Programu yako sasa inafanya kazi kama programu ya kitaalamu ya wavuti.

Kuweka Mizani Kati ya Uhifadhi na Ufreshi wa Data

Mfumo wetu wa uhifadhi unadumisha vikao vya mtumiaji kwa mafanikio, lakini unaleta changamoto mpya: uchakavu wa data. Wakati watumiaji au programu nyingi zinapobadilisha data sawa ya seva, taarifa iliyohifadhiwa ndani inakuwa ya zamani.

Hali hii inafanana na mabaharia wa Viking waliotegemea ramani za nyota zilizohifadhiwa na uchunguzi wa nyota wa sasa. Ramani zilitoa uthabiti, lakini mabaharia walihitaji uchunguzi mpya ili kuzingatia hali zinazobadilika. Vivyo hivyo, programu yetu inahitaji hali ya mtumiaji iliyohifadhiwa na data ya sasa ya seva.

🧪 Kugundua Tatizo la Ufreshi wa Data:

1. Ingia kwenye dashibodi ukitumia akaunti ya test
2. Endesha amri hii kwenye terminal ili kuiga muamala kutoka chanzo kingine:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

3. Fanya upya ukurasa wa dashibodi yako kwenye kivinjari
4. Angalia ikiwa unaona muamala mpya

Kile ambacho jaribio hili linaonyesha:

• Inaonyesha jinsi localStorage inaweza kuwa "chakavu" (ya zamani)
• Inaiga hali halisi ambapo mabadiliko ya data hutokea nje ya programu yako
• Inafichua mvutano kati ya uhifadhi na ufreshi wa data

Changamoto ya Uchakavu wa Data:

Tatizo	Sababu	Athari kwa Mtumiaji
Data Chakavu	localStorage haimaliziki kiotomatiki	Watumiaji wanaona taarifa za zamani
Mabadiliko ya Seva	Programu/Watumiaji wengine hubadilisha data sawa	Maoni yasiyo thabiti kati ya majukwaa
Akiba vs. Uhalisia	Akiba ya ndani haifanani na hali ya seva	Uzoefu duni wa mtumiaji na mkanganyiko

Mkakati wa Suluhisho:

Tutatekeleza muundo wa "ufreshi wakati wa kupakia" ambao unadumisha faida za uhifadhi huku ukihakikisha usahihi wa data.

Kazi: Tekeleza Mfumo wa Ufreshi wa Data

Tutatengeneza mfumo ambao unaleta kiotomatiki data mpya kutoka kwa seva huku ukidumisha faida za usimamizi wetu wa hali ya kudumu.

Hatua ya 1: Tengeneza Kisasa cha Data ya Akaunti

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

Kuelewa mantiki ya kazi hii:

• Hukagua ikiwa mtumiaji ameingia (state.account ipo)
• Huelekeza kwenye kujiondoa ikiwa hakuna kikao halali kilichopatikana
• Huleta data mpya ya akaunti kutoka kwa seva kwa kutumia kazi ya getAccount() iliyopo
• Hushughulikia makosa ya seva kwa kujiondoa vikao visivyo halali
• Husasa hali na data mpya kwa kutumia mfumo wetu wa kusasisha uliodhibitiwa
• Husababisha uhifadhi wa localStorage kiotomatiki kupitia kazi ya updateState()

Hatua ya 2: Tengeneza Kishughulikia Ufreshi wa Dashibodi

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

Kile ambacho kazi hii ya ufreshi inakamilisha:

• Husimamia mchakato wa ufreshi wa data na masasisho ya UI
• Husubiri data mpya ipakie kabla ya kusasisha onyesho
• Hakikisha dashibodi inaonyesha taarifa za sasa zaidi
• Hudumisha mgawanyo safi kati ya usimamizi wa data na masasisho ya UI

Hatua ya 3: Jumuisha na Mfumo wa Njia

Sasisha usanidi wa njia zako ili kusababisha ufreshi kiotomatiki:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

Jinsi ujumuishaji huu unavyofanya kazi:

• Hutekeleza kazi ya ufreshi kila wakati njia ya dashibodi inapopakia
• Hakikisha data mpya inaonyeshwa kila wakati watumiaji wanapohamia kwenye dashibodi
• Hudumisha muundo wa njia uliopo huku ukiongeza ufreshi wa data
• Hutoa muundo thabiti wa uanzishaji maalum wa njia

Kupima Mfumo Wako wa Ufreshi wa Data:

1. Ingia kwenye programu yako ya benki
2. Endesha amri ya curl kutoka awali ili kuunda muamala mpya
3. Fanya upya ukurasa wa dashibodi yako au nenda mbali na urudi
4. Thibitisha kuwa muamala mpya unaonekana mara moja

🎉 Mizani Kamili Imepatikana: Programu yako sasa inachanganya uzoefu laini wa hali ya kudumu na usahihi wa data mpya ya seva!

Changamoto ya Wakala wa GitHub Copilot 🚀

Tumia hali ya Wakala kukamilisha changamoto ifuatayo:

Maelezo: Tekeleza mfumo wa kina wa usimamizi wa hali na utendakazi wa kurudisha/kufanya upya kwa programu ya benki. Changamoto hii itakusaidia kufanya mazoezi ya dhana za hali ya juu za usimamizi wa hali ikiwa ni pamoja na ufuatiliaji wa historia ya hali, masasisho yasiyobadilika, na usawazishaji wa kiolesura cha mtumiaji.

Kichocheo: Tengeneza mfumo wa hali ulioboreshwa unaojumuisha: 1) Kundi la historia ya hali linalofuatilia hali zote za awali, 2) Kazi za kurudisha na kufanya upya zinazoweza kurudi kwenye hali za awali, 3) Vitufe vya UI vya operesheni za kurudisha/kufanya upya kwenye dashibodi, 4) Kikomo cha historia cha hali 10 ili kuzuia masuala ya kumbukumbu, na 5) Usafishaji sahihi wa historia wakati mtumiaji anajiondoa. Hakikisha utendakazi wa kurudisha/kufanya upya unafanya kazi na mabadiliko ya salio la akaunti na unadumu kati ya upya wa kivinjari.

Jifunze zaidi kuhusu hali ya wakala hapa.

🚀 Changamoto: Uboreshaji wa Uhifadhi

Utekelezaji wako sasa unashughulikia vikao vya mtumiaji, ufreshi wa data, na usimamizi wa hali kwa ufanisi. Hata hivyo, fikiria ikiwa mbinu yetu ya sasa inasawazisha kwa ufanisi uhifadhi na utendakazi.

Kama mabingwa wa chess wanaotofautisha kati ya vipande muhimu na vigae vinavyoweza kutolewa, usimamizi mzuri wa hali unahitaji kutambua data gani lazima ihifadhiwe dhidi ya data gani inapaswa kuwa mpya kila wakati kutoka kwa seva.

Uchambuzi wa Uboreshaji:

Tathmini utekelezaji wako wa localStorage wa sasa na fikiria maswali haya ya kimkakati:

• Ni taarifa gani ya chini inayohitajika kudumisha uthibitisho wa mtumiaji?
• Ni data gani hubadilika mara kwa mara kiasi kwamba uhifadhi wa ndani hauna faida?
• Uboreshaji wa uhifadhi unaweza kuboresha utendakazi bila kupunguza uzoefu wa mtumiaji?

Aina hii ya uchambuzi wa usanifu inawatofautisha watengenezaji wenye uzoefu wanaozingatia utendakazi na ufanisi katika suluhisho zao.

Mkakati wa Utekelezaji:

• Tambua data muhimu ambayo lazima ihifadhiwe (labda tu kitambulisho cha mtumiaji)
• Badilisha utekelezaji wako wa localStorage ili kuhifadhi tu data muhimu ya kikao
• Hakikisha data mpya inapakiwa kila wakati kutoka kwa seva wakati wa ziara za dashibodi
• Jaribu kwamba mbinu yako iliyoboreshwa inadumisha uzoefu sawa wa mtumiaji

Fikra ya Juu:

• Linganisheni faida na hasara kati ya kuhifadhi data kamili ya akaunti dhidi ya tokeni za uthibitisho pekee
• Andika maamuzi yako na mantiki kwa wanachama wa timu ya baadaye

Changamoto hii itakusaidia kufikiria kama mtengenezaji wa kitaalamu anayezingatia uzoefu wa mtumiaji na ufanisi wa programu. Chukua muda wako kujaribu mbinu tofauti!

Jaribio la Baada ya Somo

Jaribio la baada ya somo

Kazi

Tekeleza "Ongeza muamala" dirisha

Hapa kuna mfano wa matokeo baada ya kukamilisha kazi:

---

Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.