INF5120 – Fall 2017

Oblig 1 – “SmartBuilding - Business Architecture and

Requirements Model and first WebApp”

Individual project on creating a Web App for information about yourself.

Group project on SmartBuilding Lean Business Model Canvas and Requirements Modelling with

user stories and use cases - and user interface with WebRatio Web platform.

Groups of 1-2-3-4 persons - Group and individual report Submission date: March 6th, 2017

Group presentations (on parts of the Oblig):

February 20th: Lean Business Model Canvas – VDMBee and User stories (3 groups)

February 27th: User stories with some related Use cases w/template – and Individual App implementation (3

groups)

March 6th: Oblig 1 Project presentations with WebRatio web app (3 groups)

Description:

SmartBuilding is a new business idea for a possible startup company conceptualized for the

INF5120 class at the University of Oslo for the fall of 2017.

Description for Oblig 1:

Oblig 1 is about creating a SmartBuilding Lean Business Model canvas and associated user stories

and use cases for a SmartBuilding control system, including a Web app interface for the control of

Oblig 1Oblig 2

Oblig 2

the SmartBuilding. Oblig 1 includes also an individual exercise for the creation of a web app using

the WebRatio Web platform. This project will be continued incrementally in Oblig 2 with delivery

in April, where the focus will be on ThingML modeling of the server side and use of WebRatio

with IFML for the creation of a SmartPhone app.

The groups are advised to create the various models based on the flow given in table 1 which also

describes the model requirements for “SmaratBuilding” as well as the frameworks and tools that

should be used.

Provide your delivery as a PDF document with model pictures/diagrams included.

Further information about tool access, with user names/password and other protected material will

be provided through the Ifi INF5120 webpage that the students will have access to through the

public part and the protected parts accessible by the students Ifi account/login.

Table 1 – Flow and model requirements for “Citizense”

N

o

Model

Requireme

nt

Model

Framework /

Methodology

Model Tool / Template

0

Agile

planning

and

enactment

www.upwave.io

(Lecture 5)

Team planning and execution according to an Agile Scrum-

based process, using the team support tool at

www.upwave.io (alternatively the tool at

http://www.scrumwise.com/ )

Describe your teams Scrum Sprint planning and execution.

1

Lean

Business

Model

Canvas

Lean canvas

Lecture 3

VDMBee tool

Business Model Canvas – Create a business model with

content for the 9 different components of the business model

canvas. Consider that you might address more than one

customer segment.

www.vdmbee.com? – download a Chrome app for this from

the Google store, here:

https://chrome.google.com/webstore/detail/value-

management-

platform/accbkkedhkiancnjpdccnlmjfdfjblec?utm_source=c

hrome-app-launcher-info-dialog

2 User

stories Lecture 5

Simple template for user story

I <in the role of XX> needs functionality <zzz> to achieve

the goal of <YYY>

Create a list of user stories (backlog) for the relevant user

stories for the SmartBuilding services.

Make a comment about the relationship between elements in

the Service Design and the elements in the User stories.

3 Use cases Lecture 5

Create a use case model (UML diagram) related to the

described user stories. As a UML Use case diagramming

tool you can use MagicDraw – Cameo Enterprise

Architecture edition (license to be provided)

Describe at least one selected use case with the provided

use case template (See end of this document).

Make a comment about the relationship between the user

stories and the use cases.

6

Web App

developme

nt

Lecture 4

www.webratio.co

m

Create a Web app/portal interfaces for the SmartBuilding –

using WebRatio Web Platform

For Oblig 2 there will be an extension to create a

SmartPhone App interface similarly – done as a group

exercise – using WebRatio Mobile platform

Supporting information

0. Agile Project Model - Symphonical Upwave

Create a team support environment for your team using Symphonical at www.upwave.io Set up a

upwave.io Wall as a Scrum board, and consider also to use "Walls" to monitor the progress of your

project according to the Essence alpha elements.

An alternative team work support tool to use is www.scrumwise.com

1. Lean Business Model Canvas - VDMBee

Note that you need to think about the relationship between the elements in the Business model

building blocks and the elements of Service Design and also user stories/use cases and user

interfaces. The tools are not closely integrated – so you need to take care of the links yourself by

using appropriate naming of elements. For instance a key partner called “XYZ biz” in the “Key

Partnership” building block of the canvas should be the same name as a role in the actors used later,

and “Personas” in the service design model should be representative of relevant roles and actors.

2. User stories

Describe some relevant touchpoints as user stories, using the template,

I <in the role of XX> needs functionality <zzz> to achieve the goal of <YYY>

Consider also if it is relevant to group user stories into features and epics to reflect different levels

of aggregation. (Ref. lecture 5 topic on Agile Requirements Engineering – Leffingwell).

3. Use cases

Create a UML use case diagram for all of the user stories.

Expand at least one of the user stories with a (set of) UML use case diagram(s). Use the Cameo

Enterprise Architect/Magicdraw for this, and then also expand the description of a use case with

the use case template from the end of this document.

Example of Use case template – Table 2

This template is an extended version of the original template defined by Cockburn [1], in particular

extended with a possibility to describe Requested Information Resources often found useful when

dealing with data oriented systems. [1] Cockburn, A. Writing Effective Use Cases. ISBN-13:

9780201702255. Addison-Wesley (2001).

Table 2 — Description of a Use Case Template

Use Case

Template Description Examples

Use Case Name Name of the use case Visualise proposed water height after the tsunami event

Use Case ID Unique identifier of a use case

Revision and Reference

Revision = version number of use case ID

Reference = URL of the use case (you get the URL

by right-clicking on the entry in the index column)

V02, http://SDI.server.de/servlet/is/4900/

Use Case Diagram Description of the UML use case diagram for the

actual use case. The diagram should include extend and include relationships if there is any.

The actual UML diagram figure may be added at the bottom of the template by uploading a bitmap

generated from a UML editor.

Status Status of the use case development One of the following:

Planned

in progress

Priority of

accomplishment (optional)

The priority of the use case to be considered when

assessing its importance for a development cycle.

One of the following:

Must have: The system must implement this goal/ assumption to be accepted.

Should have: The system should implement this goal/ assumption: some deviation from the goal/assumption as stated may be acceptable.

Could have: The system should implement this goal/assumption, but may be accepted without it.

Goal Short description (max. 100 characters) of the goal to be achieved by a realization of the use case.

System generates alerts based on user observations

Summary Comprehensive textual description of the use case. The user opens the browser which shows

map-window with the water height after the tsunami event in the affected area

Category Categorisation of use cases according to overall reference architecture.

Context dependent

Use Case Template

Description Examples

Actor List of users of the use case (actors) Examples may be citizen, administrator or

employee of a SDI agency

Primary Actor (initiates)

Actor that initiates the use case execution.

Stakeholder (optional)

Company, institution or interest group concerned by the execution of the use case

Requested Information

Resources

(optional)

Information category or object that is required to execute the use case or is being generated during

the course of the use case execution.

The requested information resource shall be listed

together with its requested access mode (create, read, update or delete) or “manage” which

encompasses all access modes.

user observation (read)

user-specific effect (read,

update)

alert (manage)

Preconditions Description of the system/user status statement)

that is required to start the execution of the use case.

Note that use cases can be linked to each other via "preconditions“. This means, a precondition for a

use case can be either an external event or another use case. In this case the use case ID should be

provided in the field „preconditions“.

The user has opened the portal

successfully.

Triggers

(optional)

(External) event that leads to the execution of the

use case.

Note that use cases can be linked to each other via

"triggers“. This means, a trigger for a use case can be either an external event or another use case. In

this case the use case ID should be provided in the field "triggers“.

The user chooses water height forecast.

Main success

scenario

Numbered sequence of actions (use case workflow)

to be carried out during the execution of the use case.

1. User chooses assessment report.

2. He specifies one or more components (default should be all).

3. He sets a time-frame (last 24 hours, last week, last month)

4. The system shows a report as graphical visualisation.

Extensions Extension of an action of the main success scenario. The action to be extended shall be

referred to by its number (e.g. 1) appended by a letter (e.g. 1a).

1a. The user defines the temporal extent b. The user defines an unavailable temporal

extent. A new dialogue window opens and requires a new temporal extent.

Alternative paths (optional)

Alternate path through the main success scenario w.r.t. an identified action.

4a. User can select to view report in different formats, e.g. tabular or graphical

map

Post conditions Description of the system/user status (statement) that holds true after the successful execution of the

use case.

Report is displayed on the screen.

Non-functional

requirements

Description of non-functional requirements for this

use case with respect to performance, security, quality of service or reliability.

Display of report expected after 20

seconds at the latest.

Validation statement

List of statements that indicate how to validate the successful realization of the use case.

Notes Additional notes or comments (also by other users).

Author and date Author of use case, date of last edition.

6. Individual Web App development with WebRatio Web Platform

It is necessary for all students to have the necessary knowledge of WebRatio to be able to create

their own web app. Later (for Oblig 2) we will also use the WebRatio Mobile platform for

SmartPhone app development.

The first Web App development needs to be done individually, and will then also provide a

necessary foundation for further support for the group work. The following is a set of steps to be

taken by each individual student.

It is necessary for all students to have the necessary knowledge of WebRatio to be able to create

their own app. This needs to be done individually, and will then also provide a necessary

foundation for further support for the group work. The following is a set of steps to be taken by

each individual student.

Overview

Interaction Flow Modeling Language (IFML) is a standardized modeling language in the field

of software engineering. We will be using the WebRatio Web Platform for the IFML. Each

student is required to individually create a WebRatio account to install and use WebRatio Web

platform to complete this homework.

Individual Homework Requirement

Develop a simple personal database-driven website with basic information about yourself.

Features at the minimum must include multiple web pages, your pictures with some

description, including your academic interests and the courses you have in your study

education plan at UiO - and also a search option.

Also use the "Form" component in some way. For example, create a list other interests like

sports and hobbies.

Tutorial

The following tutorials are a continuation of the tutorials suggested in the Installation guide

and will guide you to learn the basics of designing a website using WebRatio. The tutorials

mentioned below are the essential ones and are not exhaustive. Please refer to the WebRatio

tutorials available at:

http://my.webratio.com/learn/content?cbck=wrReq11972&so=pcu1a&link=oln208a.redirect&nav=60

i. View Containers- https://www.webratio.com/learn/learningobject/view-containers-v-72

ii. Text Editing- https://www.webratio.com/learn/learningobject/how-to-model-rich-text-editing-v-72

iii. View Components and Data Binding- https://www.webratio.com/learn/learningobject/view-components-data-binding-v-72

iv. Master and Details- https://www.webratio.com/learn/learningobject/master-details-v-72

v. Search- Search by alphabetic order https://www.webratio.com/learn/learningobject/how-to-model-the-alphabetical-index-v-72 Search Keywords (Pattern) https://www.webratio.com/learn/learningobject/search-pattern-v-72

vi. Domain Model- https://www.webratio.com/learn/learningobject/domain-model-overview-v-72

https://www.webratio.com/learn/learningobject/defining-the-domain-model-v-72

vii. Data Management- Action Definition

Create data, delete data, update data https://www.webratio.com/learn/learningobject/data-management-action-definition-v-72

Note: Please use your WebRatio cloud account to store your data.

Before you start with your database in the domain model, login into your WebRatio cloud account using:

https://www.webratio.com/account/login-page/

Figure 1: You will need to have the highlighted details to create your database.

Please refer to the following portion of the tutorial available at:

http://my.webratio.com/learn/learningobject/connecting-the-database-v-72

Note: Though this tutorial is labeled for Mobile version, but, the steps are the same for Web

version too.

Adding a Database

The first thing to do when using synchronization is to add a database connection to the Web project.

You can have different database connections, each referring to a subset of the Domain Model.

Right-click on the work area of the "Domain Model" and choose "Add", and then choose the "Database"

option. Select a meaningful name for the database, such "CRM". The name is just a reminder about

which database connection is set on a specific element.

Then choose the database type. Move to the "Properties View" and click on the "Type" drop-down

property. As you can see, you can choose from a set of predefined options, which are the most common

database types you may want to use.

Note: Please set the "Type" as MySQL.

Once you choose the database type, configure the connection properties. Copy the value of the "Sample

URL" property, which shows the structure of the connection string for the specific database type, and

paste it into the "URL" property. Replace the "host" placeholder with the IP address of the workstation

hosting the database, the "port" placeholder with the port number on which the database engine is

running, and the "database" placeholder with the name of the database to which you want to connect.

Remember that the angular brackets are part of the placeholders, and they must be removed.

Note: Please copy the JDBC URL in your WebRatio Cloud account and paste it into the "URL" property.

Please see the highlighted fields in the Figure 1 above.

Now you have to specify the "Username" and "Password" for connecting to the database. To save the

password in the project with encryption, you just have to flag the corresponding checkbox placed inside

the "Password" property.

Note: Please copy the Username and Password in your WebRatio Cloud account and paste it into the

"Username" and "Password" fields. Please see the highlighted fields in the Figure 1 above.

Submission

1. Zip the single folder of your WebRatio workspace containing your entire project.

2. Create a Readme.txt file that contains your WebRatio cloud username and password

3. Submit it to Devilry on the date and time specified.

4. Include your web URL in the text file.

NOTE: Since your cloud password will be available to the instructor and TA, please make sure that your cloud password is shareable. (For example, don't use passwords you use for your Facebook, email, bank account etc.)

References: [1] WebRatio https://www.webratio.com/site/content/en/home

Document your final result with a screen shot and an associated description that each person deliver as part of the group delivery for their group.

The evaluation for the Oblig grade will be based on 3 elements: The presentation of the group, the

Oblig 1 delivery document of the group and the individual parts of the Webratio web apps