During the course of two days at Webbdagarna 2012 an app for social shopping was developed by Logica and Star Republic. This presentation explains the concept behind it and how it was done.

1. SHOPUP
Social Shopping app for airports
Filip Ekberg, Star Republic filip@starrepublic.com
Conny Svensson, Logica c.svensson@logica.com
22-23 Mars 2012

2. KONCEPT
Utveckla en app från start till stop under webbdagarna 2012.
Detta inkluderar backend-logik som hanterar all data och en cross-plattform app som går att köra på både
iPhone och Android.
Konceptet är framtaget tillsammans med Swedavia som driver Sveriges flygplatser.
Appen ska kunna:
• Visa dina egna och vänners resor
• Visa och sök utbud och tjänster (kan filtreras på flygplats, kategorier, m.m.)
• Skapa inköpslistor för dig själv och dina vänner
• Be en vän köpa med sig något från dina inköpslistor
• Gör betalning via mobilen
• Betygsättning av produkter
• Få tips på produkter: Vilken parfym ska jag köpa till min partner?
Logica / Star Republic

3. KONCEPT FORSTÄTTNING
• Notifiering när vänner ska ut och resa
• Koppling mot Sociala Medier (t.ex. Facebook, LinkedIn, Twitter, m.m)
• Känn av vilken flygplats du är på eller om du är hemma och visar relevant information
• Bonussystem: Storköpare, bästa vännen, m.m. får rabattnotiser
• Inomhuspositionering visar vart en affär eller vara finns på flygplatsen
• Hitta vänner eller kollegor som är på en flygplats samtidigt som du
• Förbeställ och få en färdigpackad påse med varor att hämta ut
• Time To Gate: information om när man behöver gå till gaten för boarding
Logica / Star Republic

4. KONCEPTUELL MODELL
Systemets backend är byggd med följande konceptuella modell i åtanke:
Logica / Star Republic

5. SHOPUP KLIENT
Appen byggdes med:
• Sencha Touch 2: En av de mest avancerad och mognaste HTML5 ramverken för mobil
webapp-utveckling. Tillhandahåller en snygg MVC (Model-View-Controller) modell och
kommunicerar via AJAX med WebService API (REST/JSON).
• Sencha Designer 2 (beta): Visuellt verktyg för att bygga appens grafiska gränsnitt (View),
men även koda affärslogik (Controller). Visade sig vara väldigt produktivt och framgångsrikt.
• Compass: För att automatiskt kompilera SCSS (Sassy CCS) stylesheets till CSS.
• Cordova 1.5 (PhoneGap): Native ”wrapper” app runt web appen till Android och iPhone. Kan
ses som en paketerad webbläsare men ger tillgång till telefonens övriga funktioner, såsom
kamera och adressbok.
• Xcode: Apples utvecklarverktyg för att kompilera appen för iPhone, samt att testa i simulator.
• Eclipse med ADT (Android Development Tools): Verktyg för att bygga Android appen och
testa i emulator.
Logica / Star Republic

6. SHOPUP BACKEND
• ASP.NET Web API
Med hjälp av ASP.NET Web API kan vi exponera data till olika plattformar med olika krav
på ett enkelt sätt
• Entity Framework Code First
Utifrån den konceptuella modellen kan vi direkt skapa våra domän-objekt som blir hårt
knutna mot datalagringen vilket snabbar upp utvecklingen
• AppHarbor
Genom att använda AppHarbor för att lägga upp en testversion av systemet, kan vi snabbt
och enkelt komma igång med externa tester av systemet
• E-Commerce
Förberett för att integrera med en trygg E-handelsplattform
Logica / Star Republic FOOTER APPEARS HERE

7. SHOPUP ONLINE-ADMINISTRATION
• Auto-genererade administrationssidor för att snabba upp tester av underliggande struktur.
• Gränssnittet ersätts sedan av e-handelplattformens administrationsgränssnitt.
Logica / Star Republic FOOTER APPEARS HERE

8. Logica / Star Republic FOOTER APPEARS HERE

9. Logica / Star Republic FOOTER APPEARS HERE

10. Logica / Star Republic FOOTER APPEARS HERE

11. UTVECKLINGSMILJÖ – WINDOWS 8
Logica / Star Republic FOOTER APPEARS HERE

12. UTVECKLINGSMILJÖ – VISUAL STUDIO 11
Logica / Star Republic FOOTER APPEARS HERE

13. UTVECKLINGSMILJÖ – SQL SERVER 2012
Logica / Star Republic

14. UTVECKLINGSMILJÖ – SENCHA DESIGNER 2
Logica / Star Republic

15. UTVECKLINGSMILJÖ – XCODE
Logica / Star Republic

16. UTVECKLINGSMILJÖ – ECLIPSE
Logica / Star Republic

17. SKÄRMBILDER (RESOR)
Logica / Star Republic

18. SKÄRMBILDER (UTBUD)
Logica / Star Republic

19. SKÄRMBILDER (INKÖPSLISTOR OCH INFO)
Logica / Star Republic

20. LÄNKAR
• Sencha Touch 2 (http://www.sencha.com/products/touch/)
• Sencha Designer 2 Beta (http://www.sencha.com/blog/sencha-designer-beta/)
• Compass (http://compass-style.org/) och Sassy CSS (http://sass-lang.com/)
• Cordova eller PhoneGap (http://phonegap.com/)
• Xcode (http://itunes.apple.com/se/app/xcode/id497799835)
• Eclipse och ADT (http://eclipse.org/, http://developer.android.com/sdk/eclipse-adt.html)
• Visual Studio 11 (http://msdn.microsoft.com/en-us/vstudio/aa718325 )
• Windows 8 Consumer Preview (http://windows.microsoft.com/sv-SE/windows-8/consumer-
preview )
• SQL Server 2012 (http://www.microsoft.com/sqlserver/en/us/default.aspx )
Logica / Star Republic

21. TACK