Redovisningar — Javascript, jQuery och AJAX med HTML5 och PHP

Kmom07/10: Projekt och examination

Jag tänkte bygga ut mitt MVC-ramverk som slutprojekt och började med att kika runt på olika texteditorer. Fastnade för TinyMCE för WordPress och JCE för Joomla. Kikade på deras funktionalitet för att få en idé om hur jag ska göra en editor, och vad som bör finnas i en sådan.

Utveckling av Vason Editor

  1. I steg ett så utvecklar jag ”min” editor till att spara (och autospara) text till localStorage, som är en annan av de nya features som finns i HTML5. Jag använder bilder som knappar för att få ett hyfsat grafiskt gränssnitt. I detta moment så gör jag editorn som en jQuery-plugin. Är inte säker på att den landar på det sättet, vi får se vart det utvecklas. Helt klart är väl i alla fall att den så småningom ska spara text i sqlite-databasen i MVC-projektet eller ännu hellre i en MySQL-databas.
  2. Som steg två byggde jag ut mitt mvc-ramverk med ett administrationsgränssnitt för användare och grupper. Bestämde mig dock för att inte gå vidare och försöka implementera min editor i ramverket.
  3. I steg tre utvecklar jag min editor som en jQuery-plugin, som man lätt kan använda. I dagsläget sparar den bara data till LocalStorage, men kan byggas ut senare till att använda med nån sorts databas.

Krav K1: Paketera, presentera och produktifiera
Min plugin är en WYSIWYG-editor, som är gjord som en jQuery-plugin. Jag har gjort en egen webbplats för att presentera editorn, vad den gör och hur man använder den: VasonEditor.

Krav K2: Ha koll på konkurrenterna och lär av dem
Jag har undersökt konkurrenterna WordPress och Joomla, och undersökt hur deras WYSIWYG-editorer ser ut och fungerar. Jag har inte gjort någon djupdykning i koden till dessa, utan kikat på funktioner och användbarheten.

Min editor är långt ifrån färdig, men erbjuder de mest grundläggande funktionerna spm finns i en liknande editor. Den kommer att kunna byggas ut på ett enkelt sätt, med fler olika knappar/funktioner. Färgerna i färgpaletterna som används för att välja färg till text, bakgrund etc, går att anpassa efter eget behov.

Krav K3: Kvalitet och omfattning
Jag har lagt ner väldigt många timmar på min vasonEditor-plugin. Delvis därför som jag inte går vidare för att försöka implementera pluginen i mitt MVC-ramverk. Jag hade inte alls tänkt att editorn skulle bli en plugin, utan att den skulle byggas in i Zelda.

Pluginen är väldigt mycket jQuery, lite javascript och lite HTML5. Bland annat har jag använt LocalStorage, som kursen inte tagit upp, men som jag tycker är riktigt trevligt för att spara data i sin webbläsare.

Krav K4 (valbart): Plugin för att hovra bilder

Krav K5 (valbart): Plugin horisontell accordion slider

Krav K6 (valbart): Pong-spel

Kmom06: HTML5 och Websockets

Till min förvåning så gick detta moment ganska lätt. Jag tycker att det var lätt att installera node och websocket på min localhost och dra igång en webserver.

Däremot lyckades jag inte installera node_modules på mitt utrymme på studentserver, utan kopierade över mappen från min localhost. I HTML-koden lade jag in en select/option-lista, så att man kan välja olika anslutningar. Eftersom min ssh-anslutning dör efter ett tag (och min webserver där slutar fungera), så kan man även ansluta till dbwebb.se port 1337.

Vilka möjligheter ser du med HTML5 Websockets?
Websocket är ett ypperligt sätt att skicka meddelanden mellan klienter och server med hjälp av node.js. Eftersom den har full duplex (kan skicka meddelanden fram och tillbaka, oberoende av varandra), så fungerar det utmärkt att t.ex. skapa en chat applikation, där flera användare kan skicka meddelanden samtidigt.

Vad tycker du om Node.js och hur känns det att programmera i det?
Node.js var en trevlig bekantskap. För mig påminner det mycket om AJAX och det är det väl också på sätt och vis, då det är Javascript och asynkront, men körs på Server-sidan!

Beskriv hur du löste echo-servern och broadcast-servern.
Jag kan inte påstå att jag löste några problem själv. Jag har utgått från Mos kod. Däremot så modifierade jag koden för att använda ”min” port på studentservern. Jag installerade också node_modules/websocket för att kunna kommunicera från min port.

Beskriv och berätta om din chatt. Förklara hur du byggde din chatt-server och förklara protokollet.
Jag utgick från broadcast-server scriptet och broadcast-protokollet. Alltså ganska likt broadcast- och echo-servern.

Jag gjorde det inte mer avancerat än så, fast jag kollat tutorials på hur man kan installera och använda node-moduler som express, socket.io och jade. Kan tänka mig att utforska detta i framtiden, för detta kursmoment är maffigt som det är!

Gjorde du något på extrauppgiften?
Jag förfinade chatten en hel del med Javascript. Bland annat så valideras input-fälten och feedback ges till användaren vid varje knapptryckning. Fält och knappar görs inaktiva för att tydliggöra vad man kan göra. Jag gjorde även en mindre funktion för att rensa chatthistoriken. Alltså jobbade jag en hel del med användarvänligheten, men ingen IRC.

Övningar jag gjorde

Kmom05: HTML5 och Canvas

Liksom tidigare, började jag med att göra Mos övningar. Canvas-övningen var riktigt kul. Eftersom det trots allt är en Javascript-kurs, så lade jag till en del små Javascript-manipuleringar i övningarna.

Vilka möjligheter ser du med HTML5 Canvas?
Canvas ser jag som väldigt användbar för att rita grafik på. Väldigt smidigt att det är en egen liten ”spelplan” med eget koordinatsystem. Jag läste på lite och förstår att man kan rensa canvasen mellan varven men kom inte på hur man ska göra / fick det inte att fungera. Jag gillar också att man kan kombinera grafik och text i samma element på det sätt som är möjligt.

Hur avancerat gjorde du din spelfysik (om du överhuvudtaget har någon i ditt spel)?
Hmm, jag har nog inte planerat strukturen, eller fysiken överhuvudtaget, se punkten nedan.

Beskriv och berätta om ditt spel. Förklara hur du använder objekt och prototyper.
Jag hade jättesvårt att komma igång med spelet och har kollat ett flertal tutorials om HTML5-spel. Spelet jag till slut gjorde är baserat på en sådan tutorial: Pong av Max Wihlborg, på Youtube. Lyckligtvis lyckades jag koda / göra ändringar, en hel del själv också. Objekten i spelet är nog skapade enligt prototyp-modellen, då Javascript skapar objekt på det viset. Tyvärr valde jag inte ett jättebra spel för att öva att skapa nya objekt, men förstår helt klart principen! I övrigt är det en del extrafunktioner i spelet, såsom poängberäkning, hälsobarometer och jag gjorde en funktion för att öka / minska hastighet på bollen. Tog dock bort den, då jag inte fick den att fungera som jag tänkt.

Gjorde du något på extrauppgiften?
Jag lade in fyra olika ljud i <audio>-taggar som jag satte igång med Javascript. Det var lite trixigt att få ljuden att spela vid rätt tillfälle, och det fungerar inte klockrent heller i varje webbläsare.

Kmom04: AJAX och JSON med jQuery

Det här momentet var inte att leka med! Allt har tagit så väldigt lång tid och det har inte varit helt enkelt att hänga med i alla svängar. Jag har börjat jobba direkt mot studentservern för att spara tid, där jag förut utvecklade lokalt — för att sedan lägga över på studentservern.

Vad tycker du om Ajax, hur känns det att jobba med?
Ajax är genialt att använda och med jQuery är det inte så tungjobbat som det kan vara med PHP utan Ajax. Jag har inte kommit över tröskeln för att skapa helt egna saker, fast jag läst boken. För mig tar det lite tid att få allt att fastna, jag måste upprepa allt många, många gånger.

Vilka är dina erfarenheter av Ajax inför detta kursmoment?
Jag har gjort en övning med PHP och Ajax som del av en tidigare kurs och tyckte det var väldigt svårt att förstå hur man använder det med XMLhttp-objekt. Men jag måste som sagt göra saker flera gånger, och nu ser jag ju hur mycket enklare det är med Ajax :)

Berätta om din webbshop på din me-sida, hur gjorde du?
Integreringen på min ME-sida gick väl inte sådär lysande. Jag gjorde detta moment sist, och upptäckte alltför sent att det inte fungerade att rita ut sidan (sidorna) med php, efter upplägget jag gjort med min ME-sida upplagd efter HTML5 Boilerplate.

Jag inser att det hade varit bättre att rita ut HTML med jQuery eller i vart fall med vanlig Javascript. Jag har jobbat så jäkla mycket med webshopen nu, så jag hårdkodade helt enkelt HTML-koden. Inte den elegantaste lösningen, men det får bli så...

Lyckades du göra extra-uppgiften och paketera din kod?
Jag har paketerat koden så pass mycket att man kan implementera den på en webbsida genom att ladda ner paketet från GitHub och inkludera hela paketet på sidan. Kanske inte på ett sådant sätt som det var tänkt, som extrauppgift, men fullt användbart!

”Paketet” fick en egen webbplats, liknande pluginen i Kmom03, se länkarna nedan.

Exempelprogram jag gjorde
Marvin's vishet
Detta var en bra introduktion till att använda json-data tillsammans med jQuery.

Logga in med Ajax och PHP session
Intressant övning med ajax och sessioner. Använder Mos kod, men går igenom rad för rad vad som händer.

Kundvagn med jQuery och Ajax
Artiklarna i webshoppen lade jag in i en associative array i egen fil (content.php) som jag kan återanvända både i presentationen av böckerna och i kundvagnen.

Checkout med Ajax
Koden här skiljer sig inte nämnvärt från Mos. Jag använder CForm-klassen för att göra betalformuläret, men gör lite egna justeringar.

Kmom03: Grunderna i jQuery

Ytterligare ett tufft kursmoment! Det var roligt men väldigt tidskrävande.

Vad tycker du om jQuery, hur känns det?
jQuery känns väldigt smidigt, men jag hade svårt att hålla mig till jQuery-syntax. Allt som oftast gled jag över i Vanilla Javascript, vilket känns lite onödigt. Jag hade lite problem att förstå och få min plugin att fungera, trots att jag lästa boken. Tjuvkikade lite på andras inlämningar och insåg att det var själva triggern jag saknade. Det räckte inte att bara skriva funktionsnamnet, utan funktionen måste triggas igång på ett objekt. Jag kan ha missuppfattat, men jag fick i alla fall ihop allt till slut.

Vilka är dina erfarenheter av jQuery inför detta kursmoment?
I de nio små exemplen experimenterade jag en del. Jag gjorde inte exakt som mos, utan gjorde en del utsvävningar. Med funktionen toggle() visas och döljs all kod för exemplet. Pluginen i paket nio blev en enkel hover-effekt där bilden ändras. Jag hade inge större problem att följa alla exempel och det blev en del små nyttiga paket :) Min erfarenhet så här långt är att det snabbt går att göra avancerade funktioner med jQuery, som skulle ta mycket längre tid att göra i Javascript.

Berätta om din plugin.
Jag gjorde två olika pluginer. Den första, för paket nio, ändrar utseendet på bilder när man hovrar över dem. Den blev lite för simpel för att ha som plugin-övningen, men rätt kul att göra ändå. Programsnutten får hamna i min vanja.js — bra funktioner att spara.

I plugin-övningen jobbade jag fram en slideshow med en horisontell accordion-effekt. Jag jobbade en hel del med att instruera hur pluginen kan användas och anpassas efter behov. Den finns att laddas ner från GitHub. Bara det var en liten utmaning, att skapa nytt repo i GitHub ;) Mycket bra övning!

Kmom02: Programmera med Javascript

Det här momentet var mäktigt men roligt. Jag gick igenom alla uppgifter och övningar och hade inga större problem att förstå och hänga med.

Jag utgick för det mesta från mos kod, annars skulle det inte finnas en enda chans för mig, att hinna med alltihop. Dock skrev jag egen kod på många ställen och/eller modifierade koden.

Berätta vilka exempelprogram du gjorde och länka till dem.
Literaler och identifierare
Detta program skrev jag själv, genom att titta på det färdiga resultatet. Tjuvkikade på mos för att få med allt.

Nummer — datatyper och värden
Detta program skrev jag själv.

Strängar — datatyper och värden
Detta program skrev jag själv.

Kasta tärning med funktioner
Nu blev det lite svårare, fick tjuvkika en hel del, men skrev det mesta själv (alltså inte copy/paste).

Putta bollen
Här copy/pastade jag, bara för att få med exemplet. Jag gjorde en röd och fin boll. I övrigt kan jag inte göra extrauppgiften, då jag inte använder någon mus. Hoppade helt enkelt över det extra.

Boulder dash med arrayer
Utgick från mos kod när jag gjorde denna övning. Lade in min egen baddie och gjorde en spelplan à la Zelda. Det går att gå igenom labyrinten, men man måste hitta en eller ett par ”lönndörrar” för att komma till köttstycket. Jag skulle ha velat utveckla spelet med events, men det fanns ingen tid i världen att göra detta.

Datumhantering med Date
Övning jag gjort själv. Skapar och använder objektet Date, med en klocka t.ex.

Reguljära uttryck med RegExp
Här har jag skapat ett program som validerar inmatad e-postadress.

Felhantering med Error
Här har jag utvecklat mos kod för error-hantering. Tryck på knapparna och ta upp konsollen för att köra detta.

Animera med setTimeout()
Här har jag utvecklat mos kod och gjort så att javascript ändrar bakgrundsfärg i flash-diven, samt ändrar texten i knappen. Löste det med två arrayer med samma längd som loopas samtidigt.

Spela roulette med JavaScript funktioner
Här är programmet jag ändrat mest. Förbättrade genom att förhindra spel om man inte har några pengar i potten (som i övrigt är read-only). Å andra sidan gjorde jag en ”fylla-på-knapp” att fritt använda ;) En annan förbättring är att det endast går att köra ett spel i taget (gör alltså knappen ”disabled” så länge spinnen går).

Vilka funktioner har du lagt i din variant av mos.js?.
Förutom random(min, max) från mos.js, lade jag till funktionen som skapar en klocka och funktionen som validerar e-postadresser. Här är vanja.js.

Kmom01: Kom igång med Javascript

Det tog ett tag innan jag kom igång med denna uppgift. Jag försökte integrera hela lekplatsen och dess filer i själva webbplatsen men gav upp när det visade sig att det skulle bli alldeles för krångligt att utföra. Jag använde i alla fall HTML5 Boilerplate från phpmvc-kursen för själva grunden.

Jag har använt LESS, men inte fullt ut kanske. Jag ser många fördelar med LESS och är sugen på att lära mig node.js. Jag har kikat på mos kod men även skrivit egen.

Vilken utvecklingsmiljö använder du?
Jag sitter på en MacBook Pro / OS X 10.9.1 Mavericks, med editor Sublime Text2, Firefox med Firebug och FileZilla för FTP-överföring. Jag använder även MAMP som webserver-programvara.

Hur väl känner du till JavaScript?
DOM-manipulering med vanilla JavaScript har jag läst tidigare, och är nu jättesugen på att lära mig att använda events och liknande. jQuery har jag nosat på.

Vilken uppfattning har du om JavaScript så här långt?
JavaScript är otroligt användbart och jag använder det hela tiden när jag pular med webbsidor. Jag ser JavaScript som en stark kandidat till meritlistan när man ska jobba med webbutveckling.

Berätta vilka exempelprogram du gjorde och länka till dem.
Det var väl självklart att man skulle göra alla exempel från introduktionen ;)

Här är mitt fiddle som jag skapat, finns även i menyn.

Beskriv hur du gjorde din baddie och vilka konster den kan.
Jag laddade ner Tux från exempelsidan och modifierade honom i inkscape och Photoshop. Skapade även en helt egen katt-baddie på samma sätt.

Gjorde du extrauppgiften och utbildade din baddie med något extra?
Båda mina baddies kan alla mos konster, men Gordon the cat lekte jag lite med. Han kan göra kullerbytta och spela död (bara en ny vy i bilden och en ny background-position). Tux demonstrerar extrauppgiften: en saltomortal.

Detta kursmoment var väldigt givande. Återigen en bra start på kursen!