Kutengeneza Mwongozo wa Programu Unaoingiliana

Timu za usaidizi mara nyingi hupata changamoto wanapotumia programu ambazo hawajawahi kuzisakinisha. Mwongozo wa PDF ni suluhisho baya kwa sababu hakuna mtu anayeyasoma.

Nilitengeneza zana inayowaruhusu watumiaji kuingiliana na picha halisi za skrini (screenshots) za programu ndani ya kivinjari. Inahisi kama unatumia simu halisi. Unabonyeza kitufe kwenye picha ya skrini, na skrini inayofuata inatokea.

Jinsi Inavyofanya Kazi

Nilitumia Firebase Storage kwa ajili ya picha na vanilla JavaScript kwa ajili ya mantiki (logic). Niliacha kutumia maktaba (libraries) za nje ili kuifanya iwe nyepesi.

Siri ni kutumia hotspots zinazotegemea asilimia. Badala ya kutumia piksel zilizofungwa, ninatambua maeneo yanayoweza kubonyezwa kwa kutumia uratibu (coordinates) kuanzia 0 hadi 100. Hii inafanya vitufe viendelee kuwa katika mstari hata wakati saizi ya dirisha inapobadilika.

Mfumo unatumia state machine rahisi. Kila skrini ina:

  • ID ya picha
  • Orodha ya hotspots
  • Mahali unakoelekea (target destination)

Zana Nilizotengeneza

Kupima uratibu kwa macho ni kazi ya polepole. Nilitengeneza edita ya HTML inayojitegemea ili kuharakisha mchakato huo.

  • Pakia picha ya skrini kwenye canvas.
  • Buruta panya (mouse) yako kuchora mstatili.
  • Edita inapiga hesabu ya uratibu wa asilimia kiotomatiki.
  • Unganisha eneo hilo na skrini nyingine kupitia dropdown.
  • Hamisha (export) kitu cha mwisho moja kwa moja kwenye kodi yako.

Ili kuwasaidia watumiaji, niliweka mwanga wa bluu unaodunda (pulsing blue glow) kwenye maeneo yanayoweza kubonyezwa. Hii inaonyesha sawia mahali wanapoweza kugusa.

Mafunzo Muhimu ya Kiufundi

  1. Usalama wa Firebase: Usitengeneze URL za hifadhi (storage URLs) kwa mkono. Tumia njia ya getDownloadURL kutoka kwenye SDK. Hii inajumuisha tokeni ya uthibitishaji (auth token) inayohitajika. Bila hiyo, picha zitashindwa kupakia bila kuonyesha kosa.

  2. Marekebisho ya Mpangilio: Katika mpangilio wa flex column, weka urefu maalum (explicit height) kwenye mzazi (parent). Weka min-height kuwa 0 kwenye watoto (children). Hii inazuia mpangilio kusambaratika na matatizo ya overflow.

  3. Kupanua/Kusinyaa (Scaling): Tumia sifa ya CSS transform scale. Hii inaruhusu picha na hotspots kubadilisha saizi kwa pamoja. Inafanya kila kitu kiwe katika uwiano bila kujali saizi ya skrini.

  4. Kasi: Kuvuta URL moja baada ya nyingine husababisha ucheleweshaji (lag). Nilitekeleza in-memory cache na kazi ya kupakia mapema (background preload function). Picha zote hupakia kwa pamoja (in parallel) wakati modal inapofunguliwa. Hii inafanya urambazaji (navigation) uhisi ni wa papo hapo.

Matokeo

  • Skrini 20 zenye urambazaji kamili.
  • Hotspots 52 zinazoingiliana.
  • Hakuna scrollbars shukrani kwa auto-scaling.
  • Mabadiliko ya papo hapo kupitia preloading.

Chanzo: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e