Table of Contents

General information and project management
Prototype Technical Insights
Testing
Base structure of the app
Q&A

This small guide contains everything important to jump into development. The implementation is based on AngularJS and further Web-Development Frameworks (see list below) AngularJS is a Framework to design Single-Page-Applications. Get basic information about AngularJS here.

General information and project management

Documents

All documents related to the barcheck mircoservice are linked below.
Architecture
Hybrid vs. SPA
Requirements: Prototype, Minimum & Most
Prototype Barchecker
Prototype Data Persistence
OData & Communication
UI Element Definition
Prototype Authentication & Firebase
Testphase

NOTE: Please update PDFs in projectmanagement/PDFs after changing the .pptx files!

Helpful links and resources

• Deployment link on SAP Cloud Platform
• ZenHub Board for Issue Tracking
• AnglarJS Material
• Material Design Icons
• Technology Choice
• Mixpanel

Used Frameworks (beside basic AngularJS)

• AngularJS Material
• jQuery

Stable / Presentation Version

There is a stable version for presentations that contains some mock up feature for the presentation purpose. You can find the deployment link here.

Prototype

General Idea: Prototype Data Persistence
ODATA & Communication: Technical Background Information

Technical Insights

Development Setup

For continuing the development you could either use local development with an editor of your choice or SAP's Web IDE.

Local

1. Get NodeJS if you haven't yet (will be needed for testing to)
2. Install the 'http-server'-Module

npm install http-server -g

3. Run the http-server from console

http-server

The app will be available via localhost:8080

Web-IDE

1. Open and login
2. Clone this repository
3. Edit / Run the App (-> No webserver specification required, because the Web-IDE provides one for the runtime of the app)

Testing

We use Protractor for testing. The Protractor tests do not replace Unit Testing!

Initial local Setup

1. Get Protractor from npm (nodejs required):

npm install -g protractor

2. Get binaries for webserver:

webdriver-manager update

3. Run the tests:

protractor testing.js

4. See the command line output for results

5. Run the tests every time you are about to commit.

Writing Tests

See the Protractor API reference for the syntax. The test-spec.js file contains the most important commands.

Working with custom directives

See this commit to get an idea of how to modularize your code to delete duplicates.

Structure and Routing

For routing, the app uses UI-Routing from AngularJS UI. In contrast to the routing concept of AngularJS, it is state based and not URL based. Check the following article

Base structure of the app

The app is based on the index.html which is also the target file for deployment. The following picture shows an extract of the index.html containing the navigation and the containers for dynamic content. The yellow rectangle marks the 'sideBar' directive that is used for the slide-in menu of the app. It is triggered by the button within the app's toolbar (marked by green rectangle) which sticks at the top of the app through the whole app to enable to user to jump between the mains menus in every time. The most important part is marked by the red rectangle. The 'div' with the directive 'ui-view' will be a container for the dynamic content that changes with the change of the state.

Navigate using the Routing

The config.js file contains the configuration of the states. You can change states the following two ways:

• Using the Angular UI directive 'ui-sref': Further information
• From coding

$state.go('state_name');

NOTE: The controller this snippet is called from must include $state as a dependency.

Services

To get a basic knowledge of the idea of services, check out this page.

Design Service

TBD

Location Service

TBD

Progress Service

TBD

Contacts Service

TBD

Questions and Answers

• My changes are not applied after saving and reloading..?
  Empty the cache (help).
  
• Why a presentation AND a development version?
  The presentation version is just to win sponsors and for demos. Its functionality is some versions behind the development version. We deploy the development version from time to time to test new features under deployment conditions. So if you want to see the newest version use the Development version.
  
• What is the neo-app.json and the .project.json file for?
  The neo-app-json and .project.json file are configuration files for the SAP Cloud Platform Deployment. They updates with every deployment so don't be scared if one is marked as changed by git after you deployed it. Like all other changes, you can stage and commit them.