shopup
DESCRIPTION
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.TRANSCRIPT
Social Shopping app for airports
Filip Ekberg, Star Republic [email protected]
Conny Svensson, Logica [email protected]
22-23 Mars 2012
SHOPUP
Logica / Star Republic
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?
KONCEPT
Logica / Star Republic
• 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
KONCEPT FORSTÄTTNING
Logica / Star Republic
Systemets backend är byggd med följande konceptuella modell i åtanke:
KONCEPTUELL MODELL
Logica / Star Republic
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.
SHOPUP KLIENT
Logica / Star Republic
• ASP.NET Web APIMed 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 FirstUtifrån den konceptuella modellen kan vi direkt skapa våra domän-objekt som blir hårt knutna mot datalagringen vilket snabbar upp utvecklingen
• AppHarborGenom 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-CommerceFörberett för att integrera med en trygg E-handelsplattform
SHOPUP BACKEND
FOOTER APPEARS HERE
Logica / Star Republic
• Auto-genererade administrationssidor för att snabba upp tester av underliggande struktur.
• Gränssnittet ersätts sedan av e-handelplattformens administrationsgränssnitt.
SHOPUP ONLINE-ADMINISTRATION
FOOTER APPEARS HERE
Logica / Star Republic FOOTER APPEARS HERE
Logica / Star Republic FOOTER APPEARS HERE
Logica / Star Republic FOOTER APPEARS HERE
Logica / Star Republic
UTVECKLINGSMILJÖ – WINDOWS 8
FOOTER APPEARS HERE
Logica / Star Republic
UTVECKLINGSMILJÖ – VISUAL STUDIO 11
FOOTER APPEARS HERE
Logica / Star Republic
UTVECKLINGSMILJÖ – SQL SERVER 2012
Logica / Star Republic
UTVECKLINGSMILJÖ – SENCHA DESIGNER 2
Logica / Star Republic
UTVECKLINGSMILJÖ – XCODE
Logica / Star Republic
UTVECKLINGSMILJÖ – ECLIPSE
Logica / Star Republic
SKÄRMBILDER (RESOR)
Logica / Star Republic
SKÄRMBILDER (UTBUD)
Logica / Star Republic
SKÄRMBILDER (INKÖPSLISTOR OCH INFO)
Logica / Star Republic
• 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 )
LÄNKAR
TACK