vision.tf.fi

vision.tf.fi skapades hösten 2019 för TF:s fundraising för campusprojektet. Den uppdaterades under 2021 och början av 2021 för att lägga till stöd för onlinebetalningar.

Funktionalitet TL;DR

• Beskrivning av fundraisingen med CMS för att redigera innehållet
• Donering med kort-, bank- och mobilbetalningar via Paytrail
• Virtuell donatorvägg

Teknisk TL;DR

• Komponenter: Frontend, CMS och backend för att lagra donationer
• Nyckelord: GatsbyJS, TypeScript, GraphQL, Django, PostgreSQL, Sendgrid, Paytrail
• Källkod: https://github.com/Teknologforeningen/vision.tf.fi
• Innehåll/CMS: https://www.contentful.com
• Hosting: https://heroku.com

Hur sidan fungerar

Sidan är skriven i GatsbyJS med TypeScript. GatsbyJS är ett framework för att bygga statiska hemsidor med för 2019 aktuella webbteknologier som React. Idén med GatsbyJS är att man hämta data från en rad olika källor med hjälp av GraphQL och sammanställa dem till en statisk sida när sidan byggs. Detta innebär att alla anrop till externa datakällor endast behöver köras en gång i kompileringsskedet, efter det kan de resulterande statiska filerna läggas upp på vilken tjänst som helst utan att någon serverkod behöver köras.

För vision.tf.fi specificeras sidans innehåll i Contentful. På Contentful kan man specificera sidans innehåll utan tekniskt kunnande, men bara enligt den datamodell som specificerats. För att ändra layout och lägga till ny funktionalitet får den med tekniskt kunnande lägga till det i datamodellen och sedan uppdatera källkoden för att kunna hantera och rendera sådan data på önskat sätt.

Varje gång innehållet på Contentful ändras uppdateras staging-versionen av frontenden på http://staging-vision-tf-fi.herokuapp.com. Där kan man dubbelkolla att ändringarna ser korrekta ut innan man uppgraderar dem till produktionsversionen. Själva uppgraderingen kan göras på Bärsbörsen (backenden).

Sidan servas på Heroku. Heroku har tillgång till den här repon och uppdaterar för varje commit till main-branchen automatiskt staging-versionerna av frontenden (http://staging-vision-tf-fi.herokuapp.com) och backenden (http://staging-barsborsen.herokuapp.com). Frontenden kan uppgraderas genom Bärsbörsen. Backenden uppgraderas genom att promotea staging-versionen till barsborsen-appen i Heroku.

Lokal utvecklingsmiljö

Projektet består av två delar: frontenden och backenden. Båda behöver köras lokalt på datorn.

Frontenden

1. Installera Node 16 och yarn 1.
2. I frontend/, installera alla dependencies med yarn.
3. Kopiera .env.template till .env och uppdatera alla nycklar till externa tjänster med korrekta värden.
4. Kör frontenden med yarn start

Backenden

1. Installera en lokal PostgreSQL instans, antingen nativt på datorn eller som en container och ha igång den när du utvecklar. Skapa en role i databasen som heter django.
2. För att Paytrail ska fungera, måste du lägga till i din /etc/hosts följande info 127.0.0.1 donationdb.local.
3. Installera pipenv för att hantera Python-dependencies.
4. I backend-mappen, kör pipenv install för att installera alla dependencies.
5. Kör pipenv shell för att få en shell där python har alla dependencies installerade.
6. Kör python manage.py migrate för att skapa alla lokala databastables.
7. Kör python manage.py createsuperuser för att skapa en superuser som kan logga in.
8. Kör python manage.py runserver 3000 för att köra servern.

Testing

Det finns ett (fåtal) test för backenden. De körs med python manage.py test lokalt på ens egna dator. I GitHub körs de med Actionen i .github/workflows/main.yml.