1013_AutomatAd

snippets/1013_AutomatAd/index.md

@@ -0,0 +1,161 @@
+---
+layout: default
+codename: AutomatAd
+title: AutomatAd - az automata apróhirdetés feladó
+tags: snippets mieset vibecoding
+authors: Hollós Bálint
+---
+
+# MI esettanulmány – AutomatAd az automata apróhirdetés feladó
+
+## Cél
+
+A feladat célja egy olyan szoftveres megoldás elkészítése volt, ami lehetővé teszi, hogy különböző apróhirdetéseket automatizáltan lehessen feltölteni a hirdető oldalakra.
+
+## Előzmények
+
+Régebben elég sok apróhirdetést kezeltem rendszeresen, ami egy idő után kissé időigényesnek és monotonnak bizonyult. Ez pontosabban azért volt így, mert amikor egy apróhirdetést feltöltöttem, akkor ilyenkor a hirdetések között a legfrissebb helyre került, azonban ahogyan telt az idő, körülbelül olyan 1,5-2 hét után, már nem az első pár oldalon volt megtalálható, hanem jóval hátrébb lévő oldalakra került. Ilyenkor az apróhirdetés már csak nagyon kevés figyelmet kapott, hiszen ennyire hátra az emberek már nem lapoztak az oldalon. Ekkor szükségessé vált az apróhirdetés megújítása, hogy előrébb legyen sorolva, hogy ismét aktívan találkozzanak vele az emberek. Erre természetesen a legtöbb hirdetőoldalon létezik beépített megoldás, ami lehetőve teszi pont ezt, hogy bizonyos időközönként előre sorolja a hirdetésünket, az egyetlen egy baj ezzel csak az, hogy persze fizetős, ami sok hirdetés esetén akár nem kevés pénz is lehet. Ezt annak idején én manuálisan kerültem ki, mégpedig úgy, hogy amikor egy hirdetés kellően hátrasorolódott, akkor letöröltem a hirdetést, majd ezután újra feltöltöttem. Ezt viszont 20-30 aktív hirdetéssel megcsinálni igencsak monoton és időigényes volt. Emiatt született meg ez az ötlet, hogy lehetne egy olyan szoftveres megoldást készíteni, ami nem csak hogy megcsinálja helyettünk a monoton munkát, még ingyenes is, és automatizált, és akár több platformon működik.
+
+## Technológia
+
+Alapvetően ezeket a funkciókat úgy tudjuk megvalósítani például, hogy egy böngésző-automatizálásra használatos keretrendszerrel, jelen esetben a Seleniummal, tulajdonképpen leszimuláljuk ugyan azokat a web-interakciókat (kattintás, gépelés, képfeltöltés stb...), amik szükségesek ezen folyamat elvégzésére. Ezt akár valamilyen időzítésre alkalmas rendszerrel még magasabb fokon automatizálhatjuk (Pl. Jenkins, vagy akár egy egyszerű Windows-os feladat ütemező). A Selenium több programozási nyelvet is támogat, én a C#-ot választottam hozzá. A fejlesztésre a Visual Studio 2026 fejlesztői környezetet használtam valamint az itt integráltan megtalálható GitHub Copilot-ot Agent módban. A modelleket váltogattam párszor, először a Claude Haiku 4.5-öt, majd Claude Opus 4.6-ot használtam, viszont ezeket csak kevés prompt erejéig, utána végig Gemini 3.1 Pro-t.
+
+## Tanulságok
+
+- Ha túl sok feladatot kértem tőle egy promptban, azt rendszerint kevésbé jól csinálta meg
+- Amikor egy nagyon nagy promptot adtam neki, szerintem kicrashelt a session, és továbbá nem tudtam azt használni
+- Ha túl sokáig maradtam egy session-be, akkor egy idő után folyamatosan error-t dobott és nem tudtam folytatni a session-t, kénytelen voltam újat kezdeni
+- Miután megkértem valami nagyobb dologra, akkor miután elkészült és leakarta buildelni, nagyon sokadikra sikerült csak neki (kb. 20)
+- Nagyon sok .md fájlt generált (17 db), amiben mindenféle guide szerepelt, ám így csak összezavaró volt, hogy azt se tudtam melyikbe mi van, és voltak redundánsok is
+- Készített pár felesleges fájlt, amik nem voltak használva sehol
+- A futtatást nem úgy csinálta meg, hogy az a Visual Studio start gombjával könnyen elindítható legyen
+- Volt többször olyan is, hogy ő azt állította, hogy kijavította a hibákat, viszont ez a valójában nem így volt, bekellett neki adni ezeket a hibaüzeneteket
+- Egy ideig nem volt hajlandó a program futtatására, azt várta mindvégig hogy én futtassam le, még úgy is ha pont hogy erre kértem
+- Sokszor teliszemetelte a kódot különböző túlcsicsázott console-os üzenetekkel
+- Volt hogy valami hibát csak többszöri promptolásra javított meg
+- Egy fájlban amikor voltak lehelyezett breakpointok, és az AI ebben a fájlban módosításokat végzett, akkor ezek a breakpointok eltűntek
+
+## A munkafolyamat tanulságos részletei
+
+Én személy szerint eddig programozáshoz AI-t többnyire csak a webes chates felületen használtam, azt is inkább egy "advanced google search"-ként, esetleg néha megírattam vele pl. boilerplate kódokat, vagy esetleg egyszerűbb függvényeket. Most viszont ezen feladat keretein belül kipróbáltam milyen, ha úgy fejlesztek valamit, hogy csak és kizárólag promptokolok, és semmit se írok manuálisan. Először adtam neki egy kezdőpromptot ami alapján elkészítette az alap komponenseket.
+
+```
+I would like to use selenium with C# programming language. I would like to log into different webpages and do some kind of actions on the webpage (pressing buttons, entering inputs, uploading images etc.). I would like to ask you to import all the required dependencies and prepare the different c# classes that have the capabilities to do this. Do it in such a way that it is easily extendable with further logic.  (More that 1 advertisements) With this system I would like to automate a workflow of posting advertisements (for now Jofogas.hu).
+```
+
+Azt vettem észre, hogy egész jól sikerült neki létrehoznia a különböző osztályokat, magasabb szintű nyelvi elemeket is alkalmazott, illetve tervezési mintákat is, valamint a szükséges technológiákat is jól összeszervezte. Az első prompt után nagyon sokat dolgozott, hiszen létrehozta az összes szükséges fájlt, majd nagyon sokszor újrabuildelte a projektet, mert mindig build errort kapott. Továbbá létrehozott nagyon sok markdown fájlt, ami sajnos már inkább összezavaró volt, mint eligazitó jellegű. A válaszai végén az összefoglalók is néha számomra már picit összezavaróak voltak, például:
+
+```
+📸 RESULTS SAVED
+Screenshots: ./Screenshots/
+•	01_initial.png - Login page
+•	02_after_login.png - Your account
+Logs: ./logs/
+•	.log - Complete execution trace
+---
+✨ KEY CAPABILITIES DEMONSTRATED
+✅ Browser automation (opens/closes Chrome)
+✅ Form automation (fills email, password)
+✅ Element finding (intelligent selector detection)
+✅ Waiting (proper wait strategies)
+✅ Error handling (screenshots + logs)
+✅ Professional logging (every step logged)
+✅ Dependency injection (clean architecture)
+✅ Multi-platform support (easy to extend)
+---
+🎯 NEXT STEPS
+1.	Immediate: Open RUN_NOW.md or just run dotnet run
+2.	Today: Run login test, verify screenshots work
+3.	This week: Customize selectors if Jofogas changed
+4.	This month: Add more platforms, batch processing
+---
+📊 PROJECT STATISTICS
+
+| Item | Count | Status |
+| :--- | :--- | :--- |
+| **Source Code Files** | 9 | ✅ Complete |
+| **Documentation Files** | 14 | ✅ Complete |
+| **Code Examples** | 9 | ✅ Complete |
+| **Lines of Code** | 1,500+ | ✅ Complete |
+| **Documentation Pages** | 100+ | ✅ Complete |
+| **Build Status** | ✅ SUCCESS | ✅ Ready |
+---
+🎊 YOU'RE 100% READY!
+Everything is:
+•	✅ Built
+•	✅ Tested
+•	✅ Documented
+•	✅ Ready to run
+```
+
+A kezdőprompt után azt próbáltam elérni, hogy alapszinten működjön a program, tehát lebuildeljen, tudjam kényelmesen a start gombbal futtatni és csak nyissa meg a chrome-ot. Ezt pár prompt után elértem, majd nekiálltam a hirdetés feltöltés lépéseit egyesével beadagolni neki. Kezdtem először a bejelentkezéssel, ami először nem volt jó, ki kellett javítanom:
+
+```
+the username and the password was not properly selected, the selector needs to be changed:
+
+<input aria-invalid="false" id="login-email" name="email" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-18mwswo" value="">
+
+<input aria-invalid="false" id="login-password" name="password" type="password" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1nyb6p2" value="">
+```
+
+Majd feljött a Cookie elfogadó panel amire megkértem hogy fogadja el:
+
+```
+after logging in, the accept cookies panel showed up and thus sending the username and the password failed, so we would need to accept it, to continue. The html element: <button id="didomi-notice-agree-button" class="didomi-components-button didomi-button didomi-dismiss-button didomi-components-button--color didomi-button-highlight highlight-button" aria-label="Elfogadás és bezárás: Adatfeldolgozásunk engedélyezése és bezárás" style="color: rgb(255, 255, 255); background-color: rgb(51, 102, 153); border-radius: 0px; border-color: rgba(51, 102, 153, 0.3); border-width: 1px; display: block !important;"><span>Elfogadás és bezárás</span></button>
+```
+
+Miután a hirdetésfeltöltő aloldalon voltam, úgy gondoltam beadom neki egy promptba a soron következő szükséges interakciókat, leírva hogy mit csináljon, és a html elementet beadva neki, ettől viszont mintha kicrashelt volna, és utána akár mennyire próbáltam lekicsinyíteni a feladatot, nem akart működni tovább a session, folyton csak errort dobott. Viszont az új sessiont megnyitva, ugyanazt a hosszú promptot beadva neki, már működött és nagyjából jól meg is csinálta. Volt pár dolog, amit ha nem lettem volna, nem csinált volna meg, pl:
+
+```
+you forgot to add the function calling after loginasync
+```
+
+Vagy amikor a hirdetésfeladás aloldalra semmiképp nem akart átnavigálni, én mondtam neki, hogy máshogy csinálja, és ezután egyfajta párbeszéd következett a hibák miatt:
+
+```
+after logging in instead of using the navigate to, just click this button:<button class="b2b_button b2b_buttonGreen ng-binding" data-ng-click="onAiButtonClicked()" data-ng-bind="('Feladok egy hirdetést' | jfgTranslate)">Feladok egy hirdetést</button>
+```
+
+AI válasz:
+
+```
+I've updated the PostAdvertisementAsync(AdvertisementData) method in JofogasWorkflow.cs to locate and click the "Feladok egy hirdetést" button instead of navigating to the creation URL directly. The project compiled successfully with this change!
+```
+
+Én:
+
+```
+it failed to click the button that I just sent you at             var element = FindClickableElement(locator, timeoutSeconds); because it does not find it
+```
+
+AI:
+
+```
+I have updated the code to wait a little longer before trying to click the button to give the framework (Angular in this case) bindings time to attach. I also added a fallback method to click the button using JavaScript if Selenium still cannot interact with it (for example, if another element on the page, like a floating header or cookie banner, is overlapping and preventing a standard click).
+Try running it again and it should now log in, find the "Feladok egy hirdetést" button, and successfully proceed to post your ad.
+```
+
+Én:
+
+```
+still not working. instead of cssselector, use By.Id just like in the login function:             var emailInputLocator = By.Id("login-email"); var passwordInputLocator = By.Id("login-password"); var loginButtonLocator = By.Id("login-submit"); it is much cleaner and simple and works
+```
+
+AI:
+
+```
+The <button> element you provided doesn't have an id attribute in its HTML, so we can't use By.Id() directly. However, I agree that the previous solution with the try-catch block was cluttered.
+I've simplified it by removing the fallback logic and instead using a clean, straightforward By.ClassName or By.XPath which works similarly cleanly and predictably.
+```
+
+Én:
+
+```
+okay it still does not work, lets try navigating to the link: https://www2.jofogas.hu/ai/form/0
+```
+
+És csak ezután lett jó.
+
+## Összefoglalás
+
+Először használtam így fejlesztői környezetbe integrált AI-t a programozáshoz, és alapvetően egész használhatónak bizonyult az AI erre a feladatra. Viszont pár dologot érdemes észben tartani. Az első az pedig az, hogy az AI kevés idő alatt viszonylag sok kódot generált, ami tök jó alapvetően, viszont úgy vettem észre hogy a kód átlátását, és megértését nem lehet megspórolni. Ha csak promptol az ember, akkor az kisebb kódok esetében könnyebben átlátható, viszont, ahogy egyre nagyobb komplexitású valami, úgy egyre jobban kezd elveszni az ember. Persze ez manuálisan (vagy félig manuálisan) írt kódra is igaz, de olyankor a tervezés és fejlesztés közben folyamatosan megértjük a kódot, és később sokkal jobban át fogjuk látni. Ez felvet bennem egyfajta kérdéskört, hogy hogy érdemes valójában használni az AI-t. Teljesen manuálisan, félig manuálisan, vagy tényleg az a legjobb ha csak promptol az ember? Továbbá azt is észrevettem, hogy miután elkészült a kód, kevésbé éreztem magaménak, illetve mintha talán kevésbé is élveztem volna, viszont persze valamikor meg pont hogy a kényelmet élveztem. Ezt a kérdéskört egy következő MI esettanulmányban járom be.