A QR kódról

A QR-kód (mobilkód) egy kétdimenziós vonalkód, melyet a japán Denso Wave cég fejlesztett ki 1994-ben. Jelentése Quick Response, azaz gyors válasz. A QR kód (mobilkód) legnagyobb népszerűségnek Japánban és Kínában örvend, de egyre jobban terjed Amerikában és Európában is. A QR kód hibatűrő képessége és széles adatformátum támogatottsága miatt vált hamar népszerűvé, annyira, hogy 2000 júniusában ISO/IEC 18004 nemzetközi szabvánnyá vált, amelyet azóta többször kiegészítettek. A QR kód nyílt szabvány, viszont a tulajdonosi jogokat a Denso Wave fenntartja magának, így a QR kód a Denso Wave hivatalosan regisztrált védjegye. A vonalkódtól eltérően sokkal nagyobb mennyiségű adatot képes tárolni, ami nem csak numerikus lehet, hanem akár egy kép is, vagy egy internetes hivatkozás!

Maximum 7089 karakter kódolása lehetséges egy kóddal (ha csak számokat tartalmaz), illetve alfanumerikus értékekből 4296 karaktert, ez nekünk elég is lesz. Egy kódot fel lehet osztani több kisebb, legfeljebb 16 részre, így még több adatot lehet elhelyeznie egy kódon. Fizikai mértét tekintve kicsi, könnyen lehet elhelyezni bármilyen terméken vagy berendezésen. Minden irányból leolvasható, a sarkokban lévő jelek segítségével lehet azonosítani a megfelelő irányt. Fizikai sérülésekkel szemben ellenálló, az adatok akkor is kiolvashatók, ha a szimbólum részben koszos, sérült, ami egy gyárterületen könnyen előfordulhat. A japán eredetének köszönhetően képes kezelni JIS Level 1 és Level 2 karakterkészleteket, ezeket kódolni. Az európai és amerikai szabványok nagy része erre nem képes.

A Laravel és a QR kód

Alapértelmezetten egy Laravel projekt nem tartalmaz funkcionalitásokat a QR kódok kezeléséhez, így ehhez egy külső osztálykönyvtárat kell használni. Nekem a Simple QR code csomagra esett a választásom, amely - ahogy a neve is mutatja - meglehetősen egyszerű, mégis jól használható. Itt van a dokumentációja: https://www.simplesoftware.io/#/docs/simple-qrcode

Telepítés

Telepítsük a csomagot a projektünkbe:

composer require simplesoftwareio/simple-qrcode

Hibaüzenettel visszatér a telepítő: hiányolja az ext-gd kiterjesztést a PHP-ből, ezt a php.ini fájlban tudjuk megtenni, ha rákeresünk az ;extension=gd sorra és kivesszük a sor elejéről a ;  karaktert majd elmentjük a fájlt. Utána futtassuk újra a terminal-ban a composer-es telepítő parancsot. Így már problémamentesen települni fog a QR kódokat kezelő csomag.

Nézet fájl a QR kódhoz

Hozzuk létre az egyedi nézetet, amely az adott berendezés nézet oldalához vezet (a későbbiekben itt lesznek kilistázva a dokumentumok, amelyek a berendezés karbantartásához kellenek majd):

php artisan make:filament-page QRDevice --resource=DeviceResource --type=custom

Regisztráljuk is be ezt az új útvonalat a DeviceResource.php fájl getPages() metódus visszatérési tömbjébe (a create útvonal után, hogy ne kavarjon be a wildcard karaktersor):

'qr' => Pages\QRDevice::route('/qr/{record}'),

Ugyanebben a fájlban adjunk hozzá a táblázatos metódus actions részéhez egy új elemet (az EditAction után például):

Tables\Actions\Action::make('QR')->label(__('fields.qr_code'))
  ->modalContent(fn ($record): View => view('filament.resources.device-resource.pages.q-r-device', ['record' => $record]))
  ->modalSubmitAction(false)
  ->modalCancelAction(false)

A helyes működéshez az osztály felett importálni kell ezt az interface-t: use Illuminate\Contracts\View\View; Tovább a helyes felirathoz a fields.php szótárakban hozzuk létre ezt az új bejegyzést, ami a korábbiak után már nem jelenthet nekünk kihívást. A modal ablaknál letiltottuk az elküldés (modalSubmitAction) és mégse (modalCancelAction) gombokat.

Ha megtekintjük most a berendezés listánkat, akkor a táblázat sorainak (vagy csak egy sorának) jobb szélén megjelentek a QR kód linkek. Jelenleg ezek még egy üres modal ablakhoz vezetnek, de rögtön feltöltjük azt is tartalommal.

A custom page létrehozó utasítás hatására két új fájl is létrejött: a QRDevice.php -t nem kell módosítani, ez csak odavezet minket majd a QR kód megtekintése funkcionalitáson át magához a QR kód egyedi nézethez. Ez az egyedi nézet a resources / views / filament / resources / device-resource / pages / q-r-device.blade.php Nyissuk meg ezt a fájlt szerkesztésre és frissítsük a tartalmát erre, hogy ne csak egy üres modal ablakot kapjunk:

Mindössze egy div-be kell betenni a QR kód generálást. A QR kód mérete 300px, a háttérszíne az RGB kódolás szerinti (255, 90, 0) értékeket veszi fel, azért ezt, mert nálam teszteléskor így könnyebben felismerte az okostelefon a kódot, mint simán fekete-fehéren, de nyilván ez a színkód szabadon változtatható. Utoljára pedig magát az URL-t definiáljuk neki, ami a QR kódba bekerül adatként (a kimásolható kód elérhető lesz majd a bejegyzés végén hivatkozott GitHub commit-ben). Az eredmény ez lesz:

A QR kód működik, a saját okostelefonommal tesztelem. Mivel lokális gépen futtatom a Karbantartás Menedzsment Rendszert ezért a QR kód egy lokális útvonalra küldené el a telefonomat, de nyilván egy kihelyezés, publikálás (deployment) után az éles működés során, a megfelelő útvonalra irányítja majd el a felhasználókat.

A div-nek azért adtam meg a "printableArea" azonosítót, mert majd ezt szeretnénk kinyomtatni, a modal ablak többi része nem lesz érdekes, de azért adjunk még hozzá néhány dolgot:

1. Egy címsor elemet (h1), ami a "Berendezés"-t mint feliratot tartalmazza és a berendezés nevét utána.
2. Legyen még a QR kód alatt egy gomb, amivel egyből ki lehet nyomtatni a QR kódot egy pdf fájlba.
   

Az <a> tag class attribútumába lévő osztályok az ide beszúrt képen nem teljesen látszódnak, de a bejegyzés végén található GitHub commit-ben pontosan megtalálható a kód. Az eredmény:

A CSS kód arra szolgál, hogy a nem szükséges részeket (fejléc szöveg, nyomtatás gomb) eltüntessük a nyomtatási dokumentumból. A Nyomtatás gomb megnyomásával egyből felugrik a dokumentum, amelyet kinyomtathatunk, kivághatjuk belőle a QR kódot és felragaszthatjuk az érintett berendezésre.

A bejegyzésben végrehajtott változtatások GitHub commit-je itt található meg.

A közvetlen folytatásban: létrehozzuk a berendezésekhez tartozó új Filament erőforrást: a dokumentumokat, amelyek a berendezések karbantartásához elengedhetetlenek lesznek. Ezeket a dokumentumokat lehet majd menedzselni, letölteni és QR kódot nyomtatni hozzájuk ugyanúgy, mint itt a berendezésekhez.

Dolgozzunk együtt: egyéni oktatás, mentorálás, fejlesztés, tanácsadás

Ha egyéni oktatás, mentorálás, vagy fejlesztési projekt kapcsán szeretnél segítséget kérni tőlem, esetleg együttműködni velem, akkor keress meg a weboldalamon található elérhetőségeken keresztül!