Applikationsutveckling för webben

Att läsa

• Templates

Att titta på

• Genomgång av studiehandledning Flask delen i kursen - Vad tittat på, läsa och göra under denna del av kursen
• Fö1 -skapa konto på pythonanywhere.com - Skapa konto för att kunna koda och köra en webbapp gjord i python med Flask microramverk
• Fö2 - Request response cykel - Vad är request-response cykeln? Vad är routing? Vad är url-mappning? Vad är en dynamisk variabel i url
• Fö3 - Error loggen - Här dyker dina fel upp om appen inte funkar syntaxmässigt. Du kanske fått internal server error eller andra typer av fel.
• Fö5 - Skapa en blueprinent cars_bp - Genomgång hur man skapar strukturen för en blueprint, med dess template mapp med html vyer, dess routes och mapping till python funktioner samt dess registrering hos flask_app.py
• Fö6 - Fortsättning på att skapa en cars_bp blueprint - Genomgång hur man skapar strukturen för en blueprint, med dess template mapp med html vyer, dess routes och mapping till python funktioner samt dess registrering hos flask_app.py
• Fö7 - Skapa bastemplate för alla html sidor i car_bp blueprinten - Hur man skapar en bas template som innehåller gemensam html kodstruktur, css, javascript som alla övriga html sidor i blueprint behöver och ärver ifrån. Gör att man återanvänder html kodstrukturer.
• Fö8 - Google books api:et - Exemplet visar hur man söker och visar information om böcker från Google Books API. Hur skapar och använder man ett HTML-sökformulär? Hur gör man ett anrop till ett tredjeparts-API och visar dess JSON-data på ett enkelt sätt?
• Fö 9 - Googlebooks info om specifik bok - Visa mer information om en specifik bok. Här används dynamisk routing med ett dynamiskt ID för att hämta bokdata från Google baserat på detta bok-ID. Bokens information visas sedan på en egen HTML-sida.
• Fö 10 - Sessioner shoppingsite med kundvagn - Vad är sessioner och sessionsvariabler, och hur skapas de? Vi går igenom mappstrukturen och filerna för blueprinten shoppingvagn_bp. Förklarar hur sessioner används för att hantera en kundvagn, dess data och funktionalitet. Kom ihåg att i flask_app.py lägg in denna app.config['SECRET_KEY'] = 'hard_to&guess%str1ngsdf86523q45kdsfg' med egen sträng för SECRET_KEY precis under app = Flask(__name__)för att få sessioner att funka.
• Fö 11 - Sessioner kundvagnens add - Vi går igenom hur funktionen add_to_cart fungerar i kundvagnen. Dessutom tittar vi på filen cart.html, där både produktlistan och innehållet i kundvagnen visas i olika HTML-tabeller. Vi visar också hur du skapar länkar i dessa tabeller som anropar add_to_cart-funktionen i blueprinten, och vi förklarar koden för denna funktion
• Fö 12 - Sessioner kundvagnens delete - Vi går igenom hur funktionen delete_from_cart fungerar i kundvagnen. Dessutom tittar vi på filen cart.html, där både produktlistan och innehållet i kundvagnen visas i olika HTML-tabeller. Vi visar också hur du skapar länkar i dessa tabeller som anropar delete_from_cart-funktionen i blueprinten, och vi förklarar koden för denna funktion.
• Youtube - Routing och Variabler -
• Youtube - Templates och Jinja2 -
• Youtube - Jinja2 syntax -
• Youtube - Template Inheritance och Block Content -
• Youtube - Organisera kod i blueprints -

Övningar

• Skapa i din Flask-app en blueprint som använder och templates med template-arv. Appen ska hämta och visa data från ett tredjeparts-REST API, till exempel Disney API eller Polisens API för att presentera informationen på olika sätt med hjälp av Bootstrap. Använd också dynamiska variabler i url:en där det är lämpligt. Tex att få mer detaljerad info om en disney karaktär.
• Skapa i din Flask-app en blueprint som använder och templates med template-arv för egen shopping/kundvagnsfunktionalitet baserat på Fakestores API.

Inlämningar

• Vecka 49-3: Inlämningsuppgift 2: Större programmeringsuppgift med inspelade redovisning baserat på det vi gått igenom under vecka 49-3. Tillgänglig i kursrummet från vecka 49 med inlämning senaste fredag vecka 2 kl 17:00
• Vecka 3: Kom ihåg att göra duggan i kursrummet den 17 jan kl 10:00

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

• What is URL mapping in Flask?
  URL mapping in Flask is the process of linking URLs to the functions that should handle those URLs. This is done using the @app.route decorator.
• How do you define a route in Flask?
  A route in Flask is defined using the @app.route decorator. For example:
  @app.route('/')
  def home():
  return 'Hello, World!'
• How can you create a route that accepts both GET and POST methods?
  You can specify the methods in the methods parameter of the @app.route decorator. For example:
  @app.route('/submit', methods=['GET', 'POST'])
• What is the purpose of the url_for function in Flask?
  The url_for function is used to generate URLs for the routes defined in the Flask application. It is useful for creating links and redirecting users to different parts of the application. For example:
  url_for('home')
• How do you define a route with a dynamic variable in Flask?
  You define a route with a dynamic variable by including it in the URL string within angle brackets.
• What is the purpose of using dynamic variables in routes?
  Dynamic variables allow you to create flexible and dynamic URLs that can capture and process different types of user input, making your application more interactive and capable of handling a variety of requests.
• What is a template in Flask?
  A template in Flask is an HTML file that contains placeholders for dynamic content. Templates are used to generate HTML dynamically by combining static HTML with data passed from the Flask application.
• How do you render a template in Flask?
  You render a template in Flask using the render_template function. For example:
  @app.route('/hello')
  def hello():
  return render_template('hello.html')
• What is Jinja2 in Flask
  Jinja2 is the default templating engine for Flask. It allows you to use Python-like expressions inside your HTML templates to dynamically generate content.
• What is a Blueprint in Flask?
  A Blueprint in Flask is a way to organize and structure your application into smaller, reusable components. Blueprints allow you to define routes, templates, static files, and other application components separately and then register them with the main application.
• How do you create a Blueprint in Flask?
  You create a Blueprint by instantiating the Blueprint class and defining routes on it. For example:
  from flask import Blueprint
  bp = Blueprint('bp', __name__)
  @bp.route('/hello')
  def hello():
  return 'Hello from the blueprint!'
• How do you register a Blueprint with the main Flask application?
  You register a Blueprint with the main Flask application using the app.register_blueprint method. For example:
  from flask import Flask
  from my_blueprint import bp
  app = Flask(__name__)
  app.register_blueprint(bp, url_prefix='/blueprint')
• What is a session in Flask?
  A session in Flask is a way to store information about a user across multiple requests. It is a dictionary that can hold data specific to a user.
• How do you set up a session in Flask?
  To set up a session in Flask, you need to configure a secret key for the application. For example:
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
• How do you store data in a session in Flask?
  from flask import session
  @app.route('/set_session')
  def set_session():
  session['username'] = 'JohnDoe'
  return 'Session data set'
• How do you retrieve data from a session in Flask?
  @app.route('/get_session')
  def get_session():
  username = session.get('username', 'Guest')
  return f'Hello, {username}!'

Att läsa

• Formulär

Att titta på

• Fö1 - Intro formulär - Här lär du dig att skapa en blueprint som hanterar formulär för att hyra en bil. Använder pluginet WTF-form. Skapar en klass för formuläret och dess GUI-komponenter (textfält, knappar, kryssrutor) så att vi kan rendera formuläret på en HTML-sida.
• Fö2 - Flaskforms klassen - Visar hur du använder FlaskForms-klassen för att rendera olika GUI-komponenter på en HTML-sida, såsom DateField, SelectField, BooleanField och RadioField.
• Fö3 - Hantera postat formulärsdata - Formulärshantering för att visa postad data. Skapar en route med POST-metoden och kopplar den till funktionaliteten i blueprinten. En dictionary byggs upp med den postade formulärdatan. Denna dictionary loopas sedan igenom på HTML-sidan för att visa den postade datan, det vill säga information om bilhyrningen. Vi skapar även ett flash-meddelande.
• Fö4 - Rendera formulärsdata - Presenterar postat bilhyresdata i html tabell.
• Fö5 - Formulärdata data i json fil - Spara biluthyrning data till json fil. Visar också hur du läser upp data från json filen och presentera alla uthyrningar i en html tabell.
• Fö6 - Intro rollbaserad inloggning - Vi visar hur den rollbaserade inloggningen fungerar för olika användare. Det finns tre roller: admin, user och superuser. Beroende på vilken roll du är inloggad som, kan du se och göra olika saker.
• Fö 7 - Login blueprinten - Grundstruktur för mappar och filer för enkel rollbaserad inloggning. Visar strukturen för mappar och filer för en enkel rollbaserad inloggning. Detta inkluderar blueprinten login_bp.py, template-mappen och dess login.html. I flask_app.py visar vi hur du importerar blueprinten och LoginManager för att kunna initiera hela appen för LoginManager.
• Fö8 - Login hantering med routes och formulär - Genomgång av login_bp.py. Visar hur du skapar förutsättningar för att kunna logga in och logga ut. Detta inkluderar hur du importerar från flask_login, skapar en User-klass, samt definierar routes för inloggning och en hemlig route som kräver inloggning för att visas. Vi visar också LoginForm-klassen för att skapa formuläret i login.html.
• Fö9 - Logout - Visar hur du skapar upp logout funktionaliteten. Forsatt genomgång av login.html sidan.
• Fö10 - Exemplet login för en blog - Exempel på användning av login_bp för en egen blogg. Ett exempel på hur jag använder min login_bp för en egen blogg. Endast rollen admin kan ta bort och lägga till inlägg, medan rollen user kan läsa mer om, gilla och kommentera inlägg. Alla kan se inläggen utan att vara inloggade. Se nästa veckas videor om hur jag bygger upp bloggens övriga funktionalitet och koppling till databasen.
• Fö11 - Skicka epost med Mailguns eposttjänst - Lär dig skicka mail via Mailgun. Skaffa gratiskonto där för att nyttja deras epostjänst. Skapa Blueprint, mail_bp, med route och tillhörande funktion som skickar epost med hjälp av pythons smptlib ,MIMEText och MIMEMultiPart. Visar grundstrukturen för blueprinten mail_bp samt mailappens funktionalitet och användning.
• Fö12 - Skicka epost via webbformulär - Går igenom webbformulärets uppbyggnade och dess koppling via action attributet till backend routen: /sendmailgun och dess funktionalitet som skickar epost
• Fö13 - Surfa till och visa webbformulär - Visa hur man via routen: /mailform renderar själva webbformuläret.

Övningar

• Skapa en blueprint i din Flask-webbapplikation som hanterar formulärdata och sparar den i en JSON-fil. Validera datan innan den sparas. Applikationen ska också kunna visa en lista med all sparad data från JSON-filen, där varje post har en länk för att redigera eller ta bort den. Endast inloggade användare ska kunna redigera och ta bort poster. Efter att en post har redigerats eller tagits bort ska ett bekräftelsemeddelande (flash-meddelande) visas. När man tar bort ska ett mail skickas automatiskk till nån tänkt admin som får reda på vad för data som tagits bort i det mailet.

Inlämningar

• Vecka 49-3: Inlämningsuppgift 2: Större programmeringsuppgift med inspelade redovisning baserat på det vi gått igenom under vecka 49-3. Tillgänglig i kursrummet från vecka 49 med inlämning senaste fredag vecka 2 kl 17:00
• Vecka 3: Kom ihåg att göra duggan i kursrummet den 17 jan kl 10:00

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

• How do you handle form submission in Flask?
  You handle form submission by creating a route that listens for POST requests. For example:
  @app.route('/submit', methods=['POST'])
  def submit():
  name = request.form['name']
• What library can you use for form validation in Flask?
  You can use the WTForms library for form validation in Flask.
• How do you create a form class using WTForms?
  You create a form class by inheriting from FlaskForm and defining form fields as class attributes. For example:
  from flask_wtf import FlaskForm from wtforms import StringField
  from wtforms.validators import DataRequired
  class MyForm(FlaskForm):
  name = StringField('Name', validators=[DataRequired()])
• How do you render a WTForms form in a Flask template?
  You render a WTForms form using Jinja2 syntax in the template html form, for example: {{ form.hidden_tag() }} {{ form.name.label }} {{ form.name(size=20) }}
• What is CSRF protection and why is it important?
  CSRF (Cross-Site Request Forgery) protection prevents unauthorized commands from being transmitted from a user that the web application trusts. It is important to prevent malicious exploits and secure user data.
• How do you include CSRF tokens in your forms?
  WTForms automatically includes CSRF tokens in your forms when using form.hidden_tag(). Ensure your form class inherits from FlaskForm.
• How do you display form validation errors in a Flask template?
  You display form validation errors by iterating over the form.errors dictionary in your template. For example:
  {% for field, errors in form.errors.items() %}
  {% for error in errors %}
  {{ error }}
  {% endfor %}
  {% endfor %}

Att läsa

• Databas
• Login

Att titta på

• Fö1 - Databas Intro till Caradmin app - Admin-sidan för att hantera bilar i lager. Går igenom vad användaren kan göra på admin-sidan för att hantera bilar i lager. Vi visar hur sidan ser ut visuellt och hur CRUD-operationerna (Create, Read, Update, Delete) fungerar mot SQLite-databasen.
• Fö2 - Blueprinten caradmin_bp.py - Mapp- och filstruktur för admin-appen som hanterar bilar i lager. Går igenom mapp- och filstrukturen för blueprinten som hanterar admin-appen för bilar i lager. Vi visar vilka HTML-filer som finns i templates-mappen och vilka Python-filer som behövs.
• Fö3 - CarRepository - Fortsatt genomgång av caradmin_bp.py. Fortsätter genomgången av blueprint-filen caradmin_bp.py och dess routing/url-mappning. Vi visar hur denna blueprint använder sig av klasserna Car och CarRepository för CRUD-operationer som visar alla bilar i databasen. Vi förklarar också hur man i CarRepository-klassen skapar en databas med tabellen cars, som har kolumner och lite bildata, med hjälp av SQLite-biblioteket.
• Fö4 - Hämta alla bilar - Genomgång av blueprintens route och mapping för get_all_cars. Visar hur blueprinten använder CarRepository-klassens get_all()-metod, som hämtar all bildata från databasen och skapar en lista med bilobjekt. Denna lista med bilobjekt skickas sedan till och renderas i allcars.html.
• Fö5 - Rendera alla bilar - Rendering av alla bilar i allcars.html.Går igenom hur man loopar igenom bildata för att skapa HTML-strukturen som visar information om bilarna. Vi visar också hur man skapar länkar för att ta bort, redigera och visa mer information om varje bil.
• Fö6 - Mer info om vald bil - Visa mer information om vald bil. Går igenom funktionaliteten för att visa mer information om en vald bil. Vi förklarar hur blueprintens route och URL-mappning anropar CarRepositorys metod get_car_by_regnr(regnr), som hämtar information om den valda bilen från databasen baserat på registreringsnumret. Bilobjektet visas sedan i carinfo.html.
• Fö7 - Lägg till ny bil - Går igenom funktionalitet för att lägga till en ny bil i databasen via formulär.
• Fö8 - Editera bildata - Redigera information om vald bil. Går igenom hur du via en länk kan komma till ett formulär där information om den valda bilen finns för redigering. När du sedan trycker på uppdatera-knappen, hämtas formulärdatan och skickas via CarRepository till databasen för uppdatering
• Fö9 - Tabort vald bil - Ta bort en bil från databasen. Går igenom hur du kan ta bort en bil från databasen. Vi visar också hur en enkel inloggning fungerar för att kunna utföra borttagningen.
• Fö10 - SQLAlchemy för databashantering - Uppdatera caradmin-appen till att använda SQLAlchemy. Uppdatera vår tidigare caradmin-app till att använda SQLAlchemy istället för SQLite. SQLAlchemy är ett bibliotek för Python som förenklar arbetet med databaser genom att erbjuda ett ORM (Object-Relational Mapping) system. Går igenom grundstrukturen för blueprinten som använder SQLAlchemy. Vi visar hur du definierar modeller och hanterar databasen med SQLAlchemy. Jämför skillnaderna mellan att använda SQLAlchemy och vårt tidigare SQLite CarRepository, inklusive hur vi definierar och interagerar med databasen.
• Fö11 - SQLAlchemy skapa Databasmodellen - Genomgång av CarRepository med SQLAlchemy. Går igenom hur CarRepository nu är gjort med SQLAlchemy. Vi visar hur man skapar en datamodell, Car, som ärver från Base-klassen. Datamodellen används i bakgrunden när engine och session-objekten skapar databasen. Vi visar också hur du i CarRepository använder Session-objektet för att hämta alla bilar och lägga till nya bilar.
• Fö12 - SQLAlchemy mer info om vald bil - Hur gör man för att visa mer info om vald bil?
• Fö13 - SQLAlchemy lägg till ny bil - Hur gör man för att lägga till ny bil?
• Fö14 - SQLAlchmey editera bildata - Hur gör man för att editera och uppdatera bildata?
• Fö15 - Blogg intro till bloggen - Introduktion till bloggappen. Visar hur bloggappen fungerar för olika inloggade användare. Vi går igenom grundstrukturen för blueprinten blog_bp, templates-mappen och dess HTML-filer, samt filerna blog_bp.py och blogrepository.py. Vi visar också hur databasmodellerna Post och Comments skapas med hjälp av SQLAlchemy, och hur relationerna mellan Post och Comments definieras
• Fö16 - Visa alla bloggposter - Hur routen /blog/posts fungerar. Förklarar hur anropet till routen /blog/posts använder funktionen get_all_posts från repositoryt för att hämta alla inlägg. Därefter loopar vi igenom och renderar alla inlägg i list_posts.html. Vi går också igenom koden för get_all_posts i repositoryt och visar hur du använder SQLAlchemy Session-objektet för detta.
• Fö17 - Lägg till bloggpost - Endast användare med rollen admin kan lägga till en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning.
• Fö18 - Ta bort bloggpost - Endast användare med rollen admin kan lägga till en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning.
• Fö19 - Kommentera och like:a en bloggpost - Endast inloggade användare kan kommentera och like:a en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning.

Övningar

• Skapa en blueprint i din Flask-webbapplikation för att hantera medlemmar i en fotbollsförening. Applikationen ska kunna utföra grundläggande CRUD-operationer (skapa, läsa, uppdatera och ta bort medlemmar) mot en SQLite databas. Använd Repository design pattern eller ActiveRecord design pattern för CRUD operationer mot databasen. Lägg till en inloggningsfunktionalitet där alla användare kan se medlemslistan, men endast inloggad administratör kan lägga till, ta bort och uppdatera medlemmar. Använd dig av också av tekniker du lärt dig tidigare i kursen tex template-arv, WTForms och valideringa av indata från formulär mm.

Inlämningar

• Vecka 49-3: Inlämningsuppgift 2: Större programmeringsuppgift med inspelade redovisning baserat på det vi gått igenom under vecka 49-3. Tillgänglig i kursrummet från vecka 49 med inlämning senaste fredag vecka 2 kl 17:00
• Vecka 3: Kom ihåg att göra duggan i kursrummet den 17 jan kl 10:00

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

• How do you connect to an SQLite database using the sqlite3 library in Flask?
  You connect to an SQLite database using the sqlite3.connect() method. For example:
  import sqlite3
  conn = sqlite3.connect('database.db')
• How do you create a table in an SQLite database using sqlite3?
  You create a table by executing a SQL CREATE TABLE statement. For example:
  conn.execute('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)')
  conn.commit()
• How do you insert data into an SQLite table using sqlite3?
  You insert data by executing an INSERT INTO statement. For example:
  conn.execute('INSERT INTO users (name, email) VALUES (?, ?)', ('John Doe', 'john@example.com'))
  conn.commit()
• How do you retrieve data from an SQLite table using sqlite3?
  You retrieve data by executing a SELECT statement and fetching the results. For example:
  cursor = conn.execute('SELECT * FROM users')
  for row in cursor:
  print(row)
• How do you update data in an SQLite table using sqlite3?
  You delete data by executing a DELETE statement. For example:
  conn.execute('DELETE FROM users WHERE name = ?', ('John Doe',))
  conn.commit()
• How do you close a database connection in sqlite3?
  You close a database connection using the close() method.
• What is SQLAlchemy?
  SQLAlchemy is a SQL toolkit and Object-Relational Mapping (ORM) library for Python.

Att läsa

• Frivillig tutorial om DevOps-grunderna. Lär dig grundläggande principer och metoder i DevOps med GitHub.
• Labb 01 Agile Planning and Management using GitHub
• Labb 02 - Implement Flow of Work with GitHub

Att titta på

• Fö1 - Intro REST api - Vad är REST api? Vilka HTTP verb som finns? Hur du strukturerar ditt REST api med olika uri's (url:er) och hur du routar/urlmappar dessa till python funktioner i ditt Flask REST api.
• Fö2 - REST api:et names olika GET - Struktur för ditt REST API:s blueprint, names Går igenom hur du strukturerar ditt REST API:s blueprint för att hantera namn och e-postadresser.HTTP-verb: GET /names: Hämtar alla personers namn och e-postadresser. /names/John: Hämtar namn och e-postadresser för alla som heter John. Postman är ett verktyg för att testa API:er. Du måste ladda ner och installera det på din dator. Med Postman kan du skicka tex GET-förfrågningar till ditt API och se svaren.
• Fö3 - REST api:ets POST - Visar hur man gör POST funktionalitet för att spara ner namn och epost till json fil.
• Fö4 - REST api:ets DELETE - Visar hur man gör DELETE funktionalitet för att ta bort person baserat på epost, den epost adressen är unik för varje person.
• Fö5 - REST api:ets PUT - Visar hur man gör PUT funktionalitet för att uppdatera en persons namn baserat på epost adressen som är unik.
• Fö6 -VUE.js och Axios javscript ramverk - Går igenom hur du använder Vue och Axios JavaScript-ramverk mot vårt REST API names. I HTML-sidan använder vi Vue.js för att skapa en reaktiv komponent och Axios.js för att göra HTTP-anrop mot REST API:et. I blueprinten har vi skapat en route som renderar HTML-sidan för att göra HTTP-anrop mot REST API:et
• Fö7 - Grundstruktur för alla vue.js appar - Du kan använda denna grundstruktur för alla din vue appar.
• Fö8 - Visar allas namn och epost - Grundstruktur för Vue-appen som visar alla namn från REST API:et names. Går igenom Vue-appens grundstruktur, inklusive data, mounted och methods. Vi visar hur du använder Axios för att göra HTTP-anrop till REST API:et för att hämta alla namn och visa dem i en HTML-tabell. Vi går också igenom Vue-syntax som v-for och @click, och hur du kopplar @click till en metod i din Vue-app.
• Fö9 - Lägg till namn och epost - Lägg till namn och e-post. Visar hur Axios POST-förfrågningar fungerar och hur du kopplar @click på add-knappen i layouten för att anropa en metod som lägger till data. Vi förklarar också hur Vue’s v-model används i formulärets textfält för att koppla till datamodellen/variabler i Vue’s data. Dessutom går vi igenom vad @submit.prevent är och hur det används i formuläret.
• Fö10 -Ta bort namn och epost - Hur axios delete funkar, hur du kopplar @click på delete-knappen i layouten för att anropa metod/funktion som tar bort data.
• Fö11 - Editera och Uppdatera namn - Redigera och uppdatera baserat på e-post. Visar hur Axios PUT-förfrågningar fungerar och hur du kopplar @click på Edit- och Update-knapparna i layouten för att visa och fylla ett formulär med data för den person som ska uppdateras. När vi sedan trycker på uppdatera, anropas en Vue-metod som i sin tur anropar REST API:et för att uppdatera datan. Vi visar också hur man gömmer och visar uppdateringsformuläret.
• Fö12 - Vue appen som en komponent - Gör om Vue app till att använda en komponent i stället. Visar hur en kompenent byggs upp och registrera hos vue appen samt hur den lägger in i html sidans div tagg.
• Fö13 - Vue appen i egen js fil - Flytta ut NameListCrudComponent till en egen JS-fil. Visar hur du flyttar ut NameListCrudComponent till en egen JavaScript-fil och importerar den till din HTML-sida via en script-tagg. Vi går igenom hur du skapar en static-mapp i din blueprint där du lägger din egen JS-fil som ska importeras. Vi visar också hur du i din blueprint anger var static-mappen finns så att den hittar dina JS-filer. Slutligen visar vi hur du med hjälp av Flask’s url_for i HTML-sidan importerar din JS-fil.
• Youtube - REST flask api -
• Youtube - REST GET -
• Youtube - REST POST -
• Youtube - REST UPDATE/PUT -
• Youtube - REST DELETE -

Övningar

• Skapa ett eget REST API som blueprint i flask som jobbar mot SQLitedatabas. Använd också Repository- eller ActiveRecord designpattern. Bygg också en front-end klient med VUE. Användaren ska kunna utföra CRUD-operationer (Create, Read, Update, Delete) mot ditt REST API via klienten.

Inlämningar

• Vecka 49-3: Inlämningsuppgift 2: Större programmeringsuppgift med inspelade redovisning baserat på det vi gått igenom under vecka 49-3. Tillgänglig i kursrummet från vecka 49 med inlämning senaste fredag vecka 2 kl 17:00
• Vecka 3: Kom ihåg att göra duggan i kursrummet den 17 jan kl 10:00
• Vecka 3: Kom ihåg att göra kursutvärdering i kursrummet.

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?