Bang Bang Education + Astroshock: jak přetáhnout slona na stůl a zachovat kufr neporušený (a v případě potřeby i páteř)

fórum

My v Astroshocku vytváříme složité webové stránky a mobilní aplikace. Naší silnou stránkou je spolupráce s chladnými designéry, takže jsme nemohli zůstat stranou, když jsme se dozvěděli, že Bang Bang Education trpí bez jednotného systému řízení vzdělávacích procesů. Vybaveno. Jak jinak, když se kolem Bangs odehrává možná největší designové hnutí v Rusku, jsme dlouho vřelými přáteli se zakladateli – Natašou Klimchuk a Olyou Morozovou – a naše finanční situace vede k dobrodružstvím? Tato situace nenechává na výběr.

Toto je příběh o tom, jak jsme od základu vytvořili vlastní LMS (Learning Management System) pro BBE (Bang Bang Education) – systém, jehož prostřednictvím probíhá online učení: kurzy jsou vytvořeny a vyučovány, nastaveny a zkontrolovány domácí úkoly a spravován celý vzdělávací proces. Toto je také příběh o tom, jak velcí jsme se dostali a jak se nakonec všechno ukázalo skvěle!

Pandemic

Bang Bang Education je tedy projekt o online vzdělávání v oblasti designu a ilustrace, který se objevil v roce 2015 jako součást projektu Bang! Bang! – mimochodem, největší v Rusku.

Zpočátku se projekt vyvíjel pomalu: objevovaly se kurzy, konaly se webináře a přednášky, doplňovala se knihovna. Osobně mě nejvíce potěšily nahrávky rozhovorů s designéry – v té době to byl nový formát a sklad užitečných informací. A samozřejmě velkou událostí bylo vydání jejich dokumentu „100 years of design“, ke kterému jsme dokonce šli do kina jako velká astrošoková společnost.

Pandemie všechno změnila. Na jaře roku 2020 se svět zbláznil a Bangy, chytající směr větru, se rozhodl dočasně uspořádat bezplatný přístup k jejich produktu Design Library. Tento krok byl tak úspěšný, že v návaznosti na zvýšenou pozornost věnovanou online vzdělávání šířila zprávy řada významných médií. Společnost Bang Bang Education se zhroutila z přílivu lidí, kteří se chtěli ziskově izolovat.

Zvedli jsme nejlepší síly Astroshocku v osobě Dima Gushchina a společně se stálým vývojářem Bang na plný úvazek Yurou Shishkinem nezapomenutelný večer. Stránka funguje. Tak začal náš vrh do problémů BBE.

Prvním krokem bylo uklizení serverové infrastruktury – aby byl web připraven na vysoké zatížení. Účtenka. Poté jsme v rámci synergie obnovili fasádu webu, kterou přepracoval odvážlivec z Electric Red Studio Svyat Vishnyakov. Účtenka. Zůstala paušální část: systém řízení vzdělávacích procesů …

Na cestě

Kromě toho ošklivého (z pohledu Vývojáři) Stránka BBE, nejrůznější skupiny na Facebooku, kanály a chaty v Slacku a Telegramu, grafické editory pro kontrolu prací a další nástroje, které lze použít k organizaci a vedení online školení. Neexistoval žádný jasný systém a proces se podle rozmaru jednotlivých lidí chaoticky pohyboval od kurzu ke kurzu.

Takové zařízení je na začátku nevyhnutelné a obecně normální, ale když počet studentů rychle roste a zvyšuje se objem kurzů, pak je potřeba velké jednotné platformy, která by byla srozumitelná a pohodlná pro všechny: pro koordinátory kurzů, pro učitele a pro studenty je stále častěji pociťováno.

Obecně jsme samozřejmě dlouho chtěli mít platformu pro pořádání online kurzů, ale nebyli jsme dostatečně zašití, abychom se do toho vrhli. Navíc to nebyl snadný úkol – kurzy se navzájem velmi liší a pro vytvoření LMS je důležité pochopit, jaké příležitosti by měly být poskytnuty, s přihlédnutím k budoucímu vývoji. Ve skutečnosti jsme při zahájení ročních programů čelili problému nedostatku platformy. Zaprvé, počet výukových materiálů dramaticky vzrostl. Zadruhé se v ročním programu objevily desítky učitelů. A za třetí, počet zápisů do skupin se zvýšil. Uvědomili jsme si, že to všechno nezapadá do předchozích procesů, a potřebujeme LMS.

Margarita Maryanyan BBE LMS projektová manažerka

To, co jsme si v Astroshocku uvědomili okamžitě:

  • není možné přesně vyhodnotit tak velký projekt;
  • s pevným rozpočtem (více o tom níže) zůstanou červené.

Není to poprvé, co se pustíme do nerentabilních projektů. Vlastně jsme s nimi začali. Když o Astroshocku ještě nikdo nevěděl, využili jsme každou příležitost, abychom se prokázali. Filozofie byla jednoduchá: dělat nemyslitelné, poskytovat maximální kvalitu a zapomenout na ztráty. Tento přístup se vyplatil: získali jsme pověst příjemných a spolehlivých vývojářů mezi špičkovými designéry (zpočátku to byli Sila, pak další ruští designéři jako Sulliwan Studio a White Russian, a pak kluci ze zahraničí jako Anton & Irene a Clay), kreslil a lukrativní projekty (jako Spotify, World Chess a Zumtobel) a dařilo se nám.

V předvečer zahájení prací na LMS nebyla situace stejná jako před deseti lety. Už jsme nemuseli nikomu nic dokazovat – spíše se naskytla příležitost udělat něco důležitého a užitečného a naše postavení to umožňovalo.

Pokud hovoříme o cílech z hlediska praktičnosti, byly jednoduché:

  • Zaměstnávejte zaměstnance. V létě roku 2020 byly přesunuty dva velké projekty, které jsme původně plánovali (nový web a lístkový systém pro Velké divadlo a web obrovského hongkonského muzea současného umění M +).
  • Aspoň částečně získat zpět projekt.
  • Získejte zkušenosti novým směrem (pro nás je to první LMS).
  • Získejte publicitu s ohledem na význam projektu.

Plán

Je nemožné odhadnout takový projekt přesně předem, ale to neznamená, že byste se ani neměli pokoušet sestavit plán. Identifikovali jsme tým účastníků, vytvořili jsme časovou osu a pokusili jsme se odhadnout mzdové náklady.

Účastníci/Astroshock

  • Vedoucí projektu: Dmitry Aleksashin
  • Projektový manažer: Maxim Kozlov
  • vývojář front-endu: Ilya Obolensky
  • vývojář back-endu: Dmitry Gushchin

< h3>Účastníci/BBE

  • projektová manažerka: Margarita Maryanyan
  • návrhářka: Denis Valetin
  • vývojář: Yuri Shishkin

Technologie

  • Design: Figma
  • Frontend: Vue.js
  • Backend: Django/Python
  • Komunikace s klientem: Telegram
  • Komunikace v rámci Astroshock: Slack

Časová osa

  • 15. srpna 2020: zahájení diskuse
  • 7. září 2020: zahájení vývoje
  • 28. prosince 2020: spuštěna první verze
  • 1. února 2021: práce dokončena

Rozpočet

Okamžitě jsme se dohodli na skromné ​​částce, kterou jsme byli připraveni přidělit BBE: 3 500 000 rublů. Při našem poměru v té době (2 500 ₽/h) měl projekt trvat 176 pracovních dnů. Asi po 220 pracovních dnech jsme museli jít do mínusu (cena naší hodiny byla tehdy 2 000 rublů). Bylo by skvělé být v rozpočtu a zapadat do časové osy, ale vše nasvědčovalo tomu, že to nebude fungovat. Nebojili jsme se však zbytečných nákladů a povzbudila nás skutečnost, že klient měl poměrně přísný časový rámec – což znamená, že se projekt nebude natahovat donekonečna.

Spustit

Role byly distribuovány následovně: BBE přicházejí a kreslí rozhraní a my se na ně díváme a dáváme zpětnou vazbu. Celková struktura by měla být stanovena předem, ale dohodli jsme se, že přijdeme a upravíme podrobnosti procesu. Tento přístup je obvykle pro vývojáře frustrující, protože část provedené práce je odeslána do košíku, ale klient nás fascinoval a my jsme se výjimečně dohodli, že začneme bez finálních vstupních dat.

Systém, který měl být vytvořen, sestával ze tří velkých části odpovídající klíčovým rolím:

  • Pro studenta
  • Pro učitele (aka mentora)
  • Pro koordinátora (aka správce systému)

Největší příležitosti má koordinátor; může zahájit kurzy, přidělit učitele a studenty; skutečně všemohoucí postava. Učitel má o něco menší privilegia; pracuje v rámci svého kurzu, zahajuje úkoly a hodnotí referáty předložené studenty. Student má ještě menší práva; poslušně poslouchá a zadává domácí úkoly ke kontrole.

Na začátku bylo vykresleno 106 rozvržení, včetně rozhraní koordinátora, učitele a studenta. Více než polovina z nich byla ve spojení s koordinátorem.

Koordinátor je zaměstnancem BBE, takže nepotřebuje hezké rozhraní. Hlavní věcí je dodržet termíny a zahájit projekt s více či méně stravitelným designem a se všemi potřebnými funkcemi. Souhlasili jsme, že zde použijeme standardní materiálový design.

Studenti a učitelé jsou mimo BBE, proto bylo pro ně důležité udělat něco estetičtějšího. Rozhraní studentů a učitelů jsou vizuálně docela podobná, protože vidí stejný obsah.

Rozdíly se týkají hlavně dostupné funkce: student komunikuje s jedním učitelem a může odeslat domácí úkoly ke kontrole a učitel může komunikovat s několika studenty a zkontrolovat odeslanou práci.

Zpracovat

Pracovali jsme tvrdě celý podzim. Věci šly podle plánu a v listopadu stále přetrvával pocit, že LMS bude spuštěn před Novým rokem.

Ale v prosinci se samozřejmě objevil klasický nouzový režim, způsobený blížícími se zdlouhavými prázdninami, kdy musíte být včas na všechno. Počet rozložení rostl, ke změnám došlo v průběhu práce; plus podpořili další projekty, kde to někdy nebylo možné zvládnout bez účasti lidí zapojených do BBE. Byla to ideální situace, která vyvolala nervové zhroucení programátoru, takže jsme museli zpomalit a odložit spuštění.

První verze se rozhodla spustit tiše, po prázdninách, a 18. ledna úspěšně zahájena výroba.

Další proces měl trvat maximálně měsíc, ale není nadarmo se říká, že ďábel je v detailech: pokračovali jsme ve zdokonalování systému až do začátku léta.

V procesu práce, 106 počátečních rozvržení se změnilo na 484.

Pokud byl koordinátor nejobtížnější rolí z hlediska autority, pak z hlediska rozhraní byl studentem nejsofistikovanější případ: 233 rozvržení.

Následovalo 162 rozvržení s učitelskými rozhraními.

Nakonec bylo pro koordinátora uvedeno 89 rozvržení.

Pravděpodobně nejdůležitější a nejsložitější vlastností celého systému byl editor domácích úkolů v rozhraní mentora. Studenti nejčastěji zadávají práci jako obrázky a poté dostávají zpětnou vazbu od učitele jako tečky kdekoli nad těmito obrázky s komentáři, které se po kliknutí na tyto tečky rozšíří.

Zároveň mohou studenti nahrávat nové obrázky do stejného úkolu a my jsme potřebovali vyvinout celý systém, který by podporoval verzování stažených souborů se všemi komentáři. Nejprve jsme hledali hotová řešení, která lze pro takového editora přizpůsobit, ale nenašli jsme nic vhodného a omezili jsme se na používání samostatných noname knihoven, abychom nějak zjednodušili náš život.

Pokud jde o backend, projekt se ukázal být jedním z nejsofistikovanějších v historii naší společnosti. Musel jsem vytvořit architekturu se spoustou vztahů různých dat, která proudí z jednoho místa na druhé. Samostatnou výzvou byla kombinace Django ORM s externími daty a následné uložení těchto dat do mezipaměti. Například studentské účty, streamy studentů a kurzy jsou uloženy mimo LMS – na hlavní stránce bangbangeducation.ru – odkud je musíte stáhnout a sledovat jejich včasné aktualizace.

Vysoká

  • Nekrmte dobré vývojáře chlebem – nechte je udělat něco nového. Zároveň klienti z nových oblastí se zajímavými dotazy zřídka přicházejí. Pokud vytvoříte web hotelu, přijdou pro webové stránky hotelu. Pokud vytváříte web pro architektonickou kancelář, přicházejí pro web architektonické kanceláře. V případě BBE LMS jsme si prostě užili novost, rozsah a složitost práce. Zvláštním vzrušením byl vývoj editoru domácích úkolů v rozhraní učitele – nejtěžší část projektu. Zdá se, že jsme pitomci. 👨‍💻
  • Z naší strany pracovali na projektu dva vývojáři. Jeden dělal front-end, druhý dělal back-end. Kombinace těchto lidí, Dima Gushchin a Ilya Obolensky, se ukázala být jedinečná. Front-end zná backend velmi dobře a backend je vpředu velmi dobrý. Ve skutečnosti pracovali dva full stack programátoři. Výsledkem bylo, že jakékoli dohody mezi nimi proběhly hladce a rychle. Někdy dokonce přidávali kód jeden po druhém, což je zřídka vidět při vývoji klientských projektů. 🛠
  • Stojí za to vzdát hold klientovi. Úroveň rozložení, která nám byla dána, byla mnohem vyšší než průměr. Dokonce i skvělá designová studia z Evropy a USA, která mají vysokou úroveň samotného designu, mají často v rozvržení úplný nepořádek. BBE samozřejmě mělo také nedostatky, pokud jde o adaptivní verze, ale nemělo taneční vzdálenosti mezi stejnými prvky, zlomkovými pixely, nedokončenými rozhraními nebo globálně nepředstavitelnými scénáři (a v projektech подоб máme podobné problémy). 🪄
  • Vývojáři jsou konkrétní lidé. Povolení přímé komunikace mezi nimi a klienty a dokonce i designéry je pro nás dražší. Klient se může rozhodnout, že se nechceme hluboce ponořit do jeho situace, a vývojář často začne považovat klienta za neschopného vše vysvětlit správně. Zde se všechno ukázalo jinak. V určitém okamžiku náš manažer Maxim Kozlov záměrně ustoupil stranou, aby nezasahoval do interakce vývojářů s klientem. V zákulisí jsme stále řešili naše problémy a stanovovali priority úkolů, ale role manažera jako prostředníka v komunikaci byla vypnuta. V mnoha ohledech jsme to umožnili díky profesionalitě Margarity Maryanyan, manažerky BBE. 🙏

Nekife

  • Je obtížné pracovat, když na začátku existuje pouze blokové schéma s funkcemi rolí v LMS a dokument s velmi omezeným popisem. V dokumentu je 12 stránek a mělo by to být alespoň 112. Kromě toho byla rozvržení připravena na 20%. Existovala přísná časová omezení, takže jsme neztráceli čas vypracováním podrobné technické specifikace a vypracováním rozvržení. V takové situaci musí být část kódu odeslána do koše a programátoři z toho dostanou zbytečný stres. ⏳
  • Jak bylo uvedeno výše, z důvodu nedostatku času jsme se rozhodli vytvořit rozhraní koordinátora v materiálu. Šli jsme dále a rozhodli jsme se vzít hotovou knihovnu prvků ui: tlačítka, vstupy atd. Vzhledem k tomu, že používáme Vue.js na přední straně, jsme prohledali knihovnu vuematerial.io pro klíčová slova vue a material design a rozhodli jsme se ji hned použít. Když byla připravena třetina rozhraní koordinátora, uvědomili jsme si, že knihovna je plná chyb a prakticky není podporována. Místo toho, abyste strávili spoustu času úpravami, by stálo za to strávit několik hodin studiem a výsledkem by bylo vybrat si něco jiného. Zůstali jsme u vuematerial.io, ale museli jsme to správně vylepšit. 🪲
  • Apple je rád hrdý na to, že jejich nové telefony vydrží o něco déle než staré nebo podobné telefony a vývojáři již dlouho znají tajemství: umělá omezení výkonu, jejichž počet neustále roste. V tomto projektu jsme čelili skutečnosti, že iOS Safari havaruje s chybou při překročení množství použité RAM. Například když učitel otevře velké obrázky nahrané studenty z iPhonu. Tento problém mohl být vyřešen velmi složitým a dlouhým vývojem na plátně, ale ušetřili jsme čas a omezili škálování obrázků na tyto limity, když je RAM načtena na 10 MB. 📱
  • Jsme hrdí na kód, který jsme napsali, ale několik míst se kvůli nedostatku času trochu zmatilo. Všechno funguje, jak má, a my sami na to v tomto kódu přijdeme, ale pokud projekt otevře vývojář třetí strany, pak si bude muset na některých místech zlomit hlavu. Aby byl kód čitelnější, stálo by za to přesunout některé věci do komponent. Ale trvalo by to ještě několik dní a my jsme neochotně nechali všechno na frontendu tak, jak je. 😔
  • Došlo k chybě v backendu. Jak jsme postupovali, ukázalo se, že je lepší ukládat data do mezipaměti ne na úrovni požadavků na externí API, ale přímo v modelech a kversetech – aby se předešlo zbytečnému dekódování JSON. Byla to pro nás důležitá a obohacující zkušenost – i po 10 letech se učíme dál. 🤖

Očekávání a realita

Dokončení prací

Očekávání: 1. února 2021

Realita: 1. června, 2021 d.

Vývojové úsilí

Očekávání: 176 pracovních dnů

Realita: 324 pracovních dnů

Rozpočet rozvoje

< p> Realita: 3 500 000 ₽

Očekávání (na základě výsledků projektu): 6 500 000 ₽

Výsledek

Očekávání: ★★★★★

Realita: ★★★★★

Přijďte studovat na Bang Bang Vzdělání: bangbangeducation.ru

A pro komplexní vývoj k nám: astroshock.ru

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.