Teknikken bag en Facebook konkurrence

On November 29, 2011, in Software, by Jarlskov

I sidste uge lancere min arbejdsplads en konkurrence hvor man kan vinde en skiferie. For at sprede ordet valgte vi bl.a. at dele konkurrencen på Facebook. I forbindelse med Facebookdelen rendte jeg ind i et par problemer som jeg havde svært ved at finde dokumenteret online. Konkurrencen blev oprettet som en facebook page app, som den ses her.

Facebooksiden

Facebooksiden i sig selv var ikke et stort problem. Jeg lavede en app på Facebook Developers siden. Dette giver en række muligheder, bl.a. muligheden for at vælge hvordan din app skal integreres med Facebook.

Integrer din app med Facebook

Integrer din app med Facebook

For at kunne bruge applikationen som et element på en Facebook page, vælges “page tab”. Teknisk fungerer det ved at du selv hoster din app, som en almindelig html side, der så indlejres på din Facebook Page, i en iframe. En page tab har 4 indstillinger:

  • Page Tab Name – Den navn din app skal have i page menuen
  • Page Tab URL – Den side Facebook skal integrere i sin iframe
  • Secure Page Tab URL – En HTTPS-version af den side der skal vises på Facebook
  • Page Tab Edit URL – Link til din app’s admin modul. Jeg skippede dette, da mit projekt ikke havde behov for customization

I følge Facebook selv har mere end 9.6mio brugere valgt kun at kunne tilgå Facebook via https. Hvis du ikke har tilføjet en HTTPS-version af din app vil alle de mennesker hverken kunne se eller bruge din app.

Et af de problemer jeg kæmpede mest med, var at gøre det muligt for folk at dele appen med deres venner. Ikke fordi det var svært rent kodemæssigt, men jeg fandt ud af at det kræver at appen udover at være oprettet som ‘page tab’ som forklaret ovenfor, også kræver at den er lavet som en normal ‘app on facebook’ (se billede ovenfor). Når du vælger ‘app on facebook’ får du 2 indstillingsmuligheder. Canvas URL, og Secure Canvas URL. Et Facebook app canvas fungerer på samme måde som en Facebook page tab, bortset fra at det er en selvstændig app, og ikke tilknyttet en page. Da jeg ikke havde brug for en selvstændig app valgte jeg at lave mine canvas URLs pege på en tom side, der kun bestod af et JavaScript redirect, til min page tab.

Selve appen

Da opsætningen var på plads var der bare tilbage at lave selve appen. Det sker som nævnt tidligere vha. html, css og javascript, og der er altså ikke meget magi her. For at få adgang til Facebooks funktionalitet, skal Facebook SDK’et loades.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="fb-root"></div>
<script>
	(function(d){
		var js, id = 'facebook-jssdk'; 
		if (d.getElementById(id)) {return;}
		js = d.createElement('script'); 
		js.id = id; 
		js.async = true;
		js.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
		d.getElementsByTagName('head')[0].appendChild(js);
	}(document));
 
	window.fbAsyncInit = function() {
		FB.init({
			appId: 'YOUR-APP-ID',
			status: true,
			cookie: true,
			xfbml: true,
		});
	}
</script>

Linjen:

1
js.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";

kan bruges til at styre hvilket sprog Facebooks ting skal vises på. Tilgængelige sprog kan findes i Facebook’s Locale XML.

Nu er der adgang til Facebooks funktionalitet via. Javascript. I dette projekt blev det brug til 2 ting. Først skal der være mulighed for at folk kan dele appen med deres venner:

1
2
3
4
5
6
7
8
9
function tellafriend() {
	FB.ui({
		method: 'apprequests',
		message: 'Hvilken besked skal folk sende til deres venner?',
		title: 'Overskrift.'
	}, function (response) {
		poststory();
	});
}

Den sidste del:

1
2
3
function (response) {
	poststory();
}

Sørger selvfølgelig for at funktionen poststory() kaldes så snart folk har valgt hvem af deres venner de gerne vil dele appen med. Det er også muligt at trykke cancel og på den måde ikke dele med nogen, poststory() vil dog stadig blive kaldt.
Formålet med poststory() er at lade folk poste et link til appen på deres egen væg:

1
2
3
4
5
6
7
8
9
10
11
12
function poststory() {
	FB.ui({
		method: 'feed',
		name: 'Overskrift på vægopslaget',
		link: 'Link der skal deles',
		picture: 'link til billede der skal inkluderes på opslaget',
		caption: 'Billedetekst.',
		description: 'Brødtekst på indlægget'
	}, function(response) {
		redirectuser();
	});
}

Efter poststory() kaldes funktionen redirectuser(), som vha. et normalt Javascript redirect videresender brugeren til vores egen konkurrenceside.

Jeg håber indlægget kan hjælpe med at komme udenom nogen af de små fælder jeg selv rendte ind i :-)
Husk i forbindelse med konkurrencer at overholde Facebook’s egne regler for konkurrencer. Ellers kan det blive en kort fornøjelse. Kasper Blom har skrevet en god kort opsummering af konkurrencereglerne.

Tagged with:
 

Hvorfor en LAMP-server på sin Ubuntu desktopmaskine?

Det kan måske virke underligt at man skulle have lyst til at installere servermoduler på sin arbejdsmaskine. “Servermoduler hører da til på serveren”, og det er da også til dels rigtigt. Men der kan være mange gode grunde til også at have servermoduler på sin arbejdsmaskine.
Min egen grund til at gøre det er at jeg programmerer hjemmesider og webapplikationer i det sprog der hedder PHP. Det er et server-side programmeringssprog, hvilket vil sige at koden bliver afviklet på serveren, i stedet for på klienten, altså i brugerens internetbrowser, på samme måde som JavaScript f.eks. gør det.
Dette betyder at når jeg skal teste de ting jeg har programmeret bliver jeg nødt til at ligge dem på en webserver, for at kunne se hvordan serveren reagerer på koden, og for at se hvordan outputtet (hjemmesiden) kommer til at se ud. Dette vil normalt betyde at jeg skal have fat i mit FTP-program, for at ligge alle de sider jeg har ændret på, op hos min webhost, tilgå hjemmesiden og se resultatet.
Hvis jeg derimod har en webserver kørende på min produktionsmaskine har jeg ikke behov for andet end at have en browser åben der peger på min egen maskine. Når jeg så har ændret i koden skal jeg bare gemme dokumentet og refreshe siden i browseren for at se resultatet af ændringen. Dette giver mig mulighed for at teste meget hurtigere, og meget oftere da jeg ikke skal spilde så meget tid på det, og jeg kan så nøjes med at ligge siden ud til min host når jeg mener jeg har lavet en tilpas stor ændring, samt sikret mig at siden virker som den skal.

Artiklen kan måske virke lidt overvældende, men installationen og opsætningen i sig selv kan klares ved bare at kopiere de kommandoer jeg har angivet igennem artiklen, og vil normalt ikke tage mere end et par minutter. Jeg har dog anstrengt mig for at forklare alt hvad jeg gør igennem processen, for at give alle en mulighed for at være med, uden at behøve frygte for om deres maskine pludselig bliver ukampdygtig.

Installation

Men hvordan foregår installationen af denne lampe så? Jo, som overskriften fortæller står LAMP for Linux, Apache, MySQL og PHP.
Selve Linuxinstallationen vil jeg ikke komme ind på, da dette egentlig er en guide henvendt til Linuxbrugere, og jeg vil derfor antage at Linux allerede er installeret og virker. Desuden benyttes APT der er systemet til Programhåndtering i Ubuntu. Guiden er altså henvendt til brugere at Ubuntu og de afarter der findes, og jeg vil gætte på at den også virker med storebroderen Debian, der også bruger APT, men ikke nødvendigvis på de mange andre Linuxversioner der findes.

Installation af Apache

Apache er selve webserveren. Det er den del der reagerer på forespørgsler udefra, og bestemmer hvordan de skal håndteres. Hver gang du går ind på en hjemmeside står der altså en webserver og bedømmer om du er kommet for at se en hjemmeside, eller for at sende en e-mail, eller noget helt tredje.
Apacheserveren findes i Ubuntus standard repositories og kan derfor installeres fra terminalen med kommandoen:

sudo aptitude install apache2

Let og enkelt. Efter installationen er fuldført kan du åbne en browser og gå til localhost som er standardadressen på din egen maskine, for at checke at det virker efter hensigten.
som standard viser apache det website der findes i /var/www på din computer, så indtil videre kan du ændre i de filer der ligger her, eller ligge dit eget website her for at få det vist. Jeg vil senere komme en lille smule ind på hvordan man opsætter og styrer sin apacheserver.

Installation af PHP5

PHP er det “program” der oversætter PHP-kode til kode som computeren kan køre, og til sidst til kode som webserveren kan præsentere for den besøgende på siden. Dette findes selvfølgelig også i Ubuntus repositories, ydermere installerer vi “libapache2-mod-php5″ som er et modul der sørger for at få din apacheserver til at virke sammen med PHP. Det er jo en fordel at tingene kan snakke sammen :-)

sudo aptitude install php5 libapache2-mod-php5

Herefter burde du kunne smide din PHP-kode i apache’s standardbibliotek /var/www og se resultatet ved igen at tilgå localhost.

Installation af MySQL

Det sidste vi skal have installeret er MySQL.
Dette er en gratis Open Source database der pga. sin pris er et meget populært valg blandt PHP-programmører. Oftest vil de fleste webhosts der tilbyder PHP-hosting, tilbyde det sammen med adgang til en MySQL database, så jeg mener dette er et godt valg til projektet.
Der er jo heller ingen grund til at gøre tingene sværere end højst nødvendigt, så MySQL findes selvfølgelig også i Ubuntus repositories. Databasen installeres altså vha.:

sudo aptitude install mysql-server php5-mysql

Under installationen vil du blive bedt om at udfylde kode til root-brugeren, dette kan klart anbefales da du ellers vil sidde med et gabende sikkerhedshul i din database.
Herefter kan det anbefales at tilknytte nogle brugere og give dem adgang til databaserne enkeltvis, i stedet for hele tiden at bruge root-brugeren, men dette vil jeg komme ind på i næste afsnit af artiklen.
Da PHP5 ikke er indstillet til nogen bestemt version af MySQL, på samme måde som PHP4 var, skal vi lige sørge for at PHP og MySQL kan arbejde sammen. Vi skal altså have PHP til rent faktisk at lede efter vores database. Dette gør vi ved at ændre i PHP.ini filen. Det er en almindelig tekstfil, så det kan klares med ethvert tekstediteringsprogram, jeg bruger nano:

sudo nano /etc/php5/apache2/php.ini

Find den del af filen der hedder “Dynamic Extension”, og tilføj linjen:

extension = mysql.so

Så skulle PHP5 og MySQL kunne arbejde sammen. Hvis det ikke virker allerede nu, vil det nok hjælpe at genstarte Apacheserveren.

Opsætning og sikkerhed

Efter vi har fået installeret vores LAMP-server er det på tide med noget grundlæggende opsætning, og nogle få kommandoer til at styre serveren.

Opsætning af Apache

Apache’s konfigurationsfil findes i /etc/apache2/apache2.conf
Vi kan f.eks. åbne denne med terminalens skriveprogram “nano”. Da det kun er root-brugeren der har skriveadgang til /etc skal vi huske sudo hvis vi skal ændre i filen.

sudo nano /etc/apache2/apache2.conf

I denne fil kan det meste af serverens opsætning ændres. Det skal man dog være lidt påpasselig med, da selv små fejl kan få hele serveren til at gå i gruset. Det kan derfor anbefales at man tager en back-up af filen inden man begynder at ændre i den. Det kan bl.a. gøres med

sudo cp /etc/apache2/apache2.conf /etc/apache2/apache2.conf.backup

Dette gemmer en backup i filen /etc/apache2/apache2.conf.backup . Hvis man så får lavet en fejl og ønsker at restore denne backup gøres det bare med:

sudo cp /etc/apache2/apache2.conf.backup /etc/apache2/apache2.conf

I denne fil kan man lave mange ændringer til serveren, man kan bl.a. sætte generiske fejlsider til 404-fejl (siden ikke fundet) osv.
Hver gang man har lavet ændringer i konfigurationen skal serveren genstartes, man behøver heldigvis ikke genstarte hele maskinen, men kan nøjes med at genstarte apache med kommandoen:

sudo /etc/init.d/apache2 restart

På samme måde kan apache startes og stoppes efter behov med hhv.

sudo /etc/init.d/apache2 start

og

sudo /etc/init.d/apache2 stop

Opsætning af MySQL

Det er også værd at kigge lidt på hvordan ens database er sat op, jeg tænker her især på hvilke brugere der har adgang, og hvad de har adgang til osv.
For at starte mysql programmet bruges bare

mysql

Fra starten af er der dog ikke mange muligheder, da det kun er root der har administratorrettigheder som standard. Flaget -u kan bruges til at starte mysql med en anden bruger end den man er logget på maskinen med, og hvis man satte et password under installationen (hvilket man forhåbentlig gjorde) bruges flaget -p til at vise at man ønsker at benytte password til logon. Så hvis du skal logge ind med root, og vha. et password skal du altså bruge

mysql -u root -p

Hvorefter du vil blive bedt om koden.
Bemærk at terminalens normale “user@host:~$” udskiftes med “mysql>” når mysql kører.
Her kan du så vha. normal SQL oprette databaser og tildele rettigheder osv. for god ordens skyld gennemgår jeg lige det vigtigste.
Da min plan er at lave en form for projekt management værktøj, laver jeg en database med et passende navn.

create database projectmanager;

Jeg vil så give brugeren “user” adgang. For god ordens skyld vælger jeg at der skal logges på med et kodeord, det sættes dog for eksemplets skyld til “password”. Det skrives i mysql som:

grant usage on *.* to user@localhost identified by ‘password’;

“user” har nu adgang til mysql med koden password. Nu skal han bare have adgang til projectmanager-databasen. Det gøres med:

grant all privileges on projectmanager.* to user@localhost;

Nu har “user” altså ALLE rettigheder til den ene database.
Hvis jeg så logger ud af mysql med:

quit

Kan jeg nu logge ind som user med kommandoen:

mysql -u user -p

og lege med databasen “projectmanager”.

Valgfri:Installation af PHPMyAdmin

Det er ikke alle der er lige glade for at håndkode deres SQL, og hvis man kun har MySQL-programmet som værktøj forstår jeg det udemærket godt. Der findes derfor et webbaseret userinterface til at administrere databaserne på databaseserveren, ved navn PHPMyAdmin. Jeg tror de fleste der har rodet med PHP og MySQL er bekendte med dette værktøj.
Vi er så heldige at dette værktøj, ligesom alt andet man nogensinde får brug for ;-) , findes i Ubuntu’s repositories. Det installeres altså med:

sudo aptitude install phpmyadmin

Når det er installeret skal vi lige sørge for at apache kan finde det. Dette kræver at vi ændrer i apache’s konfiguration, så igen åbner vi konfigurationsfilen i vores yndligs teksteditor, i dette tilfælde er nano dejligt belejligt. Husk super-user adgang (sudo).

sudo nano /etc/apache2/apache2.conf

Nederst i filen findes nogle linjer med henvisninger til forskellige biblioteker på maskinen som apache skal benytte sig af, altså inkludere. Hertil tilføjer vi phpmyadmin ved at tilføje linjen:

Include /etc/phpmyadmin/apache.conf

Herefter gemmer vi konfigurationen og restarter apache, og så skulle alt gerne spille.

Jeg håber det har været en brugbar artikel, og jeg håber på tid og mulighed for at skrive mere af samme skuffe i fremtiden. Forhåbentlig bliver der ikke så lang tid imellem mine indlæg som der hidtil har været.

Og husk, hvis du er kommet til at lave en fejl i den sidste del så apache nu ikke længere har lyst til at restarte, er det jo godt at du har taget backup af konfigurationen ;-)

Tagged with:
 

For et stykke tid siden indetroducerede min ven Mads Ravn mig for sitet: projecteuler.net. Det en en side der indeholder en lang række små programmeringsopgaver, af matematisk karakter.
Folkene bag sitet beskriver det selv som:
Project Euler is a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve. Although mathematics will help you arrive at elegant and efficient methods, the use of a computer and programming skills will be required to solve most problems.

Sitet indeholder ca. 200 opgaver af matematisk karakter, der allesammen kan besvares med et tal. Der så bruges som svar, på opgavesiden. Et eksempel på en af de lettere opgaver kunne være:
If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
Find the sum of all the multiples of 3 or 5 below 1000.

Man skal altså finde alle tal mellem 0 og 1000 der kan divideres med enten 3 eller 5, og have 0 som rest. Alle disse tal skal så summeres, og man har resultatet på opgaven. Dette resultat skal indtastes i en boks på opgavesiden, og du vil herefter få at vide om resultatet er rigtigt.
Et eksempel på en lidt sværere opgave kunne være nr. 189 hvor man har en trekant, opbygget af 64 mindre trekanter, disse små trekanter skal alle farves med en af tre farver. Hvor mange forskellige muligheder har man for at kombinere de tre farver, hvis to nabotrekanter ikke må have den samme farve?

Når man har besvaret en opgave korrekt får man adgang til er forum hvor den enkelte opgave kan diskuteres, her kan man bl.a. diskutere kode og optimering af denne.
Der bliver holdt styr på hvor mange opgaver du har klaret (Jeg har pt. klaret 15 ud af 202 opgaver), samt at det er muligt at finde statistikker for andre brugere enten ud fra hvor mange opgaver de har løst, eller ud fra hvilket land de kommer fra. F.eks kan jeg se at der pt. er 148 danske brugere, og den dansker der har løst flest opgaver er troels, der har løst 148 opgaver, og bruger programmeringssproget Haskell, til det.

Personligt synes jeg det er nogle sjove små opgaver der udfordrer og tvinger dig til at tænke på alternative løsninger til problemer. Det er god træning hvis du godt kan lide at programmere, og det er på mange måder lærerigt. Så hvis man kan lide at programmere og/eller matematiske udfordringer vil jeg klart anbefale at oprette en profil og kigge lidt på det. Det kunne være man kunne lære noget :-)

Tagged with: