The Future is Present

deliriousattackInternet and Web Development

Dec 4, 2013 (3 years and 6 months ago)

128 views

www.present
-
technol ogi es.com

The Future is
Present

Template: PTECH
-
IMS
-
2010
-
TPL
-
0340
-
V1.2

Phune

Gaming

Multiplayer

gaming

platform

03
-
01
-
2013

2

© Present Technologies

Agenda


Present Technologies
-

Who
we are?


Phune

Gaming


Overview


Methodologies


Server
architecture


HTML5
Client & Games


Client technologies


JavaScript game engines


Live demonstration


Homework


Developing a game


Validating source code

03
-
01
-
2013

3

© Present Technologies

Present Technologies:
Who We Are?

Seminar@ISEC

03
-
01
-
2013

4

© Present Technologies

Present Technologies


Portuguese IT company


Established since 2000


ISO 9001:2008 and NP 4457 (R&DI) certified


Young and highly skilled working team


03
-
01
-
2013

5

© Present Technologies

Mission:


Research and development of innovative services
and applications for the worldwide market, using emergent
and state
-
of
-
the
-
art
technologies.


Business Areas

Mobile
Solutions

Internet
Services and
Applications

Enterprise
Applications

Television

03
-
01
-
2013

6

© Present Technologies

Clients

03
-
01
-
2013

7

© Present Technologies

7

Competences

Content
Management
Systems

HTML5

CSS

JavaScript

Browsers
Capabilities

Adobe Flash

Design &
Usability

03
-
01
-
2013

8

© Present Technologies

Internet

Competences

Java EE

Clustering,
High
Availability
and
Scalability

IMS

Java
EE
Performance
Tuning

Enterprise
System
Architecture
consultancy

03
-
01
-
2013

9

© Present Technologies

Enterprise

Competences

iPhone/iPad

J2ME

Android

Flash

Symbian

WP7

Blackberry

Samsung
Bada

HTML5

03
-
01
-
2013

10

© Present Technologies

Mobile
Platforms

Products

03
-
01
-
2013

11

© Present Technologies

PhuneTV

Products

03
-
01
-
2013

13

© Present Technologies

Store
Locator (AR)

Products


Messaging


Feedback


Polls


Contests


Golden SMS


Secret SMS


Quizzes


Web SMS Ticker


Phune Night Ticker and
Polls


03
-
01
-
2013

14

© Present Technologies

Phune

Messaging

Case Studies


Track live games of
worldwide football
matches


Details of
competitions, teams
and players


in
-
app purchase to
receive push
notifications with live
events

03
-
01
-
2013

15

© Present Technologies

soccerway.com

Android Application

Case
Studies

03
-
01
-
2013

16

© Present Technologies

Euro’12

03
-
01
-
2013

17

03
-
01
-
2013

17

Our
Offside

application was rebranded as

FUT
MOBILE



Flash News

Case
Studies


Rich and advanced User
Interface


Slide show with news
images and headlines


In
-
application interactive
advertisement


News organized by
categories


Easy integration with
external sources of news



03
-
01
-
2013

19

© Present Technologies

Case
Studies

Smart Metering

Real time
information anywhere

Control
it

everywhere

03
-
01
-
2013

20

© Present Technologies

Cloogy

(Android &
iOS
)

Walkar

(
WP7 & WP8)

Case
Studies


Show near
-
by Photos
(integrated with
Panoramio

service):


Camera view (Augmented Reality)


Map view


Virtually position the user
anywhere in the world





Best Windows Phone
Application

AppCircus

Lisbon
(2012
-
06
-
26)

03
-
01
-
2013

21

© Present Technologies

Graffit
-
it

03
-
01
-
2013

24

© Present Technologies

Live
Tweeting
http
://
www.youtube.com/watch?v=4IamF8rMYv8


Case Studies

Tweet on a LIVE show

Access your account on TV

Collapsed view

Phune

Gaming

Seminar@ISEC

03
-
01
-
2013

26

© Present Technologies

Overview


Play online against other real users (Mobile Devices, TVs,
Desktop, etc.):


Casual Games


Social features:


Badges/Achievements/Rankings


In
-
game chat


Facebook/Twitter integration


Tournaments


Dynamic download of games:


Allows total integration between different games


Examples of possible business models:


Pay 1 cent for each match


Pay 1

/month to play all arcade games

03
-
01
-
2013

27

© Present Technologies

End
-
User Features

Overview


Developers will have an easy way
to create and deliver content to a
massive number of
users:


APIs for client and server side


Matchmaking


Game validation rules


Achievement rule
s


Bot support


Phune
Gaming is a social gaming
platform to be used in a vast
universe of embedded
devices


Has a scalable
architecture



03
-
01
-
2013

28

© Present Technologies

Third

Party

Developers

Methodologies


Waterfall based development process:


Requirements specification


Design


Prototyping


Construction and
testing

(continuous Integration)


Installation


Maintenance


03
-
01
-
2013

29

© Present Technologies

Methodologies


Why waterfall?


“Stable” Requirements


Long term objectives and planning


Early deployment was not a priority


Planed research


Predictability


Drawbacks:


Prototypes not included in the main branch


Delayed deployment

03
-
01
-
2013

30

© Present Technologies

Requirements


The SRS, Software
Requirements Specification:


The vision of the product


What the product is and is not


Dictionary


UML for user cases


Functional and non functional
requirements


03
-
01
-
2013

31

© Present Technologies

Server
architecture

Seminar@ISEC

03
-
01
-
2013

32

© Present Technologies

Design


The SAS, Software architecture specification:


How to convert requirements into code?


The system context. Actors, external systems interface,
restrictions


Different views:


Logical.
The

architectural elements that deliver the system's
functionality


Development. The components and their communication;


Business processes. The runtime behavior of the system


Deployment
.
Artifact distribution and communication


Physical. The infrastructure topology of the machines


Validation scenarios


The technology to use

03
-
01
-
2013

33

© Present Technologies

Development environment


Eclipse

EE edition
IDE


Apache Maven
for build
automation

… <dependency>


<
groupId
>
org.jboss.spec
</
groupId
>


<
artifactId
>jboss
-
javaee
-
6.0</
artifactId
>


<version>3.0.1.Final</version>


<scope>provided</scope>


<type>
pom
</type>


</dependency> …


CVS

for version
control


Redmine

for project management and bug
tracking


03
-
01
-
2013

34

© Present Technologies

Development environment


Integration tests with:


Junit

for “unit testing”


Arquillian

platform for middleware integration
and functional testing


Maven

for build and test automation


JBoss

AS 7
Java application server


PostgreSQL

database


Jenkins

for continuous integration


Sonar

for software quality analysis

03
-
01
-
2013

35

© Present Technologies

HTML5 Client & Games

Seminar@ISEC

03
-
01
-
2013

39

© Present Technologies

Server
REST
architecture

summary


Client
-
server:


A uniform interface separates clients from
servers.
Servers
and clients may also be
replaced and developed independently, as long
as the interface between them is not
altered


Stateless
:


The client
-
server communication is further
constrained by no client context being stored on
the server between
requests

03
-
01
-
2013

40

© Present Technologies

RESTful

Constraints

Server
REST
architecture

summary


Cacheable
:


As on the World Wide Web, clients can cache
responses.
Well
-
managed
caching partially or
completely eliminates some client

server
interactions, further improving scalability and
performance


Layered

system
:


Intermediary servers may improve system
scalability by enabling load
-
balancing and by
providing shared caches. They may also enforce
security
policies

03
-
01
-
2013

41

© Present Technologies

RESTful

Constraints

Server
REST
architecture

summary


Code

on

demand

(
optional
):


Servers are able temporarily to extend or
customize the functionality of a client by the
transfer of executable
code such
as Java applets
and client
-
side scripts such as
JavaScript


Uniform

interface:


The uniform interface between clients and
servers, simplifies and decouples the
architecture, which enables each part to evolve
independently

03
-
01
-
2013

42

© Present Technologies

RESTful

Constraints

HTML5
Client

03
-
01
-
2013

43

© Present Technologies

Technology

view

Build

HTML5
Client


Yeoman


Grunt

03
-
01
-
2013

44

© Present Technologies

“Grunt
is a task
-
based
command line build
tool for JavaScript
projects”

--

gruntjs.com

“Yeoman
is a robust and
opinionated set of tools,
libraries, and a workflow that
can help developers quickly
build beautiful, compelling
web apps
.”

--

yeoman.io

HTML5
Client

yeoman

init

03
-
01
-
2013

45

© Present Technologies

Yeoman

HTML5
Client


Lightning
-
fast

scaffolding
:


Easily

scaffold

new

projects

with

customizable

templates

(
e.g

HTML5
Boilerplate
,
Twitter

Bootstrap
), AMD (via
RequireJS
)
and

more

03
-
01
-
2013

46

© Present Technologies

Why

Yeoman
?

HTML5
Client


Automatically compile
CoffeeScript

&
Compass:


Our
LiveReload

watch process automatically
compiles source files and refreshes your browser
whenever a change is made so you don't have
to

03
-
01
-
2013

47

© Present Technologies

Why

Yeoman
?

HTML5
Client


Automatically lint your
scripts:


All
your scripts are automatically run against
jshint

to ensure they're following language
best
-
practices

03
-
01
-
2013

48

© Present Technologies

Why

Yeoman
?

HTML5
Client


Built
-
in preview
server:


No
more having to fire up your own HTTP Server.
My built
-
in one can be fired with just one
command

03
-
01
-
2013

49

© Present Technologies

Why

Yeoman
?

HTML5
Client


Awesome Image
Optimization:


I
optimize all your images using
OptiPNG

and
JPEGTran

so your users can spend less time
downloading assets and more time using your
app

03
-
01
-
2013

50

© Present Technologies

Why

Yeoman
?

HTML5
Client


AppCache

manifest
generation:


I
generate your application cache manifests for
you. Just build a project and boom. You'll get it for
free

03
-
01
-
2013

51

© Present Technologies

Why

Yeoman
?

confess.js

HTML5
Client


Killer build
process:


Not
only do you get
minification

and
concatenation; I also optimize all your image files,
HTML, compile your
CoffeeScript

and Compass
files, generate you an application cache manifest
and, if you're using
AMD
, we'll pass those
modules through r.js so you don't have
to

03
-
01
-
2013

52

© Present Technologies

Why

Yeoman
?

HTML5
Client

yeoman

init

angular

03
-
01
-
2013

53

© Present Technologies

Phune

Gaming Platform Bootstrap

HTML5
Client


AngularJS
:


AngularJS

is what HTML would have been, had it
been designed for building
web
-
apps. Declarative
templates with data
-
binding, MVW, MVVM, MVC,
dependency injection and
great testability
story all
implemented with pure client
-
side JavaScript
!


Demo:

03
-
01
-
2013

54

© Present Technologies

Phune

Gaming

Platform

Framework

Phune

Gaming

Platform

Testing

HTML5
Client


Testacular


Spectacular Test
Runner for
JavaScript


Jasmine
, Mocha
Integration


PhantomJS


PhantomJS

is a
headless
WebKit

with JavaScript API
.

03
-
01
-
2013

55

© Present Technologies

Advantages

HTML5 Games


Easy to use


Broader audience


Multi
-
platform


Easy development and
distribution


Good performance

03
-
01
-
2013

56

© Present Technologies

Technologies

HTML5 Games


Web games have become one of the main focus of
modern web browsers


Animations:


Canvas, WebGL and DOM


CSS Animations / Transforms / Transitions


requestAnimationFrame


Communication:


WebSocket


Control:


DeviceOrientation

API


Audio:


Web Audio API

03
-
01
-
2013

57

© Present Technologies

Game Engines

HTML5 Games


Game Engines:


don't reinvent the wheel


Reduce implementation time


Allows to concentrate on the important/fun parts of
the game


Get best results on common tasks with little effort



Several project have appeared lately:


We have studied 4 popular game engines

03
-
01
-
2013

58

© Present Technologies

Game Engines

HTML5 Games


Bigger set of functionalities


Can be used for any type of game


Uses Closure Libraries


Supports Canvas and DOM





Focused on scrollers and 2D RPGs


Good support for iOS


Focused on animations using sequences of images


Only uses Canvas


Commercial

03
-
01
-
2013

59

© Present Technologies

Game Engines

HTML5 Games


Small and light


Can be used for any type of game


Supports Canvas and DOM




Focused on animations


Only uses Canvas


Sponsored by Adobe and Microsoft


Used by the
Atari Arcade web games platform

03
-
01
-
2013

60

© Present Technologies

Game Engines

HTML5 Games


We choose LimeJS for PTECH in
-
house
game development:


Our objectives are to reduce development time
without loosing the flexibility to develop several
types of games



Games developed for Phune Gaming are free
to use any game engine

03
-
01
-
2013

61

© Present Technologies

HTML5 Games


Phune Gaming adds to web games:


Easy distribution


Match making


Rankings and achievements


Social network integration


Monetization/business model

03
-
01
-
2013

62

© Present Technologies

Phune

Gaming community

W3C Games Community Group

HTML5 Games


We have become members of W3C Games
Community Group that will:


Propose new standards or enhancements to
existing ones


Foment the rapid implementation of them in web
browsers


Evangelizing best practices for web games
development

03
-
01
-
2013

63

© Present Technologies

Live
Demonstration

http://tictactoe.cadsh.com/

Seminar@ISEC

03
-
01
-
2013

64

© Present Technologies

Homework

Seminar@ISEC

03
-
01
-
2013

65

© Present Technologies

HTML5 Game
Development


Game details:


Standalone game:


Phune

Gaming APIs are not yet available


Casual game


Turn based


Free of IPR (Intellectual Property Rights)


Validation:


Well formatted code


Validated using W3C HTML Validator,
JSHint
,
CSS Lint

03
-
01
-
2013

66

© Present Technologies

Requirements

HTML5 Game
Development


Delivery date:


2013/02/28


Prize:


The best game will win a prize:


Award of 1000


for the integration/
productization

of the game on
Phune

Gaming

03
-
01
-
2013

67

© Present Technologies

Contest

Q&A

Seminar@ISEC

03
-
01
-
2013

68

© Present Technologies

We will always try to show
that the Future is
Presen
t

www.present
-
technol ogi es.com

Template: PTECH
-
IMS
-
2010
-
TPL
-
0340
-
V1.2

Victor
Batista (VP & R&DI Director)

vbatista@present
-
technologies.com


Samuel Santos (CTO)

ssantos@present
-
technologies.com


Bruno
Baptista

(Senior Engineer)

bruno.baptista@present
-
technologies.com