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. 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

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 obsah budeme psát 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 na internetu již spousta písniček přepsána, je zbytečné 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 v 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>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>
    <header>
        <li><a href="Index.html">Zpevnicek</a></li>
        <li><a href="Index.html">Domů</a></li>
    </header>
    <article>
        <h1>Frankie Dlouhán</h1>
        <h2>Nedvědi</h2>
        <p id="text-akordy">
                <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>
    </article>
    <footer>
        <li><a href="Index.html">Domů</a></li>
    </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ěho 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, když najde symbol hranaté závorky, vloží místo něho tag <em>.

Stylování stránky

  1. Otevřeme soubor Main.css
  2. A 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

Již jsme dotvořili kód a nyní nám již zbývá jediné – zveřejnit ho na internet. K tomu je třeba mít azure účet a doplněk do Visual Studia Codu 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 si třeba vytvořit prostředek přes Azure portál, do kterého aplikaci nahrajeme.

Spustíme si náš Azure portál.

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

Vytvoříme si novou skupinu prostředků
Vytvoříme webovou aplikaci

Tip – podle názvu aplikace bude mít také náš zpěvník vygenerovanou url adresu.

Nahrání aplikace

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

Plugin Azure App Service

Přihlaste se k Azure. (Klikněte na nainstalované rozšíření -> zvolte Přihlásit se do Azure/Sign in to Azure -> spustí se Vám prohlížeč a pomocí něj se přihlaste ke svému Azure účtu).

Přihlášení do Azure App Service

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

Nahrání web app

Nyní vyberte vytvořenou aplikaci a klikněte na ni. Vše se samo nahraje.

Vybrání aplikace

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.

Všechny kódy k této stránce a spoustu dalších tipů a triků naleznete také na mém GitHubu.

Závěr

Doufám, že Vám tento návod byl užitečnou inspirací a budete webové aplikace hostovat právě přes Azure. Výhodou je, že základní balík máte zcela zadarmo, nahrávání je velice jednoduché a intuitivní. Pokud by Vám nebylo něco jasné či byste byli rádi za pomoc, napište na mail: [email protected], rád Vám poradím.