1. fejezet: Kattintós játék készítése

Ehhez a projekthez együtt fogunk építeni egy kattintós játékot, amely teljes mértékben integrálva van az Odoo-val. Ebben a játékban a cél, hogy nagy számú kattintást halmozzunk fel, és automatizáljuk a rendszert. Az érdekesség az, hogy az Odoo felhasználói felületét fogjuk használni játszótérként. Például bónuszokat fogunk elrejteni a web kliens véletlenszerű részein.

A kezdéshez szükséged van egy futó Odoo szerverre és egy fejlesztői környezetre. Mielőtt belekezdenél a gyakorlatokba, győződj meg róla, hogy követted az összes lépést, amelyet ebben a bevezető oktatóanyagban leírtunk.

Cél

Solutions

The solutions for each exercise of the chapter are hosted on the official Odoo tutorials repository.

1. Hozz létre egy systray elemet

A kezdéshez szeretnénk megjeleníteni egy számlálót a systray-ben.

1. Hozz létre egy clicker_systray_item.js (és xml) fájlt egy hello world Owl komponenssel.

2. Regisztrálja a systray nyilvántartásba, és győződjön meg róla, hogy látható.

3. Frissítse az elem tartalmát úgy, hogy a következő szöveget jelenítse meg: Kattintások: 0, és adjon hozzá egy gombot jobbra az érték növeléséhez.

És íme, teljesen működő kattintós játékunk van!

Lásd még

• Dokumentáció a systray nyilvántartásról

• Példa: systray elem hozzáadása a nyilvántartáshoz

2. Külső kattintások számlálása

Nos, hogy őszinte legyek, ez még nem túl szórakoztató. Tehát adjunk hozzá egy új funkciót: azt szeretnénk, hogy az összes kattintás a felhasználói felületen számítson, így a felhasználó ösztönözve van az Odoo minél gyakoribb használatára! De nyilvánvalóan a fő számlálón történő szándékos kattintásoknak továbbra is többet kell érniük.

1. Használja a useExternalListener-t, hogy figyeljen az összes kattintásra a document.body-n.

2. Ezek közül minden kattintásnak 1-gyel kell növelnie a számláló értékét.

3. Módosítsa a kódot úgy, hogy a számlálón történő minden kattintás 10-zel növelje az értéket.

4. Győződjön meg arról, hogy a számlálóra kattintás nem növeli az értéket 11-gyel!

5. További kihívás: győződjön meg arról, hogy a külső figyelő rögzíti az eseményeket, így nem maradunk le egyetlen kattintásról sem.

Lásd még

• Owl dokumentáció a useExternalListener használatáról

• MDN oldal az eseményrögzítésről

3. Hozzon létre egy kliens akciót

Jelenleg a felhasználói felület meglehetősen kicsi: csak egy systray elem. Biztosan több helyre van szükségünk, hogy több játékunkat megjeleníthessük. Ehhez hozzunk létre egy kliens akciót. A kliens akció egy fő akció, amelyet a web kliens kezel, és amely egy komponenst jelenít meg.

1. Hozzon létre egy client_action.js (és xml) fájlt, egy hello world komponenssel.

2. Regisztrálja ezt a kliens akciót az akció regisztrációs rendszerben awesome_clicker.client_action néven.

3. Adjon hozzá egy gombot a systray elemhez Open szöveggel. Erre kattintva nyissa meg a kliens akciót awesome_clicker.client_action (ehhez használja az akció szolgáltatást).

4. Annak érdekében, hogy ne zavarjuk meg az alkalmazottak munkafolyamatát, azt szeretnénk, hogy a kliens akció egy felugró ablakban nyíljon meg, ne pedig teljes képernyős módban. Módosítsa a doAction hívást, hogy az egy felugró ablakban nyíljon meg.

   Javaslat

   You can use target: "new" in the doAction to open the action in a popover:

   {
      type: "ir.actions.client",
      tag: "awesome_clicker.client_action",
      target: "new",
      name: "Clicker"
   }
   

Lásd még

• Hogyan hozzunk létre kliens akciót

4. Az állapot áthelyezése egy szolgáltatásba

Jelenleg a kliens akciónk csak egy hello world komponens. Azt szeretnénk, hogy megjelenítse a játékállapotunkat, de ez az állapot jelenleg csak a systray elemben érhető el. Ezért meg kell változtatnunk az állapot helyét, hogy elérhető legyen minden komponensünk számára. Ez egy tökéletes eset a szolgáltatások használatára.

1. Hozzon létre egy clicker_service.js fájlt a megfelelő szolgáltatással.

2. Ez a szolgáltatás egy reaktív értéket (a kattintások számát) és néhány funkciót kell exportáljon annak frissítésére:

   const state = reactive({ clicks: 0 });
   ...
   return {
      state,
      increment(inc) {
         state.clicks += inc
      }
   };
   

3. Érje el az állapotot mind a systray elemben, mind a kliens akcióban (ne felejtse el useState-elni). Módosítsa a systray elemet, hogy eltávolítsa saját helyi állapotát és használja azt. Ezenkívül eltávolíthatja a +10 clicks gombot.

4. Jelenítse meg az állapotot a kliens akcióban, és adjon hozzá egy +10 kattintás gombot.

Lásd még

• Rövid magyarázat a szolgáltatásokról

5. Egyedi hook használata

Jelenleg a kód minden részének, amelynek szüksége lesz a clicker szolgáltatásra, importálnia kell a useService és useState-et. Mivel ez elég gyakori, használjunk egy egyedi hook-ot. Ez hasznos arra is, hogy nagyobb hangsúlyt fektessünk a clicker részre, és kevesebb hangsúlyt a service részre.

1. Exportáljon egy useClicker hookot.

2. Frissítse a clicker szolgáltatás összes jelenlegi használatát az új hookra:

   this.clicker = useClicker();
   

Lásd még

• Dokumentáció a hookokról:

6. Az érték emberibb megjelenítése

A jövőben nagy számokat fogunk megjeleníteni, ezért készüljünk fel erre. Van egy humanNumber függvény, amely a számokat könnyebben érthető módon formázza: például a 1234 formázható 1.2k-ként.

1. Használja ezt a számlálók megjelenítésére (mind a systray elemben, mind az ügyfél műveletben).

2. Hozzon létre egy ClickValue komponenst, amely megjeleníti az értéket.

   Megjegyzés

   Az Owl lehetővé teszi, hogy csak szöveges csomópontokat tartalmazó komponenst hozzon létre!

Lásd még

• humanNumber függvény definíciója

7. Adjon hozzá egy tooltipet a ClickValue komponenshez

A humanNumber függvénnyel valójában veszítettünk némi pontosságot a felületünkön. Jelenítsük meg a valós számot egy tooltipként.

1. A tooltipnek szüksége van egy html elemre. Módosítsa a ClickValue-t, hogy az értéket egy <span/> elembe csomagolja.

2. Adjon hozzá egy dinamikus data-tooltip attribútumot az pontos érték megjelenítéséhez.

Lásd még

• Dokumentáció a tooltip szolgáltatásban

8. ClickBotok vásárlása

Tegyük még érdekesebbé a játékunkat: amint egy játékos először eléri az 1000 kattintást, a játéknak fel kell oldania egy új funkciót: a játékos 1000 kattintásért robotokat vásárolhat. Ezek a robotok 10 kattintást generálnak minden 10 másodpercben.

1. Adjon hozzá egy level számot az állapotunkhoz. Ez egy szám, amely bizonyos mérföldköveknél növekszik, és új funkciókat nyit meg.

2. Adjon hozzá egy clickBots számot az állapotunkhoz. Ez azt jelenti, hogy hány robotot vásároltak meg.

3. Módosítsa az ügyfél műveletet, hogy megjelenítse a click botok számát (csak ha level >= 1), egy Vásárlás gombbal, amely akkor engedélyezett, ha clicks >= 1000. A Vásárlás gombnak 1-gyel kell növelnie a clickbotok számát.

4. Állítson be egy 10 másodperces intervallumot a szolgáltatásban, amely 10*clickBots-szal növeli a kattintások számát.

5. Győződjön meg arról, hogy a Vásárlás gomb le van tiltva, ha a játékosnak nincs elegendő kattintása.

9. Refaktorálás osztálymodellre

A jelenlegi kód némileg funkcionális stílusban van írva. Azonban ehhez exportálnunk kell az állapotot és annak összes frissítési függvényét a kattintó objektumunkban. Ahogy ez a projekt növekszik, ez egyre bonyolultabbá válhat. Az egyszerűsítés érdekében válasszuk szét az üzleti logikát a szolgáltatásunkból és helyezzük át egy osztályba.

1. Hozzon létre egy clicker_model fájlt, amely egy reaktív osztályt exportál. Mozgassa át az összes állapotot és frissítési függvényt a szolgáltatásból a modellbe.

   Javaslat

   Kiterjesztheti a ClickerModel-t a Reactive osztállyal a @web/core/utils/reactive könyvtárból. A Reactive osztály a modellt egy reaktív proxyba csomagolja.

2. Írja át a kattintó szolgáltatást úgy, hogy példányosítsa és exportálja a kattintó modell osztályt.

Lásd még

• A Reactive alosztályozásának példája

10. Értesítés, amikor mérföldkőhöz érünk

Nincs sok visszajelzés arról, hogy valami megváltozott, amikor elértük az 1k kattintást. Használjuk az effect szolgáltatást, hogy ezt az információt egyértelműen közöljük. A probléma az, hogy a kattintási modellünk nem fér hozzá a szolgáltatásokhoz. Emellett szeretnénk a lehető legnagyobb mértékben távol tartani a felhasználói felület kérdéseit a modelltől. Ezért új kommunikációs stratégiát fedezhetünk fel: eseménybuszokat.

1. Frissítse a kattintó modellt úgy, hogy példányosítson egy buszt, és indítson el egy MILESTONE_1k eseményt, amikor először elérjük az 1000 kattintást.

2. Módosítsa a clicker szolgáltatást, hogy ugyanarra az eseményre figyeljen a modell buszon.

3. Amikor ez megtörténik, használja az effect szolgáltatást, hogy megjelenítsen egy szivárvány embert.

4. Adjon hozzá némi szöveget, hogy elmagyarázza, a felhasználó most már vásárolhat clickbotokat.

Lásd még

• Owl dokumentáció az esemény buszról

• Dokumentáció az effect szolgáltatásról

11. NagyBotok hozzáadása

Nyilvánvaló, hogy szükségünk van egy módra, hogy több választási lehetőséget biztosítsunk a játékosnak. Adjunk hozzá egy új típusú clickbotot: NagyBotok, amelyek egyszerűen erősebbek: 100 kattintást biztosítanak minden 10 másodpercben, de 5000 kattintásba kerülnek.

1. növelje a level értékét, amikor eléri az 5000-et (tehát 2-nek kell lennie)

2. Frissítse az állapotot, hogy nyomon kövesse a nagybotokat

3. a nagybotoknak elérhetőknek kell lenniük level >=2 esetén

4. Jelenítse meg a megfelelő információkat az ügyfél műveletben

Javaslat

Ha sablonban javascript kifejezésként kell használni a < vagy > jeleket, legyen óvatos, mivel ezek ütközhetnek az xml elemzővel. Ennek megoldására használhatja a speciális aliasokat: gt, gte, lt vagy lte. Lásd az Owl dokumentációs oldalt a sablon kifejezésekről.

12. Adjon hozzá egy új erőforrástípust: teljesítmény

Most, hogy hozzáadjunk egy másik skálázási pontot, adjunk hozzá egy új erőforrástípust: egy teljesítmény szorzót. Ez egy szám, amely level >= 3 esetén növelhető, és megszorozza a botok tevékenységét (tehát, ahelyett, hogy egy kattintást biztosítanának, a kattintóbotok most multiplier kattintást biztosítanak).

1. növelje a level értékét, amikor eléri a 100k-t (így 3-nak kell lennie).

2. frissítse az állapotot, hogy nyomon kövesse a teljesítményt (kezdeti érték 1).

3. változtassa meg a botokat, hogy ezt a számot szorzóként használják.

4. Frissítse a felhasználói felületet, hogy megjelenítse és lehetővé tegye a felhasználó számára egy új teljesítményszint megvásárlását (költség: 50k).

13. Határozzon meg néhány véletlenszerű jutalmat

Azt szeretnénk, hogy a felhasználó időnként bónuszokat kapjon, hogy jutalmazzuk az Odoo használatát.

1. Határozzon meg egy jutalomlistát a click_rewards.js fájlban. Egy jutalom egy objektum, amely tartalmazza: - egy description karakterláncot. - egy apply függvényt, amely a játék állapotát veszi argumentumként, és módosíthatja azt. - egy minLevel számot (opcionális), amely leírja, hogy melyik feloldási szinten érhető el a bónusz. - egy maxLevel számot (opcionális), amely leírja, hogy melyik feloldási szinten nem érhető el többé a bónusz.

   Például:

   export const rewards = [
      {
         description: "Get 1 click bot",
         apply(clicker) {
               clicker.increment(1);
         },
         maxLevel: 3,
      },
      {
         description: "Get 10 click bot",
         apply(clicker) {
               clicker.increment(10);
         },
         minLevel: 3,
         maxLevel: 4,
      },
      {
         description: "Increase bot power!",
         apply(clicker) {
               clicker.multipler += 1;
         },
         minLevel: 3,
      },
   ];
   

   Bármit hozzáadhat ehhez a listához!

2. Határozzon meg egy getReward függvényt, amely kiválaszt egy véletlenszerű jutalmat a jutalmak listájából, amely megfelel az aktuális feloldási szintnek.

3. Vonja ki a kódot, amely véletlenszerűen választ egy tömbből, egy choose függvénybe, amelyet áthelyezhet egy másik utils.js fájlba.

14. Jutalom biztosítása egy űrlap nézet megnyitásakor

1. Javítsa az űrlap vezérlőt. Minden alkalommal, amikor egy űrlap vezérlő létrejön, véletlenszerűen el kell döntenie (1% esély), hogy jutalmat kell-e adni.

2. Ha a válasz igen, hívjon meg egy getReward metódust a modellen.

3. Ennek a metódusnak ki kell választania egy jutalmat, küldenie kell egy ragadós értesítést, egy Collect gombbal, amely majd alkalmazza a jutalmat, és végül meg kell nyitnia a clicker kliens akciót.

Lásd még

• Dokumentáció egy osztály javításáról

• Patch függvény definíciója

• Példa egy osztály javítására

15. Parancsok hozzáadása a parancspalettához

1. Adjon hozzá egy Open Clicker Game parancsot a parancspalettához.

2. Adjon hozzá egy másik parancsot: Buy 1 click bot.

Lásd még

• Példa a parancs szolgáltató regiszter használatára

16. Még egy erőforrás hozzáadása: fák

Most itt az ideje, hogy bevezessünk egy teljesen új típusú erőforrást. Itt van egy, amely valószínűleg nem lesz túl vitatott: fák. Most lehetővé tesszük a felhasználó számára, hogy gyümölcsfákat ültessen (gyűjtsön?). Egy fa 1 millió kattintásba kerül, de gyümölcsöket biztosít számunkra (vagy körtéket, vagy cseresznyéket).

1. Frissítse az állapotot, hogy nyomon kövesse a különböző típusú fákat: körte/cseresznye, és azok gyümölcseit.

2. Adjon hozzá egy függvényt, amely kiszámítja a fák és gyümölcsök teljes számát.

3. Határozzon meg egy új feloldási szintet clicks >= 1 000 000 esetén.

4. Frissítse az ügyfél felhasználói felületét, hogy megjelenítse a fák és gyümölcsök számát, valamint a fák vásárlásának lehetőségét.

5. Növelje a gyümölcsök számát 1-gyel minden fa esetében 30 másodpercenként.

17. Használjon legördülő menüt a rendszerikon elemhez

A játékunk kezd érdekessé válni. Jelenleg azonban a rendszerikon csak a kattintások összesített számát jeleníti meg. Több információt szeretnénk látni: a fák és gyümölcsök összesített számát. Hasznos lenne gyors hozzáférést biztosítani néhány parancshoz és további információkhoz. Használjunk egy legördülő menüt!

1. Cserélje le a rendszerikon elemet egy legördülő menüre.

2. Meg kell jelenítenie a kattintások, fák és gyümölcsök számát, mindegyiket egy szép ikonnal.

3. Rákattintva egy legördülő menünek kell megnyílnia, amely részletesebb információkat jelenít meg: a fák és gyümölcsök típusait.

4. Továbbá, néhány legördülő menüelem parancsokkal: a kattintós játék megnyitása, egy kattintóbot vásárlása, …

18. Használjon Notebook komponenst

Most már sokkal több információt követünk nyomon. Javítsuk az ügyfél felületét az információk és funkciók különböző fülekbe rendezésével, a Notebook komponens segítségével:

1. Használja a Notebook komponenst.

2. Minden click tartalomnak egy fülön kell megjelennie.

3. Minden tree/fruits tartalomnak egy másik fülön kell megjelennie.

Lásd még

• Odoo: Dokumentáció a Notebook komponensről

• Owl: Dokumentáció a slotokról

• Notebook komponens tesztjei

19. A játékállapot megőrzése

Bizonyára észrevette a játékunk nagy hibáját: átmeneti. A játékállapot elveszik, amikor a felhasználó bezárja a böngészőfület. Javítsuk ki ezt. A helyi tárolót fogjuk használni az állapot megőrzésére.

1. Importálja a browser-t a @web/core/browser/browser fájlból a localstorage eléréséhez.

2. Sorolja fel az állapotot minden 10 másodpercben (ugyanabban az intervallum kódban), és tárolja a helyi tárolóban.

3. Amikor a clicker szolgáltatás elindul, be kell töltenie az állapotot a helyi tárolóból (ha van ilyen), vagy máskülönben inicializálnia kell magát.

20. Állapotmigrációs rendszer bevezetése

Amint valahol megőrzi az állapotot, új probléma merül fel: mi történik, amikor frissíti a kódját, így az állapot formája megváltozik, és a felhasználó megnyitja a böngészőjét egy olyan állapottal, amelyet egy régi verzióval hoztak létre? Üdvözöljük a migrációs problémák világában!

Valószínűleg bölcs dolog korán kezelni a problémát. Amit itt fogunk tenni, az az, hogy hozzáadunk egy verziószámot az állapothoz, és bevezetünk egy rendszert, amely automatikusan frissíti az állapotokat, ha azok nem naprakészek.

1. Adjunk hozzá egy verziószámot az állapothoz.

2. Határozzunk meg egy (üres) migrációs listát. Egy migráció egy objektum, amely tartalmaz egy fromVersion számot, egy toVersion számot, és egy apply függvényt.

3. Amikor a kód betölti az állapotot a helyi tárolóból, ellenőriznie kell a verziószámot. Ha az állapot nem naprakész, alkalmaznia kell az összes szükséges migrációt.

21. Adjunk hozzá egy másik típusú fákat

A migrációs rendszerünk teszteléséhez adjunk hozzá egy új típusú fákat: őszibarackokat.

1. Adjunk hozzá peach fákat.

2. Növelje az állapot verziószámát.

3. Határozzon meg egy migrációt.