Objčas potřebujeme udělat dynamicky malý objekt, kterému nastavíme parametry a pošleme ho dál. Ano, je to ošklivé, nemělo by se to dělat ale občas se to prostě hodí 🙂
dynamic flowCalculator = new
{
Medium = inputData.HeaterEnum.ToString(),
WaterTempIn = 80,
WaterTempOut = 60
};
Jednoduše do toho dynamicky vygenerovaného objektu můžeme přidat další propertu:
if (inputData.MediumEnum == Medium.GLYCOL)
{
flowCalculator.Concentration = inputData.Concentration;
}
var student = JsonSerializer.Deserialize<Student>(jsonString, options);
Property v objektu zůstanou prázdné, protože nedošlo k namapování z jsonu (rozdílná velikost písmen)
Deserializace jsonu case insensitive
Serializeru můžeme nastavit propertu aby nerozlišoval velokost písmen:
var options = new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
};
var student = JsonSerializer.Deserialize<Student>(jsonString, options);
$ quasar
...
Commands
init Create a project folder
dev Start a dev server for your App
build Build your app for production
clean Clean all build artifacts
new Quickly scaffold page/layout/component/... vue file
mode Add/remove Quasar Modes for your App
info Display info about your machine and your App
serve Create an ad-hoc (production-ready) server on App distributables
help Displays this message
Po vytvoření kostry projektu stačí nainstalovat balíčky a projekt spustit:
cd vue-project
npm install
npm run dev
Tip
Pokud se při spuštění vyskytnou problémy (failed to load config from vite.config.js, Error: Cannot find module ‚node:url‘, …) aktualizujte node.js na najnovější LTS verzi.
Spuštění projektu
Pokud vše prošlo, uvidíte v konzoli:
VITE v4.0.4 ready in 307 ms
➜ Local: http://localhost:5173/ ➜ Network: use –host to expose ➜ press h to show help
Otevřee internetový prohlížeč a zadejte do něj adresu z konzole: http://localhost:5173/
npm run build Bundles the app into static files for production.
npm test Starts the test runner.
npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
Často máme existující strukturu databáze s daty (database first). Pro přístup k této db potřebujeme modelové třídy, které budou představovat data z DB. Vygenerování modelových tříd z DB tabulek se nazývá scaffolding. Dnes si ukážeme jak toho dosáhnout v net6, Entity Framework 6 pro MySql databázi.
Po nainstalovaná Node.js začnou v příkazové řádce fungovat příkazy: node –version npm –v
Nainstalujeme Angular CLI: npm install -g @angular/cli Po nainstalování začne fungovat příkaz zobrazující verzi Angular CLI: ng –version
První aplikace – Hello world
Skelet první aplikace vygenerujeme příkazem:
ng new hello-world
Budeme dotázání, zda chceme použít knihovnu Angular routing a jaký stylesheet chceme použít pro stylování (SCSS, Sass, Less, Stylus). Stačí potvrdit předpřipravené hodnoty, nebo vyberte to co umíte.
Pří kazové řádce vstoupíme do složky s vytvořeným projektem:
cd hello-world
Spustíme aplikaci:
ng serve
Aplikace se defaultně spustí na portu 4200. Teď jen do internetového prohlížeče zadáte adresu: http://localhost:4200/ kde rovnou vidíte výsledek.
Pokud chcete aplikaci spustit na jiném portu, provedete to příkazem:
ng serve --port 7777
Úprava kódu
Nyní se můžete vrhnout a úpravu kódu. Všechny úpravy můžete průběžně kontrolovat v internetovém prohlížeči, kde se projevují bez nutnosti ručního obnovení stránky. Skvělé.
Nová komponenta
Pro znovu použitelnost kód který využíváme na několika místech dáváme do komponent. Komponentu vygenerujeme:
Přeskočíme kecy o botech a rovnou se pustíme do práce. Největší platformou pro chatovací boty s otevřeným API nabízí Telegram. Dnes si ukážeme, jak si vytvořit bota, který bude interagovat na uživatelovo požadavky.
Vytvoření bota
Všechny boty vytváříme u toce botů – BotFather. Uděláme to tak, že v seznamu konverzací vyhledáme BotFather. V detailu konverzace vytvoříme nového bota příkazem /newbot a postupujeme podle pokynů.
Budete vyzváni na jméno bota (libovolné znaky včetně diakritiky) a následně na uživatelské jméno bota: slovo bez diakritiky, mezer s příponou bot nebo _bot. Uživatelské jméno musí být v celém Telegramu jedinečné.
Po vytvoření bota bude zobrazeno jeho API access token – dále jen token. Ten si pečlivě uchovejte a nikomu ho nesdělujte – slouží k ovládání bota.
Ovládání bota
V Telegramu existují dva způsoby, jak získat zprávy poslané botovi: long polling a webhooks
Long pooling
Při tomto přístupu se periodicky doptáváte API Telegramu na nové zprávy. Musíte vhodně nastavit periodu doptávání se na nové zprávy.
Webhooks
Při tomto přístupu je při každé interakci s botem zpráva odeslaná i na náš server. Tento přístup mám raději, protože vypadá jako komunikace v reálném čase.
V tomto článku si popíšeme použití webhooks. Pro použití webhooks potřebujeme php script, který běží na veřejné adrese s HTTPS certifikátem. Pro naši ukázku například: https://www.venca-x.cz/bot/pocasi.php
Teď trochu přeskočíme obsah souboru pocasi.php a rovnou tento script zaregistrujeme aby byl zavolán a přijal zprávu od našeho bota. To provedeme příkazem:
Slovo *TOKEN* nahraďte API tokenem, získaným při vytvoření bota. *https:/ /example.domain/path/to/bothook.php* nahraďte vaší adresou, kde jsme zprovoznili jednoduchou ukázku vracející JSON.
Oživení bota
Bota máme vytvořeného, zaregistrovaný webhook, který nám přeposílá zprávy poslané botovi. Pojďme bota oživit aby zprávy zpracovával a reagoval na ně.
Pro práci s bot API se mi zalíbila knihovna telegram-bot/api nainstalujeme ji:
composer require telegram-bot/api
Super, konečně jsme se dostali na příjem zpráv a reagování na ně. Na zprávu /ping odpoví bot zprávou pong:
<?php
require_once "vendor/autoload.php";
try { $bot = new \TelegramBot\Api\Client('YOUR_BOT_API_TOKEN'); $bot->command('ping', function ($message) use ($bot) { $bot->sendMessage($message->getChat()->getId(), 'pong!'); }); $bot->run(); } catch (\TelegramBot\Api\Exception $e) { $e->getMessage(); }
Nezapomeňte místo YOUR_BOT_API_TOKEN nastavit váš token z vytváření bota.
Klávesnice pro ovládání bota
Bota můžeme ovládát i přes speciální klávesnici pro rychlé volby. Po zadání příkazu /start přivítáme návštěvníka a zobrazíme mu klávesnici s rychlou volbou:
$bot->command('start', function ($message) use ($bot) {
$keyboard = new \TelegramBot\Api\Types\ReplyKeyboardMarkup(array(array("/pocasi", "/ping")), true);
Načítání obsahu webových stránek bez nutnosti obnovení stránky prostřednictvím AJAXového volání je dnes běžnou praxí.
Zavést toto funkčnost web postaveném na Nette frameworku, je velice jednoduché a rychlé. Ukážeme si jak na to s ajaxovou knihovnou s názvem Naja. Pokud děláte úplně nový projekt, doporučuji Nette 3.0, zapomeňte na nette.ajax.js ale rovnou použijte Naju. Nette,ajax.js je již „hotový“ a dál se nevyvijí. Naja je jeho nástupce.
Instalace a zprovoznění Naja knihovny
npm install naja –save-dev
Pro sloučení všech js souborů a jejich minifikaci používám Gulp. V Gulp tasku přidáme Naja.js do našeho jednoho velkého minifikovaného main.min.js souboru:
A máme hotovo. Nyní jen přidáme class=“ajax“ prvků, které chceme mít ajaxově, stejně jako u Nette.ajax.js
Demo signálu
Po kliknutí na tlačítko aktualizujeme ajaxem snippet, ve kterém se překreslí aktuální datum. Jednoduché 🙂
Presenter:
<?php
declare(strict_types=1);
namespace App\FrontModule\Presenters;
use App;
use Nette\Utils\DateTime;
class HomepagePresenter extends BasePresenter
{
private $dateTime;
public function handleActualiseDateTime()
{
$this->dateTime = new DateTime();
if ($this->isAjax()) {
$this->redrawControl('dateTimeSnippet');
}
}
public function renderDefault(): void
{
if ($this->dateTime === null) {
$this->dateTime = new DateTime();
}
$this->template->dateTime = $this->dateTime;
}
}
Šablona:
<div class="col-12">
<hr/>
{snippet dateTimeSnippet}
{$dateTime|date:'j. n. Y H:i:s'}
{/snippet}
<a n:href="actualiseDateTime!" class="ajax">AKTUALIZOVAT</a>
</div>