Join us at the DuraSpace reception
On Monday, June 10 from 7:00pm-9:00pm DuraSpace is holding a reception for all OR2019 attendees at the Pony Bar (near the University of Hamburg). All OR2019 attendees are welcome, you need not be a DuraSpace member or user. Drinks and snacks will be provided. For more details see: https://duraspace.org/invitation-please-come-to-a-duraspace-reception-in-hamburg-germany/
This page is for attendees of the OR2019 "Getting Started with DSpace 7" workshops. It provides links to resources, workshop preparation, etc.
- Basic Workshop Slides: https://tinyurl.com/or2019-dspace7-basics
- Advanced Workshop Slides: https://tinyurl.com/or2019-dspace7-advanced
- Basic Workshop (Monday, June 10 from 9:00am - 12:30am)
- Learn about upcoming DSpace 7 release
- Overview of the Install & Upgrade processes
- Understand new features of this release, including demos of the new User Interface and REST API
- Learn the basics of branding / theming the new User Interface (hands-on)
- Advanced Workshop (Monday, June 10 from 1:30pm - 5pm). This workshop builds on what is learned in the Basic Workshop.
- Learn about the Angular framework, and its main elements (templates, components, services, modules)
- Learn about the TypeScript language and its syntax
- Learn more advanced DSpace 7 User Interface changes, using Angular
- Deeper dive on the new REST API, and hands-on experience
- How you can get involved in finishing up the DSpace 7 release
- Tim Donohue - DSpace Tech Lead at DuraSpace
- Art Lowel (Atmire) - Angular UI lead for DSpace 7
- Andrea Bollini (4Science) - REST lead for DSpace 7
Preparing for the workshop
There are no installation requirements for either workshop. However, if you wish to be active in the "hands-on" portions
- Angular: you may wish to install the DSpace 7 UI locally (and perform "hands-on" changes on your own laptop);
- REST: you may wish to install the Postman REST Client https://www.getpostman.com/downloads/
Please be aware that, as we have over 40 workshop attendees, we unfortunately cannot promise any "hands-on" support on an individual basis. But, we still welcome you to turn use this as an opportunity to try some "hands-on" changes.
Handons on the new DSpace UI
During the code walkthrough, we will be working directly with the dspace-angular project (this is the DSpace 7 UI, built on Angular). However, don't worry. It's rather easy to install, and you do not need to install the DSpace backend (as we will be using the public, demo REST API as our backend).
Installing the DSpace 7 UI locally
(These instructions are based on the dspace-angular README)
- Git :You'll want to have Git to simply clone and install our dspace-angular project (this is the in-development Angular UI for DSpace 7). If you don't have Git, you can choose to install either GitHub Desktop (which includes a GUI) or just plain Git. Any version of Git is fine.
- Node.js (version 8.x recommended) : Required to build/run the Angular UI.
- Note: Node.js will also automatically install npm (Node Package Manager). You shouldn't need to install that separately
- Yarn (version 1.3.x or above) : This is an easier to use, speedier package manager that works similar to npm (Node's package manager). It's currently required to build Angular UI.
- dspace-angular: You can now install dspace-angular (the DSpace 7 UI) using the command line.
git clone https://github.com/DSpace/dspace-angular.git(Pulls down the code into a dspace-angular folder on your local computer)
cd dspace-angular(Move into the newly created dspace-angular folder)
yarn install(Install all local dependencies via yarn)
yarn run watch(Build and startup the DSpace Angular UI, while watching code for new changes.)
- Alternatively, you can also run "
yarn start", but that command requires you restart to pick up local code changes.
- Alternatively, you can also run "
- Assuming all went well, you should be able to go to http://localhost:3000 in your web browser and see the DSpace 7 UI homepage.
- Now, to easily follow along with the workshop code changes step-by-step, you may wish to create a branch for the workshop exercises
That's it! Again, there is no need to have the DSpace backend running or install a database, Java, Tomcat or any of the other usual DSpace prerequisites.
Creating a branch for the exercises
To follow along with the exercises run the following git commands in the project directory to get the correct starting point
git remote add workshop https://github.com/DSpace-Labs/dspace-angular-workshops.git
git fetch --tags workshop (Pulls down the dspace-angular-workshops code locally, including tags)
For the Basic Training workshop
git checkout or2019-basic-start (Checks out the starting point of the workshop, the "or2019-basic-start" tag)
git checkout -b or2019-basic (Creates a local branch named "or2019-basic" for you, based on that "or2019-basic-start" tag)
For the Advanced Training workshop
git checkout or2019-advanced-start (Checks out the starting point of the workshop, the "or2019-advanced-start" tag)
git checkout -b or2019-advanced (Creates a local branch named "or2019-advanced" for you, based on that "or2019-advanced-start" tag)
At certain points during the hands-on part we'll show a git tag that corresponds to the solution so far. If you'd like to sync up to that point, run the following:
Revert all existing files to their state at the start:
git reset or2019-basic-start --hard
Remove any newly created files
git clean -f -d
Sync with the solution
git merge $TAG_NAME
Optional Development Tools
While not required, the following tools may make it easier to do basic development with the Angular UI.
- Chrome web browser : When developing an Angular application, all web browsers are not created equal. While you obviously should use other browsers to help test your application, Chrome has built in debugging/visualization tools that come in handy when doing Angular development. Make sure you disable cache in your network tab and keep the inspect element open.
- An IDE : If you wish to do much Angular development (especially for the "Advanced Workshop"), you may want an IDE (Integrated Development Environment) or an editor that understands the TypeScript language. Here's a few we prefer. Just choose ONE. If you have no strong preference, you may want to start with Visual Studio Code.
- Visual Studio Code (Free) : This is a TypeScript IDE from Microsoft (the makers of TypeScript). It's frequently used for Angular development, even by some of the main Angular developers, and provides an excellent debugger for Chrome (which you may also wish to install for easier debugging)
- Atom.io (Free) : This is an advanced text editor from the makers of GitHub. If you install the Typescript language plugin, it acts a little more like a basic IDE for TypeScript / Angular (providing autocomplete and highlighting). However, be forewarned that it doesn't have the debugging capabilities of Visual Studio Code or IntelliJ.
- Any other editor or IDE that provides either TypeScript or Angular 2 support.
Click on the commit hashes for each of the tags in the "releases" to see all code changes for each of the steps of the workshop:
Handons on the new REST API
We will experiment with the public demo using the HAL browser and the Postman REST Client. The Postman REST Client can be downloaded from here the free version is all you need. During the code walkthrough, we will be looking directly to the dspace-spring-rest project (this is the DSpace 7 maven module providing the REST API). However, don't worry. We will not perform any real JAVA coding or compilation, and you do not need to install the DSpace backend (as we will be using the public, demo REST API).
Hands-on exercises will be based on the REST 7 Tutorial
- DSpace 7 UI Technology Stack : Technology overview with link to tutorials on Angular, etc
- DSpace 7 - Angular UI Development : How to contribute to Angular UI
- DSpace 7 REST Contract : Details about available and planned endpoints, request and response format, error codes, etc.
- DSpace 7 REST Coding practice : Key classes and source code organisation of the JAVA REST API Backend
- DSpace Release 7.0 Status : Status of the release, demo sites, etc.
- Get more involved!