-
Notifications
You must be signed in to change notification settings - Fork 3
Final Report Software Project
In our final report we want summarize our software project. It is about what we had planned in this project and what we have achieved and what are our results.
Our work was about the website "Ontohub.org". The current version, which is currently online, is partly very confusing and cumbersome to use, and therefore not particularly user-friendly. Our task was to solve this problem by redesigning the frontend.
For this, we wanted to develop a concept that would satisfy the requirements and reflect the idea of the new surface. For this concept we drew the first rough drafts, in the form of wireframes, so that we could clarify our concept of the new website. In this design phase, the concept and idea of the website surface was often changed, so this process took a relatively long time.
Finally, we got to the conclusion that on the new website all important functions should be accessible more quickly. This is to be achieved with a simple modular design. The plan was to create a high degree of user-friendliness through a personalized website. Overall,there should be a uniform design in which new functions can be quickly added without changing the page structure. Our concept can be found in the Wiki of the Ontohub Frontend Repository. (https://github.com/ontohub/ontohub-frontend/wiki/Documentation-Frontend2.0)
After completing the concept, we have begun to learn how to work with JavaScript and specifically the React library. Our goal was to implement the interface, which we described in our concept and illustrate with the wireframes. At result should be a small prototype of the frontend, which represents the user interface and the workflow.
A basic element of the Ontohub site is the top menu line. There is a quick search function and an extended filter search function, which opens a popup window, where you can set filters later. On the right there is a login button.
The first page we created is a user site. On this you get (either logs on, or) with any URL in the form: localhost:3001/:user. The :user is a variable for any username. We use in our code mock data that we have about Query inquiries from the backend. We always added the individual queries in the individual js files in comment form. On the “user site” you will see a field on the left side where you could display a user image, and the user's display name below. Here, in our version, either the user name is displayed in the URL, or "Ada Lovelace" if user matches the ID in the mock data. On the right side is a simple menu with a subdivision between “Overview” and “My Repositories”. The most frequently used and popular repositories of the user should be displayed in Overview. (In our version, only the repository from the sample data is displayed) My Repositories, as the name implies, shows all the repositories of the user. If you click on a repository name on the usersite, you get to the “Working View” and the URL changes accordingly: localhost:3001/ada/fixtures/Filebrowser+Details On this page, a menu line is displayed by default, in which there is a button on the left side to switch the filebrowser on and off, next to it a branch selection and a path to the folder/file you are currently in. On the right side, there are individual buttons, they can hide and show the context, and open a pop up to create a file/folder, upload a file and download a file. The page is divided into a maximum of 3 parts: in the filebrowser, content window (this can also have 3 other panel (details, editor, history)) and context window (by displaying either prove, translation or git-commit).
At the moment there are still some problems and bugs in our prototype which still need to be fixed. On the one hand, the routes are not yet fully worked out and do not work properly yet (for example Filebrowser and presentation of the contents in connection with the URL) Or: If you click on a repository on the Usersite then the URL changes, but the window will not updated). Another current problem is the representation of the filebrowser. We have integrated this with the help of a react library named react-keyed-file-browser. In this case, however, a "Size" and a "Last Modified" column are displayed, which is redundant for our application. Unfortunately, there is no easy way to change the library so that this is no longer displayed. A small problem is the overlapping of individual components, because these cover others when scrolling up and down, although these should be in the background.
You can find our code in the "scenes" folder, where you can find the "Home" (the standard home page), the usersite and the working scene. In each folder there is another folder with the components ("components") and an index.js file (in it, the components of the folder are exported to the above folder so that you can import them there).
At first you can find all the imports, afterwards comes our used query to the backend for our mock data we used here. Below are 4 styled components: for the repository div box, overview panel, the repository div box, my repositories panel, and then for the title and description in these div boxes. Then follows the “usermain” component. The following components and functions are available:
the mock data (const testdaten) the menu component (with Overview and My Repositories) Overview component (shows the example repository from the backend) MyRepositories component the createMyRepositories function, creates a div box with description and linking for every repository Below is the return () of the usermain component: This is where the page is build, so the split in Picture Box and name field, and the menu with Overview and My Repositories.
Here is also a series of imports. The "menuline" component is rendered in the "main" component. Before we get to that cocode, thmponent in the ere are a few others like: Content: is responsible for the content panel. There the :Content variable is matched and decided which have to be rendered. For example if details are opened, then you have 2 plus buttons next to the editor and history button, which can add these panels. The respective component of the content is called under each respective menu, so Details and/or Editor and/or History.
also :Context is used to select the respective menu and to see which context function is to be displayed.
Content and Context are called in the following components: onlyContent, withFilebrowser, withContext and withFilebrowserContext. There the desired main panel (FileBrowser, Content and Context) are be rendered. Depending on how the URL is, these 4 components are called.
This routing is done in the already mentioned "menuline" component. This first includes the menu of the working scene (filebrowser button (switches between filebrowser visible and not visible), branch selection, path of the repository and the open file (not yet functional), context button (switches between context visible and not visible) CreateFileButton, CreateFolderButton, UploadFileButton, DownloadFileButton). The buttons CreateFile, CreateFolder, UploadFile and Downloadfile each call their own .js file. There a pop-up window is rendered in which the responsible function can be added later. Under this menu, there is a which decides which panel should be displayed (Route object).
Representation of a filebrowser of the repository. In the class, there is the constant testdata, for this we used an example repository from the backend. The function setFiledata() makes the desired form from this data (Folder/.../Folder/Filename.filename-extension, for each file, in an array). Afterwards this can be easily displayed with the React library "react-keyed-file-browser" in filebrowser structure.
We have decided more or less from a modular design to a static one. You can still customize the view so that you can use the different functions individually or in parallel. The clarity and ease of use is guaranteed with our prototype.