Replit (tot eind 2023)

Vanaf begin 2024 wordt Replit vervangen door GitHub met Codespaces
Replit is een online ontwikkelomgeving waarin je code kunt wijzigen en uitvoeren. We gebruiken dit op de havo.

Wat is Replit?

  • Replit is een online editor
    • Replit werkt op elk apparaat met internettoegang en een moderne webbrowser, er is geen installatie van apps of programma’s nodig
    • Je code wordt direct bewaard op de replit servers, inclusief oude versies
    • Syntax checks door middel van kleuren van code voorkomt fouten
    • Ondersteuning van heel veel talen: html/css/javascript, python, sqlite, php enzovoort
  • Je kunt code die je gemaakt hebt uitvoeren in Replit
    • Snel zien wat je code doet in een preview-venster
    • Bekijk en test je websites uitgebreid in je browser dankzij de ingebouwde webserver
    • Gebruik de ingebouwde shell access voor gevorderde functies
  • Je kunt code die je in Replit gemaakt hebt bewaren op GitHub
    • Heel veel goede programmeurs gebruiken GitHub
    • Bewaar de laatste versie van je code op veilig GitHub (minimaal 1x per week, liefst elke les)
    • De docent kan helpen als je code op GitHub staat
    • Je kunt efficiënt samenwerken in groepjes als je code op GitHub bewaart

De eerste keer Replit starten

  1. Replit is gratis, sommige functies zoals het wijzigen van private repo’s is afgeschermd in de gratis versie.
  2. Je hoeft voor het gebruik van Replit niets te installeren, alles werkt vanuit de browser Gebruik bij voorkeur Chrome of anders Firefox.
  3. Ga naar https://replit.com/
  4. Druk op de knop “inloggen met Github” om in te loggen.
  5. Geef Replit rechten in Github om wijzigingen aan te brengen in jouw repo’s door op de groene knop te drukken.
  6. Ga door vanaf stap 2 onder “De volgende keren Replit starten”

De volgende keren Replit starten

  1. Ga naar https://replit.com/ en druk op de knop “inloggen met Github” om in te loggen.
  2. Klik op de blauwe knop “+Create” en klik in de popup die verschijnt op “Import from Github”.
  3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/ .
  4. Kies de juiste taal (“HTML/CSS/Javascript” voor de website en game, “Bash” voor de webshop)
  5. Klik op de knop “Import from Github”. Replit haalt nu de laatste versie van je code uit GitHub
  6. Wijzig je code.
  7. Test of je code werkt, je kunt op de groene RUN knop drukken om een nieuw voorbeeld te zien.
  8. Klik op het “Git” icoontje links in het scherm. Type rechts in het scherm een korte beschrijving van de wijziging, druk op de knop “Commit”, druk op de knop “Push”, druk op toestaan gebruik van je github gegevens.
  9. Check in op https://github.com/ dat je codewijzigingen zijn opgeslagen
  10. Als je nog verder wilt werken, gaan dan terug naar stap 4.

Veelgestelde vragen

Mijn code springt niet goed in, hoe los ik dat op?

Klik op het icoontje met de drie streepjes rechtsboven het bestand dat je aan het bewerken bent. Replit auto-format het bestand dat je aan het bewerken bent.

Mijn voorbeeld laat alleen het bovenste stukje zien, hoe los ik dat op?

Klik op het icoontje met het vierkantje en het pijltje erdoor, rechtsboven het voorbeeldvenster. Het voorbeeld wordt nu in apart venster geopend. Druk op reload als je het wilt verversen.

Bewaren op Replit lukt niet, er is een foutmelding met access

Vraag docent om hulp

Bewaren op Replit lukt niet, er is een foutmelding met conflict

Vraag docent om hulp

Hoe update ik het voorbeeldvenster?

Druk op reload in je voorbeeldvenster

Hoe kan ik terug naar de laatste versie op GitHub?

  1. Ga naar https://repl.io/ en log in met je Github account.
  2. Klik op de blauwe knop “+Create” klik in de pop-up die verschijnt op de knop “import from Github”
  3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/