ShopUp

968 views
900 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

ShopUp

  1. 1. SHOPUP Social Shopping app for airportsFilip Ekberg, Star Republic filip@starrepublic.comConny Svensson, Logica c.svensson@logica.com 22-23 Mars 2012
  2. 2. KONCEPTUtveckla 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ådeiPhone 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. 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 boardingLogica / Star Republic
  4. 4. KONCEPTUELL MODELLSystemets backend är byggd med följande konceptuella modell i åtanke:Logica / Star Republic
  5. 5. SHOPUP KLIENTAppen 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. 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-handelsplattformLogica / Star Republic FOOTER APPEARS HERE
  7. 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. 8. Logica / Star Republic FOOTER APPEARS HERE
  9. 9. Logica / Star Republic FOOTER APPEARS HERE
  10. 10. Logica / Star Republic FOOTER APPEARS HERE
  11. 11. UTVECKLINGSMILJÖ – WINDOWS 8Logica / Star Republic FOOTER APPEARS HERE
  12. 12. UTVECKLINGSMILJÖ – VISUAL STUDIO 11Logica / Star Republic FOOTER APPEARS HERE
  13. 13. UTVECKLINGSMILJÖ – SQL SERVER 2012Logica / Star Republic
  14. 14. UTVECKLINGSMILJÖ – SENCHA DESIGNER 2Logica / Star Republic
  15. 15. UTVECKLINGSMILJÖ – XCODELogica / Star Republic
  16. 16. UTVECKLINGSMILJÖ – ECLIPSELogica / Star Republic
  17. 17. SKÄRMBILDER (RESOR)Logica / Star Republic
  18. 18. SKÄRMBILDER (UTBUD)Logica / Star Republic
  19. 19. SKÄRMBILDER (INKÖPSLISTOR OCH INFO)Logica / Star Republic
  20. 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. 21. TACK

×