Blog archive

Blog

Contact

During the spring semesters, we run a series of courses. You can learn about the world of HTML-JS-CSS, several web frameworks, and the terminology and tools of web development.

Application

Mentoring

Courses

AFSZ

History

Teamwork

Tech stack

About us

Latest post from our blog

Web developers at Schönherz.

In addition to web development, we also train ourselves in mobile development and DevOps. Every spring, we run courses in Hungarian to help interested parties join the group.

Kir-Dev's mission is to create useful webapps for the students of Schönherz.

Way of working

Former members

Kir-Dev meeting

Members

Projects

Schönherz Body

StartlapSCH

KonferenciApp

A Simonyi Konferencia Magyarosrszág legnagyobb egyetemi hallgatók által szervezett éves technológiai konferenciája, így nagy megtisztelés volt, amikor 2023 őszén először a rendezői csapat felkért minket az esemény weboldalának fejlesztésére.

Maga a konferencia 2024 márciusában zajlott le, azonban a fejlesztést már 2023 novemberében megkezdtük, ugyanis a weboldal rendkívül fontos szerepet töltött be az esemény promótálásában. Ilyenkor kezdőddöt az előadók gyűjtése, de rajtuk kívül az érdeklődök is először a weboldallal találkoztak, ha többet szerettek volna megtudni a Konferenciáról. 

Az oldal több verziójával is találkozhattatok a hónapok során, ugyanis ahogy közeledett a Konferencia, egyre több információ jelent meg itt. A 0. verzió november végén került ki, ekkor még csak egy figyelmet megragadó felhívás volt az oldalon a Konferencia dátumával, illetve volt lehetőség feliratkozni a hírlevélre is. Az első verzió február elején jelent meg, ekkor már elindult a regisztráció, illetve megjelentek infók a Konferenciáról és a nyereményjátékról. Nem sokkal később érkezett a második verzió is, ahol már az egyes előadásokat is lehetett böngészni egy listában. Végül március elején került ki a végleges verzió az előadás menetrenddel, helyszíni térképpel, sőt még az előadóktól is lehetett kérdezni az oldalon.

Az oldal backendjéhez a már jól bevált CMSch rendszerünket használtuk. Kis extra fejlesztéssel megoldottuk, hogy ide tudjuk felvinni az előadók és előadások adatait is, így ezeket bármikor tudtuk változtatni egy admin felületről, nem kellett ahhoz a kódba nyújtani. A frontendhez azonban nem a szokásos CMSch frontendet használtunk, hiszen fontos volt, hogy a Konferenciának egyedi weboldala legyen. Next.js-t és TailwindCSS-t használtunk a dizájn kivitelézéséhez, arculati elemeket és grafikai terveket a Konferencia arculati csapatától valamint az 

Simonyi Konferencia

Az alkalmazás a Schönherz Kollégium öntevékeny köreinek 

. Az weboldal rengeteg funkcióval rendelkezik. Többek között megtekinthető rajta a körök taglistája és a felhasználók közösségi története.

Ez a rendszert már több generáció óta fejlesztik az aktív körtagok: legelőször Kollégiumi Információs Rendszernek hívtuk (KIR), ez a verzió PHP-ban íródott meg. Aztán a projekt méretének növekedésekor újraírtuk JavaEE-s alapokon, OpenAM mellett, és Villanykari Információs Rendszer (VIR) lett a neve. 2015-ben újra aktuális lett a projekt Tech Stack-jének a frissítése, ezért a 

 keretrendszerben lett újraalkotva az alkalmazás. A jelenlegi nevét, a PéK-et is ekkor kapta.

Az alkalmazást rengetegen használják, jelenleg 

rendelkezik az oldal. Emellett sok összetett folyamatot valósít meg az alkalmazás, amiket gyakran az aktuális igényekhez kell igazítani. Új funkciókkal is folyamatosan bővitjük a szoftvert, hogy minél teljesebb felhasználói élményt nyújtson. Ezeknek a kihívásoknak a teljesítéséhez a projektben igyekszünk a legkorszerűbb eszközöket és technikákat használni. Kifejezetten figyelünk a szoftver helyes működésének biztosítására, több mint 200 teszt készült eddig. Emellett szem előtt tartjuk, hogy a projekt továbbra is hosszútávon fejleszthető és karbantartható legyen, ezért jól működő kód review rendszerünk van, valamint statikus analízis eszközöket is használunk.

2024-ben elhatároztuk, hogy újraírjuk, hogy a tagjaink jelenlegi tudásával maximalizáljuk a PéK profi működését és a jövőbiztosságát, fenntarthatóságát. Ezért Next.js frontend + NestJS backenddel megyünk tovább, már a tervezést elkezdtük, hamarosan a fejlesztés is beindul, érdemes csatlakozni, ha valami igazán nagy impacttal rendelkezőbe akarsz bedolgozni!


PéK v4.0

Felmerült egy igény az SSSL részéről, hogy a GólyaKörTe 2022 weblapját a Kir-Dev fejlessze le, részükről nem volt elegendő erőforrás erre, valamint amúgy is nálunk már egyszer lefejlesztésre került a Gólyahét weboldala, amivel kapcsolatosan korábban a reszort teljes megelégedését fejezte ki.
Így hát a hirtelen januárban alapult kb 10 tagú "Kir-Dev speed-run munkacsoport" nekiállt a projektnek, és időben, valamint jól áttesztelve készítette el a GólyaKörTe rendezői számára. A frontend belebuildelődik a Springes alkalmazás statikusan kiszolgált fájljaiba, így nem kellett a CORS-szal és külön frontend deploymenttel foglalkozni, lévén kevés időnk volt.

A frontendbe nagyon sokan kapcsolódtak be, sokan megismerkedtek és profivá válhatttak a React-ben és Chakra UI-ban. Így azt is mondhatjuk, hogy a projekt - mivel nem volt szorgalmi időszak - sokak számára a megfelelő platform volt arra, hogy beletanulhassanak egy új frameworkbe, valamint külön örömét okozta mindenkinek, hogy ilyen sokan dolgoztunk, nagy profizmust belefektetve és harmonikus együttműködést kihasználva.
Ennek örömére az SSSL-lel most mennek a specifikációs meetingjeink a 2022 tavaszi félévi során, hogy a nyáron nekiállhassunk a Gólyatábor weboldalának összebarkácsolásának, építve a CMSch rendszerre, ami láthatóan most is bevált.

GólyaKörTe 2022 óta készült újabb website-ok a CMSch-val:

XXI. Simonyi Konferencia web (csak backend)

CMSch

SVK web

Elkészült egy koncepció 2021. tavaszán, mely egy utastájékoztató kijelzőt valósított meg házilag. Hamar jött a felismerés, miszerint ezt alkalmazni is lehetne élőben, tetszőleges helyszínen. Kiváló helyszínt a Schönherz Kollégium földszinti folyosója jelenti, így elindult egy olyan projekt a körben,mely nem csak a webalkalmazás elkészítését jelenti, hanem annak fizikai elhelyezését is. Ez lett az induláSch projekt.

Jelenleg úton van egy saját TV a kollégiumi földszintre, melyen a kollégisták a földszinten közlekedve tájékozódhatnak a jelenlegi tömegközlekedési indulásokról és egyéb információkról.Mindenki találkozott már azzal a pillanattal, amikor az adott járat az orra előtt ment el. Ez a projekt az ilyen pillanatokat hivatott megszüntetni: egy pillantás a kijelzőre, és máris megtudjuk, futni kell-e vagy sem.

A projekt sikeresen átment 2021-ben a Küldöttgyűlésen, azóta már a TV is megvan, illetve a program is működik a kiállított TV-n. Nagy örömmel fogadta körünk a projekt végcélhoz érését.

 a vanilla JavaScript-re és JavaScript (NodeJS) alapú backend-re épített, amibe templating-et is be kellett építeni.A felület optimalizálva lett mobilra is, így már élesben is üzemelt az alkalmazás.

 technológiájával nehéz volt karbantartani és fejleszteni az alkalmazást az új ötletekkel. Ugyanazon év őszén az egész projektet újraírtuk React és TypeScript alapokon. Ugyanakkor a 

 külön tárolóként lett kezelve. Ez azért hasznos, mert az induláSch API-t egy natív mobilalkalmazás is használja, így célszerű volt nem egybeszőni a webes felülettel. A második verzió alapjai sok lehetőséget adnak: elkészült egy widget felület, mely csempékben jelenít meg további információkat a pozícióhoz, mint például időjárás és közeli Bubi állomás elérhető biciklijei. Tovább lett fejlesztve a mobilverzió is, progresszív webalkalmazásként szinte natív élményt kapunk az alkalmazást használva.

Egy évvel később, 2023 januárjában már az első évfordulót ünnepelte a projekt. Egy év alatt rengeteg tapasztalatot és ötletet gyűjtöttünk össze annak érdekében, hogy a projekt tovább fejlődjön. A kioszkban sok lehetőség rejlett, amit év közben csak rengeteg foltozással és bele-bele javítgatással tudtunk volna elérni. 2022. végén nekiálltunk újraírni a projektet robosztusabb alapokkal. A projekt mostmár adatbázissal (MongoDB) működik egy NestJS alapú backenddel, illetve a kioszk kliens szépítgetésén kívül készült hozzá egy admin felület is. A bejelentkezés AuthSch-n keresztül történik, és bárki, aki belép, létrehozhat saját klienst.
Újdonságok között szerepelnek új csempék is. Az időjárás, SchPincér és Bubi mellett már képeket és QR-kódokat is elhelyezhetünk a kioszkon, sőt,ezek elrendezése egy 3x3-as rácsban változtatható. Az üzenetek funkció időzítéssel bővült, illetve a távoli karbantartás problémája is megoldódott.

Az admin felületen kioszkokat hozhatunk létre, melyek csempe-elrendezéseit vizuálisan szerkeszthetjük, illetve a csempéket beállíthatjuk. Üzemezhetünk üzeneteket, változtathatjuk a megjelenést téma és színek szerint, valamint a kioszk alapbeállításait is megadhatjuk. Meghívhatunk másokat is (pl. marketingeseket) a kezeléshez, akiknek csak a szükséges dolgokhoz lesz jogosultságuk. A kioszk állapotát is nyomon követhetjük a Dashboard-on, illetve távolról újra is indíthatjuk (ez esetben a böngészőablak frissül egyet).

Minden, az admin felületen létrehozott kioszkhoz tartozik egy kliens, mellyel nagy kijelzőkhöz optimalizáltan tudjuk megynitni a felületet. A kioszk időközönként lekéri a legfrisebb konfigurációt és az üzeneteket úgy, mint a rajta megjelenő adatokat.Mivel a "szoftverfrissítés" nehézkes egy falra felfúrt TV esetén, így az admin felületről való újraindítás után a legfrissebb szoftvert fogja futtatni a TV.

A projekt indulásának nyarán elindult egy koncepció fejlesztése, melyben megpróbáltuk az induláSch API-t felhasználni egy natív iOS és watchOS alkalmazás elkészítésére. Ennek részeként elkészült egy Apple Watch alkalmazás is kíváncsiságként, ami elég hasznosnak bizonyul a tesztelés során. Tapasztalatunk szerint a progresszív webalkalmazás elég jól közelíti egy natív app által nyúltott élményt. Az alkalmazás az ugyancsak fiatalnak számító SwiftUI-ban íródott. Készült 2022-ben egy Android implementáció is. Jelenleg még fejlesztés alatt áll az app, egy nap lehet elérhető lesz az AppStore-okban.

InduláSch

Kir-Dev


Korábban a VIK HK régi oldalán futott a konzik rendezése és menedzsmentje, amely viszont idővel megöregedett, így felkértek minket, készítsünk új alapokon, kicsit több funkcionalitással egy új Konzisite-ot!

A projekt alapja egy NodeJS REST API, mely egy PostgreSQL adatbázisban tárolja az adatokat. A webes kommunikációt a NestJS, az adatbázissal való kapcsolatot pedig a Prisma keretrendszer egyszerűsíti. A backend kódbázisa 

. A felhasználói felület pedig React-tal készült, az egységes megjelenés a Chakra UI-nak köszönhető. A frontend kódbázisát 

Amellett, hogy az eddigi funkciókat könnyebb használni és az oldal megjelenése szebb, elkészült pár új funkció is. Van lehetősége bárkinek csoportokat létrehoznia, nem kell ehhez a HK-nak emailt írni. Egy konzinak több előadója is lehet, mindegyiküket külön lehet értékelni. Egy felhasználóra érkezett értékelések megjelennek a profilján. Van egy külön felhasználó böngésző oldal, ahol publikus a konzitartók átlagos értékelése és egyéb statisztikák is. A konzi tartóknak van lehetősége jegyzet feltöltésére egy konzihoz, amit a résztvevők az alkalom után tölthetnek le, ha értékelték az előadókat.

A fejlesztés folyamatáról és a választott technológiákról bővebben is írtunk az első éles verzió megjelenésekor íródott 

Konzisite

A Tanuló web eredetileg egy, azóta már a körvezetőséget is megjárt tagunk újoncprojektjeként indult még 2016-ban. A munka egy jóideig haladt, azonban az 1.0 release-t ez a verzió sosem érte meg, a fejlesztés abbamaradt (a régi kód megtekinthető [itt](https://github.com/kir-dev/tanulo)).
2019 decemberében azonban egy, a körvezetőséget szintén megjárt tagunk újra elővette a projektet az archívumból és úgy döntött, az egészet modern alapokról teljesen újraépítve nekiáll a megvalósításnak. A projekt ezúttal viszonylag gyorsan haladt, és a 2020-as év eseményei miatt kissé lelassult fejlesztés után 2020. szeptemberében sikeresen elindítottuk a TanulóSCH-t.



A használt könyvtárak és technológiák az új alkalmazásban építettek a korábbi projektre, azonban pár területen a kezdetektől változtattunk, bizonyos elemeket pedig a feljesztés közben cseréltünk ki a kódolás kényelmesebbé tétele és a későbbi jobb karbantarthatóság érdekében.
Ami a kezdetektől fogva fix, az a TypeScript, Postgres valamit pug használata. Backend oldalon a TypeORM lett időközben Objection.js-re cserélve, frontenden pedig a Bulma frameworköt nyugdíjaztuk a kissé más megközelítést használó, de a fejlesztést nagyon nagy mértékben meggyorsító [TailwindCSS](http://tailwindcss.com)-re. Ez utóbbi igencsak nagy segítség volt, amikor az schdesign-tól megrendelt új felhasználói felületet implementáltuk.



Már az oldal indulásakor nagyon örültünk, hogy rendkívül pozitív fogadtatása volt a kollégisták körében. Reméljük, hogy ezzel a kis webalkalmazással könnyebbé tudjuk tenni a hallgatók mindennapi életét és idővel a kollégista élet mindennapi részévé válik a használata.


TanulóSCH

A SCH-Pincér projekt egyéni házi feladatként indult, és kinőtte magát egy szinte enterprise minőségű megbízható webalkalmazássá, amelyen a Házon belüli ételrendelések folynak.

SCH-Pincér

Kicsit kiöregedett már a jó kis KBPR weboldal és már frissíteni kéne a működését, hogy sokkal hatékonyabb munkát biztosítson a Háznak. Éppen ezért lettünk felkérve a weboldal megújítására. A website UI designját a 

KBPR

Volt már korábban a körnek saját image hosztingra használt Go-ban írt webappja Warp drive néven, azonban ez idővel kiesett a használatból. Eredendően azon célból indult a régebbi projekt is, hogy a képeket könnyedén töltsük fel valahova és tartsuk meg minél hosszabb ideig, illetve például ha a blogunkba szeretnénk őket beilleszteni. Most viszont újra elővettük az ötletet - innen a Warp Next név -, és Rails-es alapokon egy nagyon egyszerű appot írtunk, amelyet azóta is aktívan és kényelmesen használhatunk.

2021 végén pedig a LEGO kör keresett meg minket, hogy ők is szívesen használatba vennék az appunkat, így most azon dolgozunk, hogy a webszervergépünkön szépen működjön egy automatizált adatmentési cron job, valamint kiszélesítjük még néhány funkcióval az appot, hogy minél kényelmesebb legyen a használata.
Folytatólagosan még be fog kerülni egy olyan változtatás, hogy a linkek rövidebbek legyenek, valamint a cél még, hogy a feltöltések max méretkorlátja beállítható lehessen körönként.
Majd ha jónak látjuk, akár a frontend is átdolgozásra kerül, ugyanis a Bulma CSS library nem ad elég lehetőséget számunkra, hogy robosztus/hibamentes UI-t biztosítsunk a felhasználók számára.


Warp drive

Link rövidítési szolgáltatás házilag


Számtalanszor találkoztunk olyan szituációkkal, melyek során szükségünk lett volna valami frappáns szolgáltatásra, ami megkönnyíti a hosszú, esetleg időnként változó linkek létrehozásában segít.

Ilyen szolgáltatásokkal már találkoztunk, linket rövidíteni manapság gyorsan és ingyen lehet, azonban elég drágán adják a dinamikus linkeket a szolgáltatók.

Erre készült kíváncsiságból egy koncepció, majd később a Shorz, mint termék. Nemcsak linket rövidít, hanem az adott célt később változtatni is lehet.

Mindez egybe van kötve statisztikávaé, mely az átirányítások számát mutatja az elmúlt héten.

A rövidített linkeket igyekeztünk a lehető legegyszerűbbre készíteni, így ehhez hasonlóan készülnek a linkek: 

Shorz

B(e)acon

Pulcsi és FoltMékör web

SCH60

Seniorképzés

Impulzus

A projektet nem mi alapítottuk, egyetemünk kutatócsoportja, a MIT tanszékhez tartozó 

 kezdte el saját weboldalukat összerakni egy 

 frontend frameworköt használja. 2021 tavaszán viszont hozzánk fordultak igényükkel, méghozzá a következőkkel:

angol nyelvű változat elkészítése (a teljes struktúra duplikálása nélkül),

a designhoz illeszkedő sablon kialakítasa további aloldalaknak (pl. projektek, tantárgyak),

 keretrendszert, valamint hozzácsaptunk egy 

 package-et, hogy több nyelven is elérhető lehessen a weboldal. (Ezt 

Az átadás sikeres volt, örülünk, hogy a kutatócsoport nagy megelégedéssel fogadta a kész projektet, és mi is örvendünk a lehetőségnek!

A Kir-Dev csapatával nagyon jó volt együtt dolgozni: utánanéztek a lehetőségeknek, javasoltak az igényeinknek megfelelő átfogó tervet az oldal továbbfejlesztésére és elkészítették az oldal letisztázott kódját. Köszönjük!
— Dr. Micskei Zoltán, a kutatócsoport vezetője

FTSRG

2018-ban keresett fel minket a Schörpong kör, hogy készítsünk nekik weboldalt, ahol a nyitásokat és az általuk szervezett sörpong bajnokságokat tudják nyilvántartani. A projekt sikeresen elkészült, és kisebb módosításokkal együtt azóta is használatban van. Lehetőség van az események és hírek menedzselésére, valamint a résztvevők tudnak csapatokat regisztrálni, azokkal eseményekre jelentkezni, valamint az oldalon keresztül zajlik a pontozások lebonyolítása is.
Fun fact: a fejlesztés egy ideig Node.js alapokon haladt, azonban egy viszonylag szűkös határidő (egészen pontosan 2018. október 8.) elvállalása után október 5-én úgy döntöttünk, hogy az egész oldalt újraírjuk más technológiákkal, teljesen nulláról. Erőfeszítéseinket siker koronázta, a 8-án hétfő hajnalban sikeresen élesítettük is a honlapot.

Az oldalt a jól bevált Ruby on Rails-re építettük, és ahogy a fenti kis történet is illusztrálja, ez nagyon jó döntés szokott lenni, ha valamit gyorsan és megbízhatóan szeretnénk megírni. A felület stílusosabbá tételéhez a Semantic UI-ra esett a választásunk, ami szintén lehetővé tette, hogy az oldalt a szűkös határidő ellenére is be tudjuk fejezni.