Slc dashboard presentation-boston_sep2012
Upcoming SlideShare
Loading in...5
×
 

Slc dashboard presentation-boston_sep2012

on

  • 574 views

SLC dashboard Shared Learning Collaborative

SLC dashboard Shared Learning Collaborative

Statistics

Views

Total Views
574
Views on SlideShare
574
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Delete?

Slc dashboard presentation-boston_sep2012 Slc dashboard presentation-boston_sep2012 Presentation Transcript

  • Educator Dashboard 101 Presenter: Takashi Osako Prepared by: David Wu and Sivan Hermon September 29, 2012 Cambridge, MAContains Company Confidential Material – Do Not Disclose
  • Agenda • Goals for this presentation • Introduction • High-level Architecture • Visualizing Data • Advanced Topics o Working with the SLC API o ConfigurationContains Company Confidential Material – Do Not Disclose
  • Goals • Understanding why Dashboard was built • Give overview of Dashboard functionality and architecture • Provide information for developers to find their way around the codeContains Company Confidential Material – Do Not Disclose
  • Dashboard Introduction What is the Dashboard?Contains Company Confidential Material – Do Not Disclose
  • 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 platformContains Company Confidential Material – Do Not Disclose
  • 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
  • Dashboard Introduction Allows staff (principals, IT admins, etc) to see and configure information about education organizations, schools, and studentsContains Company Confidential Material – Do Not Disclose
  • 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
  • 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 viewableContains Company Confidential Material – Do Not Disclose
  • 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 SearchContains Company Confidential Material – Do Not Disclose
  • Live DemoContains Company Confidential Material – Do Not Disclose
  • 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-orgsContains Company Confidential Material – Do Not Disclose
  • Dashboard Architecture Architectural OverviewContains Company Confidential Material – Do Not Disclose
  • Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
  • 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 compatibilityContains Company Confidential Material – Do Not Disclose
  • Dashboard Technology • Java • Spring / Spring Modules o Robust, widely-used web app framework • FreeMarker o Template for HTML generation o Lean, fast o MavenContains Company Confidential Material – Do Not Disclose
  • 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 codeContains Company Confidential Material – Do Not Disclose
  • Dashboard Technology Testing Tools •JUnit •QUnit •Cucumber •SeleniumContains Company Confidential Material – Do Not Disclose
  • Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
  • 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 APIContains Company Confidential Material – Do Not Disclose
  • 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
  • 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
  • Dashboard Visualization - Student Profile Panel Page (Tab) Page (Tab) Panel Contains Company Confidential Material – Do Not Disclose
  • Dashboard Visualization - Section Profile Grid Contains Company Confidential Material – Do Not Disclose
  • Dashboard Visualization - Section Profile Fuel Gauge Widget Tear Drop Widget Colored Text Contains Company Confidential Material – Do Not Disclose
  • 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
  • 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
  • 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
  • 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
  • Q&A Whats on your mind?Contains Company Confidential Material – Do Not Disclose
  • Dashboard Advanced TopicsContains Company Confidential Material – Do Not Disclose
  • Working with the SLI APIContains Company Confidential Material – Do Not Disclose
  • 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 complexityContains Company Confidential Material – Do Not Disclose
  • 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
  • Example 1 - Students in a Section Contains Company Confidential Material – Do Not Disclose
  • 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
  • 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
  • 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 theyre 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
  • Example 2 - Population WidgetContains Company Confidential Material – Do Not Disclose
  • 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-endContains Company Confidential Material – Do Not Disclose
  • 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 serversContains Company Confidential Material – Do Not Disclose
  • 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
  • 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 programmaticallyContains Company Confidential Material – Do Not Disclose
  • 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
  • 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 applicationContains Company Confidential Material – Do Not Disclose
  • Open Source • https://github.com/slcedu/dashboardContains Company Confidential Material – Do Not Disclose
  • Q&A Whats on your mind?Contains Company Confidential Material – Do Not Disclose