This project was bootstrapped with Create React App.
Team name : Solid Elections
Declaration team members : Damien Brebion (Dev), Bram Kreulen (Dev), Akvilė Kovalčikaitė (Communication)
Project : Solid Elections (Declaration part)
Project's description : Digitize expense form declaration.
First, make the command :
npm install
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm run build
We use github to deploy.
First, you have to check in package.json if the homepage is the link to https://user.github.io/repo-name
Then, you can use the command :
npm run deploy
Solid is used to allow the user to control their data. Users can authorize for the data to be publicly viewed on the website, and withdraw said authorization.
You can heberg your own solid server and let the user use it to create their account. People can also create their own servers.
Solid uses WebID to identify the user with Linked Data.
It is a unique link to your profile, which represents your ID online for your solid pod (eg: https://username.solid.community/card#me)
Linked data offers the ability to to publish data in an accessible and reusable format that allows people to link and combine data from different sources.
Useful link : https://lod-cloud.net/clouds/lod-cloud.svg
We decided to use ReactJS. This was the first time our team members had to use a front-end framework. Initially, we tried to work with EmberJS, but it was too difficult to learn a new framework in such a short amount of time.
When you arrive at the website for the first time, you have to create an account on your solid server (solid.community or inrupt by default)
Then, you have to login and authorize the app to access to read, write, and append you solid pod.
After this step, you have to complete your profile in order to to create a new declaration.
Complete your profile with LBLOD ID and address. (This LBLOD ID can be replaced by e-ID later), if LBLOD ID is valid first name and last name will be fetch from the database.
If your profile is completed and saved, you will now have access to a new form declaration.
For this project we created the form G103. You have to follow these steps and complete the fields, and when it's done, you have to sign and send it.
If there is no error, you will be redirected to a page "/formSent" with a success message.
When you save your profile, it will fetch your database to check if your LBLOD ID is defined. If it is not, the user will get an alert. If it is defined, then we fetch the database again to store our WebID and LBLOD ID. If it's a success, we can check with updated if the LBLOD ID has been added or not (already there). If success is true, we can save the data to the solid pod at public/solidelections/me.ttl#me
For the form, we ask to fetch the name of the list and tracking number with the LBLOD ID. An error message will come up in case there is a problem with the request.
Then the user can fill in the fields and "sign and send". This step will check all data (empty, not a number, ...) and if everything is working, the file will be created in the solid pod at public/solidelections/g103.ttl with differents subjects for each data.
Each file is stored at : solid pod/public/solidelections/file.ttl
Where file is me.ttl and g103.ttl for now.
We recommend to make a folder declarations/year/file.ttl
Where year is the year and file is the declaration, so you can fetch old files and edit in case there is a mistake made.
- subject : #me
- streetAddress : street, number (street and number are different field but we put these together
- postalCode : postal code
- addressLocality : locality
- sameAs : LBLOD ID
-
subject : #authorizedPerson
- director: yes or no (if he is a mandate person)
-
subject : generated id (expenses)
- BuyActionData:
- type : https://schema.org/BuyAction
- agent : me.ttl (https://.solid.community/public/solidelections/me.ttl#me)
- identifier : Expense ID
- description : Expense Description
- price : Expense amount
- currency : Expense currency (€)
- BuyActionData:
-
subject : generated id (funds)
- DonateActionData:
- type : http://schema.org/DonateAction
- recipient : me.ttl (https://.solid.community/public/solidelections/me.ttl#me)
- identifier : Fund ID
- description : Fund Description
- price : Fund amount
- currency : Fund currency (€)
- DonateActionData:
Our database provides some endpoint, but to let them know who we are, you have to send your WebID and LBLOD ID (or e-ID) and say :
I'm WebID and my data is store at LBLOD ID, this ID allows you to know which person has this solid pod.
Working on : https://osoc20.github.io/solid-elections-submission/
We have some remarks below
- App don't have access to your solid pod : Because popup must be on the same server as the APP
- Infinite loading : We have to set the state loading: true if the user's profile does not exist
- Favicon doesn't appear on build : Because it was too big. For that we use a website to generate : https://realfavicongenerator.net/
- Github page is blank: Because package.json/homepage isn't correct
- If we login, logout and login with another account you have to completelly refresh the page, because profile data is not updated --> Idea : Store state to know if person is logged out or not, and when the state becomes true, we refresh the container
- Refresh page on github create a 404 error because of Routing --> Idea : /
- Can't use popup.html in local href on React build, we have to use the absoluthe link (https://site.domain/popup.html) Must be on the same server as the App
- Webcomponent v3's icon is not working
- Change component inputAmount.jsx "€" to webcomponent icon
- Use e-ID instead of LBLOD ID
- We use schema.org but it could be nice to use your own vocabulary
- Change component inputAmount.jsx "€" to webcomponent icon
- Create others forms
This section discusses the different steps that have to be followed in order to change the text of the website. The different steps explain how to use git and github to make these changes.
This step discusses how to set up a github account and download github desktop.
- Create an account on github.
- Download Github Desktop.
- Sign in with your github account on Github Desktop.
This step discusses how to clone a remote repository onto your local machine. In this step you will copy the code of the remote repository and download it on your local machine.
This step discusses how to create a separate branch to do your work on. Creating a branch will ensure that the work you do does not intervene with the work of other people.
Please create your own branch from the current branch multilingual-implementation.
This step will go over how to make changes related to the text on the website. The files can be edited with any text editer on your local machine. As explained in the video, please keep the following rules in mind:
- Start a translation with a capital letter only if and only if the capital letter is also present in the english text.
- At the end of sentences, do not add punctuation marks.
This step will help you to commit your local changes on your local machine and afterwards push those changes to the remote repository on github. Committing changes means that you are sure that those changes are good and you want to persist them. Pushing changes means that you notify the remote repository on github of the changes that you made on your local machine.
- Commit changes
- Push changes
The last step consist of creating a pull request. This pull request will notify the creators of this repository of the changes that you made on your branch. They will check the changes and if they are correct, your branch will be merged with the original branch.
