Educator Dashboard 101                                       Presenter: Takashi Osako                                     ...
Agenda •     Goals for this presentation •     Introduction •     High-level Architecture •     Visualizing Data •     Adv...
Goals •     Understanding why Dashboard was built •     Give overview of Dashboard functionality       and architecture • ...
Dashboard Introduction                                        What is the Dashboard?Contains Company Confidential Material...
What is the Dashboard?     • A highly-configurable reporting and             visualization tool for students data,        ...
Dashboard Introduction       Allows educators to see information        about their students individually or        by cla...
Dashboard Introduction       Allows staff (principals, IT admins,        etc) to see and configure        information abou...
Dashboard Introduction       Why is Dashboard a powerful tool for teachers?       • Education technology is behind the res...
Dashboard Introduction       How is Dashboard configurable?       • Dashboard pages are configurable by individual        ...
Dashboard Introduction - Main Modules     Profiles     •Student, School, Teacher, Section, Ed-Org     •Used for navigation...
Live DemoContains Company Confidential Material – Do Not Disclose
Extending Dashboard       Dashboard brings together diverse data,        giving educators and staff a holistic view       ...
Dashboard Architecture                                          Architectural OverviewContains Company Confidential Materi...
Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
Dashboard Architecture     Drivers, Key Concepts     •Robustness     •Tested, reliable technologies     •Familiar language...
Dashboard Technology       • Java       • Spring / Spring Modules               o                     Robust, widely-used ...
Dashboard Technology       • jQuery/jQuery UI       • jqGrid               o                     Base for client-side grid...
Dashboard Technology     Testing Tools     •JUnit     •QUnit     •Cucumber     •SeleniumContains Company Confidential Mate...
Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
Dashboard Architecture - Java Modules     How does Dashboard retrieve API data?     •Controllers               o          ...
Dashboard Visualization        Keep in mind - Education data is grouped into logical        families        •student-based...
Dashboard Visualization        The API returns data in its raw form        The Dashboard presents that data graphically, s...
Dashboard Visualization - Student Profile      Panel        Page (Tab)                                          Page (Tab)...
Dashboard Visualization - Section Profile                                                            Grid Contains Company...
Dashboard Visualization - Section Profile                                                     Fuel Gauge Widget   Tear Dro...
Dashboard Visualization      Dashboard pages are assembled from components      •Layouts      •Tabs (page)      •Panels   ...
Dashboard Visualization      Layout Assembly      •Reads JSON configuration files      •Figures out what panels and pages ...
Dashboard Architecture     Examples     {id : "attendanceHist",      type : "GRID",      name : "Attendance History",     ...
Dashboard Visualization      On the client side, Javascript is used extensively for      visualization      •Code is modul...
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 metho...
Best Practices      Make batch calls as much as possible      •Use multi-level API calls               •     e.g.         ...
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              ...
Example 1 - Students in a Section      How we refactored it      •Make a single 4-part URI call with optional view      pa...
Best Practices      Make focused API calls for the data you want      •Instead of calling /students to get all students......
Example 2 - Population WidgetContains Company Confidential Material – Do Not Disclose
Example 2 - Population Widget     Initial implementation     •Get all schools accessible to user               o          ...
Example 2 - Population Widget     Issues we ran into     •For state-level users, there can be hundreds of     schools, tho...
Example 2 - Population Widget     Refactored implementation:     Before page load,     •Get schools accessible to user    ...
Example 2 - Population Widget     Refactored implementation (cont.):     When user selects an ed-org and school,     •For ...
Best Practices        •     Use a REST client for ad-hoc API calls.              Handy for debugging and testing.        •...
Dashboard Security       •     Security               o                     Spring Interceptor                           ...
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
Upcoming SlideShare
Loading in …5
×

Slc dashboard presentation-boston_sep2012

6,344 views
6,287 views

Published on

SLC dashboard Shared Learning Collaborative

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,344
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Delete?
  • Slc dashboard presentation-boston_sep2012

    1. 1. Educator Dashboard 101 Presenter: Takashi Osako Prepared by: David Wu and Sivan Hermon September 29, 2012 Cambridge, MAContains Company Confidential Material – Do Not Disclose
    2. 2. 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
    3. 3. 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
    4. 4. Dashboard Introduction What is the Dashboard?Contains Company Confidential Material – Do Not Disclose
    5. 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 platformContains Company Confidential Material – Do Not Disclose
    6. 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. 7. 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
    8. 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. 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 viewableContains Company Confidential Material – Do Not Disclose
    10. 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 SearchContains Company Confidential Material – Do Not Disclose
    11. 11. Live DemoContains Company Confidential Material – Do Not Disclose
    12. 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-orgsContains Company Confidential Material – Do Not Disclose
    13. 13. Dashboard Architecture Architectural OverviewContains Company Confidential Material – Do Not Disclose
    14. 14. Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
    15. 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 compatibilityContains Company Confidential Material – Do Not Disclose
    16. 16. 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
    17. 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 codeContains Company Confidential Material – Do Not Disclose
    18. 18. Dashboard Technology Testing Tools •JUnit •QUnit •Cucumber •SeleniumContains Company Confidential Material – Do Not Disclose
    19. 19. Dashboard ArchitectureContains Company Confidential Material – Do Not Disclose
    20. 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 APIContains Company Confidential Material – Do Not Disclose
    21. 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. 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. 23. Dashboard Visualization - Student Profile Panel Page (Tab) Page (Tab) Panel Contains Company Confidential Material – Do Not Disclose
    24. 24. Dashboard Visualization - Section Profile Grid Contains Company Confidential Material – Do Not Disclose
    25. 25. Dashboard Visualization - Section Profile Fuel Gauge Widget Tear Drop Widget Colored Text Contains Company Confidential Material – Do Not Disclose
    26. 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. 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. 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. 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. 30. Q&A Whats on your mind?Contains Company Confidential Material – Do Not Disclose
    31. 31. Dashboard Advanced TopicsContains Company Confidential Material – Do Not Disclose
    32. 32. Working with the SLI APIContains Company Confidential Material – Do Not Disclose
    33. 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 complexityContains Company Confidential Material – Do Not Disclose
    34. 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. 35. Example 1 - Students in a Section Contains Company Confidential Material – Do Not Disclose
    36. 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. 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. 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 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
    39. 39. Example 2 - Population WidgetContains Company Confidential Material – Do Not Disclose
    40. 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-endContains Company Confidential Material – Do Not Disclose
    41. 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 serversContains Company Confidential Material – Do Not Disclose
    42. 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. 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 programmaticallyContains Company Confidential Material – Do Not Disclose
    44. 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. 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 applicationContains Company Confidential Material – Do Not Disclose
    46. 46. Open Source • https://github.com/slcedu/dashboardContains Company Confidential Material – Do Not Disclose
    47. 47. Q&A Whats on your mind?Contains Company Confidential Material – Do Not Disclose

    ×