Kako uporabiti sistemsko inženirstvo za izdelavo uspešne spletne aplikacije

Če razumete, kako deluje, ga je lažje zgraditi

Torej ste končno dokončali svoj dizajn v Adobe XD, Figma, Sketch ali InVision, vendar se še vedno spopadate z idejo, kako implementirati funkcionalnost. Ne skrbite, nekaj časa smo razmišljali, da je edini način za izdelavo spletnih aplikacij začeti z oblikovanjem uporabniškega vmesnika / uporabniškega vmesnika skupaj s prototipnimi skicami.

Na srečo se izkaže, da obstajajo še druge in boljše tehnike, ki jih lahko uporabimo za opisovanje spletnih aplikacij, ne da bi poudarjali, kakšne položaje, velikost ali razmik med elementi na strani potrebujemo.

Naj vam predstavim nekaj, kar so podjetja na področju vesoljske, pomorske, obrambne, avtomobilske in telekomunikacijske industrije uporabljala za boljše razumevanje vedenja in interakcije sistemov. Ne govorim o številu nasvetov in trikov, kako izboljšati uporabniški vmesnik / uporabniške izkušnje, ampak o tehnikah, ki jih lahko uporabite v arzenalu Systems Engineering (SE) za izdelavo uspešnih spletnih aplikacij.

Te tehnike imajo veliko prednosti, a najpomembnejša je, kako hitro lahko izrazimo ideje in razumemo, kako stvari delujejo.

Do konca tega članka boste lahko nekatere od teh tehnik SE uporabili za izdelavo boljših aplikacij.

Tu so štiri praktične in ustrezne tehnike SE, ki jih lahko uporabite.

Če želite postati boljši spletni razvijalec, ustanoviti svoje podjetje, poučevati druge ali preprosto izboljšati svoje razvojne veščine, bom objavil visokokakovostne tedenske nasvete in trike v najnovejših spletnih jezikih na trgu.

Praktičen primer - spletna učna platforma

Da bi bili primeri intuitivni in uporabni, bomo zgradili pretvarjajočo se spletno učno platformo. Platforma, ki ljudem omogoča objavljanje vsebin, enak koncept kot Medium, YouTube, Unsplash itd.

Opomba: ideja uporabe teh tehnik je, da jo opisujemo dovolj, da lahko razvijalci te funkcije enostavno implementirajo, kar pomeni, da se nam ni treba spuščati v podrobnosti.

Tu je nekaj lepih nasvetov, ki se jih morate zavedati v zgodnjih fazah aplikacije.

1. Ne začnite s podrobnim oblikovanjem

V zgodnjih fazah večina razvijalcev najprej začne z definiranjem rešitev in se tako ujame s podrobnostmi, ki za končni izdelek v resnici niso pomembne. Vodi nas v napačno smer in pozabimo na pravi namen aplikacije.

Oblika je pomembna, vendar ne nekaj, na kar bi se morali osredotočiti v zgodnjih fazah. Ni popravljen (in se pogosto spreminja) - na primer barva gumba, položaj elementov, vrsta pisave itd. Kar se ne spremeni, je osnovno vedenje spletne aplikacije, na primer način preverjanja pristnosti osebe, način nalaganja nečesa na stran, koraki za obdelavo plačila itd. Temeljni deli ostajajo enaki.

2. Začnite s težavo

Najprej ugotovite težavo: okolico, zainteresirane strani, vedenje in kontekst aplikacije (obseg).

Aplikacije ne ustvarjamo na podlagi rešitev, ampak jih ustvarjamo, ker obstaja težava, težava ali izziv, ki ga je treba rešiti. V večini primerov stranko ne zanima rešitev, le da deluje. Rešitev bo opredeljena, ko bodo razvijalci razumeli, kako se aplikacija obnaša in komunicira.

Težava je na primer v tem, da je trenutna komunikacijska platforma prepočasna, kar vpliva na potek dela. Druga težava je lahko, da vodja nima jasnega pregleda, s katerimi nalogami dela delavec itd.

Upoštevajte, da nam težava sporoča, da obstaja potreba, vendar ne ponuja nobenih rešitev. Težava je v tem, kaj sproži razvojni proces. Torej najprej začnite s težavo, preden začnete z rešitvami.

Poglejmo, katere tehnike lahko uporabimo za opis naše spletne platforme za učenje.

1. Kontekstni diagram

Določite meje

Namen kontekstnega diagrama je opredeliti meje znotraj aplikacije ali delov aplikacije in jasno razumeti, s katerimi entitetami deluje.

Kot je prikazano, lahko vidimo, katere vrste zainteresiranih strani (uporabniki) sodelujejo z aplikacijo in vrste interakcij med njimi. Upoštevajte, da imena zainteresiranih strani niso omenjena, niti s kakšno vrsto zbirke podatkov imamo opravka. Nočemo se ukvarjati s podrobnostmi, ki se lahko v prihodnosti spremenijo.

Pojasnite zapletene aplikacije

Če imate opravka s precej zapleteno aplikacijo, ki je sestavljena iz več delov, potem je kontekstni diagram dobra alternativa, ki vam omogoča poenostavitev stvari. Prav tako je dober način, da se spomnimo, kaj je namen aplikacije, in odstranimo stvari, ki za aplikacijo nimajo veliko vrednosti. To je način, kako stopiti nazaj in se osredotočiti na tisto, kar je pomembno.

2. Uporabite diagram primerov

Upoštevajte, da ne omenjamo ničesar o postavitvi, velikosti ali položaju elementov. V SE je pomembno, da so stvari modularne, kar pomeni, da lahko stvari spreminjamo, ne da bi to vplivalo na aplikacijo - nočemo, da so stvari fiksne in nespremenljive.

Razvijalec, ki mora zgraditi delujočo programsko opremo, mora biti sposoben prebrati primer uporabe in dobro razumeti, kaj mora programska oprema narediti. Vir.

Opišite interakcije

Namen diagrama primerov uporabe je opisati, kako uporabnik ustno sodeluje s spletno aplikacijo. To je odlično orodje za razumevanje, kaj stranka potrebuje, in tudi, katere funkcije mora razvijalec uporabiti.

Izdelajte primer uporabe (ukrep)

Kot je prikazano zgoraj, je uporabnik proizvajalec vsebine in izvede štiri dejanja. Dejanje je funkcija, ki jo je treba izvesti. Diagram primerov uporabe ne opisuje vedenja aplikacije, razen interakcije med uporabnikom in aplikacijo ali njenimi deli.

Da bi opisali vedenje, lahko naredimo eno dejanje in ga izdelamo s pomočjo diagramov, kot so dejavnost, avtomat stanja, diagrami zaporedja itd.

Na primer, lahko ustvarimo diagram dejavnosti, ki opisuje korake, potrebne za izvedbo dejanja »nalaganje vsebine«. Primer tega je v 3. in 4. poglavju.

Osredotočite se na različne scenarije uporabe

Aplikacijo bodo najverjetneje uporabljali uporabniki z različnimi vlogami, kot so skrbnik, producent vsebine, urednik, analitik itd. In vsaka vloga ima nabor edinstvenih potreb z različnimi primeri uporabe (interakcije). Pomembno je, da pokrijemo te interakcije, sicer dobimo statično aplikacijo, prilagojeno za določeno uporabniško vlogo.

3. Diagram aktivnosti

Opišite vedenje

Namen diagrama dejavnosti je opisati zaporedje dejavnosti, ki so potrebne za izpolnitev primera uporabe. Izbrani primer uporabe je "naloži vsebino" iz diagrama primerov uporabe, kot je prikazano zgoraj.

Sami se lahko odločite, kateri primer uporabe želite razširiti in podrobno razdelati - bistvo ni izdelati diagram dejavnosti za vsak primer uporabe, ampak tiste, ki jih je težko razumeti ali izvesti.

Opišite korake za dosego cilja

Težko je predvideti, kaj uporabnik počne in v kakšnem vrstnem redu. Iz tega razloga nam diagram dejavnosti pomaga določiti, katere dejavnosti uporabnik izvaja, in zajema tudi odločitve, ki se jih morda ne zavedamo. Uporablja se lahko tudi za opis dejavnosti ne-uporabnika, na primer dela aplikacije, ki čaka na nekaj, preden lahko začne izvajati. Poudarek je na opisu poteka dela.

Izražajte ideje z oblikovanjem

Ko sem delal v skupini, mi je starejši inženir izročil diagram aktivnosti funkcije, ki jo je želel implementirati. Celoten razvojni proces je postal veliko lažji, ker mi ni bilo treba ugibati, kako se aplikacija obnaša, vedenje je bilo že opisano s pomočjo diagrama dejavnosti.

Na splošno je to odlično orodje za izražanje idej in misli ljudem, ne pa samo zanašanje na ustno komunikacijo.

4. Diagram stanja-aparata

Opredeli države

Namen diagrama stanja avtomata je opisati diskretno vedenje aplikacije. Razlika med diagramom dejavnosti in diagramom avtomata stanja je v tem, da prvi opisuje korake za dosego nečesa (potek dela), medtem ko drugi opisuje, kako se stanja predmeta spreminjajo skozi njegovo življenjsko dobo.

Oboje je uporabna tehnika za opis vedenja aplikacije in je v pomoč strankam in razvijalcem, da pridobijo splošno razumevanje, kako stvari delujejo.

Zadnje misli

Oblikovanje je v nenehnem gibanju in se razvija in spreminja skozi razvojni proces. Kot smo že omenili, je reševanje vprašanj oblikovanja, kot so uporabniški vmesniki / uporabniške izkušnje in skice prototipov, pomembno, vendar v resnici ne opisuje, kako delujejo ali komunicirajo osnovni deli aplikacije. Zahteva tudi izobražene grafične oblikovalce in veliko virov.

Iz tega razloga potrebujemo nekaj, kar ni odvisno od zasnove, nekaj, kar se ne osredotoča na manjše podrobnosti, kot so vrste pisav, škatle, barve itd.

Tehnike sistemskega inženirstva potrebujemo, da opišemo, kako se aplikacija obnaša in komunicira, da izrazimo ideje, poenostavimo razvojni postopek in pomagamo ljudem z netehničnim ozadjem dojeti vedenje aplikacij.

Upoštevajte, da obstaja vrsta pravil, ki jih je treba upoštevati pri ustvarjanju takšnih diagramov, vendar večina ljudi, s katerimi sem delal, teh pravil ne razume ali jih sploh ne zanima. Najboljši nasvet, ki ga lahko dam, je, da sledite namenu diagrama, vendar se ne spuščajte v pravila, na primer, če naj se črta konča s puščico, diamantom in tako naprej.

Tu je nekaj drugih člankov, ki sem jih napisal o spletnem ekosistemu, skupaj z osebnimi nasveti in triki za programiranje.

  • Praktični vodnik po modulih ES6
  • Kako izvajati zahteve HTTP z uporabo API-ja za pridobivanje
  • Primerjava med Angular in React
  • Izboljšajte svoje znanje s temi pomembnimi metodami JavaScript
  • Kaotični um vodi v kaotično kodo
  • Razvijalci, ki se nenehno želijo naučiti novih stvari
  • Spoznajte te ključne spletne koncepte
  • Hitreje programirajte z ustvarjanjem ukazov bash po meri

Najdete me v Mediju, kjer tedensko objavljam. Lahko pa me spremljate na Twitterju, kjer objavljam ustrezne nasvete in trike za spletni razvoj.