Choose a man Love is complicated, shopping is simple

Java EE - Tongji University Shanghai

IntroducingThe new online dating service in China

The idea

1

Boys are pr ducts

Girls are cust mers

Online dating serviceWhere

Our values

E-commerce styleGameDedicated to girls

The team

2

RogerTan

BertrandNguyen-Hao

RomainCapot

NicolasDanino

SureshRajalingam

SylvainDevaux

AdrienAbad

7 members2 Team

Technologies

3

1 Project

Java

JavaServer Faces

Hibernate Framework

PrimeFaces

Google Maps API

Yoda-Time

Tomahawk

Compass

Mustache.js

Socket.io

jQuery

HTML5

CSS3

AJAX

Node.js

MySQL

16Technologies

The way to love

3

Sign-up

Fill herprofile

Receive a charmfrom a guy

Talk

Put the handsome guy

in her cart

Talk

Talk

And more...

Talk

Demo

4

DEMO

Architecture

5

Model ViewController

Model ViewController

Code

5

The map Research Home Registration Notification

We are going to explain you the operationof five elements of the website

The map

City + Region

1

We have the city and the regionof each user in the database

The map

Google MapsAPI

City + Region

1 2

We sends the city and the region to the Google Maps API

The map

Google MapsAPI

City + Region

1 2 3

GPS Data

The API sends back the GPS information of the city

The map

Google MapsAPI

City + Region

1 2 3 4

Google MapsAPI

GPS Data

Then, we send the GPS information to the Google Maps API again

The map

The map

Google MapsAPI

City + Region

1 2 3 4 5

Google MapsAPI

GPS Data The map

Finally, we get the map with the pin.We display it on the user’s profile

Research

When a search form is filledAn object research is build

with all criteria

Object research

But the information are stored in many tables

Information stored into tables

Object research

How to match them for building our research query ?

Information stored into tables

Object research

Information stored into tables

Object research

We use the reflection to solve it (reflective programming paradigms)

Reflection

Information stored into tables

Object research

So now we have our research query

SQL Query

So, we have our research query

The researchThe process

SQL Query

1

We send it to Hibernate(Object-Relational Mapping)

The researchThe process

Hibernate ORM

1 2

SQL Query

The researchThe process

We get back a list of users that match with the research query

Hibernate ORM

List of users

1 2 3

SQL Query

The researchThe process

Then, the list is changed accordingto the distance between the two users

Hibernate ORM

List of usersSort by

distance

1 2 3 4

SQL Query

Finally, a match percentage is calculated and the list is sorted

The researchThe process

Hibernate ORM

List of usersSort by

distanceMatch

Percentage

1 2 3 4 5

SQL Query

Home

Quick Research

Home

Quick Research

Carousel of thebest buyers of the month

Home

Quick Research

Carousel of thebest buyers of the month

Carousel of peoplein the same province

Home

Quick Research

Carousel of thebest buyers of the month

Carousel of lastconnected people

Home

Carousel of peoplein the same province

Quick Research

Carousel of thebest buyers of the month

Home

Carousel of peoplein the same province

Carousel of lastconnected people

Carousel ofthe contact list

Home

Quick Research

Carousel of thebest buyers of the month

Carousel of peoplein the same province

Carousel of lastconnected people

Carousel ofthe contact list

Registration

RegistrationA form example

E-mailVerified format

BirthdayMinimum 18

Password SHA1 Encryption

GenderNicknameReal name

Notification

The notification system

We have 3 types of events

Adoption Message Charm

The events

The notification systemThe process

The user makes one of the three eventsto another user

1

Action

The notification systemThe process

The Javascript client sends the event to the server with 2 parameters : the sender’s nickname

and the receiver’s nickname

1 2

Action Event sender

The notification systemThe process

The server catches the eventand finds the socket of the receiver

in an associative array

1 2 3

Action Event sender Node.js Server

The notification systemThe process

The server sends an eventto the receiver

1 2 3 4

Action Event sender Event receiverNode.js Server

The notification systemThe process

The receiver receives the event and displays the pop-up to the user

1 2 3 4 5

Action Event sender Node.js Server Event receiver Pop-up

Choose a man Love is complicated, shopping is simple

Your new online dating service

Thanks to them !Concept

Original idea by AdopteUnMec.com

Slides inspirationEmiland de Cubber

Nancy Duarte

The Noun ProjectEngrenages by Max Hancock

Search by Phil GoodwinCompare by Tim Shedor

Magic by Natalia BłaszczykSign Up by Charlene Chen

Divorce by Luis PradoPhare by Paulo Volkova

User by Ryan OksenhornLocation by Ricardo Moreira

Shopping Cart by John CasertaLove Shack by Luis Prado

Birthday Cake by Grant WilsonCompare by Tim Shedor

Database by Ed JonesCompass by Jardson AraújoTeam by Björn Andersson Time by Richard de Vos

Double Tap by Mert GutavChat by Atelier Iceberg

Heart by Jetro Cabau Quirós

Eye by Mateo ZlatarSign Up by Jens Windolf

Lock by Andy FuchsBuilding Block by Michael Rowe

Boy by Michael RoweConstruction by OCHA AVMUMustache by Ade Harnusa Azril

Test Tube by Zach GrahamKey by William J. SalvadorCity by Juan Pablo Bravo

Axe by Guvnor CoData Analysis by Brennan Novak

Button by Travis YunisTeam by Ed Gray

Server by aLfEnvelope by Jonathan Gibson

Race Track by Liau Jian JieFlag by Stanislav Levin

Percent by Axel HerrmannQuestion by Chok Hernández

CSS by Qinq Li

UniversityEPITECH Paris

Tongji University Shanghai