Examensarbete. Socibuy. Martin Lindberg Ämne: datavetenskap Nivå: B Kurskod: 1DV40E

Examensarbete Socibuy Martin Lindberg 1980-08-27 Ämne: datavetenskap Nivå: B Kurskod: 1DV40E

Abstrakt Privat annonsering har flyttats från dagspress till nätet vilket har bidragit till bättre sökfunktioner och rikare beskrivning. Då tiden vi spenderar på nätet ökar så öppnar det för att kunna kommunicera i realtid med användare som är online. Tyvärr finns det ingen bra tjänst idag för att kunna kommunicera på något annats sätt än telefon och e-mail. För att skapa ett rikare sätt att kommunicera så skapade jag denna tjänst som gör det möjligt för användare att föra olika konversationer. För att öka säkerhet mellan både säljare och köpare har det skapats betygsättning och att användare registrerar personuppgifter för kontroll av den andra parten. Detta arbete har varit av stort eget intresse för att öka kommunikationsmöjligheterna mellan människor. De tekniker som jag använt har bestått av PHP ramverket Codeigniter som bygger på MVC. För presentation har jag jobbat mycket med jquery och CSS för att skapa de effekter som jag velat åstadkomma. För lagning har jag använt MySQL. Resultatet blev en sida som är en annonssida med den funktionalitet som en Community har. Författare 1, Författare2, etc. - I -

Abstract Private advertising has shifted from newspapers to the internet which has contributed to better search tools and richer description. Since the time we spend online is increasing rapidly it makes for an opportunity to be able to communicate in real time with other users. Unfortunately there is no good service today that enables communication in any manner other than telephone and e-mail. To create a richer way to communicate I created this service that allows users to start different conversations. To increase the security of both the seller and the buyer I have created a ratingsystem and added the requirement for users to register their personal data for the control of the other party. This work has been of great interest to me to increase the opportunities for communication between people. The techniques I used are the PHP framework CodeIgniter based on MVC. For presentation, I have worked a lot with jquery and CSS to create the effects I wanted to achieve. For data persistance I've used MySQL. The result was a page that is an advertisement page with the functionality of a community. Författare 1, Författare2, etc. - II -

Förord Att sälja och köpa begagnade prylar på nätet har länge varit aktuellt. Men dock har det inte funnits några sidor med integration av de sociala tekniker som idag finns för att kommunicera via en online publik. Med sociala tekniker menar jag exempelvis chatfunktionalitet och online status. Detta har varit mitt driv där sidors innehåll skapas av användare och med snabb kommunikation mellan säljare och köpare. Så för min del såg jag en möjlighet att lösa mina och många andras problem med rikare kommunikationsmöjligheter. Jag vill tacka min handledare Daniel Toll för mycket god handledning och med sitt positiva arbetssätt bidragit till ett trevligt arbete. Familj och vänner har även bidragit med kommentarer av arbetet. Författare 1, Författare2, etc. - III -

Innehållsförteckning Abstrakt...I Abstract...I Förord...III 1. Introduktion...1 2. Bakgrund... 2 2.1 Avgränsningar...2 2.2 Målgrupp...2 2.3 Jämförelse av liknande tjänster...3 2.3.1 Blocket...3 2.3.2 Eniro köp och sälj...4 2.3.3 Tradera...5 3. Mål... 6 3.1 Funktioner...6 3.1.1 Annonser....6 3.1.2 Säljarens vy...6 3.1.3 Köparens vy...6 3.1.4 Community...6 3.1.5 Skapa samtal...6 4. Genomförande... 7 4.1 Metod...7 4.1.1 Arbetsupplägg...7 4.1.2 Kodstandarder...7 4.1.3 Model-view-controller vem har gjort detta...7 4.1.4 Tekniker...8 4.1.5 Programvara...9 4.2 Metoddiskussion...9 Författare 1, Författare2, etc. - IV -

5. Resultat...10 5.1 Funktioner... 10 5.1.1 Community... 10 5.1.2 Annons... 12 5.1.3 Kommentera... 13 5.1.4 Fråga... 13 5.1.5 Meddelande inkorg... 14 5.1.6 Skapa samtal... 15 6. Diskussion...16 7. Källförteckning...17 7.1 Elektroniska källor... 17. Författare 1, Författare2, etc. - V -

1. Introduktion Sedan internet kom har det funnits tjänster för att kunna sälja produkter och köpa produkter på den privata marknaden. En nackdel med befintliga tjänster är att kommunikation endast sker via e-mail och telefon. E-mail kan ta timmar att få svar på och att inte veta om det är rätt tillfälle att ringa kan skapa problem mellan köpare och säljare. Då vår närvaro ökar på nätet så finns det möjlighet att skapa en direkt kommunikation mellan säljare och köpare då båda parter är uppkopplade samtidigt. Att kunna se vilka personer som är inloggade och tillgängliga för diskussion uppmanar båda parter till mer samtal. Det skall vara logiskt att man kan kommentera eller ställa fråga direkt i koppling till annonser. Syftet med arbetet är att skapa en tjänst som kommer att öka kommunikationshastigheten mellan köpare och säljare genom att ge möjlighet för köpare att identifiera om säljare är uppkopplad. Och sedan kunna ställa frågor med direkt svar. 1

2. Bakgrund Innan Internet var så utbrett som det i dag är så sköttes mycket av privat annonsering via dagstidningar. Men då internet blev mer utbrett för allmänheten så dök olika tjänster upp för försäljning av privat egendom. De tjänster som finns på marknaden idag är väl utvecklade men har en begränsning. De kräver kommunikation via e-mail eller telefon vilka båda kan vara tidskrävande. Då vi är allt mer uppkopplade så finns det ett behov för att öka hastighen på kommunikation parter mellan. Tjänsten som kommer att utvecklas skall bli en del av en köp/sälj begagnat community. En snabbare och enklare kommunikation mellan köpare och säljare skall skapa ett mervärde för båda. Även att kommunikationen görs via samma websida skall skapa en mer sammanhängande känsla av kommunikationen. 2.1 Avgränsningar Arbetet skall resultera i att kommunikationshastigheten ökar för både säljare och köpare. En annons skapas av säljaren och då säljaren är tillgänglig så visas detta på annonsnivå. Störst fokus kommer att läggas på att upprätta kommunikation mellan parterna och skapa realtidsuppdaterat svar. Tidsbegränsning för arbetet gör att en avgränsning i antalet funktioner skapas. Dessa funktioner skall dock vara väl testade och väl fungerande. 2.2 Målgrupp Målgruppen består av privatpersoner ifrån ungdomar upp till pensionärer som har ett behov av att sälja och köpa begagnade produkter. Dessa användare är fördelade på båda könen och varierande utbildningsnivå. Användaren har medelgod till hög internetvana. 2

2.3 Jämförelse av liknande tjänster Det finns ett antal hemsidor som idag används för att sälja och köpa produkter på nätet. Det finns två typer av tjänster för privat försäljning via internet den ena är en annonssida där direkt köp kan göras av köparen, den andra är en aktionstyp med utsatt datum då auktionen avslutas. 2.3.1 Blocket Figur 1. Annons på Blocket Blocket grundades 1996 av Henrik Nordström och är idag Sveriges största köp och sälj webbplats. Här lägger säljare upp en annons med begärt pris och när en köpare hittar en produkt som den vill ha så skapas en kommunikation med hjälp av e-mail eller telefon. Då parter är överens så genomförs köpet. Det finns inget som kan styrka om det är en seriös säljare i form av betyg. Även säljaren får dålig information om det är en seriös köpare. 2.3.1.1 Begränsning Det går inte att avgöra om personen är tillgänglig för frågor om produkt. Långsamt kommunikationssätt med e-mail och osäkert då det finns många oseriösa säljare och köpare. Det saknas även funktionalitet för att rapportera om oseriösa säljare eller köpare. 3

2.3.2 Eniro köp och sälj Figur 2. Annons på Eniro köp och sälj. Bygger på en internettjänst vid namn Gula tidningen som köptes 2004 och som då integrerades med Eniro. De kommunikationssätt som finns här är e-mail och telefon men även en tipsfunktion via olika sociala tjänster. Exempel på sociala tjänster som stöds är Facebook, Twitter och Myspace. Det finns inget som kan styrka om det är en seriös säljare i form av betyg. Även säljaren får dålig information om det är en seriös köpare. 2.3.2.1 Begränsningar En tipsfunktion skapar ett kommunikationssätt för att få tag på en lämplig köpare. Men det går inte att få reda på om denna är inloggad på någon av dessa sociala tjänster. Tipsfunktionaliteten skapar dock ytterligare en kanal för att kunna kommunicera. 4

2.3.3 Tradera Figur 3. Annons på Tradera Startades av Kaplands Auktioner och strukturerades om år 2000 för att sedan säjas år 2006 till ebay. Sidan är av typen auktionsform vilket medför att bud läggs fram till ett visst klockslag på angiven dag. All försäljning görs genom traderas system då de tar en avgift av säljaren vid auktionsslut. Dock har de även en tjänst som kan jämföras mer med traditionell annonshantering. För att köpa en vara direkt så får man använda sig av köp nu funktionaliteten. De personer som köper varor på tradera kan efter köpet betygsätta varje enskild säljare vilket ger en trygghet för andra köpare emot specifik säljare. 2.3.3.1 Begränsningar Alla köp går genom tradera så därför stryps tillgång till e-mail och telefon. Dock finns det ett sätt för köparen att ställa frågor till säljaren via ett formulär. Ingen direkt kontakt mellan köpare och säljare utan all kommunikation går igenom traderas system. Tradera tjänar pengar på varje auktion som genomförs och som säljaren får stå för. För att de skall kunna tjäna sina pengar är det därför viktigt att e-mail och telefonnummer inte ges ut direkt vilket skulle kunna medföra att säljare och köpare gör upp utanför systemet. Den stora nackdelen med detta system är att det tar tid att föra en diskussion mellan parterna. 5

3. Mål Det viktigaste målet är att sammanställa en fullt fungerande webbsida som är uppbyggd av annonsmaterial med inloggade användare. Personen som publicerar en annons blir då säljaren och personen som kommenterar eller frågar om en annons blir potentiell köparen. Nedan följer de grundkrav på funktioner som skall finnas i applikationen. 3.1 Funktioner 3.1.1 Annonser Säljaren skall kunna publicera annonser. Vid varje annons skall det klart framgå vem som är säljare och även visa om denna person är tillgänglig. Köparen skall kunna ställa privata frågor till säljaren och säljaren kunna svara på dessa. Köparen skall även kunna göra kommentarer på annonser som alla inloggade användare skall kunna läsa. 3.1.2 Säljarens vy Får notifikation då en kommentar eller fråga ställts och ges möjlighet att svara på detta på en utbruten sida där konversation endast visas om aktuell annons. Då en fråga ställts så upprättas en sida för tvåvägskommunikation mellan säljare och köpare. 3.1.3 Köparens vy Det skall på motsvarande sätt få notifikation då säljaren svarat på en fråga ifrån köparen. Efter en överenskommelse är upprättad så kan telefonnummer och adress uppges. 3.1.4 Community För samtliga användare så krävs det registrering av konto. Efter registrering så krävs det att användaren är inloggad för att ha möjlighet att använda de funktioner som säljare och köpare har. Även status på att användaren är inloggad skall visas på annonsnivå. 3.1.5 Skapa samtal Då både säljare och köpare är online som tidigare har diskuterat en annons så skall användaren upplysas om detta. 6

4. Genomförande 4.1 Metod 4.1.1 Arbetsupplägg I början av projektet så kommer mycket tid att läggas på skapandet av gränssnittet för att sedan bryta ut den funktionalitet som skall skapas. Därefter så skall programmering av de olika komponenterna göras. Fredagen varje vecka kommer att tillägnas skrivandet av rapport och handledarmöte. 4.1.2 Kodstandarder All namngivning av variabler och URL:er skall skrivas på Engelska. Variabler skrivs med Camelcasing och funktioner skall skrivas med små bokstäver. Klassnamn måste börja med stor bokstav för att vara giltigt i CodeIgniter. Under projektets uppbyggnad så används CodIgniters rekommenderade skrivsätt i största möjliga mån. Men i undantagsfall så används PHP-kod för att skapa viss funktionalitet. 4.1.3 Model-view-controller vem har gjort detta Projektet är uppbyggt enligt designmönstret model-view-controller 1. Då det skall skapas komplexa applikationer så är en uppdelning av kod i olika lager ett bra sätt för att hantera arbetet. Mvc-modellen är uppdelad i tre olika lager 1. Model som hanterar data ex. Hämtar och skriver till en databas. 2. View som visar den information som skall presenteras för användaren ex. En sida ur applikationen. 3. Controller sköter kommunikation mellan Model och view ex. Ett formulär med data skickas från View till Controllern som sen avgör vilken Model som skall hantera informationen som skickats för att sedan sparas ner i en databas. 7

4.1.4 Tekniker XHTML Står för Extensible Hypertext Markup Language och är HTML som är skrivet som en XML-applikation. XHTML 1.0 som används är ett standardiserat uppmärkningspråk som rekommenderas utav W3C. JQuery Är ett JavaScript bibliotek för att skapa interaktion i statiska HTML-objekt med hjälp av stilmallar(css). Det är litet i storlek då JavaScript exekveras hos klienten och biblioteket måste laddas hem vid access av sidan. PHP PHP är ett objektorienterat skriptspråk som körs på en webbserver för att kunna generera dynamiskt innehåll för hemsidor. Det är ett plattformsoberoende språk då det exekveras på webbservern. Codeigniter Codeigniter är ett ramverk av skrivna klasser för att underlätta utveckling av sidor skrivna i PHP. Vanligt använda komponenter som validering, formulär och databaskoppling är exempel på hjälpklasser som är skrivna. Cascading style sheet Css är ett språk för att formatera strukturerad data såsom XML och HTML i presentationslagret med formatering av typsnitt, marginaler och färger. Olika stilmallar kan användas för att formatera samma XML, HTML för olika enheter såsom webbsida i mobilen, för utskrift via skrivaren och webbläsare för dator. 8

4.1.5 Programvara TextMate För all kodning användes TextMate vilket är en texteditor som har färgkodningstöd för de språk som använts. MAMP Som webbserver i utvecklingsmiljö har MAMP använts denna innehåller Apache server och Mysql server. Photoshop Användes för bildbehandling. Illustrator Användes för att skapa prototyp av gränssnittet. 4.2 Metoddiskussion Ett tidigt beslut var att använda ett PHP baserat ramverk och Zend kom upp som ett första alternativ då det verkade väl använt. Dock visade det sig att detta ramverks dokumentation inte var tillfredställande. Detta medförde att Codigniter istället valdes som har en mycket bra struktur och är väldokumenterat. Att erfarenhet av detta ramverk redan fanns underlättade och gav mer tid för att skapa projektets innehåll istället för att lära sig ett ramverk från början. Ajax används för att lägga till skickade frågor och kommentarer direkt på sidan som det skickats till utan att ladda om sidan. 9

5. Resultat Ett antal mål sattes upp och applikationen har skapats utifrån dessa mål med angivna tekniker. 5.1 Funktioner 5.1.1 Community Varje användare har en unik genererad hemsida så att denna kan hantera sina annonser och endast följa de konversationer som önskas. För att hålla samman alla användares publicerade annonser och data förknippat med användaren så skapades en databasdriven webbplats. 5.1.1.1 Användarhantering Registrering av användare En omfattande registrering krävs för att kunna samla detaljerade personuppgifter. Så mycket personuppgifter som möjligt skall finnas med och även personnummer som beräknas med Luhn-algoritmen 1. Alla uppgifter valideras och även personnummer efter Luhn-algoritmen. Inloggning av användare När en användare loggat in så visas dennes profil och det listas de senaste annonser som skapats utifrån var användaren bor. Då en användare inte varit aktiv på 20 minuter så får den status som icke aktiv vilket markeras i gult. Grön status indikerar att användaren är aktiv och röd indikerar att användaren inte är inloggad. Personen blir automatiskt utloggad om man inte gjort något på 2 timmar vilket är standardtiden satt på sessionvariabeln. Automatisk utloggning av användare Skulle användaren inte vara aktiv på två timmar så raderas dennes session och måste logga in på nytt. 1 http://sv.wikipedia.org/wiki/luhn-algoritmen 10

5.1.1.2 Profil Bild visas av den inloggade användaren och även möjlighet att logga ut och ändra sin profil. Viktiga uppgifter om säljare/köpare finns att tillgå via varje individuell profilvy. Figur 4. Profil 11

5.1.1.3 Modulbaserad uppdelning En fast struktur på tre kolumner med förbestämd bredd skapades för att hålla de moduler som skulle genereras. Modulerna placeras ut efter vilken kolumn som angivits i respektive modul. Då en sida efterfrågas så hämtas de moduler som skall ingå på denna sida ifrån en modulhanterings funktion. Denna placerar sedan ut modulerna efter den struktur som de är uppbyggda efter. Figur 5. Modulbaserat 5.1.2 Annons Annonser skapas av användare som har något att sälja. Efter skapandet så visas dessa i en lång lista som visar senast publicerade annonser överst. Det går även att söka efter annonser och att lista annonser efter den kategori de är publicerad i. Till varje annons visas en bild av säljaren och om denna är inloggad(grön), icke aktiv(gul) och ej inloggad(röd). Tiden sedan annonsen publicerades visas men även var säjaren befinner sig. Andra kontaktuppgifter såsom e-mail och telefonnummer visas så att köparen har möjlighet att använda sig av någon av dessa om så önskas. Till varje annons så går det att lägga en publik kommentar och ställa en personlig fråga. 12

Figur 6. Annons 5.1.3 Kommentera Ger användaren möjlighet att skiva kommentarer på annonser som i realtid publiceras i anknytning till annonsen. Alla kommentarer publiceras publikt och kan läsas av samtliga användare. 5.1.4 Fråga Då en potentiell köpare hittar en annons och har frågor så ställs dessa direkt i samband med annonsen. Efter 10 sekunder (förutsatt att användaren är online) får säljaren frågan till sig och kan läsa den och själv välja om denna vill svara. Frågan skickas utan att modifieras om den inte innehåller skadliga script. Skickas skadlig kod så bryts denna ner till icke skadlig kod genom reguljära uttryck. Denna sänds privat och kan endast läsas av avsändaren och mottagaren. Figur 7. Frågeruta 13

5.1.5 Meddelande inkorg Då en fråga eller kommentar har skickats till en användare så meddelas detta genom menyraden där ett blinkande brev visar att nya meddelande finns att läsa och anger även ett antal på hur många nya meddelande det finns. Detta sker även då sidan inte laddats om. Då ett medelande inte är öppnat så visas det gulmarkerat och klickar man på detta så får man upp vyn annonsfrågor. När ett meddelande är visat så markeras det med vit bakgrund på meddelandet och menyalternativet meddelande visar inga nya medelande. Det går även att ta bort ett meddelande genom att trycka på den röda knappen som frågar användaren en extra gång innan borttagning. Även en ikon för att starta samtalsvyn annonsfrågor finns med och representeras av en människa med en pratbubbla. Figur 8. Inkorg med meddelande 14

5.1.6 Skapa samtal Efter en fråga ställts till säljaren så får denne indikation på att ett nytt meddelande skickats. Genom att klicka på detta meddelande så kommer man till annonsfrågor där man kan föra en tvåvägskommunikation i realtid. Då någon av parterna inte är online så skickas meddelanden men kan ej visas förrän mottagaren är online. Under varje bild av användaren så får man indikation på vilken inloggningsstatus som denne har. Varje vy av denna typ visar endast en konversation mellan annonsen skapare och en köpare. Figur 9. Annonsfrågor 15

6. Diskussion Jag är väldigt nöjd med det arbete som jag åstadkommit och den fungerande tjänsten som utvecklats. Detta arbete har varit väldigt lärorikt och jag har skaffat mig nya kunskaper inom detta område. Det som har drivit mig har varit min vilja att lära mig mer om hur man skall kunna bygga samman en Community. Mina mål i form av funktioner känns väldigt bra då detta gett mig en bra fokusering på vad som skall skapas härnäst och bromsat mig ifrån att implementera alla de idéer som dyker upp. De mål som jag satt upp var rimliga och jag känner att dessa har uppnåtts. När jag började med detta arbete så hade jag ganska god kunskap om Codeigniter men under arbetets gång så har dessa kunskaper fördjupats ännu mer. Codeigniter ger mycket bra stöd för de mest använda funktioner som kräv i skapandet av en PHP applikation. Den tjänst som jag har utvecklat har även ett stort behov av realtidsuppdaterade objekt. För att lösa realtidsuppdateringen så använde jag JavaScript biblioteket jquery vilken har funktioner för AJAX som använts för att realtidsuppdatera objekt. En stor tröskel att komma över var hur kommunikationen mellan jquery och Codeigniter skulle hanteras. Men då detta var löst så insåg jag att detta var ett mycket bra sätt att lösa problemet på. Tjänsten kommer jag att vidareutveckla och ha publicerad skarpt inom en snar framtid. I framtiden vill jag kunna utveckla en livechat i miniatyr för att ännu snabbare kunna samtala med personer som är online. Personnummer ska kunna kollas med Luhn-algoritmen 2 metoden för att öka säkerheten på sidan så man bekräftar att personen inte är påhittad. Köpares sökvanor skall sparas för att kunna visa aktuella annonser för enskilda personer. Implementation med Facebook för att snabbt kunna skapa ett konto endast med sin Facebookinloggning. Genom att beräkna aktiva medlemmars köpvanor så skall man kunna lista de produkter som är lättast att sälja för tillfället men även de produkter som är svårsålda. 2 http://sv.wikipedia.org/wiki/luhn-algoritmen 16

7. Källförteckning 7.1 Elektroniska källor Codeigniter http://codeigniter.com/[2010-05-19] Codeigniter userguide http://codeigniter.com/user_guide/ [2010-05-19] PHP http://sv.wikipedia.org/wiki/php [2010-05-19] jquery http://jquery.com/ [2010-05-19] CSS http://www.w3.org/style/css/ [2010-05-19] XML http://en.wikipedia.org/wiki/xml [2010-05-19] XHTML http://en.wikipedia.org/wiki/xhtml [2010-05-19] SQL http://www.w3schools.com/sql/default.asp [2010-05-19] MySQL http://www.mysql.com/ [2010-05-19] Google http://www.google.com/ [2010-05-19] Blocket http://www.blocket.se/ [2010-05-19] Tradera http://www.tradera.com/ [2010-05-19] Eniro Köp & Sälj http://kopochsalj.eniro.se/ [2010-05-19] 17

Facebook http://www.facebook.com/ [2010-05-19] 1 http://en.wikipedia.org/wiki/model-view-controller 18

351 95 Växjö / 391 82 Kalmar Tel 0772-28 80 00 dfm@lnu.se Lnu.se/dfm