https://github.com/hsu-aut/angular-sparql-tutorial
This tutorial provides basic understandings on how to interact with a graph database (here GraphDB), when creating WebApps with the Angular framework.
https://github.com/hsu-aut/angular-sparql-tutorial
angular angular-sparql-tutorial frontend-development frontend-development-exercises graph-database graphdb ontologies semantic-web sparql tutorial
Last synced: 10 months ago
JSON representation
This tutorial provides basic understandings on how to interact with a graph database (here GraphDB), when creating WebApps with the Angular framework.
- Host: GitHub
- URL: https://github.com/hsu-aut/angular-sparql-tutorial
- Owner: hsu-aut
- License: mit
- Created: 2019-07-24T08:36:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:07:11.000Z (about 3 years ago)
- Last Synced: 2023-03-09T22:42:06.475Z (almost 3 years ago)
- Topics: angular, angular-sparql-tutorial, frontend-development, frontend-development-exercises, graph-database, graphdb, ontologies, semantic-web, sparql, tutorial
- Language: TypeScript
- Size: 2.47 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular-SPARQL-Tutorial
This tutorial intends to enable you to build an easy Angular app, which can query a triple store (here: GrapDB), perform operations based on the retrieved data and to visualize this data to a user. Hereby, you will learn some basics on how to program a web-App with the Angular framework.
## Things to do before we start:
### Set up your IDE
1.) Go to `https://code.visualstudio.com/` and download the IDE for your operating system.
2.) Download the latest stable version of nodeJS from `https://nodejs.org/en/`. This should include the node package manager (npm).
3.) Open a terminal in Visual Studio Code and install the Angular CLI via:
```
npm install -g @angular/cli
```
Now you can start developing an Angular-App!
### Set up your GraphDB
This tutorial requires a local (or remote) graph database. Currently, only GraphDB (see: `http://graphdb.ontotext.com/`) is supported.
1.) Get yourself a local (or remote) access, by installing GraphDB (e.g. GraphDB Free) on your (or remote) device.
2.) After having installed GraphDB, you will have to enable CORS, as the front end currently sends HTTP requests to the DB. This will be done by the back end usually, but for the sake of simplicity in this tutorial, this is done by the Angular App directly. In order to enable CORS, click on `Settings...` in your GraphDB instance (not the Workbench). By default, GraphDB should run on port `http://localhost:7200`. Set the port to `7200`. Write in the text area the following command in order to enable CORS:
```
-Dgraphdb.workbench.cors.enable=true
```
3.) Open your browser and go to `http://localhost:7200`. Go to `"Setup" -> "Repositories" -> "Create new repository"`. Create a new repository called `testdb`.
4.) Now, you can import the .rdf documents that you receive from your tutorial guides during the session. Go to `"Import" -> "RDF" -> "Upload RDF files"` and select the files that you received.
### Git client
This tutorial is based on 4 steps, starting from basic HTML styling and ending with an analysis of RDF data in your app. In order to have everybody on the same page with the start of every new step, you can download a version (branch) for each step. To ease this process, install the github client on your device.
1.) Install the github desktop client from `https://desktop.github.com/`
2.) After having it installed, add the tutorials´ repository `https://github.com/ConstantinHildebrandt/Angular-SPARQL-Tutorial`
3.) Fetch the last commit of the branch `0-HTML-Styling`, this is the starting point of the tutorial
### Install dependencies
Now you should have all the relevant files of the tutorial on your device. In Visual Studio Code, open a terminal in the folder `myTutorialApp`. Type the following command to build the dependencies:
```
cd myTutorialApp
npm install
```
This will install all relevant node modules that are required by the tutorial app. Afterwards, you can start the app via:
```
cd myTutorialApp
ng serve
```