Telekonsultacje
Michał Zdunek
Funkcjonalność aplikacji
- Zdalna analiza i oglądanie serii zdjęć
- Tagowanie zdjęć
- Manipulacje na zdjęciach (rozjaśnianie, wyostrzanie itp.)
- Możliwość globalnej lub lokalnej widoczności zmian
- Komunikacja tekstowa (czat)
- Komunikacja audio-wideo
Typ aplikacji - desktopowa czy webowa?
- Aplikacja webowa jest dostosowana do komunikacji przez internet
- Łatwość tworzenia interfejsu w aplikacji webowej (HTML, CSS)
- Ograniczenie do środowiska przeglądarki
- Problemy z komunikacją w czasie rzeczywistym
Komunikacja przez websockets
Technologia WebRTC
- Przesyłanie danych peer-to-peer między przeglądarkami bez użycia zewnętrznych wtyczek
- Wspierana w najnowszych wersjach przeglądarek
- getUserMedia - umożliwia przeglądarce dostęp do kamery oraz mikrofonu
- RTCPeerConnection - uruchamia komunikację audio i wideo
- RTCDataChannel - umożliwia komunikację peer-to-peer między przeglądarkami
Architektura aplikacji po stronie serwera
- Środowisko Ruby on Rails
- Rozbudowany i sprawdzony framework do tworzenia aplikacji internetowych
- Architektura Model-Widok-Kontroler (ang. MVC)
- Duża ilość dostępnych dodatków
Ruby on Rails 5 - Action Cable
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from "chat_#{params[:room]}"
end
def receive(data)
ActionCable.server.broadcast "chat_#{params[:room]}", data
end
end
App.chatChannel = App.cable.subscriptions.create { channel: "ChatChannel",
room: "Best Room" },
received: (data) ->
# data => { sent_by: "Paul", body: "This is a cool chat app." }
App.chatChannel.send({ sent_by: "Paul", body: "This is a cool chat app." })
ReactJS
- Biblioteka do tworzenia komponentów, z których składa się interfejs użytkownika
- Przykład:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
CamanJS
- Biblioteka do modyfikowania obrazków wygenerowanych w znaczniku <canvas>
- Przykład:
Caman('#my-image', function () {
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
Logowanie
- Zaimplementowane przy użyciu dodatku Devise, rozszerzone o nazwę użytkownika
Zdjęcia
- Jeden model dla zdjęć, przechowujący ich nazwę, treść oraz stan ich modyfikacji
Interfejs użytkownika
Wideoczat
- Zaimplementowany z pomocą dodatku TalkingStick
Kanał PhotoChannel
class PhotoChannel < ApplicationCable::Channel
def subscribed
...
ActionCable.server.broadcast "photo_#{params[:id]}", data
end
def update(data)
...
end
def add_tag(data)
...
end
def delete_tag(data)
...
end
def add_message(data)
...
end
end
Komponent InputRange
<div className="range-label">Powiększenie:</div>
<InputRange
minValue={100}
maxValue={300}
value={this.state.scale}
onChange={this.handleScaleChange.bind(this)}
onChangeComplete={this.finishChange.bind(this)}
/>
Skalowanie oraz przesuwanie zdjęcia
<canvas
id="img-canvas"
width={default_width}
height={default_height}
style={{transform: `scale(${this.state.scale / 100})`,
position: "absolute",
left: this.state.x,
top: this.state.y,
}}
onMouseDown={this.startDragging.bind(this)}
onMouseUp={this.stopDragging.bind(this)}
></canvas>
getWithinBoundaries() {
let sideMargin = (this.state.width * (this.state.scale/100 - 1)) / 2;
let verticalMargin = (this.state.height * (this.state.scale/100 - 1)) / 2;
x = Math.max(Math.min(this.state.x, sideMargin), -sideMargin);
y = Math.max(Math.min(this.state.y, verticalMargin), -verticalMargin);
this.setState({x, y});
return {x, y};
}
Wyświetlanie tagów
renderTag(tag) {
let middleWidth = this.state.width / 2;
let middleHeight = this.state.height / 2;
let multiplier = this.state.scale / 100;
let x = (tag.x - middleWidth) * multiplier + middleWidth + this.state.x;
let y = (tag.y - middleHeight) * multiplier + middleHeight + this.state.y;
return (
<div key={tag.id} className="tag" style={{left: x, top: y}}>
<a href="#" onClick={this.deleteTag.bind(this, tag)}>x</a> {tag.text}
</div>
)
}
Możliwości rozwoju
- Tworzenie prywatnych zdjęć
- Bardziej rozbudowane modyfikacje - np. modyfikowanie części obrazka
- Komunikacja jeden na jeden
Telekonsultacje
By mzdunek93
Telekonsultacje
- 609