Vejledning 6. Replit

Replit er et gratis online værktøj, som du kan bruge replit til mange slags kodning. Ikke kun HTML, CSS og javaScript som vi skal bruge det til, der er mulighed for at lave eksempler på de første 30 – 40 forskellige kodesprog. F.eks. Phyton, C#, PHP og hvad du ellers bruger din tid på :-).

Jeg har lavet en vejledning, men du kan også se videoen her: Videoen gennemgår det vigtigste

1. Opret dig som bruger

  • Opret dig som bruger ved at udfylde formularen (1). Klik til sidst på Create account (2).
  • Lad være med at bruge hverken Google eller Facebook login (3). Det kommer ikke hverken Google eller Facebook ved, at du bruger replit. Hvis du kender Github, så tør jeg godt at stå inde for dem. Github er et meget anvendt værktøj til udvikling og deling af kode

2. Basis Repl

Hvorfor hedder det Repl? Jeg ved det ikke. Men

  • Hvis man skriver “repl.it” i browseren, som omdirigerer den til “replit.com”
  • Så navnet er vel egentlig “Repl”, lige som at en nyt kodeprojekt kaldes en “repl” i programmet
  • Jeg tror, at det er en smart måde at stave “rebel” på, altså en oprører

2.1 Overblik over “Home” i Repl

Her er basis vinduet i Repl, som du møder, når du logger ind.

Du skaber et nyt kodeprojekt, kaldet en “Repl”, ved at klikke på knappen Create Repl (1).

I navigationsvinduet er der en række muligheder (2). Indtil videre er det kun Home og mappen My Repls, der er interessant. I det store vindue har du en genvej til dine seneste projekter.

Hvis du er en trænet udvikler, vil du nikke genkendende til muligheden for at udvikle over Github (4).

2.2 Opret en Repl

  • Start med at klikke på knappen Create Repl øverst til venstre i Home-vinduet
  • Dette åbner et pop-op vindue. Start med at scrolle (1) for at finde HTML, CSS og JS (2). Den er nr. 7 fra oven, så du skal næsten ikke scrolle for at finde den, og der er virkeligt mange muligheder (+ 50)
  • Klik til sidst på + Create Repl (3)

Du kan arbejde med alle mulige kodesprog i Repl

Der er multi-mange både programmer og skabeloner til programmer i Repl. Du kan kende skabeloner til HTML, CSS og/eller javaScript er mærket med logoet for HTML version 5 (= seneste version, se nedenfor), og alle vil du kunne brug umiddelbart til frontend kodning uden yderligere tilpasning.

Der er f.eks. en skabelon til et e-commerce site, en portfolio skabelon og et slideshow.

html 5
  • I det næste vindue kan du navngive projektet. Først sikrer vi os, at vores Repl har den rigtigt type (1), dvs. HTML, CSS, JS. JS står for “javaScript”. I vinduet title giv din Repl en titel (2) Jeg kalder det “Start på HTML”S (2). Klik til sidst på knappen + Create Repl (3).
  • Du har nu et færdigt projekt, som ser sådan ud. Det består af 3 filer (1). En HTML fil, der hedder index.html, en CSS fil der hedder style.css og en javaScript fil, der hedder script.js
  • Midt i vinduet ser du koden til index.html (2)
  • Når du skal teste det af, klik på knappen Run (3). Så ser du det færdige resultat til højre. Det eneste, koden her gør, er at producere en sætning, hvor der står “Hello world” (4). Så den er lidt kedelig … endnu 🙂
  • Når du er nået hertil, så kan du alt basis i Repl. Så tillykke :-).

2.3 Slet en Repl

Du sletter en repl ved først at åbne den i den rette mappe, her mappen My Repls (1). Find den Repl, du vil slette (2). Klik på de 3 lodrette prikker længst til højre ud for den Repl, du vil slette (3). I lokalmenuen vælg Delete (4). Så bliver din Repl slettet

3. Udvikling i Repl

Jeg tager udgangspunkt i, at du har en HTML, CSS og JS Repl parat præcis som beskrevet i afsnit 2. Dvs. at din skærm cirka ser sådan her ud.

  • For lige at repetere: Til venstre har du filerne (1). Midt i findes koden på den valgte fil (2). Hvis du klikker på knappen Run (3), så ser du resultat af koden længst til højre (4). Der står pt. kun “Hello world”

3.1 Fil-menuen

I øverste venstre hjørne er der en lille fil-menu. Jeg har forstørret den op, så den er lettere at se. De består af nedenstående. I de efterfølgende afsnit bliver de gennemgået.

  • Add filel(1). Den opretter en ny fil. Læs mere i afsnit 3.2
  • Lav en ny folder (2). Folderen bliver en under-folder til den folder, som din Repl i forvejen ligger inden i
  • En fald-ned menu med 3 lodrette prikker (3)
  • I fald-ned menuen har du forskellige muligheder, f.eks. at uploade filer (4). Du får brug for at uploade filer, hvis du vil arbejde med billede

3.2 Fil-menuen 1. Opret en ny fil

  • Klik på knappen Add file (1)
  • Du får nu et vindue på skærmen, hvor du kan skrive navnet på din fil (1). Jeg har kaldt min fil for “Kontakt”. VIGTIGT: Ingen æ, ø eller å, ingen mellemrum og ingen matematiske tegn, når du døber filer
  • Du får samtidig muliged for at vælge filtypen fra en fald-ned menu. Jeg vælger typen HTML (2).
  • Når du klikker på filtypen, dvs. på (2) i figuren ovenfor, så er din fil oprettet. Du kan nu se den mellem de andre filer (1). I vinduet midt i er filen klar til, at du kan indsætte kode (2)

3.3 Fil-menuen 2. Opret en folder inden i din Repl

Du kan sikkert klare dig lidt tid uden undermapper. Så længe du ikke har så mange filer, går det nok. Men når dine sites vokser, er det helt almindeligt, at man opretter underfoldere. Det kan være f.eks. hvis du har mange billeder til en webshop, det kan være til pdf-filer eller andet. Alt sammen for at holde lidt styr på tingene på dit site.

  • Klik på knappen
  • Klik på knappen Add folder (1)
  • Du får nu et vindue, hvor du kan skrive mappens navn. Jeg forestiller mig, at jeg skal have mange billeder på mit site, så derfor kalder jeg mappen for “images” (1)
  • Når du klikker udenfor vinduet med mappens navn, så er mappen oprettet (1)

3.3 Fil-menuen 2. Opret en folder inden i din Repl

Du kan sikkert klare dig lidt tid uden undermapper. Så længe du ikke har så mange filer, går det nok. Men når dine sites vokser, er det helt almindeligt, at man opretter underfoldere. Det kan være f.eks. hvis du har mange billeder til en webshop, det kan være til pdf-filer eller andet. Alt sammen for at holde lidt styr på tingene på dit site.

3.4 Fil-menuen 3. Upload og download filer

Hvis du klikker på de 3 prikker i filmenuen (1), så får du en lokalmenu frem (2). Du kan bruge lokalmenuen til både upload og downloads af filer. Uploads kunne f.eks. være HTML, pdf eller billed-filer, downloads kunne være, hvis du vil eksportere dit site.

3.5 Upload et billede, så du senere kan bruge det på din hjemmeside

Hvis du vil bruge billeder på din Repl hjemmeside, så skal du først uploade dem til Repl.

  • Klik på de 3 prikker i fil-menuen (1). Vælg i lokalmenuen Upload file (2)
  • På din computer udvælger du det billede, du vil have uploadet. Jeg har en PC, på en Mac vil det se anderledes ud. Jeg udvælger det meget, meget, meget smukke AGF klubmærke (snøft, jeg er rørt) (1) og klikker på knappen Åbn (2)
  • Nu er billedet uploadet (1) og klar til brug lige så mange steder, som du har lyst til (1). Når du bliver lidt mere erfaren, kan det være en god idé at lægge alle billeder i en mappe for sig. Fra sidste afsnit har vi tilfældigvis en sådan mappe, “images” (2)

3.6 Indsæt et uploadet billede på en side

Fra afsnit 3.5 har jeg uploadet et billede af AGF’s klubmærke (1). Billedet hedder “agf.jpg”. Dvs. det er et billede i .jpg formatet. Du kan kun bruge billeder i .jpg, .png og animationsformatet .gif.

Inde i <body> området skal du sætte følgende kode ind (2). 

<img src="agf.jpg">

“agf.jpg” er naturligvis billedets navn. Hvis du sætter et andet billede ind, f.eks. “super-agf.png”, så skal du skrive <img src=”super.agf.png” i stedet for.

Du kan se resultatet til højre (3).

3.7 Organiser dine Repls i mapper

Det er en rigtig god idé at få orden i dine Repls. Her tænker jeg ikke på undermapper i de enkelte Repls. I afsnittet her lærer du at lave foldere og at placere en Repl i den valgte folder.

  • Når du laver en Repl som beskrevet i afsnit 2, vil den automatisk blive placeret i folderen My Repls (1).
  • Hvis du ønsker at placere Repls i en folder, du selv laver, så klik på menupunktet Repls (1)
  • Så får du siden nedenfor. Du er inde på menupunktet My Repls (1). Her ser du de Repls, som jeg har lavet i forvejen (2). Ved at klikke på knappen New Folder (3) kan du lave en ny folder. Jeg har allerede lavet en ny folder, som jeg har kaldt HTML (4). Du kunne f.eks. lave en folder, der hed “Modul 24 opgaver” eller hvad du nu selv synes.
  • Din nye folder vil blive placeret som en undermappe til mappen My Repls