Uszanowanko Programowanko #2 - AngularJS - Czyli o czym warto pamiętać programując za Odrą

AngularJSCzyli o czym warto pamiętać

programując za Odrą

Krystian Parma

Odra

Hamburg

Deutsches Elektronen-

Synchrotron

Założenia

• Przyjazna obsługa

• Urządzenia mobilne

• Jeden kod

• Technologie webowe

POTEM ZERKNĘLIŚMY DO

KODU...

Activex

tylko

IE6 i 7

Nasze założenia

• SPA

• technologie

– AngularJS

– Leafletjs

– Java Spring

Zaczynamy...

Metodyka pracy?!

AGILE?

Search

Browse

Read

Nav igate

Submit

Contact

Location

Person

Map

Plan

Equipment

Document

Failure Record

Schedlue

POI

LocateGuest

Visitor

Organization member

(from Search)

«abstract»Search Data

(from Search)

Search Location

(from Search)

Search Person

(from Search)

Search POI

Visitor

Organization member

Search

Guest POI

Person

Location

«abstract»

Browse geodata as

images

«abstract»

Browse list of locable

elements

Browse List of

Locations

Browse List of POI

Browse Plan

Browse Map

GIS Casual Web Client

«abstract»

Browse Geodata

«abstract»

Search Geo and

Person Data

«abstract»

Find position of

Destination

«abstract»

Nav igate to

Destination

«abstract»

Read Destination

Information

Submit Failure or

Issue Report

Visitor / Guest

Organization

Member

Destination - can be

person, facility or POI

Contact Person

«abstract»

Find route to

Destination

«extend»

Location

Person

Equipment

Document

Map

POI

Infrastructure

element

Schedule

Failure Record

Plan

+Facility

User

1

Issues

0..*

+SeminarRoom

1

1

+Caretaker

0..1

Takes care of

+Building

0..*

+Responsible

person

0..1

Is responsible for

+Room

0..*

+Employee

0..1

Occupies

+Workstation

0..*

0..*

has

sublocation

1..*

0..*

1

Can be viewed on

0..*

0..*

Affects

1..*

0..* Affects

1

0..*

Can be viewed on

1..* 0..*

0..*

Can be viewed on

0..*

1

Can be viewed on

0..*

1

Can be viewed on

+Area,

Building

0..*

Describes

0..*

Describes

1..*

0..*

Describes0..*

1..*

Can be viewed on

+Floor,

Room

0..*

0..*

Is located in

0..*

Client side

Main Menu

GPS data

GPS Nav igation Module

GPS data

Tree Browser

Map

QR data

QR Module

QR data

Core Module

Search Box

Action Menu

Locationsdata

Locations Module

Locationsdata

Person data

Person Module

Person data

FR data

Failure Report Module

FR data

POI data

POI Module

POI data

Search Item

Serv er side

REST Serv ices

POIservice Location

service

Person service

FR service

GPS service

QR service

Search Resuls

Person Information

Map with selected

Building

Smart Search

Autocomplete Results

Adv anced Search

Foor plan with selected

Room

Header

Smart Search [Keboard type]

[Smart Search

Textbox selected]

[Search button]

[Advanced search suggestion

(nothing found)]

[Room name]

[Building name]

[Person name]

[Room name]

[Building name]

[Person name]

Guest/Visitor

(from Actors)

Tree Browser

Core

Map

Location

AngularJS

click()

nodeClicked(nodeData)

changeUrl(buildingId)

callController()

highlight(buildingId)

Facility Management

Serv ices

Housekeeping

Serv ices

Support Staff

Serv ices

Property

Management

Serv ices

Security Serv ices Electromechanical

Serv ices

And many more...

«executionEnvironment»

MapGuide Server

Server Application

«executionEnvironment»Web Server

MapGuide Libraries

Extensions

Map Agent«Database Server»

Spatial Data Storage

MapGuide WebStudio

MapGuide AJAX Viever

Custom Viewer

Server Tier

Web Tier

Client Tier

Coordinate System Library

..

.

API

API

Search

Browse

Read

Nav igate

Submit

Contact

Location

Person

Map

Plan

Equipment

Document

Failure Record

Schedlue

POI

LocateGuest

Visitor

Organization member

(from Search)


(from Search)

Search Location

(from Search)

Search Person

(from Search)

Search POI

Visitor

Organization member

Search

Guest POI

Person

Location

«abstract»

Browse geodata as

images

«abstract»


elements

Browse List of

Locations

Browse List of POI

Browse Plan

Browse Map


«abstract»

Browse Geodata

«abstract»

Search Geo and

Person Data

«abstract»

Find position of

Destination

«abstract»

Nav igate to

Destination

«abstract»

Read Destination

Information

Submit Failure or

Issue Report

Visitor / Guest

Organization

Member



Contact Person

«abstract»

Find route to

Destination

«extend»

Location

Person

Equipment

Document

Map

POI

Infrastructure

element

Schedule

Failure Record

Plan

+Facility

User

1

Issues

0..*

+SeminarRoom

1

1

+Caretaker

0..1

Takes care of

+Building

0..*

+Responsible

person

0..1

Is responsible for

+Room

0..*

+Employee

0..1

Occupies

+Workstation

0..*

0..*

has

sublocation

1..*

0..*

1

Can be viewed on

0..*

0..*

Affects

1..*

0..* Affects

1

0..*

Can be viewed on

1..* 0..*

0..*

Can be viewed on

0..*

1

Can be viewed on

0..*

1

Can be viewed on

+Area,

Building

0..*

Describes

0..*

Describes

1..*

0..*

Describes0..*

1..*

Can be viewed on

+Floor,

Room

0..*

0..*

Is located in

0..*

Client side

Main Menu

GPS data


GPS data

Tree Browser

Map

QR data

QR Module

QR data

Core Module

Search Box

Action Menu

Locationsdata

Locations Module

Locationsdata

Person data

Person Module

Person data

FR data


FR data

POI data

POI Module

POI data

Search Item

Serv er side

REST Serv ices

POIservice Location

service

Person service

FR service

GPS service

QR service

Search Resuls

Person Information

Map with selected

Building

Smart Search


Adv anced Search


Room

Header


[Smart Search

Textbox selected]

[Search button]


(nothing found)]

[Room name]

[Building name]

[Person name]

[Room name]

[Building name]

[Person name]

Guest/Visitor

(from Actors)

Tree Browser

Core

Map

Location

AngularJS

click()



callController()


Facility Management

Serv ices

Housekeeping

Serv ices

Support Staff

Serv ices

Property

Management

Serv ices


Serv ices

And many more...

Search Resuls

Main Menu

Tree Browser

Map with selected Building

Building Information

Smart Search Autocomplete ResultsAdvanced Search

Adjusted Advanced Search

Header

Smart Search

[Building name]

[Tree Browser menu option]

[Building name]

[Search Scopeselect]

[Search button]

[Building name]

[Keboard type]

[Main Menu button]

[Advanced Search menu option]


(nothing found)]

[Search button]

[Smart SearchTextbox selected]

[Show on the Map button]

«executionEnvironment»

MapGuide Server

Server Application

«executionEnvironment»Web Server

MapGuide Libraries

Extensions

Map Agent«Database Server»

Spatial Data Storage

MapGuide WebStudio

MapGuide AJAX Viever

Custom Viewer

Server Tier

Web Tier

Client Tier

Coordinate System Library

..

.

API

API

Search

Browse

Read

Nav igate

Submit

Contact

Location

Person

Map

Plan

Equipment

Document

Failure Record

Schedlue

POI

LocateGuest

Visitor

Organization member

(from Search)


(from Search)

Search Location

(from Search)

Search Person

(from Search)

Search POI

Visitor

Organization member

Search

Guest POI

Person

Location

«abstract»

Browse geodata as

images

«abstract»


elements

Browse List of

Locations

Browse List of POI

Browse Plan

Browse Map


«abstract»

Browse Geodata

«abstract»

Search Geo and

Person Data

«abstract»

Find position of

Destination

«abstract»

Nav igate to

Destination

«abstract»

Read Destination

Information

Submit Failure or

Issue Report

Visitor / Guest

Organization

Member



Contact Person

«abstract»

Find route to

Destination

«extend»

Location

Person

Equipment

Document

Map

POI

Infrastructure

element

Schedule

Failure Record

Plan

+Facility

User

1

Issues

0..*

+SeminarRoom

1

1

+Caretaker

0..1

Takes care of

+Building

0..*

+Responsible

person

0..1

Is responsible for

+Room

0..*

+Employee

0..1

Occupies

+Workstation

0..*

0..*

has

sublocation

1..*

0..*

1

Can be viewed on

0..*

0..*

Affects

1..*

0..* Affects

1

0..*

Can be viewed on

1..* 0..*

0..*

Can be viewed on

0..*

1

Can be viewed on

0..*

1

Can be viewed on

+Area,

Building

0..*

Describes

0..*

Describes

1..*

0..*

Describes0..*

1..*

Can be viewed on

+Floor,

Room

0..*

0..*

Is located in

0..*

Client side

Main Menu

GPS data


GPS data

Tree Browser

Map

QR data

QR Module

QR data

Core Module

Search Box

Action Menu

Locationsdata

Locations Module

Locationsdata

Person data

Person Module

Person data

FR data


FR data

POI data

POI Module

POI data

Search Item

Serv er side

REST Serv ices

POIservice Location

service

Person service

FR service

GPS service

QR service

Search Resuls

Person Information

Map with selected

Building

Smart Search


Adv anced Search


Room

Header


[Smart Search

Textbox selected]

[Search button]


(nothing found)]

[Room name]

[Building name]

[Person name]

[Room name]

[Building name]

[Person name]

Guest/Visitor

(from Actors)

Tree Browser

Core

Map

Location

AngularJS

click()



callController()


Facility Management

Serv ices

Housekeeping

Serv ices

Support Staff

Serv ices

Property

Management

Serv ices


Serv ices

And many more...

Search Resuls

Main Menu

Tree Browser

Map with selected Building

Building Information

Smart Search Autocomplete ResultsAdvanced Search

Adjusted Advanced Search

Header

Smart Search

[Building name]

[Tree Browser menu option]

[Building name]

[Search Scopeselect]

[Search button]

[Building name]

[Keboard type]

[Main Menu button]

[Advanced Search menu option]


(nothing found)]

[Search button]

[Smart SearchTextbox selected]

[Show on the Map button]

uc Find position_v2(from Overview)

«abstrac

t»

Find position of

Destination

Find position of

Person office

Find position of POI

«abstrac

t»

Find position of

Location POI's location

Person's officeFind position of Room

Find position of

Building

Find position of Floor

«invokes

»

«invokes

»

WHAT HOW WHERE WHO WHEN WHY

Locations

Persons

Inventory

Documents

Reports

Maps

Plans

Points of

Interest

Infrastructure

Schedules

View location

or person data

Browse list of

locations

Search for

facility or

person

Browse map or

plan

Contact person

Show facility

position on

map

Report failure

or issue

Analyze

facility state

Order cleaning

services

Assign people

to space

Handle failure

or issue

notification

Inspect state of

infrastructure

or equipment

Repair or

Replace

infrastructure

or equipment

Handle failure

or issue

notification

On site office

spaces

On site outside

areas

On site

underground

areas

On site

experimental

areas

On site public

buildings

On site

cooperating

institutions

Off-site

locations

Mobile devices

PCs

Info-kiosks

Administration

Manager

Construction

Engineer

Quality

Assurance

Engineer

Safety

Engineer

Facility

Manager

Process

Enhancer

Planner &

Designer

Security Expert

Guest/Visitor

Summer

studies

Seminars /

Lectures /

Disputes

Guest events

Staff events

Begin of

construction

project

End of

construction

project

Begin of

maintenance

shutdown

End of

maintenance

shutdown

Better public

reception

Improved

internal

navigation and

communication

Easier

maintenance

and repairs

management

More efficient

space

utilization

Building

maintenance

costs reduction

Easy, fast and

accurate failure

reporting

Efficient

management of

safety

inspections

...PLANOWANIE TO

PODSTAWA!

Pamiętaj o tym, że...

Legacy code!!!

SDD

Dokumentacja?

Twórcy?

...SPIESZMY SIĘ KOCHAĆ

DEVÓW, TAK SZYBKO

ODCHODZĄ.


• GebäudeNummer

• Raumschlüssel

• BruttoNutzfläche

• Flächeneigentümer

Klucze

w ascii?

...NALEŻY SZANOWAĆ SWÓJ

JĘZYK!


BESCHLEUNIGERKOMPONENTEN

LAGER

Spacja nie zawsze jest konieczna, a ngFittext i overflow:hidden

to twói przyjaciele!


COŚ DLA MISTRZÓW SEO!

MEE

TUP

DESY

...NIEMIECKIE RZECZOWNIKI

DOBRZE SIĘ POZYCJONUJĄ!


DRZEWKODAS

HAUPTLEISTUNGSPROBLE

M

PONAD 6000

WĘZŁÓW!

ng-repeat, ng-Filter!!!

Bindonce

jquery

...CZASEM TRZEBA SCHOWAĆ

DUMĘ ANGULAR DEVELOPERA DO

KIESZENI!


Ciągle coś nie tak...

...MAŁE NIE ZAWSZE CIESZY!


WARSTWY W

LEAFLECIE

Killing feathure!

A MOŻE BY TAK UPDATE?

Values 'f', '0', 'false', 'no', 'n', '[]' are no longer treated as falsy.

...UPDATE PRZY DEPLOYMENCIE

JEST ZŁY


O czym warto pamiętać?

• Przygotuj się na muzealny kod

• Planowanie i analiza do podstawa

• Nie bój się pytać I dyskutować

• Polub niemiecki I pokochaj UTF8

• Niemcy to spoko ziomki

• Poznasz wielu wspaniałych ludzi

• Podróże kształcą

• Niemieckie kebaby są naprawdę pyszne!

KONIECZNIE SIĘ TAM

WYBIERZ!

Możesz jechać do desy?

Uszanowanko Programowanko #2 - AngularJS - Czyli o czym warto pamiętać programując za Odrą

Software

Transcript of Uszanowanko Programowanko #2 - AngularJS - Czyli o czym warto pamiętać programując za Odrą