Kontakt

Portfolio: Ostryweb @ Instagram.

úterý 25. prosince 2012

Vývoj Wordpress pluginu s použitím Custom Post Types

Zadáním nedávno spuštěného Wordpress pluginu pro zákazníka bylo vytvořit systém dokumentů, ke kterým je omezen přístup a mají specifickou strukturu. Nebudu popisovat celý vývoj, ale vzhledem k tomu, že v rámci daného řešení bylo nutno sáhnout po pokročilejších záležitostech jako custom post type, custom taxonomy, custom roles, nastavení capabilities atd. popíšu alespoň tyto netriviální věci.

Na konci uvádím i tipy na nástroje, frameworky a odkazy, na které jsem narazil v průběhu vývoje a buď mi pomohly, nebo bych je nejspíš použil při podobné budoucí záležitosti.

Nebudu se rozepisovat o detailech, bez reference v podobě Wordpress codexu (dále jen Codex) se určitě neobejdete.
http://codex.wordpress.org/

Custom Post Type

http://codex.wordpress.org/Post_Types
Na míru definovaný typ “dokumentu” Wordpressu s požadovanými položkami. Položky můžou být buď klasické jako známe z klasických článků a příspěvků - tzn textové políčko (v administraci jako input), pole pro větší text (textarea), ale i vyloženě custom záležitosti (color picker apod).



Ke kompletnímu vysvětlení odkazuju na Codex, jde o obecnou definici nového typu, definujeme jeho název, který je jeho identifikátorem v systému, popisky “labels”, chování v systému.

V ukázce kódu je zahrnuta i další záležitost:

Custom capabilities

http://codex.wordpress.org/Function_Reference/register_post_type
Vzhledem k tomu, že nám v tomto projektu nevyhovuje využití defaultních práv k postům Wordpressu (tedy je nutno oddělit psaní klasických článků a vytváření těchto dokumentů), musíme si nadefinovat názvy speciálních práv k tomuto Post Typu a napojit je na defaultní práva, aby systém věděl, co znamenají. Custom capabilities mají název podle defaultního práva pro “post”, jen místo tohoto slova vkládáme název právě našeho Post Typu. V příkladu výše “muj_document” resp “muj_documents” - toto je potřeba odlišovat dle původního vzoru.

Custom Roles

http://codex.wordpress.org/Function_Reference/add_cap
Opět nám nevyhovuje klasické rozřazení Wordpress uživatelů (Administrator, Šéfredaktor, Redaktor atd..), ale chceme uživatelům přiřazovat speciální role, které mají námi definovaná práva.



V prvním řádku jsme přidali do systému novou uživatelskou roli, níže pak přidáváme práva pro manipulaci s našili dokumenty (capabilities), viz výše, pro jistotu můžeme i některé capability odebrat..

Tento kus kódu je vhodné vložit do bloku instalace pluginu, aby se nespouštěl pokaždé. Tzn ho vložíme např. do funkce muj_activate(), kterou pak voláme následujícím způsobem.



Custom Taxonomy

http://codex.wordpress.org/Function_Reference/register_taxonomy
Jak jsem uvedl výše, jednou ze zásadních věcí je, že jsme schopni si nadefinovat svou strukturu dokumentu, tedy nemusí jít o klasiku v podobě názvu, úvodu, textu, kategorie a štítku, ale lze vše změnit. Kód níže zavádí nové pole Vydavatel, které funguje na principu číselníku (tzn. vlastně upravená verze štítku). Zde opět navazujeme capabilities na námi definované výše.



Custom Meta Boxes

http://codex.wordpress.org/Function_Reference/add_meta_box
Pro editaci v administraci je nutné nadefinovat si ovládací prvky. Můžete opět postupovat ručně, dle Codexu. Já našel a použil framework, který ulehčuje velké množství práce.
https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

Tipy

Téměř ke konci vývoje jsem narazil na Piklist, který mohl celý vývoj dost zásadně ulehčit, bohužel v dané fázi už to nemělo cenu, ale doporučuju zvážit. Framework se zdá dostatečně flexibilní a umí jednoduše nadefinovat vše, co jsem popsal výše a vyvíjel jsem “ručně”.

Pro představu doporučuju prezentaci autorů zde:
http://wordpress.tv/2012/09/04/steve-bruner-and-kevin-miller-building-powerful-websites-and-web-applications-with-piklist/

Web projektu: http://piklist.com/

Obecně velký zdroj všeho kolem těchto rozšíření Wordpressu a customizace je na blogu Justina Tadlocka, takže při studiu určitě chtě nechtě zabrousíte na http://justintadlock.com/.

Pro kontrolu nastavení práv jsem používal Justinův plugin Members. http://wordpress.org/extend/plugins/members/

středa 17. října 2012

Vývoj interaktivního kiosku s mapou obchodního centra

Jde o aplikaci pro full-hd dotykový kiosk, který je nainstalován v Brněnském obchodním centru Campus. Zákazník si vybral offline verzi, což komplikuje případný support, ale snad nebude potřeba. Aplikace umožňuje dotykově filtrovat seznam obchodů, po výběru obchodu zobrazit umístění na mapě a zároveň zobrazit detaily o obchodu s fotkami, otevírací dobou atd. Aplikace má administrační rozhraní, kde se po připojení klávesnice umožňuje upravovat informace o obchodech včetně nahrávání fotek.

Kiosk v Campus Brno



Video softwaru



Použité technologie

Denip Kiosk Master s Windows 7
http://www.denipkiosk.cz/informacni-kiosky/master/

MicroApache distribuce s PHP a SQLite - distribuce má komplet kolem 3MB, vzhledem k offline použití dostačuje
http://microapache.kerys.co.uk/

Open Kiosk browser
https://www.mozdevgroup.com/products/openkioskdistro.html

JQuery
http://jquery.com/

JQuery Easing plugin pro animace objektů
http://gsgd.co.uk/sandbox/jquery/easing/

JQuery Quicksand plugin pro efektní animaci filtrování položek
http://razorjack.net/quicksand/

JQuery SVG plugin pro manipulaci s mapou
http://keith-wood.name/svg.html

JQuery Jeditable plugin pro jednoduchou administraci
http://www.appelsiini.net/projects/jeditable

Řešení

Jak z výčtu vyplývá, použil jsem PHP skript pro generování základní kostry HTML stránky a pro komunikaci s databází. Open Kiosk browser postavený na jádře Mozilly pak splňuje všechna specifika nutná pro použití v takovémto případě.

Pro mapu byl použit SVG formát, se kterým se perfektně pracuje. SVG je vlastně XML definice grafických (i logických - grupy) objektů, se kterýma můžeme libovolně zacházet díky JQuery SVG pluginem (případně jinýma - známý Raphael atp). Lze tedy jednoduše měnit velikost, pozici, rotaci, barvy a zřejmě i další věci, které jsem nepotřeboval. Navíc vše podporuje Easing animace, takže všechny zmíněné změny lze "morfovat" i dle složitějších parametrů, než jen rychlost.

Většina operací se provádí v rámci Javascriptu, PHP víceméně natáhne velkou část dat o obchodech při prvotním spuštění a dokud nedojde k refreshi stránky, vše se děje v rámci Javascriptu. Záležitosti, jako zobrazování informací o obchodech apod, se načítají pomocí Ajaxu, stejne tak operace v administraci.

Browser refreshuje stránku automaticky po nastavitelném intervalu nečinnosti, zároveň umožňuje zúžit uživateli mantinely - lze použit filtr URL, lze omezit přístup jen na daný web, lze dokonce skrýt jakékoliv ovládací prvky včetně panelu s adresou. Stará se o fulscreenové zobrazení bez minimalizačního a zavíracího tlačítka a blokuje nevhodné kombinace kláves jako Alt+Tab apod.

Některé zajímavosti, které se hodily nebo zaujaly:

Přehled easingových animací, po kliku se předvedou
http://jqueryui.com/demos/effect/easing.html

Čistě CSS animovaný modální dialog
http://www.paulrhayes.com/2011-03/css-modal/

Generátor čistě CSS šipky
http://cssarrowplease.com/