Skip to content

Latest commit

 

History

History
253 lines (235 loc) · 6.41 KB

README.md

File metadata and controls

253 lines (235 loc) · 6.41 KB
Raw

Meteor + Blaze

JavaScript platforma pre vývoj webových a mobilných aplikácií
Server - Klient applikácie
Umožňuje vyvýjať v jednom jazyku pre server, webový prehliadač a mobilné zariadenia
Server posiela dáta klientovi (webový prehliadač, android appka, ios appka, ...) a on ich zobrazuje

verzia 1.8 (začiatok 2012)

O renderovanie dát sa starajú najmä (jedno z nich)

  • React
  • Blaze (použijeme)
  • Angular

Štruktúra projektu

  • Server
  • Klient
    • renderovanie (html, css, js)
    • interakcia (ui)
  • Spoločné súbory
    • api (kolekcie - databáza, práca s nimi)

Inštalácia

https://www.meteor.com/install

OSX/LINUX

curl https://install.meteor.com/ | sh

WINDOWS

Treba administrátorský comand prompt
Nainštalovať Chocolatey https://chocolatey.org/install
Potom Meteor
choco install meteor

Vývojové prostredie

prakticky čokoľvek (aj notepad) ale použijeme Visual Code
potrebujeme cmd

Vytvorenie projektu
meteor create menorojektu

client/main.js //vstupný bod pre klienta
client/main.html //definuje view template
client/main.css // definuje štýl aplikácie
server/main.js // vstupný bod pre server
package.json // kontrolný súbor pre npm balíčky
paskage-lock.json // npm závislosti
.meteor // interné meteor súbory
.gitignore // git

aplikácia na strane klienta sa skladá z html hlavičky
<head>...</head>
a tela, ktoré je často v samostatnom súbore
<body>...</body>

Blaze

ďalšia dôležitá časť je Template. Ten sa definuje ako:

 <template name="menoTemplatu">
  ...
 </template>

následne sa volá v html

{{> menoTemplatu}}

v javascripte je referencovaný ako Template.menoTemplatu
v js subore sa pre daný template môžu definovať:
funkcie volané z html

Template.menoTemplate.helpers({f1(){},f2(){},..})

eventy (kliknutie myšou, potvrdenie formulára)

Template.menoTemplatu.events({...})

helper sa dá v html volať nasledujúcimi spôsobmi aj s použitím logiky:
Vypíše čokoľvek je jeho návratová hodnota

{{f1}}

Ak vracia pole objektov

{{#each f1}}
  {{> nejakyTemplatePreJedenObjekt}}
{{/each}}

Ak vracia boolean hodnotu

{{#if f2}}
  nejaky kod ked plati
{{else}}
  nejaky kod ked neplati
{{/if}}

kod pre if not

{{#unless f3}}
  nejaky kod ked neplati
{{/unless}}

<body> má špeciálny template Template.body

Kolekcie - Mongo

api súbory

MenoKolekcie = new Mongo.Collection('menoKolekcie');

nájdi/dostaň všetky dáta

MenoKolekcie.find({})

nájdi/dostaň špecifické dáta, ktoré obsahujú tieto hodnoty

MenoKolekcie.find({label1: value1, ... })

vráť presne jeden objekt

MenoKolekcie.findOne({...})

vlož dáta

MenoKolekcie.insert({label1: vlaue1, label2: value2, ... })

update dáta

MenoKolekcie.update({_id: id, ...}, {$set:{label1: value1,...}})

odstráň data

MenoKolekcie.remove(id)

Spúšťanie

Server

Server sa spúšťa pomocou nasledovného príkazu v koreňovom priečinku projektu

meteor

Defaultne sa spúšťa na porte 3000 a mongo databáza beží na porte 3001

iOS simulátor (Mac)

príprava

  meteor install-sdk ios
  meteor add-platform ios

spustenie

   meteor run ios

android emulator

príprava

  meteor install-sdk android
  meteor add-platform android

spustenie

   meteor run android

android zariadenie

príprava

  meteor install-sdk android
  meteor add-platform android

treba pripojiť android cez USB a mať zapnuté debugovanie na androide potom cez cmd

   meteor run android-device

iPhone, iPad (Apple developer account)

príprava

  meteor install-sdk ios
  meteor add-platform ios

spustenie

   meteor run ios-device

Nutnosť v client/main.js (pre prístup cez android, ...)

Treba definovať url servera, na ktorý sa bude appka pripájať.

Meteor.absoluteUrl.defaultOptions.rootUrl = theURL;
process.env.ROOT_URL = theURL;
process.env.MOBILE_ROOT_URL = theURL;
process.env.MOBILE_DDP_URL = theURL;
process.env.DDP_DEFAULT_CONNECTION_URL = theURL;

Fórum app

Použité balíčky

reactive-dict - dočasný stav appky (zobraz/schovaj nejaký element na kliknutie)
accounts-ui - prihlasovanie
accounts-password - prihlasovanie
kadira:flow-router - presmerovanie
kadrida:blaze-layout - dynamicke renderovanie pre Blaze

meteor add reactive-dict
meteor add accounts-ui accounts-password
meteor add kadira:flow-router
meteor add kadira:blaze-layout

Odstránené balíčky

insecure - umožňuje upravoanie databázy z klienta
autopublish - posiela všetky dáta z databázy klientovi

 meteor remove insecure
 meteor remove autopublish

prístup k dátam po odstránení autopublish: Meteor.subscribe Meteor.publish
vkladanie a upravovanie dát po odstránení insecure: Meteor.call

Ako spustiť kód z prednášky

  • Vytvor prázdny projekt a vojdi do priečinka (cmd)
  • Aplikuj príkazy z Použité balíčky (cmd)
  • Aplikuj príkazy z Odstránené balíčky (cmd)
  • Stiahni a rozbaľ jeden zo zip súborov https://github.com/SlavomirSlovenkai/SPS
  • Otvor koreňový priečinok vytvoreného projektu
  • Skupíruj doňho všetky súbory aj s priečinkami (client, imports, server, lib) - prepísať existujúce
  • Spusti projekt (cmd)
  • Prístup cez webový prehliadač
## Ako odovzdať kód
  • Skupíruj všetky súbory aj s priečinkami (client, imports, server, lib)

Úloha 1

Zobraz pri topicu meno autora a dátum vytvorenia.

Úloha 2

Umožni poslať súkromnú správu hocikomu, kto má účet na fóre (teraz môžeš poslať len, tým ktorý sú online, majú odpoveď vo fóre, alebo majú už s tebou začatú komunikáciu)

Úloha 3 (dokončiť)

Vytvor pod-fóra a zachovaj funkcionalitu pre topic.
Každý topic bude súčasťou nejakého pod-fóra. (optional: pod-fórum môže byť časťou iného pod-fóra)