klementj

Planlægning af projekt til Steen

Fælles plan for projekt som vi laver for Steen. Først definerer og afgrænser vi opgaven.

Definition af opgaven

Forstå problemområdet

Nogle AspIT elever mangler indsigt i hvor mange pauser de har brug for i løbet af en arbejdsdag. Steen vil have lavet en app, der kan hjælpe både Steen og eleven med indsigten.

Hvilket problem skal vi løse?

Steen vil have en app der kan bruges af AspIT elever til at give indsigt i elevens behov for pauser. Denne indsigt kommer nødvendigvis ikke at appen, men gennem samtale mellem Steen og eleven. Appen skal altså bruges af både Steen og eleven til, at understøtte Steen pædagogiske arbejde.

klementj

Lav en wireframe af en side du elsker, og af en du hader

Wireframes er et meget brugt værktøj i UX. Det bruges til at lave simple skitser af produktet, uden farver og rigtig tekst wiki om website wireframes. I stedet er der med wireframes fokus på elementernes placering i forhold til hinanden, og hvordan et bestemt formål bedst opnås.

Definition: Et visualiseringsværktøj til præsentation af forslag til funktioner, struktur og indhold.

Fx facebook hvor news feedet er i centrum. Det er det vigtigste element og derfor fylder det mest. Øverst i kollonen med newsfeed, et feed hvor de nyeste nyheder kommer øverst, er placeret et element til opdatering af status. En naturlig placering i forhold til at det er noget, som endnu ikke er sket. Venstre kollonne er navigation og profil, midterste er nyheder der sker for nyligt, skrevet af enkelte venner, og i højre side er der event -ting der sker længere ude i fremtiden med mange venner.

klementj

Find en simpel app og lav user flow for den

User flow er det navigations flow af indhold fra en del af en webside eller app til en anden del. Ved at designe et user flow, ligges der fokus på hvad brugeren skal opnå, hvordan vi kan levere det mest effektivt. Effekten af et godt user flow er en bedre user experience fordi det placerer brugeren i centrum at designprocessen.

Definition: Et værktøj til at give forståelse for de skridt brugeren skal igennem for, at opnå et meningsfuldt mål

Når du klikker på en knap, hvad sker der så? Og når du så trykke på noget andet, hvad sker der så denne gang? Os så videre.

En god måde at blive bekendt med konceptet og værktøjet er ved selv at lave et. Find en simpel app som du kan lide at bruge - en der føles god at bruge. Brug Adobe XD, eller blyant og papir, og tegn appens user flow. I Adobe XD kan du bruge UX Flowchart kit, [Flowkit for Sketch](h

klementj

<div class="form-group">
  
  /** 
  * Hvis produktet kun har en default variant 
  * Det er denne som vises ved barberblade.
  **/
  {% if product.has_only_default_variant %}
  <input name="id" value="{{ product.variants.first.id }}" type="hidden">
  
  /** 

klementj

var firstArray = [2, 2, 4, 1];
var secondArray = [1, 2, 0, 2];

intersection(firstArray, secondArray); // [2, 1]

function intersection(firstArray, secondArray) {
  // The logic here is to create a hashmap with the elements of the firstArray as the keys.
  // After that, you can use the hashmap's O(1) look up time to check if the element exists in the hash
  // If it does exist, add that element to the new array.

klementj

let data = {
  image: {
    cropped: false
    name: ''
    type: ''
    url: null
  }
}

async function cropImage() {

klementj

scalar DateTime

type User {
  id: ID! @unique
  firstName: String!
  lastName: String!
  email: String!
  phone: String!
  address: Address
  "A user can be both admin and customer"

klementj

Huskeliste for opstart af nyt web projekt

1. Opret et Github Repository og clone det ned lokalt
2. Hent en webpack boilerplate, pak den ud i det klonede repository, fjern eller rediger README.md filen, add, commit og push
3. Installer dependencies fra package.json med npm install eller yarn install
4. Installer de filer som du yderligere skal bruge i projektet. Fx hvis du skal bruge bootstrap npm install bootstrap jquery popper.js eller yarn add bootstrap jquery popper.js
5. Importer .scss filer til main.scss og javascript filer index.js fx

// main.scss
@import '../../node_modules/bootstrap/scss/bootstrap.scss';

klementj

Oprette en single store

Formål at håndtere et objekt til data, som din app kan læse og skrive til. Uanset hvilket modul der skriver eller læser data, så sker det fra det samme objekt. Store skal også kunne gemme og hente data til og fra browserens localStorage.

Opsætning af contructor

Opret klassen Store der i sin constructor() tjekker om der ligger data i localStorage, henter den ud og sætter data til en variabel. Hvis der ikke ligger noget data i localStorage så returner et tomt objekt og log en fejl i konsollen.

Opsætning af metoder

Opret metoder som du kan bruge store instancen. Metoderne skal bruge til at hente og skrive film til objektet. Opret også private metoder som Store selv bruger til at gemme og læse fra localStorage.

Eksempel på en privat metode der tager et JavaScript Objekt, laver det til en streng og gemmer denne i localStoraga. Der er på forhånd oprettet et objekt i construktoren kaldet movieDB.

klementj

const testMovies = [
      {
        "Title": "Blade Runner",
        "Year": "1982",
        "Genre": "Sci-Fi, Thriller",
        "Plot": "A blade runner must pursue and terminate four replicants who stole a ship in space, and have returned to Earth to find their creator.",
        "Poster": "https://m.media-amazon.com/images/M/MV5BNzQzMzJhZTEtOWM4NS00MTdhLTg0YjgtMjM4MDRkZjUwZDBlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg",
        "imdbID": "tt0083658",
        "Type": "movie"
      },