Návrh veledíla a příprava podhoubí

Minule jsem sliboval, nyní je čas plnit. Dnes si připravím výzvu v podobě seznamu fuknčností, kterou se budu v následujících dnech snažit realizovat. Doufejme úspěšně. Na konec, abych pořád jen nefilosofoval, si připravím vývojové prostředí – Ember.js základ servírovaný RoR aplikací.

Je pravdou, že sice mám rád vše živé, o to víc, když je to roztomilé. Nicméně moje láska ke zvířatům se omezuje pouze na mazlení, co se týká zdravovědy, nevím o tom zhola nic. Přesto si říkám, že rezervační systém pro veterinární kliniku se přeci nebude moc lišit od ostatních, podobně založených, aplikací.

Co to bude umět?

Aby se seznam funkčností dal vůbec nějak uchopit, rozdělil jsem uživatelské role v aplikaci na

  1. klienta,
  2. a správce.

Klient

Na všech rezervačních systémech, co jsem prošel, mě neuvěřitelně obtěžovala jejich nepřehlednost. Vždy se mi zobrazila obrazovka plná textu, políček, barviček a já jsem musel zkoumat, kam vlastně mám klinkout … boha jeho, já si chci zahrát badminton, ne přemýšlet nad tím, co zrovna tahle divně šedivá barva znamená.

Moje aplikace bude lepší! Nechci aby byl klient kliniky zmaten jak lesní včela, chci, aby si pohodlně zarezervoval očkování svého mazlíčka a navíc z toho měl skvělý pocit. Celý proces bude jednoduchý, několika-málo-krokový, průvodce s pár otázkami a s přehledným výběrem konkrétního času na konci. Jednotlivé kroky budou:

  1. Výběr zákroku (vakcinace, prohlídka, kardio vyšetření, …). Ten určí, kolik přibližně času je pro něj potřeba rezervovat.

    Výběr přibližného termínu (v tomto týdnu, příští týden, kdykoliv). Údaj pomůže systému vybrat nejlepší časy a rozmezí zobrazeného kalendáře v jednom z dalších kroků.

  2. Informace o klientovi a jeho mazlíčkovi. Požadovány budou jen ty nezbytné – jméno klienta, emailová adresa, druh a jméno zvířátka a nakonec jeho telefonní číslo.

  3. Výběr konkrétního času. Přehledná forma kalendáře s vyznačenými časovými úseky, které se pro klientův požadovaný zákrok hodí. Po kliknutí na něj se přesně určí čas a den, který je možno zarezervovat.

  4. Rekapitulace a potvrzení. Nu a nakonec to klient vše povrdí a tím odešle do systému.

Co se ale z pohledu klienta bude dít potom?

  1. Přijde mu potvrzovací email a SMS s informací, že rezervace byla přijata a čeká na schválení lékařem.
  2. Po shválení rezervace bude odeslán email a SMS s potvrzeným termínem.
  3. Navíc den před termínem návštěvy bude poslán ještě jeden email a SMS, aby klient nezapomněl, že má dorazit na veterinu.

V tuto chvíli ještě opomíjím možnost registrace a přihlášení klienta, chci aby to z počátku bylo co nejjednodušší, nicméně s tím bude počítáno a v budoucnu se funkčnost rozšíří.

Správce

Správcem aplikace bude veterinář, proto ani na něj nechci valit přehršle políček, tlačítek, hejbátek a možností. Práce v aplikaci pro něj musí být rychlá a pohodlná, proto se budu ve funkcích omezovat pouze na to nejnutnější.

  1. Manuální rezervace. Minimálně z počátku budou klienti, jak jsou nyní zvyklí, převážně volat, proto zpřístupním správci možnost manuální rezervace. V podstatě se bude jednat o průvodce, který je popsán výše.
  2. Správa rezervací. Umožněny budou všechny základní operace s rezervacemi – její schválení, zrušení, úprava či její detailní výpis.
  3. Nastavení termínů, lékařů (ordinací) a úkonů. U popisu funkcí klientské role jsem uváděl, že si jako jednu z prvních věcí bude vybírat druh zákroku – ty tedy musí mít správce možnost nastavit. Stejně tak mu bude umožňěno nastavit rezervovatelné dny a hodiny – to sice s možností automatického opakování, společně s možností upravit jednotlivé dny dle potřeby (dovolené, neplánované operace, nepřítomnosti lékařky, atp.).

Tohle myslím popisuje vše, co bude (minimálně z počátku) potřeba. Vypadá to, že toho moc není, ale to je přeci dobře, ne? Nechci lesní včely, ale spokojené uživatele – čím méně se toho budou muset učit a zkoumat, tím lépe. Pac a KISS, tvoje Máňa!

Sliboval tu někdo wireframy?

Když jsem si přečetl, co jsem všechno minule nasliboval, trochu mě polilo. Nu což, tvrdej chlap sliby plní a já ostatně taky. Uvařil jsem kafe a jal se kreslit.

Výsledek mého snažení jsem poslal na dropbox, jedná se o tři obrázky (první, druhý a třetí). Bohužel aktuálně nedisponuji skenerem, tak jsem to ladně vyfotil, snad se to dá přečíst.

A sedmý den odpočíval, jdeme do finiše

Teď už tedy mám rámcovou představu o tom, co moje veledílo bude umět, dokonce i vím jak to rámcově budě vypadat. Už jen mít, po vzoru našich předků a možná i následovníků, kde budovat. Co vše bude potřeba?

  1. Ruby,
  2. Ruby on Rails,
  3. založit nový Rails projekt,
  4. Ember.js,
  5. a na závěr otestovat, jestli vše pohromadě funguje.

Všechny instalace budu provádět na Mac OS, tudíž instalace na libovolné Unixovém systému se nebude příliš lišit. MS Windows nechám tak trochu v pozadí, ale věřím, že i na “widlích” vše půjde celkem snadno.

Instalace Ruby

Nainstalovat Ruby není tak složité, Mac OS dokonce má nějakou starší verzi v sobě přibalenou už po instalaci, udržet však krok s novými verzemi, nebo dokonce mezi nimi přepínat, je bez pomoci téměř nemožné. Všechny problémy vyřeší RVM. Pro instalaci RVM a jednotlivý verzí Ruby (na Mac OS) jsou potřeba Developer Tools – což asi většina stejně má, ty co ne, uvařit kávu a hurá na dlouho trvající instalaci přes App Store. Instalace RVM (dle instrukcí na webu):

1

$ curl -L https://get.rvm.io | bash

Po úspěšné instalaci, jsem byl upozorněn na nezbytnou úpravu souboru ~/.bash_profile vložením následujícího:

~/.bash_profile
1
2
3

export RBENV_ROOT=/usr/local/var/rbenv

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*

Učinil jsem tak a otestoval si, že RVM funguje.

1
2
3

$ rvm -v

rvm 1.22.3 () by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.io/]

Skvěle, teď instalace aktulní verze Ruby společně s další kávou, kompilace chvilku zabere:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$ rvm list known
# MRI Rubies
[ruby-]1.8.6[-p420]
[ruby-]1.8.7[-p374]
[ruby-]1.9.1[-p431]
[ruby-]1.9.2[-p320]
[ruby-]1.9.3[-p448]
[ruby-]2.0.0-p195
[ruby-]2.0.0[-p247]
[ruby-]2.0.0-head
ruby-head

...

$ rvm install 2.0.0
...

$ rvm use 2.0.0 default
Using ~/.rvm/gems/ruby-2.0.0-p247

$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.3.0]

To šlo celkem hladce.

Instalace Ruby on Rails

Piece of cake:

1
2
3
4
5
6

$ gem install rails
...
Successfully installed rails-4.0.0

$ rails -v
Rails 4.0.0

Další úspěch, nic člověka nenaplňuje více, než úspěchy, sic drobné, ale přesto úspěchy.

Nový projekt

Pro znalé drážní programátory není vytvoření nové aplikace žádný problém.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$ rails new vetreserv
	create
 	create  README.rdoc
 	create  Rakefile
	create  config.ru
	create  .gitignore
	create  Gemfile
	create  app	
	...
	   run  bundle install
Fetching gem metadata from https://rubygems.org/....
...
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

Ember.js

Pro zkloubení Railsí aplikace a Ember.js jsem si vybral balíček ember-rails, jeho popis obsahuje hezký návod, jak ho nainstalovat.

  • Do Gemfile mojí aplikace přidám:
Gemfile
1
2
3

gem 'ember-rails'
gem 'ember-source', '1.0.0'
gem 'handlebars-source', '~> 1.0.12'
  • Nainstaluji nové balíky:
1

~/vetserv$ bundle install
  • Aby byla při vývoji použitá vývojová verze Emberu přidám do config/environments/development.rb následující řádek:
config/environments/development.rb
1

config.ember.variant = :development
  • Vygeneruji si strutkuru Ember.js aplikace:
1

~/vetserv$ rails g ember:bootstrap -g --javascript-engine coffee
  • Nakonec jsem se rozhodl zaktualiziovat Ember.js na nejnovější verzi:
1
2
3
4
5

~/vetserv$ rails g ember:install --head
downloading:  http://builds.emberjs.com/ember-latest.js -> vendor/assets/ember/development/ember.js
downloading:  http://builds.emberjs.com/ember-latest.min.js -> vendor/assets/ember/production/ember.js
downloading:  http://builds.emberjs.com/ember-data-latest.js -> vendor/assets/ember/development/ember-data.js
downloading:  http://builds.emberjs.com/ember-data-latest.min.js -> vendor/assets/ember/production/ember-data.js

První pidi Ember.js aplikace

Abych si ověřil, že vše funguje, připravím si malou aplikaci. Takový ten obligátní Hello World. Začnu s vygenerováním hlavního kontroléru s jedinou akcí

1
2
3
4
5
6

~/vetserv$ rails g controller static index
  	 create  app/controllers/static_controller.rb
	  route  get "static/index"
	 invoke  erb
	 create    app/views/static
	 create    app/views/static/index.html.erb

a nasměruji na něj root routu pomocí řádku root :to => 'static#index', výsledný soubor vypadá nějak takto:

vetreserv/config/routes.rb
1
2
3
4

Vetreserv::Application.routes.draw do
  root :to => 'static#index'
  get "static/index"
end

Teď přichází na řadu kontrola, zda to funguje – první spuštění “aplikace”:

1
2
3
4
5
6
7
8

~/vetserv$ rails s
=> Booting WEBrick
=> Rails 4.0.0 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2013-09-05 16:30:00] INFO  WEBrick 1.3.1
[2013-09-05 16:30:00] INFO  ruby 2.0.0 (2013-06-27) [x86_64-darwin12.3.0]
[2013-09-05 16:30:00] INFO  WEBrick::HTTPServer#start: pid=75033 port=300

Server naběhl, otevírám prohlížeč a zadávám adresu http://localhost:3000, po otevření JavaScript konzole vidím následující výpis:

1
2
3
4
5
6

DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0
DEBUG: Handlebars.VERSION : 1.0.0
DEBUG: jQuery.VERSION : 1.10.2
DEBUG: -------------------------------
DEBUG: For more advanced debugging, install the Ember Inspector from https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi

Všechno jede, paráda.

Po drobném pídění se v dokumentaci jsem schopen sepsat svou první Ember.js aplikaci, jediné, co je prý potřeba, je napsat jednoduchou šablonu:

vetreserv/app/assets/javascripts/templates/application.hbs
1
2
3
4
5
6
7
8
9
10
11
12


<header>
    <h1>Hello World</h1>
</header>

<div>
    {{ input type="text" value=name placeholder="Vaše jméno pane?" }}
    <div>
        <p>Moje jméno je <strong>{{ name }}</strong> a chci napsat reálnou Ember.js aplikaci!</p>
    </div>
</div>

Po obnovení stránky se dostavuje pocit, který nejspíše měl MacGyver při sestavení své první nukleární zbraně z dvou kancelářských sponek, vše funguje!

A to je vše, přátelé!

Na konec se sluší říct, že celá aplikace bude samozřejmě open source, po každém příspěvku budou na Githubu k nalezení aktuální zdrojové kódy, navíce ke každému článku udělám tag, aby se drahý čtenář mohl podívat, jak se nám ten vývoj posunul. Odkaz vždy přidám.

Pro dnešek je toho až dost, příště poodhalím vizuální podobu několika obrazovek aplikace. Navíc, má-li tento blog být o Ember.js, se pustím do jejich implementace – zatím nejspíš pouze vizuálně, uvidíme.

Odkazy

Komentáře