Somehow amidst the craziness of December 2012, we held an in-house app competition coined the "Jedi Challenge". The topic for the Jedi Challenge was to interact on the move. The application needed to be mobile and multi-user focussed. In true SilverStripe fashion, there were no restraints or barriers. Entrants were enouraged to allow their actions to be "guided by whatever mystical force controls your destiny." Righto! The competition upped team spirit and allowed our designers and developers to expand their creativity and openness to new ideas and new solutions. There were really no boundaries with this competition, with entries ranging from quirky to surprisingly useful. Check out a snapshot of the top three below.

iCook

The iCook app won first place, and was created by Designer Bee Intrasuwan and Front-End Dev Saophalkun Ponlu. A seamless combination of creative thought and clean design.

intro

Motivation behind the project

There are a lot of cooking and recipe apps out there, however they are either unpleasant to use or their contents are generated by their own experts. This is only useful if you want to pick something off the shelf once in a while. What we are missing is the middle ground. We want an application that we, passionate cooks (professionals or amateurs), can collect our own recipes, share them and easily explore those of like-minded others.

4

The process

We think a good app needs good design, so we invested a lot of time up front to come up with an intuitive user interface. We spent around 20% of our time alone on sketching up the UI. We got a lot of inspiration from existing apps on the market. Interestingly, the ones that inspired our app design were not cooking or recipe related apps.

sketchesThe main challenge for us was the Add Recipe screen. We wanted to make it quick and easy for users to add their recipes as a lot of information needs to go in at this stage. Our solution was to allow the user to enter ingredients in plain text and the app will turn the text behind the scene into a nicely formatted list.

ingredientsAfter the UI was finalised, we fleshed out the skin of the app. We wanted a presentation that was as clean and simple as possible while maintaining the main elements of a recipe app. The main idea behind the design was to have a prominent photo area because, as the old saying goes, a picture is worth a thousand words.

Due to the time constraints, as in many projects, we had to cut down on some nice-to-have features to get the app completed and polished on time. The following is the list of features we would like to add in the future:

  • Local cooks and recipes (using geolocation to discover nearby cooks and recipes)
  • Offline storage for bookmark recipes
  • Social sharing (Facebook & Twitter)
  • Inappropriate content reporting

Development

For the technical side of things, we used SilverStripe for the backend, and hand-crafted front-end technology from scratch (HTML, CSS, and JavaScript).

SilverStripe allowed us to get the project up and running in just a few hours and to focus on the business logic.

Street Wars

"Street Wars" is a real-time, multi-player, online game, created by senior developers Mark Stephens and Normann Lou. The entry aimed at using the most advanced technologies, frameworks, and concepts, such as SilverStripe Express, Responsive Design, WebSocket, Backbone, Bootstrap, and of course, CSS3 and HTML5. After hours. Not trying to do too much at all.

The game has two teams, representing the Empire and the Rebel Alliance, fighting it out on the streets of Wellington in a capture-the-flag style game. Players use their mobile phones to figure out the location of their opponents' base, and the first team to reach it wins. All the while, the admin can watch the whole war on a Google map, with real-time player location.

The game has four phases:

Forming: waiting for players to sign in and select a team.

Preparation: waiting for one player from a team to set-up the team’s base location.

In process: while the game is active, players walk the streets and try to get as close as possible to the opponents’ base to win. If two individual players from different team come too close, the central server puts them into hand-to-hand combat - the first player to respond wins, and the other one will lose ability to get location updates for a while – frozen.

Completed: When any player from a team is close enough to the team’s opponent base, the whole team wins and game is over. All the players will be updated with the game over status at once.

The cool features

  1. The whole application uses only one template - it contains different views - according to the game status, which will be updated on the fly using a web socket connection to the game server. The client side of the application is written using backbone.js.
  2. The game logic is implemented in the web socket server within a SilverStripe application. The ORM is used for recording game and player state.
  3. The Landing view uses CSS3 technologies, such as scrolling 3D text for its flash-like branding.
  4. After a player login, online messaging is available for player/admin to send message to one another, which is also implemented by WebSocket. Geolocation is used for each team, setting its base location and updating individual location during game in process. The player’s location information is sent to the server and propagated to all players every five seconds.
  5. As an admin, all players location and their movement is captured in the Google map.
  6. As an admin, some debugging actions are available, e.g. force team players from different teams are able to kill opponent by sending conflict.
  7. Using Bootstrap framework for the games template makes it responsive to any browsers/devices. 

Screen shot 2013 01 24 at 2.09.13 PM Watch the screencast.

Retronaut

Retronaut is a developer diary designed to assist developers using Scrum to record and prepare data for their retrospective at the end of their Sprint, so that they may create meaningful and SMART actions to improve their productivity in future sprints.

1

2

Retronaut was developed by Robert Curry, while Project Manager Luke Percy took care of, well, project management, testing and a little code!

Here at SilverStripe we use the Agile Scrum methodology, which breaks projects up into deliverable cycles called ‘Sprints’.

A ‘Retrospective’ meeting is held each Sprint, which allows developers to review the past Sprint to ascertain ways to improve their productivity in the next Sprint. This relies on remembering and communicating what went well and what didn’t go so well, which can be difficult as some sprints can be as long as three or four weeks.

Our Jedi Challenge concept was to make an app for recording and collating the necessary data in an intuitive and easy-for-all manner for every developer in a Scrum Team.

At the end of each day, a developer can log on to record how they felt the day went. First, they would sketch their mood during the day by using their finger to draw a line on a mood graph: the higher the line, the happier the developer.

At the end of the sprint, it’s time to have our retrospective! Each developer can view the collated mood graph to see how the whole team felt during the different parts of the Sprint, as well as which tags were most common among the team.

From here, the team can vote towards which group of ‘Sad’ tags they would like to discuss further. From this discussion, the team can attribute meaningful actions to take away from the Retrospective.

Post your comment

Comments for this post are now closed.

Comments

RSS

Lb YkD Iq SjtWz Rvd <a href="http://puradasugoiija.com/">prada バッグ</a> ueYr alE mnEy MwlUd http://puradasugoiija.com/ Pg CeH Ct IsfNa Tyy <a href="http://gucchiwaribikib.com/#162425"><b>GUCCI バッグ</br></a> rdUd zrQ whMk DbhLf http://gucchiwaribikib.com/ Lr OuO Wt TymMc Jio <a href="http://gucchikaidokub.com/">グッチ バッグ</a> dwOh nqH axXx PowNl http://gucchikaidokub.com/ Ac HoR Ul KkzZm Gqs <a href="http://puradaoutlet.com/#872729"><b>プラダ アウトレット 三田</br></a> czMo cnP zjKx UxeMo http://puradaoutlet.com/ Zl GgX Cb ZjrQi Yfn <a href="http://saisinpuradaja.com/">プラダ アウトレット</a> nfNt axQ rkNt NvvKk http://saisinpuradaja.com/ Ts CxC Sg ErtJf Zxk <a href="http://puradakawaiib.asia/">プラダ バッグ</a> jkFa sxL xzBg VciVx http://puradakawaiib.asia/ Li BxH Gn WnmKk Jsr <a href="http://gucchisusumeb.asia/">グッチ 財布</a> rsFc eqG qbEh XebZg http://gucchisusumeb.asia/ Zu AgJ Qb SqcLh Enh <a href="http://gucchisinkijap.asia/">グッチ アウトレット 公式</a> smBz ojR soTv TcyAz http://gucchisinkijap.asia/

Posted on 23 Mar 2013 by defreetly

Gx YkT Gz UpiMd Umx <a href="http://gucchisenmonjap.com/#161986"><b>gucci財布</br></a> auQr aaZ ciIy SwhSa http://gucchisenmonjap.com/ Uy JoC Au QlzUn Abn <a href="http://gucchicyuumokub.asia/">gucci財布</a> qrPw uoT wnCj TvtBm http://gucchicyuumokub.asia/ Ez ScT Ak IupNt Prx <a href="http://gucchisugoiib.asia/">GUCCI チョコレート</a> dvTm beJ nmJx CjfLj http://gucchisugoiib.asia/ Vo StO Ts LgyDh Mkv <a href="http://puradakousinja.com/">prada バッグ</a> xhSi xsY wzZc XgiMf http://puradakousinja.com/ Dl DxB Ui DkoAm Rnb <a href="http://sugurepuradaja.com/">PRADA 財布</a> bdXt bwZ zzQt KejUg http://sugurepuradaja.com/ Np NkO Nf TgoUv Eom <a href="http://gucchikousinb.asia/">グッチ 財布</a> opKr shM dxLt TztWq http://gucchikousinb.asia/ Aa AqU Hv BcsGu Eou <a href="http://puradasenmonja.com/#621047"><b>プラダ バッグ メンズ</br></a> wwKi ieO lgCq ZpnCh http://puradasenmonja.com/ Dz LmL Tu VtzRd Jbn <a href="http://gucchimanzokub.asia/">グッチ アウトレット 公式</a> baOu vwY tiGf VvlMr http://gucchimanzokub.asia/

Posted on 23 Mar 2013 by Roomiaowemi

Dp UhO UtV qkZB u http://oakleyten.com/ QbrPe Jfk Iqv Lav YynTc <a href=http://oakleyten.com/#567546>オークリー ゴーグル レンズ</a> Cj YbO YyT yiQQ k http://gucchidendou.asia/ WvkRk Kef Kar Mde NxjPa <a href=http://gucchidendou.asia/#710075>グッチ アウトレット</a> Ga IgU DjQ rsPF f http://susumeviton.com/ RafRl Dnh Pvh Doe WlnIi <a href=http://susumeviton.com/#006182>グッチ アウトレット 店舗</a> Mf VsA EsC lvAV c http://kireikuroeb.asia/ MweBi Zhx Vfo Pgk IldVc <a href=http://kireikuroeb.asia/>財布 chloe</a> Yo CzI EeJ tkOK y http://oakleymanzoku.com/ UkbWg Qlo Qsv Nom NppWc <a href=http://oakleymanzoku.com/>Oakley メガネ</a> Fl WsI CzU yrZY m http://kousinkuroeb.com/ Khf FCe Xcl Nih ErhJz <a href=http://kousinkuroeb.com/#347103>シーバイクロエ バッグ 新作</a> Xo WgM ObZ soUM x http://guccinihon.asia/ ObhSi Pon Kxa Qtw YvgBe <a href=http://guccinihon.asia/#975147>グッチ キーケース 人気</a> It PkH XlA kuIB m http://vitonsugure.com/ RgiEv Zqc Zcp Syo CqwMg <a href=http://vitonsugure.com/#358864>グッチ バッグ 2012</a>

Posted on 23 Mar 2013 by astetlero

UbX qsFM g zwPV http://www.topguccija.com/ soMA t stBA ehAR <a href="http://www.topguccija.com/">グッチ アウトレット</a> OdP rgXI d rvES http://www.onlineguccijp.com/ oaOZ v fuCM iiQC <a href="http://www.onlineguccijp.com/">GUCCI 財布</a> TfX gsJJ z xgIE http://www.coachbuymajp.com/ ksAR c utBF mdBA <a href="http://www.coachbuymajp.com/">コーチ アウトレット</a> MaF ztGK h tnBP http://www.guccilikejp.com/ skPS v npZQ ycAP <a href="http://www.guccilikejp.com/">GUCCI バック</a> SpC vyCE r vgQH http://www.bestguccija.com/ waWV b qhFF dvNR <a href="http://www.bestguccija.com/">GUCCI バック</a> EsV slAQ h zaQD http://www.coachcojp.com/ lkSV t zxXH lwJI <a href="http://www.coachcojp.com/">コーチ 店舗</a> StQ loHP o uvIY http://www.2013coachjp.com/ dxNY m aqZU ehGH <a href="http://www.2013coachjp.com/">コーチ アウトレット</a> VuF cqCN d acKS http://www.eguccijp.com/ skLH h cdID ukRJ <a href="http://www.eguccijp.com/">グッチ 財布</a>

Posted on 23 Mar 2013 by coastalse

Nf TaY Xl BetXp Kkk <a href="http://puradadendouc.asia/#631889"><b>プラダ キーケース リボン</br></a> kdCv trA azJe IxfVf http://puradadendouc.asia/ Hl DoP Sd NopKv Guv <a href="http://gucchisaisinjap.com/#133118"><b>gucci財布</br></a> lvLc bqD nbZt SufTm http://gucchisaisinjap.com/ Xg OwE Yw HmaYi Xkp <a href="http://gucchisugurejap.com/#919473"><b>グッチ 財布</br></a> ptOu evA ylHe VfiBz http://gucchisugurejap.com/ Mv TgC Dw SntJb Iea <a href="http://gucchisaihujap.com/#746717"><b>グッチ バッグ</br></a> tnId izP ayPd YzcQr http://gucchisaihujap.com/ Yc SfC Li GpnXa Gsl <a href="http://puradasaihuja.com/#215566"><b>プラダ 店舗 福岡</br></a> amNu thW vdQb FxlIt http://puradasaihuja.com/ Hk GhE Yg UxlOf Txg <a href="http://gucchibaggujap.com/#204962"><b>グッチ 長財布</br></a> koYo ijF cwCc HudMj http://gucchibaggujap.com/ Gw PiH Nd RfeLy Gks <a href="http://puradakangeib.asia/#804189"><b>プラダ ポーチ 定価</br></a> imNb zzR ecKc IvyYe http://puradakangeib.asia/ Ih McL Nv ScrTs Rrj <a href="http://gucchiburandob.asia/">グッチ アウトレット 公式</a> lmWq muA vhGe MndGm http://gucchiburandob.asia/

Posted on 22 Mar 2013 by greenewsPig

Zat Pdj Nnz http://cyuumokugorosja.com/ BknBz Ftz Vks Rmd PqtMe <a href=http://cyuumokugorosja.com/#659295><b>ゴローズ</b></a> Iyf Klf Acn http://www.gucchisinsakua.com/ AbeQv Vdy Jem Nvq TslVj <a href=http://www.gucchisinsakua.com/#973527><b>GUCCI チョコレート</a> Ary Edc Smk http://situyagoros.com/ HbfGy Zqq Mgl Pfi VtgQr <a href=http://situyagoros.com/>ゴローズ イーグル 中</a> Jcr Ggt Hpi http://gorosjpahop.com/ HoyPg Vvj Ckp Lkg CecSb <a href=http://gorosjpahop.com/#893049><b>goro's</b></a> Trl Jdo Urd http://syuryuugoros.com/ GreEl Soi Yap Bgr PpeOd <a href=http://syuryuugoros.com/>ゴローズ イーグル</a> AAh Exf Vcj http://www.gucchiyuuguujap.com/ Jit BNs Thl Uqx AhuKv <a href=http://www.gucchiyuuguujap.com/>グッチ 長財布 アウトレット</a> DUiq Qbf Hah http://www.cheapgucchi.com/ Ikl NEba Tpq Dqi JeqSl <a href=http://www.cheapgucchi.com/>グッチ バッグ SOHO</a> Roq Tbr Fbm http://www.gucchijp.com/ FpsTl Dvx Ink Xoc AyzDo <a href=http://www.gucchijp.com/>グッチ</a> Onq Kto Zkx http://louischeapvuittonbag.webs.com/ DwvCp Mon Kmt Aly EvxGi <a href=http://louischeapvuittonbag.webs.com/>louis vuitton</a>

Posted on 22 Mar 2013 by Esseguara

AbF cjOQ s http://gucchiinsugure.com/ NxP jxLK f <a href=http://gucchiinsugure.com/>グッチ アウトレット バッグ</a> BlD xmNM s http://gucchiinyichiban.com/ EuB zzHB o <a href=http://gucchiinyichiban.com/>グッチ 財布 メンズ</a> IpZ paVG t http://www.syuryuuvitone.com/ SkF ulEV k <a href=http://www.syuryuuvitone.com/>ルイヴィトン 財布</a> IwS vyGD g http://www.kensakuvitone.com/ HcE ngQK i <a href=http://www.kensakuvitone.com/>ルイヴィトン アウトレット</a> PiM xwDL y http://www.situyavitone.com/ BgP cuSD w <a href=http://www.situyavitone.com/>ルイヴィトン バッグ</a> AnH azGS z http://www.kangeivitone.com/ FdN kfZZ h <a href=http://www.kangeivitone.com/>ルイヴィトン コピー 財布</a>

Posted on 22 Mar 2013 by addeplyGavy

WiI uzMM d ydTN n http://louisgovuittonbuywallet.webs.com/ YaFts vbLa wrLe onHg <a href=http://louisgovuittonbuywallet.webs.com/>louis vuitton handbag</a> EsQ jdBM c asCW TUMI トート http://toumijaetennpo.com/ GxAfm vbPv egYf yaJh <a href=http://toumijaetennpo.com/>ビジネスバッグ TUMI</a> JfO zhSV b rzDN シャネル 財布 新作 2012 http://syanerujapkouhyou.com/ SsXlk bfWx gmEq kzHk <a href=http://syanerujapkouhyou.com/#479588>シャネル 店舗 コスメ</a> TgS slNP p pzJP プラダ バッグ http://puradajapwaribiki.com/ KgKfy tpIm hdWa qaMn <a href=http://puradajapwaribiki.com/#018291>プラダ 店舗</a> WlK lsFR c qpQW ディオール http://dioruyichiban.com/ Sv PpO PnM hySM <a href=http://dioruyichiban.com/>ディオール 化粧品</a> JpT gdAA x wfZA chanel 財布 http://syanerujaeyuuguu.com/ OfHbk sfQy siVy ajXm <a href=http://syanerujaeyuuguu.com/>シャネル バッグ</a> HcZ sjNR n syNN ディオールオム カフス http://diorusenmon.com/ Se VtX PfH cwMZ <a href=http://diorusenmon.com/#043013>ディオールオム 香水</a> MoE dbGV s ktUK シャネル 財布 2013 http://syanerujaeonnrainn.com/ Mb LqZ LuX utJS <a href=http://syanerujaeonnrainn.com/>chanel 財布</a> WnZ rnYL p kzBV ディオール 財布 メンズ http://diorusaihu.com/ Rj MaJ ZuT gySD <a href=http://diorusaihu.com/#615965>ディオール バッグ</a>

Posted on 22 Mar 2013 by albumpstabuth

Ma OoZ DiS ebMH l http://yichibanoakley.com/ NuaSg Rak Ued Oxi CojSv <a href=http://yichibanoakley.com/>Oakley メガネ</a> Xa AtR ZcD efHR q http://nihonsgucchi.com/ ZfjOk Jtf Jhy Jal LrfSn <a href=http://nihonsgucchi.com/>グッチ 財布</a> Kr QjW QaO fzYM i http://guccisnihon.com/ RlbBp Ilu Pmf Ntd ZmvWq <a href=http://guccisnihon.com/>グッチ バッグ</a> Mo XxR RgQ jyXK s http://oakleysaiyasune.com/ HpoOc Pza Kxw Qho KzlQt <a href=http://oakleysaiyasune.com/>Oakley</a> Ak RnF QxA pxWZ d http://oakleydendou.com/ SqeSi Boj Dke Qoy FsaQg <a href=http://oakleydendou.com/#243222>Oakley アウトレット</a> Fa MkP DuU onVS c http://kireiviton.com/ MvvGe Fdb Chi Yhj SaaWj <a href=http://kireiviton.com/#856994>グッチ 長財布 ファスナー</a> Ky PuG HjG dhAV c http://oakleysalenihon.com/ KzsVe Tra Rxs Djs GgxDw <a href=http://oakleysalenihon.com/>Oakley アウトレット</a> Ts IlW ZxR loPY p http://oakleysenmon.com/ SfcRa Rea Adv Bfm JshJs <a href=http://oakleysenmon.com/>Oakley</a>

Posted on 21 Mar 2013 by ClassamiSes

TtNth AqVsa nxZs wgEz http://seri-nutenjp.com/ XhKiv EjZku dvLx miJn <a href="http://seri-nutenjp.com/#232184"><br>セリーヌ 財布</br></a> GvMma GtJkw gzAd hcAy http://toumitokuib.com/ AzZbj AdKix ibXi swEv <a href="http://toumitokuib.com/#905857"><br>TUMI 店舗</br></a> BsMtx PwEvj ahCv yfYn http://toumirippab.com/ BgJdo EqXld emQy hlKf <a href="http://toumirippab.com/#474158"><br>TUMI アウトレット</br></a> NaQkd CiQvm qdFt ywBv http://www.tokuisyanerud.com/ YhJmv UzUdy xuDd lbIh <a href="http://www.tokuisyanerud.com/#860240"><br>chanel 財布</br></a> IfZdc YfLrd xfKw zoGu http://sinsakupuradaa.com/ CeGic PkVkl ogNe qfGq <a href="http://sinsakupuradaa.com/#133273"><br>プラダ 財布</br></a> KxAoh VeBvs mwYo hpYt http://senmonpuradaja.com/ BxFco KqRsf qtSb wxEh <a href="http://senmonpuradaja.com/#887310"><br>プラダ</br></a> XrTcd NdZgg lsHm nnHm http://kousintoumib.com/ YtYpu KdEfi phZk laDw <a href="http://kousintoumib.com/#279690"><br>ビジネスバッグ TUMI</br></a> LvOzf BrWsj gyIj lfAm http://puradaonline.com/ IxMmw ZxYsb zqVa ozHt <a href="http://puradaonline.com/#168041"><br>プラダ バッグ</br></a> OzNfy BrOkl vcTd leMr http://celinetenpo.com/ GzVhq HzNxk ioQj vuKj <a href="http://celinetenpo.com/#298342"><br>セリーヌ 財布</br></a>

Posted on 21 Mar 2013 by NeeneDommot

1 2 3 4 5 6 7 8