Raspberry Pi návody

Coder

06.04.2014

Tento projekt postavený na Raspbianu je zaměřený na výuku webových technologií HTML, CSS a JavaScriptu. Coder je něco jako JSFIDDLE a podobné online aplikace. Navíc ale přináší možnost používání obrázků a zvuků a hlavně Node.js, tedy JavaSript na serveru, který v tomto případě představuje Raspberry Pi.

Instalace

Coder se instaluje stejně jako jiné operační systémy. Na stránce projektu si stáhneme obraz a pokračujeme podle návodu v kapitole Příprava SD karty.

Dál je potřeba mít Raspberry Pi zapojené do sítě aby jsme k němu mohli přistupovat z počítače. Nastavení sítě najdete v kapitolách Wi-Fi a Ethernet. V případě, že používáte Windows budete si muset nainstalovat program Bonjour Print Services for Windows.

Pak už stačí otevřít prohlížeč a zadat adresu https://coder.local/. Prohlížeč Vás bude varovat před certifikátem, ale můžete klidně pokračovat.

Zobrazí se vám stránka, kde budete muset napřed zadat dvakrát nové heslo. Potom už se dostanete na přihlašovací stránku, kde se můžete přihlásit heslem, které jste si právě vytvořili.

Popis prostředí

Po přihlášení se otevře hlavní stránka se seznamem vytvořených projektů. Po instalaci už jsou připravené tři projekty a jeden z nich je hra Space Rocks!.

Kliknutím na tlačítko v pravém horním rohu. Na kterém je lomítko mezi špičatými závorkami se dostaneme do úpravy kódu projektu.

Upravovat můžeme HTML, CSS, JavaScript a Node.js. Dalšími třemi ikonami se dají nahrávat obrázky a zvuky nebo lze zobrazit výsledek vedle kódu.

Import projektů

Pro lepší sdílení projektů je možné projekty ukládat do zip souborů a tyto soubory pak nahrát. Na stránkách s projekty je možné si několik již hotových výtvorů stáhnout. Při vytváření nového projektu pak stačí kliknout na ikonu se šipkou a vybrat stažený projekt.

Pokud vám při vkládání staženého projektu vyskočí tato chyba, je třeba udělat malou úpravu v jednom souboru Coderu.

1. Otevřeme si soubor index.js.

   $ nano /home/coder/coder-dist/coder-base/static/apps/coder/js/index.js

2. Pouřijeme zkratku Ctrl+W pro vyhledání slova zip v souboru.

3. Zakomentujeme tyto řádky tím, že před ně napíšeme dvě lomítka.

   //if (!importfile.type.match('application/zip')) {
   //	alert('This doesn\'t appear to be a Coder project zip file');
   //	return false;
   //}

4. Uložíme soubor zkratkou Ctrl+O a zavřeme zkratkou Ctrl+X.