Websovellus jossa voi luoda tapahtuman ja jakaa linkin, jonka kautta kuka tahansa voi ladata kuvia tapahtumalle. Tästä muodostuu takauma jostakin hetkestä. Kuvat tallentuvat käyttäjän oman pilvipalvelun tallennustilaan google driveen.
Sovelluksessa käyttäjä kirjautuu sisään sovellukseen googletunnuksilla ja sallii sovellukselle oikeuden lukea käyttäjän sähköpostiosoitteen, joka esitetään sivulla infotietona ja jota käytetään kuvien lataukseen. Käyttäjä myös sallii sovellukselle pääsyn käyttäjän omaan Google Driveen. Kuvat ladataan Google Driveen kansioihin, jossa luotu kansio on tapahtuma sovelluksessa.
Sovellus näkee tai pääsee käsittelemään ainoastaan kansioita ja tiedostoja, joita sovelluksella on luotu. Sovelluksella ei ole oikeutta mihinkään muihin kuviin tai tiedostoihin.
Kirjautunut käyttäjä sitten luo uuden tapahtuman, jossa oikeasti luodaan uusi kansion Google Driveen annetulla tapahtuman nimellä.
Sovelluksessa kuka tahansa linkin saanut voi kirjautumatta ladata kuvia käyttäjän Google Driveen. Tästä tulee haaste googlen käyttöoikeuksien kanssa. Miten saadaan kuvat ladattua ja millä tunnuksella. Kirjautunut käyttäjä voi ladata kuvia kansioon, jollon ne tulevat kansioon käyttäjän luomina.
Mutta entä tilanne, jossa joku tuntematon käyttäjä kirjautumatta haluaa ladata kuvia?
Tätä varten tallennetaan käyttäjän googlelta saatu refresh-token tietokantaan talteen. Kun joku lataa kuvan sovelluksella, poimitaan refresh-token ja käytetään sitä googlen apikutsuihin autentikoimiseen.
Jos sovellus olisi yrityskäytössä voitaisi virittää palvelutunnus siten, että se toimii jonkin käyttäjätunnuksen puolesta. Tähän ei käytetä service tunnusta, kun omistuksen siirtoa ei pysty tekemään julkisessa käytössä. Yrityskäytössä voitaisi toimia jonkin käyttäjän puolesta.
Google ei salli tiedostojen omistuksen siirtämistä eri @domain osoitteella olevien käyttäjien välillä. Eli ei pystytä siirtämään ladatun kuvan omistusta palvelutunnukselta käyttäjälle, joka kansion omistaa.
Jakolinkin luonnissa lisäksi jaetaan kansio julkiseksi internetiin. Sovellus siis muuttaa tässäkin Google Drive kansion jako-oikeuksia. Huomiona siis, että kaikki linkin tietäjät pääsevät näkemään kuvat. Tämä on täsmälleen sama tapa, kuin jos Google Drivestä suoraan jakaa kansioon linkin. Osoite on sellainen, jota ei pysty arvaamaan.
Kun kansio on jaettu internetiin, kuvia voi myös selata sovelluksessa täysikokoisina kuvina "kuvagalleriana". Tapahtumasta voi myöskin jakaa Google Drive kansion linkin suoraan, jolloin linkin saaja voi avata vaihtoehtoisesti Drive sovelluksella kansion.
Proof of concept / MVP, NextJS opiskelua, Google Drive opiskelua, Node opiskelua.
- Nextjs pohja
- Etusivunäkymä, jossa info sovelluksesta ja kirjautuminen
- Kirjautuminen google tunnuksella
- Google drive yhdistäminen sovellukseen
- Google drive kansion luonti tai olemassaolevan käyttö
- Google drive kuvan/kuvien lähetys kansioon
- Tapahtumien listausnäkymä
- Tapahtuman valinta
- Tapahtuman luontinäkymä
- Jaettavan linkin luonti
- Google drive linkin luonti
- linkkien Jako whatsappiin tai mihin tahansa
- Tapahtuman muokkausnäkymä
- Tapahtumanäkymä
- Kuvien listaus tapahtumaan
- Kuvien lähetys tapahtumaan ja lataus google driveen
- Kuvalistauksen reaaliaikainen päivitys kaikille
- Kaiken koodin refraktorointia
- Käytettävyyden parannuksia
- Komponenttien parannuksia ja hieromista
Sovellus on julkaistu vercelillä.
Erikoisuuksia oli ympäristömuuttujissa. Jos ympäristömuuttujassa on \n (newline) rivivaihtoja. Vercelin web-käyttöliittymästä lisätessä, pitää korvata rivivaihtomerkit oikeilla rivinvaihdoilla. Ei esimerkiksi auta laittaa sisältöä " merkkien sisään.
Toinen säätö oli next-i18next kanssa. Vercel ei oletuksena löytänyt käännös json tiedostoja public/locales kansiosta. Korjaus löytyi, että piti lisätä next-i18next.config.js tiedostoon merkintä kansion sijainnista.
localePath: path.resolve("./public/locales"),
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.