Jak pomocí Azure vyrobit jednoduchý zpěvník nejen na hudební výchovu?

20. 12. 2019 Azure, Programming

Jste učitel hudební výchovy a máte problém s tím, že vám chybí nové písničky ve školních zpěvníčkách, zpěvníčky se vám často rozbijí či jsou těžké a nechtějí se vám nosit? V tom případě je digitální online zpěvníček přesně pro vás a jeho výroba není těžká. Výhoda zpěvníčku je, že ho můžete otevřít na jakémkoliv zařízení, které má nainstalovaný webový prohlížeč – takže na každém.

Požadavky

Výroba kódu

Spustíme si Visual Studio Code a založíme si v něm novou složku, ve které budeme pracovat. V ní si vytvoříme čtyři soubory:

Ukázka struktury | zdroj: code.visualstudio.com/

Indexový soubor se spustí při spuštění naší jednoduché webové aplikace. Budeme ho používat jako seznam písniček.

Soubor 001_FrenkieDlouhan_vzor.html použijeme jako konkrétní písničku.

Zbylé dva soubory použijeme k tvorbě jednoduchého skriptu pro zjednodušení psaní textů a pro nastylování naší stránky.

Tvorba indexové stránky

Jako první začneme psát příkaz a necháme si vygenerovat základní strukturu html stránky. Místo Page Title napíšeme název naší stránky. Veškerý další kód budeme psát mezi tagy <body>.
Indexový soubor můžeme pro začátek sestavit maximálně jednoduchý, další doplňky můžeme dodělat v budoucnu.

Vytvoříme nadpis první úrovně – ten vložíme mezi tagy <h1>. Do něj napíšeme název našeho zpěvníčku – např. Petrův zpěvníček.

Dále vytvoříme nadpis druhé úrovně (tagy <h>) a ten pojmenujeme obsah.

Po obsahu budeme tvořit seznam našich písniček. Každá písnička bude vypadat následovně:

<li><a href="001_FrankieDlouhan_vzor.html">název písničky - jméno autora</a></li>

Tagy <li> nám vytvoří seznam, tagy <a> odkaz. Za href vždy dopíšeme název souboru písničky.

Kód by měl vypadat nějako takto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zpevnicek</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
</head>
<body>
    <h1>Petrův zpěvníček</h1>
    <h2>Obsah</h2>
    <li><a href="001_FrankieDlouhan_vzor.html">název písničky - jméno autora</a></li> 
</body>
</html>

Tvorba konkrétní písně

Jelikož je již na internetu spousta písniček přepsána, je zbytečné všechny přepisovat. Proto budeme používat nejpoužívanější česko-slovenský server Supermusic.

  1. Zkopírujeme se si kód z indexové stránky a smažeme veškerý text mezi tagy <body>.
  2. Stránku s písní budeme strukturalizovat následovně:
    1. Header – hlavička slouží k navigaci
    2. Article – konkrétní text písně s jeho názvy
    3. Footer – slouží k navigaci či poznámkám
  3. Vytvoříme si kód dle uvedené struktury.
  4. Mezi tagy header napíšeme následující kód:
<li><a href="Index.html">Zpevnicek</a></li>
<li><a href="Index.html">Domů</a></li>
  1. Díky tomuto vytvoříme hezkou hlavičku a možnost, jak se vracet do indexového souboru.
  2. Mezi tagy article budeme psát samotný text písničky.
  1. Mezi tagy article budeme psát samotný text písničky.
    1. Opět vytvoříme nadpis prvního a druhé stupně. Do prvního napíšeme název písně, do druhé název autora či interpreta.
    2. Pote vytvoříme tag <p>. Do něho budeme psát text s akordy. Do tagu <p> také přiřadíme prvek: text-akordy. Kód bude tedy vypadat následovně:
 <p id="text-akordy"></p>
  1. Text písně budeme psát dle následujících pravidel:
    1. Akordy budeme psát do hranatých závorek do textu
    2. Odstavce budeme dělat v html nestandartně klasickým použitím klávesy ENTER
  2. Mezi tagy <p> napíšeme text písničky i s akordy.

TIP: Zkuste si písničku najít na Supermusic a vyexportovat si ji ve formátu txt. Text následně stačí jen zkopírovat mezi tagy <p>.

  1. Mezi tagy footer napíšeme následující kód:
    <li><a href=“Index.html“>Domů</a></li>
    Ten nás opět odkáže na hlavní stránku.

TIP: Pro lepší přehlednost si můžete dávat slova jako ref. či sloka 1 mezi tagy <strong>. Ty zajistí zvýraznění textu.

Kód by měl vypadat nějako takto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>STC zpěvníček</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link id="favicon" rel="shortcut icon" type="image/png" href="picture/favicon.png"/>
    <script src="main.js"></script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">STC zpěvníček</a></li>
                <li><a href="index.html">Domů</a></li>
                <span></span>
            </ul>
        </nav>
    </header>
    <article>
        <header>
            <h1>Frankie Dlouhán</h1> 
            <h2>Nedvědi</h2>
        </header>
        <section>
            <p id="textSongu">
<strong>1:</strong>
[C]Kolik je smutného,
když [F]mraky černé [C]jdou
lidem nad [G]hlavou [F]smutnou dálavou[C].
Já slyšel příběh, který [F]velkou pravdu měl,[C]
za čas odle[G]těl, [F]každý zapo[C]mněl.

<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.

<strong>2:</strong>
[C]Tam kde byl plač tam Franky [F]hezkou píseň měl [C]
slzy neměl [G]rád, [F]chtěl se jenom [C]smát.
[C]A když pak večer ranče [F]tiše usínaj[C]
Frankův zpěv jde [G]dál [F]nocí s písní [C]dál ...

<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.

<strong>3:</strong>
[C]Tak Frankyho vám jednou [F]našli, přestal [C]žít,
jeho srdce [G]spí, [F]tiše smutně [C]spí.
Bůh ví jak, za co tenhle [F]smíšek konec [C]měl,
farář píseň [G]pěl, [F]umíraček zněl [C]

<strong>REF:</strong>
[C]Měl kapsu [G]prázdnou Franky Dlouhán,
po státech [F]toulal se jen [C]sám a že
byl [F]veselej, tak [C]každej měl ho [G7]rád.
Tam ruce k [F]dílu mlčky přiloží a [C]zase
jede [Ami]dál. A [F]každej kdo s ním
[G]chvilku byl, tak [F]dlouho [G7]se pak [C]smál.
            </p>
        </section>
    </article>
    
    <footer>
        <a href="index.html">Domů</a>
    </footer>
    
</body>
</html>

Vytvoření skriptu pro převod akordů

Akordy jsme pro jednodušší zápis psali do hranatých závor. Nyní je třeba vyrobit jednoduchý skript, který jim automaticky přidá určitý tag.

Otevřeme si soubor Main.js a zkopírujeme do něj následující kód i s jednoduchým vysvětlením:

/*spouští fci při otevření okna*/
window.onload = function chordFromSuperMusic() {
    /*u elementů označených tímto tagem provede nasledující*/
    let str = document.getElementById("text-akordy").innerHTML;
        /*vytvoř novou proměnou a přičítej k ní 1 dokud se hodnota proměné nebude rovnat počtu písmen v elemtu... Takt oprojedem celý text*/
        for (let index = 0; index < str.length; index++) {
            let c = str[index];
            /*když se znak rovná symbolu, přiřaď ho do ccs třídy*/
            if (c == "[") {
                str = str.replace("[", "<em>");
            }else if (c == "]") {
                str = str.replace("]", "</em>");
            }   
        }
        document.getElementById("text-akordy").innerHTML = str;
}

Zjednodušeně vysvětleno, kód prohledává stránku a když najde symbol hranaté závorky, vloží místo něho tag <em>.

Stylování stránky

  1. Otevřeme soubor Main.css
  2. Stylujeme ho například pomocí následujícího kódu s vysvětlením. Tj. stačí ho pouze zkopírovat.

Na závěr nás čeká doladit vzhled stránky.

body{
    /*odsazení elemtu od okre nula*/
    margin: 0px;
    /*posune text od okrajů*/
    padding: 2%;
    /*nastavíme font*/
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

li{
    /*vymaže kolečka u seznamu*/
    list-style-type: none;
}

a{
    /*vymaže formátování odkazu a nastaví naši barvu*/
    color: rgba(100, 100, 100, 1);
    text-decoration: none;
}
/*nastaví formát akordů*/
em{
    /*nastavíme relativní pozici tj. text se nám posune o 12 px nahoru od normální pozice*/
    position: relative;
    top: -12px;
    /*zvolíme barvu*/
    color: rgb(90, 5, 76);
    /*pro lepší viditelnost nastavíme tučné akordy*/
    font-weight: bold;
}
#text-akordy{
    /*nastaví speciální formátování textu. tj. nové řádky se budou zobrazovat jako nové*/
    white-space: pre-line;
    /*nastaví dvojnásobnou rozeč řádků*/
    line-height: 200%;
}
h1{
    /*nastaví barvu pro nadpis 1 úrovně*/
    color: rgb(117, 16, 72);
}
header{
    /*nastaví odsazení hlavičky od textu*/
    margin-bottom: 30px;
}
/*zarovná minimenu vedle sebe*/
header li{
    /*zarvná doleva*/
    float: left;
    /*nastaví mezeru mezi odkazy*/
    margin-right: 20px;
}

Nahrání aplikace na Azure

Dotvořili jsme kód a nyní nám zbývá jediné – zveřejnit ho na internet. K tomu je třeba mít Azure účet a doplněk do Visual Studia Code na nahrávání do Azure.

TIP: Pokud nevíte jak si vytvořit účet, podívejte se sem – https://docs.microsoft.com/cs-cz/learn/modules/create-an-azure-account/

Vytvoření prostředku na Azure

Než přejdeme k nahrávání aplikace, je třeba si vytvořit prostředek přes Azure portál, do kterého aplikaci nahrajeme.

Přejdeme na Azure portál.

Vytvoříme si novou skupinu prostředků. (SKUPINY PROSTŘEDKŮ -> PŘIDAT)

Vytvoříme si novou skupinu prostředků | zdroj: portal.azure.com
Vytvoříme webovou aplikaci| zdroj: portal.azure.com

TIP: Podle názvu aplikace bude mít náš zpěvník vygenerovanou také URL adresu.

Nahrání aplikace

Nainstalujeme si do Visual Studia Code rozšíření – Azure App Service.

Plugin Azure App Service | zdroj: code.visualstudio.com/

Přihlasíme se do Azure. Kliknutím na nainstalované rozšíření -> zvolíme Přihlásit se do Azure/Sign in to Azure -> spustí se nám prohlížeč a pomocí něj se přihlasíme ke svému Azure účtu.

Přihlášení do Azure App Service | zdroj: code.visualstudio.com/

Přes Visual Studio Code klikneme pravým tlačítkem na složku, ve které máme nahrané všechny soubory a zvolíme možnost Deploy to Web App/Nahrát do webové aplikace.

Nahrání web app | zdroj: code.visualstudio.com/

Nyní vybereme vytvořenou aplikaci a klikneme na ni. Vše se samo nahraje.

Vybrání aplikace | zdroj: code.visualstudio.com/

Nyní již zbývá poslední věc. Navštívit naši aplikaci a pořádně si ji užít!

Tipy a nápady na vychytávky

Nezapomeňte si během práce vše ukládat. Stačí stisknout kombinaci kláves CTRL + S.

Celý projekt najdete na: https://github.com/MicrosoftSTC/zpevnicek

Závěr

Doufám, že vám tento návod byl užitečnou inspirací, pomohl vám vytvořit si vlastní zpěvníček a ukázal vám nový způsob jak hostovat aplikace přes Azure. Výhodou je, že základní balík máte zcela zadarmo a nahrávání je velice jednoduché a intuitivní.