todos-ajax.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Todo-toepassing met AJAX\n",
    "\n",
    "In deze versie gebruiken we JavaScript in de browser (in plaats van puur HTML form) en JSON (in plaats van HTML) voor de client-serverinteractie tussen de browser en de server.\n",
    "\n",
    "Met JavaScript sturen we een verzoek naar de server; het antwoord, in de vorm van JSON-data, verwerken we ook met JavaScript in de DOM van de browser.\n",
    "Van dit laatste geven we eerst een eenvoudige versie "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Interface met de server: REST API\n",
    "\n",
    "* `get /todos` - geeft de hele lijst met todo's\n",
    "* `get /todos/<id>` - geeft een enkele todo\n",
    "* `post /todos` - voor het aanmaken van een todo (met een beschrijving)\n",
    "* `put /todos/<id>` - voor het aanpassen van een bestaande todo\n",
    "* `delete /todos/<id>` - voor het verwijderen van een todo.\n",
    "\n",
    "Dit is een voorbeeld van een REST API. Zie bijv.: https://restapitutorial.com\n",
    "\n",
    "En een speciale URL, voor het testen van de API:\n",
    "\n",
    "* `post /todos/reset` - brengt de database is een gedefinieerde (begin)toestand.\n",
    "\n",
    "NB:\n",
    "\n",
    "* bij het aanmaken van een nieuwe todo maakt  de server een nieuwe id aan.\n",
    "* in plaats van put wordt soms ook patch gebruikt.\n",
    "* voor een collection gebruiken we een meervoud; zie: https://restapitutorial.com/lessons/restfulresourcenaming.html (pluralization).\n",
    "* we kunnen dit interface later uitbreiden met users."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Idempotente opdrachten\n",
    "\n",
    "We noemen een opdracht *idempotent* als deze bij herhaling hetzelfde effect blijft geven, met andere woorden: er is geen verschil tussen 1 keer of meer dan 1 keer uitvoeren.\n",
    "\n",
    "Voorbeelden:\n",
    "\n",
    "* `i = 100` is idempotent\n",
    "* `i = i + 1` is *niet* idempotent\n",
    "* `i = 100 * j + k` is idempotent\n",
    "* `print(i)` is niet idempotent\n",
    "\n",
    "Sommige HTTP-opdrachten zijn idempotent, andere niet:\n",
    "\n",
    "* idempotent: `GET`, `PUT`, `DELETE`\n",
    "* niet idempotent: `POST`\n",
    "\n",
    "REST-API's zijn gebaseerd op deze eigenschappen. Voor veranderingen die niet idempotent zijn, zoals het aanmaken van een nieuwe todo, gebruiken we een niet-idempotente opdracht: `POST`.\n",
    "\n",
    "> De browser maakt ook een onderscheid tussen idempotente opdrachten (`GET`) en niet-idempotente opdrachten (`POST`): het herladen van een normale webpagina (`GET`) gaat zonder vragen; bij het herladen van een pagina met een formulier (`POST`) krijg je de vraag of je het formulier nogmaals wilt opsturen."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## De serverzijde\n",
    "\n",
    "Aan de kant van de server moeten we deze verschillende methods implementeren.\n",
    "We slaan de todo's op een een eenvoudige SQL-database. \n",
    "We gebruiken SQLite als relational database management system.\n",
    "\n",
    "Voor de todo's gebruiken we een enkele tabel:\n",
    "\n",
    "```\n",
    "CREATE TABLE Todos (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT, done INTEGER);\n",
    "```\n",
    "\n",
    "* `id` is de key, een volgnummer in de database;\n",
    "* `text` is de tekst van de todo\n",
    "* `done` is een boolean: 0=not done, 1=done\n",
    "\n",
    "(SQLite heeft geen boolean datatype.)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Requests vanuit het browser URL-venster\n",
    "\n",
    "Een URL die je invult in het browser URL-venster heeft een HTTP GET-opdracht als resultaat. \n",
    "Sommige van de bovengenoemde requests kun je dus ook in het URL-venster van de browser invullen, zoals (GET) `https://boom-wishbone.glitch.me/todos`.\n",
    "\n",
    "Voor andere requests heb je HTTP-POST, PUT of DELETE nodig: die kun je niet vanuit het browser URL-venster invoeren. We kunnen daarvoor wel gebruik maken van Python."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Requests vanuit Python\n",
    "\n",
    "We testen het serverinterface uit met behulp van Python. We gebruiken hiervoor de `requests`-library."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import requests"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Alle todo's\n",
    "\n",
    "Een eenvoud voorbeeld: opvragen van alle todo's"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r = requests.get(\"https://boom-wishbone.glitch.me/todos\")\n",
    "print(r)\n",
    "print(\"=======\")\n",
    "r.text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Het veld `r.text` bevat het resultaat-document. In dit geval is het een JSON-document met daarin alle todo's. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def all_todos():\n",
    "    r = requests.get(\"https://boom-wishbone.glitch.me/todos\")\n",
    "    print(r)\n",
    "    print(\"=======\")\n",
    "    print(r.text)    \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "all_todos()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Reset database\n",
    "\n",
    "Voor de reset van de database gebruiken we de URL: \".../todos/reset\".\n",
    "Deze opdracht is handig bij het testen van de server: we kunnen bij de volgende opdrachten dan uitgaan van een bekende toestand."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r1 = requests.post(\"https://boom-wishbone.glitch.me/todos/reset\")\n",
    "print(r1)\n",
    "r1.text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "all_todos()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Opvragen van een enkele todo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r2 = requests.get(\"https://boom-wishbone.glitch.me/todos/1\")\n",
    "print(r2)\n",
    "r2.text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Aanmaken van een nieuwe todo\n",
    "\n",
    "Bij het aanmaken van een nieuwe todo, via `POST /todos`, geven we als data de tekst van de todo mee. \n",
    "Deze data wordt als onderdeel van de POST-opdracht verstuurd naar de server.\n",
    "\n",
    "Opmerking: `POST` is niet idempotent, dat wil zeggen: het maakt verschil of je deze eenmalig uitvoert, of vaker dan 1 keer. Als je de opdracht hieronder herhaalt, wordt steeds een nieuwe todo aangemaakt, met dezelfde tekst, maar met een andere key (volgnummer).\n",
    "\n",
    "**Opdracht** Ga dit na."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r3 = requests.post(\"https://boom-wishbone.glitch.me/todos\", {\"text\": \"afwas doen\"})\n",
    "print(r3)\n",
    "r3.text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "all_todos()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Aanpassen van een bestaande todo\n",
    "\n",
    "Voor het aanpassen van een bestaande todo met als key 123 gebruiken we `PUT /todos/123`.\n",
    "\n",
    "**N.B.** `PUT` is wel een *idempotente* opdracht: het maakt niet uit of je deze 1 maal of vaker uitvoert, dat geeft hetzelfde resultaat.\n",
    "\n",
    "**Opdracht** Ga dit na."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r5 = requests.put(\"https://boom-wishbone.glitch.me/todos/1\", {\"id\":1,\"text\":\"Make a todo app\",\"done\":1})\n",
    "print(r5)\n",
    "r5.text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "all_todos()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Verwijderen van een todo\n",
    "\n",
    "Voor het verwijderen van een todo met als key 123 gebruiken we `DELETE /todos/123`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r6 = requests.delete(\"https://boom-wishbone.glitch.me/todos/4\")\n",
    "print(r6)\n",
    "r6.text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "all_todos()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Server-code - node.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Anonieme functies\n",
    "\n",
    "In de JavaScript-code voor de server kom je vaak de constructie `(req, resp) => {...}` tegen.\n",
    "Dit is de notatie voor een anonieme functie met als parameters `(req, resp)` en als body (statements) `{...}`.\n",
    "We noemen functies in deze notatie ook wel \"arrow functions\". Overal waar je zo'n `=>` tegenkomt is er dus sprake van een functie-definitie.\n",
    "\n",
    "* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)\n",
    "\n",
    "> Er is een enkel subtiel verschil met de anonieme functie `function (req, resp) {...}`, met betrekking tot `this`. Zie bovengenoemde verwijzing."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Express\n",
    "\n",
    "* zie: https://expressjs.com/en/starter/hello-world.html\n",
    "* https://expressjs.com/en/guide/routing.html\n",
    "\n",
    "`app.post(\"/todos/reset\", (request, response)=> {...}`\n",
    "          \n",
    "Met deze expressie geef je aan:\n",
    "\n",
    "* voor de request `POST /todos/reset`\n",
    "* wordt de (anonieme) functie `(request, response) => {...}` uitgevoerd\n",
    "\n",
    "Zoals je ziet kun je in deze anonieme functie de data uit het `request` gebruiken.\n",
    "Deze functie moet eindigen met het versturen van een response naar de afzender van het request, bijvoorbeeld:\n",
    "`response.send({ message: \"success\" });`\n",
    "\n",
    "> Als je dit laatste vergeet, blijft de browser (client) wachten totdat er een time-out optreedt. Dit is niet waar de browser op zit te wachten.\n",
    "\n",
    "`app.put(\"/todos/:id\", (request, response) => {...}`\n",
    "\n",
    "* de URL heeft een variabel deel `:id`\n",
    "* deze `:id` is in de functie beschikbaar als `request.params.id`\n",
    "* de data die meegestuurd is, is in de functie beschikbaar als `request.body.text`.\n",
    "\n",
    "**Opdracht** Ga na wat de andere *routes* zijn in de todo-applicatie."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Asynchrone verwerking, callbacks\n",
    "\n",
    "De bovengenoemde vorm met een callback (hier als anonieme functie) komen we veel tegen bij opdrachten waarvan de verwerking *asynchroon* op een nader te bepalen tijdstip gebeurt. De normale verwerking gaat verder met de volgende opdracht.\n",
    "\n",
    "* in het geval van de bovengenoemde routerings-opdrachten zet je de handlers voor de verschillende routes klaar. Deze worden pas uitgevoerd als er een request met een passende route (URL) verwerkt wordt.\n",
    "* bij de database-opdrachten weet je niet hoe lang de verwerking van de opdracht duurt; je wilt daar niet op wachten. Als de database-opdracht klaar is, wordt de callback uitgevoerd."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Database\n",
    "\n",
    "De server slaat de todo's op in een (SQLite) database. Voor het opbergen en opzoeken van todo's kom je in de meeste functies één of meer database-opdrachten tegen.\n",
    "\n",
    "* zie: sqlite.org\n",
    "* https://www.sqlitetutorial.net/sqlite-nodejs/\n",
    "\n",
    "De algemene vorm voor een database-opdracht is:\n",
    "\n",
    "`db.run( SQL_opdracht, [...parameters], err => {...});`\n",
    "\n",
    "De SQL-opdracht is een string met daarin 0 of meer `?`-s. \n",
    "De waarden die hiervoor ingevuld moeten worden staan in het array `[...parameters]`. \n",
    "Als de opdracht afgerond is wordt de anonieme functie `err => {...}` aangeroepen. De parameter `err` geeft aan of de opdracht succesvol is uitgevoerd, of niet.\n",
    "\n",
    "> Sommige andere interfaces gebruiken twee functies, 1 voor success en 1 voor error. In dit interface zijn die gecombineerd.\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}