This document provides an overview of the Educator Dashboard. It discusses the goals, architecture, functionality and configuration of the Dashboard. The Dashboard is a reporting and visualization tool that allows educators to see student data at the individual, class, school and organizational levels. It brings together diverse student data in a configurable and customizable way. The Dashboard uses a modular architecture with Java, Spring and other open source technologies.

1. Educator Dashboard 101
Presenter: Takashi Osako
Prepared by: David Wu and Sivan Hermon
September 29, 2012
Cambridge, MA
Contains Company Confidential Material – Do Not Disclose

2. Agenda
• Goals for this presentation
• Introduction
• High-level Architecture
• Visualizing Data
• Advanced Topics
o
Working with the SLC API
o
Configuration
Contains Company Confidential Material – Do Not Disclose

3. Goals
• Understanding why Dashboard was built
• Give overview of Dashboard functionality
and architecture
• Provide information for developers to find
their way around the code
Contains Company Confidential Material – Do Not Disclose

4. Dashboard Introduction
What is the Dashboard?
Contains Company Confidential Material – Do Not Disclose

5. What is the Dashboard?
• A highly-configurable reporting and
visualization tool for students' data,
provided by the SLC
• A web application
• A "reference" client application for the
SLC platform
Contains Company Confidential Material – Do Not Disclose

6. Dashboard Introduction
Allows educators to see information
about their students individually or
by class, school, and other
organizational levels.
Contains Company Confidential Material – Do Not Disclose

7. Dashboard Introduction
Allows staff (principals, IT admins,
etc) to see and configure
information about education
organizations, schools, and
students
Contains Company Confidential Material – Do Not Disclose

8. Dashboard Introduction
Why is Dashboard a powerful tool for teachers?
• Education technology is behind the rest of the tech
world
• Data is often spread across different applications
• Allows education leaders to create holistic views of
student data, for instructional purposes
• Allows cross-correlations between different student
data (test scores, grades, attendance)
Contains Company Confidential Material – Do Not Disclose

9. Dashboard Introduction
How is Dashboard configurable?
• Dashboard pages are configurable by individual
states and districts
• Waterfall logic - Districts can override state-level
configurations
• Real-time - changes are immediately viewable
Contains Company Confidential Material – Do Not Disclose

10. Dashboard Introduction - Main Modules
Profiles
•Student, School, Teacher, Section, Ed-Org
•Used for navigation and displaying information
•Multiple pages in a profile
•Multiple panels in a page
Dashboard Builder
•IT admins can modify and configure content of profiles
Student Search
Contains Company Confidential Material – Do Not Disclose

11. Live Demo
Contains Company Confidential Material – Do Not Disclose

12. Extending Dashboard
Dashboard brings together diverse data,
giving educators and staff a holistic view
of their students
Dashboard is configurable by individual
states, districts, and ed-orgs
Contains Company Confidential Material – Do Not Disclose

13. Dashboard Architecture
Architectural Overview
Contains Company Confidential Material – Do Not Disclose

14. Dashboard Architecture
Contains Company Confidential Material – Do Not Disclose

15. Dashboard Architecture
Drivers, Key Concepts
•Robustness
•Tested, reliable technologies
•Familiar languages
•Approachable, understandable to developers
•Modularity, separation of layers
•Performance
•Ease of build and deploy
•Cross-platform compatibility
Contains Company Confidential Material – Do Not Disclose

16. Dashboard Technology
• Java
• Spring / Spring Modules
o
Robust, widely-used web app framework
• FreeMarker
o
Template for HTML generation
o
Lean, fast
o
Maven
Contains Company Confidential Material – Do Not Disclose

17. Dashboard Technology
• jQuery/jQuery UI
• jqGrid
o
Base for client-side grids
o
Easy data binding and customization
• Bootstrap
• Raphael
• Angular.js
o
MVC framework, with templating, 2-way data binding
(model <-> view)
o
Non-prescriptive - plays nicely with other frameworks
and application code
Contains Company Confidential Material – Do Not Disclose

18. Dashboard Technology
Testing Tools
•JUnit
•QUnit
•Cucumber
•Selenium
Contains Company Confidential Material – Do Not Disclose

19. Dashboard Architecture
Contains Company Confidential Material – Do Not Disclose

20. Dashboard Architecture - Java Modules
How does Dashboard retrieve API data?
•Controllers
o
Handles incoming requests, calls Managers
•Layout Assembly
•Managers
o
Use API Client to retrieve data, perform biz logic (e.g.
filtering, aggregation, formatting)
•API Client
o
Uses the SLC SDK for Java to communicate with API
Contains Company Confidential Material – Do Not Disclose

21. Dashboard Visualization
Keep in mind - Education data is grouped into logical
families
•student-based
•section-based
•school-based
•etc.
Remembering this will help you design your
application, and also navigate the SLC API more
efficiently
Contains Company Confidential Material – Do Not Disclose

22. Dashboard Visualization
The API returns data in its raw form
The Dashboard presents that data graphically, so that
it is understandable in a glance
• e.g. green is good, red needs attention
Contains Company Confidential Material – Do Not Disclose

23. Dashboard Visualization - Student Profile
Panel
Page (Tab) Page (Tab)
Panel
Contains Company Confidential Material – Do Not Disclose

24. Dashboard Visualization - Section Profile
Grid
Contains Company Confidential Material – Do Not Disclose

25. Dashboard Visualization - Section Profile
Fuel Gauge Widget Tear Drop Widget Colored Text
Contains Company Confidential Material – Do Not Disclose

26. Dashboard Visualization
Dashboard pages are assembled from components
•Layouts
•Tabs (page)
•Panels
o
Grids, Tree Grids, etc.
•Widgets
Contains Company Confidential Material – Do Not Disclose

27. Dashboard Visualization
Layout Assembly
•Reads JSON configuration files
•Figures out what panels and pages to display on
profiles
•Makes all the necessary API calls for these panels and
pages
•Assembles everything into a complete web page
Contains Company Confidential Material – Do Not Disclose

28. Dashboard Architecture
Examples
{id : "attendanceHist",
type : "GRID",
name : "Attendance History",
data :{
entity: "studentAttendance",
alias: "studentAttendance",
},
root: 'attendance',
items : [
{id: "col0", name: "Month", type:"FIELD", datatype: "string", field: "eventDate", width: 90},
{id: "col1", name: "Attendance Rate %", type:"FIELD", datatype: "string", field: "attendanceRate", width: 100, formatter:
PercentCompleteFormatter, params:{low:91}},
{id: "col1", name: "Attendance Rate", type:"FIELD", datatype: "string", field: "attendanceRate", width: 100, formatter:
PercentBarFormatter, params:{low:85, medium:92}},
{id: "col2", name: "Absence Exc", type:"FIELD", datatype: "string", field: "excusedAbsenceCount", width: 70}] }
Contains Company Confidential Material – Do Not Disclose

29. Dashboard Visualization
On the client side, Javascript is used extensively for
visualization
•Code is modularized in a similar way to server-side
Java code
•Separate .js files for panels, visual widgets, utils
•Started using AngularJs for an MVC framework
Contains Company Confidential Material – Do Not Disclose

30. Q&A
What's on your mind?
Contains Company Confidential Material – Do Not Disclose

31. Dashboard Advanced Topics
Contains Company Confidential Material – Do Not Disclose

32. Working with the SLI API
Contains Company Confidential Material – Do Not Disclose

33. Dashboard Advanced Topics
There can be more than one method of obtaining the
same set of data.
Different methods will have different performance and
complexity
•Number of API calls
•Network overhead
•Code complexity
Contains Company Confidential Material – Do Not Disclose

34. Best Practices
Make batch calls as much as possible
•Use multi-level API calls
• e.g.
students/<student_id>/studentSectionAssociations/secti
ons
•Query for multiple entities at once, instead of one at a
time
Contains Company Confidential Material – Do Not Disclose

35. Example 1 - Students in a Section
Contains Company Confidential Material – Do Not Disclose

36. Example 1 - Students in a Section
Our initial implementation
•Get info for the section
o
/sections/<sectionId>
•Get students in the section
o
/sections/<sectionId>/studentSectionAssociations
•For each student, get attendance data
o
/students/<studentId>/attendances
•For each student, get assessment data
o /students/<studentId>/studentAssessments
•For each assessment, get cut points, meta data
o /assessments/<assessmentId>
•For each student, get current grades
o /students/<studentId>/courseTranscripts
Contains Company Confidential Material – Do Not Disclose

37. Example 1 - Students in a Section
How we refactored it
•Make a single 4-part URI call with optional view
parameters
o
/
sections/<sectionId>/studentSectionAssociations/studen
ts?views=assessments,attendances,transcript
The difference?
•Hundreds of API calls vs. a single API call
•Reduced network overhead (improved performance)
Contains Company Confidential Material – Do Not Disclose

38. Best Practices
Make focused API calls for the data you want
•Instead of calling /students to get all students...
•Let the user choose the section they're interested in
first...
•Then call the API for the students in that section
Take into account UX design and page load
requirements
•What needs to be shown at initial page load?
•What can be shown after the page is displayed?
Contains Company Confidential Material – Do Not Disclose

39. Example 2 - Population Widget
Contains Company Confidential Material – Do Not Disclose

40. Example 2 - Population Widget
Initial implementation
•Get all schools accessible to user
o
/schools
•Get parent ed-orgs of the schools
o
/educationOrganizations/<id>
•Get all sections accessible to user
o
/sections
•Get courses that match sections
o
/courses/<id1,id2,...>
In Java, programmatically create a hierarchical JSON
structure to pass to the front-end
Contains Company Confidential Material – Do Not Disclose

41. Example 2 - Population Widget
Issues we ran into
•For state-level users, there can be hundreds of
schools, thousands of courses and sections.
Performance issues loading it all up-front.
•Using /courses/<id1,id2,...> notation with many ids
runs into URL length limit in some web servers
Contains Company Confidential Material – Do Not Disclose

42. Example 2 - Population Widget
Refactored implementation:
Before page load,
•Get schools accessible to user
o
/schools
•Get parent ed-orgs
o
/educationOrganizations/<id>
Contains Company Confidential Material – Do Not Disclose

43. Example 2 - Population Widget
Refactored implementation (cont.):
When user selects an ed-org and school,
•For school-level users
o
/sections
o
/courses
o
Match programmatically
•For state- and district-level users
o
/schools/<schoolId>/sections
o
/courses
o
Match programmatically
Contains Company Confidential Material – Do Not Disclose

44. Best Practices
• Use a REST client for ad-hoc API calls.
Handy for debugging and testing.
• Know your query parameters - includeFields,
excludeFields, views, offset, limit, sortBy, sortOrder,
field-specific value matching
• Caching – use it if you need it
• ehcache
Contains Company Confidential Material – Do Not Disclose

45. Dashboard Security
• Security
o
Spring Interceptor

checks authentication before controllers are called

if user is not logged in, they are redirected to login page

when authenticated, we receive a token
 Scribe OAuth library
o
We make sure our API calls contain token and correct
HTTP headers
o
Protecting the authentication token is the responsibility
of the application
Contains Company Confidential Material – Do Not Disclose

46. Open Source
• https://github.com/slcedu/dashboard
Contains Company Confidential Material – Do Not Disclose

47. Q&A
What's on your mind?
Contains Company Confidential Material – Do Not Disclose