Agenda (1 hour)

• Welcome and Introductions

• Quick Survey

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Searching the Internet for Code Help

  • Online Tutorials and Other Resources

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

Welcome and Getting Started

Project Guide

While the project guide, linked below, can be used as-is in your classroom, you will likely want to adapt the instructions to meet the specific needs of your course context and objectives. Feel free to use any portion of the material in your own documentation.

Workshop Agenda

1. Attend the live Zoom session on Monday June 13, 2:30 pm - 3:30 pm EDT ⏰ The Zoom link will be provided in Slack.

2. Follow the project guide and complete an example project to meet your student expectations, as you construct any adapted project instructions documents you will use for your course. Use our Slack channel #short-project-build-a-flip-card-study-app to post questions/answers, to share things you have created or to share additional resources you have found.

3. Attend the live Zoom session on Thursday June 16, 2:30 pm - 3:30 pm EDT ⏰ The same Zoom link will be used for this meeting

4. Continue posting questions and sharing success in Slack #short-project-build-a-flip-card-study-app as you complete your project example and adapted project instructions.

Workshop Prep

Getting Started with Slack

Slack will be our primary communication platform for the workshop. The video above provides a brief introduction on the features of Slack, but more help and tutorials can be found at https://slack.com/help.

Getting Started with Replit

Replit is the recommended programming environment for many of our projects. The video above provides a brief introduction on the features of Replit, but more help and tutorials can be found at https://docs.replit.com/.

Welcome and Getting Started Video

Project Guide

While the project guide, linked below, can be used as-is in your classroom, you will likely want to adapt the instructions to meet the specific needs of your course context and objectives. Feel free to use any portion of the material in your own documentation.

Workshop Agenda

1. Attend the live Zoom session on Monday June 13, 2:30 pm - 3:30 pm EDT ⏰ The Zoom link will be provided in Slack.

2. Follow the project guide and complete an example project to meet your student expectations, as you construct any adapted project instructions documents you will use for your course. Use our Slack channel #short-project-cs-for-language-arts to post questions/answers, to share things you have created or to share additional resources you have found.

3. Attend the live Zoom session on Thursday June 16, 1:00 pm - 2:00 pm EDT ⏰ The same Zoom link will be used for this meeting

4. Continue posting questions and sharing success in Slack #short-project-cs-for-language-arts as you complete your project example and adapted project instructions.

Workshop Prep

Getting Started with Slack

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 1:00 pm and Wednesday at 11:30 am. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-trivia-app in the CxD 2022 Slack Workspace

• Programming Platform: Replit.com is the recommended programming platform

• Zoom Video Conferences: Link will be provided on Slack

• Recommended Programming Supplements: Listed in the Trivia Code Reference doc 👉HERE.

Welcome to Our 2022 Online Summer Workshop Series!

Choose one or more workshops to meet your needs.

👈 Find more details on each workshop through the navigation on the left.

Teachers will be provided stipends on the following schedule each summer.

• $250 dollars per participation in a one-week workshop (Programming WS, PBLWorks WS, Cross-Discipline WS)

The maximum total stipend in a summer workshop series will not exceed $1000 per teachers. In order to receive a stipend for the PBLWorks Workshop the teacher must also participate in at least one other workshop to ensure sufficient coverage of computer science content.

The following are required to receive the stipend for each workshop.

• Participation in all live online sessions for the given workshop

• Participation in the online Slack community

• Complete associated surveys

• Submission of a final deliverable that demonstrates competency in the workshop content

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Agenda (1 hour)

• Welcome and Introductions

• Quick Survey

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Searching the Internet for Code Help

  • Online Tutorials and Other Resources

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

👉 As you work through the following activities don't hesitate posting questions on Slack and include a link to your replit when needed.

1 Complete the Template Build Tutorial

2 Create a Custom Question Database

3 Make Five Custom Modifications to Your Trivia Game

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

The Big Picture

A program can be defined simply as a set of instructions that perform defined tasks, and we can use the diagram below to frame the major components of a program. A program can be written to accept particular inputs, like a mouse click, sound from a microphone, or a reading from a temperature sensor. The same program can handle the storage and retrieval of data, like to do items or historical temperature data. The same program can then output something useful, like a current to do list or move robot wheels. Multiple functions are written to control and process everything towards some useful end, each function handling a particular task.

Programming Languages

This exercise will use JavaScript, the primary programming language for web applications that work in a standard browser. There are many other popular programming languages. A particular language is chosen for implementation based on several factors related to the context of the need. Here are a few you may have heard of -- Python, Java (different from JavaScript!), Arduino, C++ and C#. Note: While HTML and CSS are languages with a defined syntax, they are usually distinguished from programming languages that provide computation and functions.

Let's Program: Variables, Functions, Conditionals, and Objects

This exercise takes a direct approach to prepare you for programming a CxD project by taking an "application first" perspective. We will frame this introduction by creating a simplified To Do Application using Javascript.

Declare Variables and Use a Built-in Function

First, in our script.js file, let's declare some variables of different data types and set their values.

• todo is a string

• time is a number

• isComplete is a boolean (true or false).

Then we use a built-in function console.log() to display the values.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//use a built-in function `console.log()` to output values
console.log(todo); 
console.log(time);
console.log(isComplete);

Define a Custom Function

Here we define a custom function displayTodos(). This allows us to call (or invoke) the function whenever we want.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//define a custom function to output to do's
function displayTodos() {
  console.log(todo);
  console.log(time);
  console.log(isComplete);
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Use a Conditional Statement

Here we use a conditional statement (using if/else) to customize the output.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//define a custom function to output to do's
function displayTodos() {
  console.log(todo);
  console.log(time);
  
  //customize the output based on whether it is complete
  if (isComplete) {
    console.log("This is complete.");
  }
  else {
    console.log("This is not complete");
  }
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Use an Object

Here we will use a single object variable to hold all the data for a particular to-do item.

//declare a variable for our data
var todo = {
  text: "Walk the dog.",
  time: 30,
  isComplete: false
};

//define a custom function to output to do's
function displayTodos() {
  console.log(todo.text);
  console.log(todo.time);
  
  //customize the output based on whether it is complete
  if (todo.isComplete) {
    console.log("This is complete.");
  }
  else {
    console.log("This is not complete");
  }
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

JavaScript Arrays

Make a List (or Array)

Here we will use an array and for-loop to list multiple to-do items. We will ignore the time and completion data for now.

//declare a variable
var todos = ["Walk the dog.","Go to grocery.","Call mom."];

//define a custom function to display to do's
function displayTodos() {
  todos.forEach(function(todo) {
    console.log(todo);
  })
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Make an Array of Objects

Here we will combine our use of an array with objects. This is the most difficult concept of this exercise and may take some time to digest. But it demonstrates a lot of powerful programming concepts in a very small program. 🚀🚀🚀🚀

//declare a variable
var todos = [
  {
    text: "Walk the dog.",
    time: 30
  },
  {
    text: "Go to grocery.",
    time: 60
  },
];

//define a custom function to display to do's
function displayTodos() {
  todos.forEach(function (todo) {
    console.log("---");
    console.log(todo.text);
    console.log(todo.time + " minutes");
  })
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Wrap-Up

That's our warm-up. Whether you found these concepts incredibly difficult or mostly review, please don't hesitate posting questions along with a link to your replit code in our Slack channel for the workshop.

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

On the Trivia App Programming

Tinya Fisher

Trivia App - Crossing the Finish Line

Matthew Baron

On Programming and an Approach to the Trivia Project

On Scaffolding and Scrum

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Travis Faas

On Practical Approaches to Programming for Beginners

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 1:00 pm and Wednesday at 2:30 pm (updated). Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-chatbot in the CxD 2022 Slack Workspace

• Programming Platform: Replit.com is the recommended programming platform

• Zoom Video Conferences: Link will be provided on Slack

• Recommended Programming Supplements: See this page.

Welcome and Getting Started Video

Project Guide

While the project guide, linked below, can be used as-is in your classroom, you will likely want to adapt the instructions to meet the specific needs of your course context and objectives. Feel free to use any portion of the material in your own documentation.

Workshop Agenda

1. Attend the live Zoom session on Monday June 13, 2:30 pm - 3:30 pm EDT ⏰ The Zoom link will be provided in Slack.

2. Follow the project guide and complete an example project to meet your student expectations, as you construct any adapted project instructions documents you will use for your course. Use our Slack channel #short-project-cs-for-math-and-science to post questions/answers, to share things you have created or to share additional resources you have found.

3. Attend the live Zoom session on Thursday June 16, 11:30 am - 12:30 pm EDT ⏰ The same Zoom link will be used for this meeting

4. Continue posting questions and sharing success in Slack #short-project-cs-for-math-and-science as you complete your project example and adapted project instructions.

Workshop Prep

Getting Started with Slack

Slack will be our primary communication platform for the workshop. The video above provides a brief introduction on the features of Slack, but more help and tutorials can be found at https://slack.com/help.

Getting Started with Replit

Replit is the recommended programming environment for many of our projects. The video above provides a brief introduction on the features of Replit, but more help and tutorials can be found at https://docs.replit.com/.

All programming workshops will use the same warm up, linked below.

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Getting Started with Replit

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Getting Started with Replit

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Getting Started with Replit

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Getting Started with Replit

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Agenda (1 hour)

• Welcome and Introductions

• Quick Survey

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Searching the Internet for Code Help

  • Online Tutorials and Other Resources

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 1:00 pm and Wednesday at 2:30 pm. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-data-visualization in the CxD 2022 Slack Workspace

• Spreadsheets: Our examples will use Google Sheets

• Python: We will use Google Colab to create a Python notebook in Google Drive.

• Web Programming (HTML/CSS/JS): Replit.com is the recommended programming platform for web programming.

• Zoom Video Conferences: A link will be provided on Slack

All programming workshops will use the same warm up, linked below.

👉 As you work through the following activities don't hesitate posting questions on Slack (#ws-programming-data-viz) and include a link to your Replit code when needed (or even a short video).

For Background: The Project Guidebook

While this workshop is focused on the programming aspect of project, you will want to review the full project guide book below to understand the context.

Three Paths to Visualizations

We offer three paths to work with data and present a visualization, each using a distinct programming language or platform. For your classroom you may choose one path for a single project, all three to provide to facilitate a sequence of projects, or provide students with a choice. Through your own review and work with this material you can determine a best path for your context.

Complete the web app sequence at a minimum, and then consider reviewing the spreadsheet and python exercises as well.

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Getting Started with Arduino Create Editor

Agenda (1 hour)

• Welcome, Introductions, & About iDEW/CxD

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Feel Free to Use Video Too

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. Arduino browser editor) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Agenda (1 hour)

• Welcome

• Quick Survey

• Introductions

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Feel Free to Use Video Too

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

All programming workshops will use the same warm up, linked below.

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Dylan Follett

Dylan is a computer science teacher at the McKenzie Center for Innovation & Technology at the Metropolitan School District of Lawrence Township in Indianapolis.

Programming with the Arduino Desktop

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

👉 As you work through the following activities don't hesitate posting questions on Slack (#ws-programming-video-game) and include a link to your Replit code when needed (or even a short video).

1 Complete the Hello Phaser Tutorial to Get Started

2 Complete the Matching Game Tutorial to Understand Some Key Concepts in Programming with Phaser

3 Complete One (or Both) of the Following Game Tutorials

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

All programming workshops will use the same warm up, linked below.

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 2:30 pm and Thursday at 1:00 pm. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-video-game in the CxD 2022 Slack Workspace

• Programming Platform: Replit.com is the recommended programming platform

• Zoom Video Conferences: Link will be provided on Slack

Agenda (1 hour)

• Welcome and Introductions

• Quick Survey

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Searching the Internet for Code Help

  • Online Tutorials and Other Resources

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

Complete a Custom IoT Project

After completing the particle tutorials, develop a custom application with a subset of the provided hardware that solves a problem with web-enabled features. Simple examples (Thermostat and Door Bell) will be posted as we progress. Again, let's share successes and roadblocks liberally in Slack to help each other and inspire ideas.

Thermostat Project Example

Example code coming soon...

Door Bell Project Example

Example code coming soon...

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

For the IoT programming workshop we simply request that you submit the following three items in a document.

1. A link to your working web app code (e.g. replit.com) that connects to your IoT board.

2. A copy of your Particle Build code.

3. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 2:30 pm and Thursday at 2:30 pm. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-iot in the CxD 2022 Slack Workspace

• Programming Platforms

  • Particle Build is the recommended programming platform for the IoT Board.

  • Replit.com is the recommended platform for web app programming.

• Zoom Video Conferences: A link will be provided on Slack

All programming workshops will use the same warm up, linked below.

Welcome and Getting Started

Prepare for a full-semester PBL experience in computer science engaging the breadth of work in building a product using design, data, and programming.

The Computing by Design Innovation Workshop will cover the development of computer science projects through a three-phase process that goes from researching a problem, building a solution, and evaluating the solution. The project framework and prepared material will provide the guidance needed to plan a semester experience regardless of which technology the project employs.

This workshop is part of the CSPD Week for 2022 (June 27 - July 1).

Tentative Outline for the Week

• • Introductions and Objectives

  • The Computing by Design Approach

  • Problem Solving and Innovation

  • Considerations for Work in the Classroom

  • Getting Started with our Workshop App

• • Driving Question for Students: Which problem will you solve and what improvement do you propose?

  • ✓ Problem Definition & Importance │ ✓ Technology Experimentation & Summary

  • ✓ Initial Ideas & Evaluation │ ✓ Existing Solution Analysis

  • ✓ Stakeholder Profiles & Narratives │ ✓ Value Proposition & Potential Features Map

  • ★ PROPOSAL PRESENTATION

• • Driving Question for Students: What specific solution will you provide and how will you design and build it?

  • ✓ Prototypes │ ✓ Prototype Evaluations

  • ✓ Features Map & System Logic │ ✓ Development Plan & Testing Milestones

  • ✓ Pilot Development & Testing │ ✓ Plan for Launch & Promotion

  • ★ PILOT DEMONSTRATION

• • Driving Question for Students: How effective is your solution and how will you improve it?

  • ✓ Pilot Evaluation │ ✓ Final Release Development

  • ✓ Final Release Launch and Promotion │ ✓ Poster Design

  • ✓ Individual Reflections │ ✓ Presentation Plan & Practice

  • ★ FINAL DEMONSTRATION & PRESENTATION

• Day 5 - FILLING IN THE GAPS & WRAPPING UP YOUR WEEKS WORK

  • A classroom plan to facilitate a computer science project.

  • Three artifacts from the project activities that you created through the course of the workshop. These can serve as examples of work for students while giving you first-hand experience of fulfilling the expectations you may have of your students.

Workshop Prep

• Computer - You'll definitely need a notebook computer, but there is no need for any special software. You can complete all activities using browser-based platforms that are free. Of course you can use other software that you prefer as well, and if you want to bring a physical device, like a robot or IoT kit, please do.

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Introduction

Claiming Your IoT Device

This video steps you through claiming a particle device and setting up WIFI. You will want your mobile phone to complete this with the Particle App installed. Apple: https://apps.apple.com/us/app/particle-iot/id991459054 Android: https://play.google.com/store/apps/details?id=io.particle.android.app&hl=en_US

IoT Tutorial - Programming the Device

We will use the Particle tutorial for the IoT kit linked below to guide us, but the videos will deviate a bit to demonstrate things using the web programming environment. Ultimately we want to get familiar with the hardware, inputs, sensors, and programming. ★ Post questions and successes in our Slack channel as you move along.

Reading Temperature and Humidity

We are covering concepts from the Particle Variables: measure temperature & humidity section of the tutorial. https://docs.particle.io/quickstart/isk-project/#particle-variables-measure-temperature-amp-humidity

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, and have your Argon device connected.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_Temperature_And_Humidity_Sensor.h>

DHT dht(D2);

double temp_dbl, humidity_dbl;

void setup() {
    Serial.begin(9600);

    dht.begin();
    
    Particle.variable("temp", temp_dbl);
    Particle.variable("humidity", humidity_dbl);
}

void loop() {
    float temp, humidity;

    temp = dht.getTempFarenheit();
    humidity = dht.getHumidity();

    temp_dbl = temp;
    humidity_dbl = humidity;

    delay(10000);
}

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Controlling an LED

We are covering concepts from the Particle Functions: controlling a Chainable LED section of the tutorial. https://docs.particle.io/quickstart/isk-project/#particle-functions-controlling-a-chainable-led

Instructions coming soon...

1. Create a new program in Particle build.

2. Connect the Grove Chainable LED to A4, and have your Argon device connected.

3. Include the "Grove_ChainableLED" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_ChainableLED.h>
ChainableLED leds(A4, A5, 1);

void setup() {
    leds.init();
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    Particle.function("toggleLed", toggleLed);
}

void loop() {
    // toggleLed("");
}

int toggleLed(String args) {
    leds.setColorHSB(0, 0.0, 1.0, 0.5);
    delay(500);
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    delay(500);
    return 1;
}    

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Call the toggleLed function to pulse the LED one time.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Reference Material for the IoT Kit Hardware

https://docs.particle.io/quickstart/isk-project/#appendix-grove-sensor-resources

👉 As you work through the following activities don't hesitate posting questions on Slack and include a link to your replit when needed.

For the chatbot programming workshop we will focus on completing the code-specific portions (direct links below) of the warm-up project in the chatbot documentation. While you may want to review the full instructions of the warm-up project for context, the items below are specific to the programming. As always, don't hesitate using our Slack channel to ask questions or share progress.

1 Get Started with the Chatbot Template in Replit

You will find a short video included to help get the template up and running.

2 Complete

A video is included to get you started with the instructions.

3 Apply at Least Five Code Modifications

This is where you want to dig deep and consider the many ways students may want to program the chatbot and how you will help support them. A short video demonstrates how you can get started with making a modification. You are not limited to these modifications.

★ We also encourage you to come up with new modifications and share your work (or roadblocks) on Slack.

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

If you are participating in the Innovation Workshop you will consider similar questions for broader project activities.

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 2:30 pm and Thursday at 11:30 am. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #programming-wheeled-robot in the CxD 2022 Slack Workspace

• Programming Platform: Arduino Create is the the recommended programming platform.

• Zoom Video Conferences: A link will be provided on Slack

👉 As you work through the following activities don't hesitate posting questions on Slack and include a link to your Arduino code when needed (or even a short video).

1 Complete Tutorials A & B to Get Started with the Robot

2 Complete Tutorials C, D & E to Practice Three Key Modes of Operation

Optional: Learn How to Program for More Scenarios

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Each project has three phases, where programming is a very important component of all three. Our Innovation Workshop covers the breadth of the Computing by Design framework. We have found that the programming in any project presents a fine line between a wonderfully empowering experience (when students struggle and get things working) and a sometimes frustrating experience that becomes a missed opportunity. Therefore we are offering these programming workshops to provide a solid foundation on building the applications.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Slack will be our primary communication platform for the workshop. The video above provides a brief introduction on the features of Slack, but more help and tutorials can be found at https://slack.com/help.

Getting Started with Replit

Replit is the recommended programming environment for many of our projects. The video above provides a brief introduction on the features of Replit, but more help and tutorials can be found at https://docs.replit.com/.

Getting Started with Particle Build Editor

Particle offers a web-based editor (https://build.particle.io/build/) that makes programming a device pretty easy. To prepare for the workshop you will want to create a Particle account and know how to access the programming environment. We will get to actually programming a little bit later.

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

Focus on the classroom management practices and assessment strategies for project-based learning.

In partnership with PBLWorks, a full three-day online workshop (PBL 101) will be offered to prepare you with classroom management and project assessment strategies. The workshop will be offered July 11 - 13. More information on the PBL 101 Workshop can be found here.

The PBLWorks workshop will be consistent with a computer science centric approach in project-based learning, applying techniques common in computer science disciplines and standards related to problem-solving with data, design, and programming.

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Travis Faas

On Practical Approaches to Programming for Beginners

On Phaser and Game Development

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

On the Video Game Programming

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Programming a Web-enabled IoT Device

Program the Particle IoT Device

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, connect the LED to A4, and connect your Argon device to your computer.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" and "Grove_ChainableLED" libraries in your program as we have done before.

4. Copy and paste the code below (except of the #include parts) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_ChainableLED.h>

// This #include statement was automatically added by the Particle IDE.
#include <Grove_Temperature_And_Humidity_Sensor.h>

ChainableLED leds(A4, A5, 1);
DHT dht(D2);
double temp_dbl, humidity_dbl;
bool ledOn = false;

void setup() {
    //for the LED
    leds.init();
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    Particle.function("toggleLed", toggleLed);
    //for the temp and humidity
    dht.begin();
    Particle.variable("temp", temp_dbl);
    Particle.variable("humidity", humidity_dbl);
}

void loop() {
    float temp, humidity;
    temp = dht.getTempFarenheit();
    humidity = dht.getHumidity();
    temp_dbl = temp;
    humidity_dbl = humidity;
    delay(10000);
}

bool toggleLed(String args) {
    ledOn = !ledOn;
    if (ledOn) {
        leds.setColorHSB(0, 0.0, 1.0, 0.5);
    }
    else {
        leds.setColorHSB(0, 0.0, 0.0, 0.0);
    }
    return ledOn;
}    

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working. Call the "toggleLed" function to ensure the light toggles.

Program the Web Interface

1. Create a new replit program for HTML/CSS/JavaScript.

2. Copy and paste the following for your `index.html` file.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>IoT Test</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="login">
		<h3>Sign In to Access the IoT Device</h3>
		<input id="username">
		<input type="password" id="password">
		<button onclick="login()">Login</button>
	</div>
	<div id="iot-control" style="display: none;">
		<div id="temp">Loading...</div>
		<div id="light"></div>
		<button onclick="toggleLight()">Toggle Light</button>
	</div>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js">
	</script>
	<script src="script.js"></script>
</body>

</html>

3. Copy and paste the following for your `script.js` file.

var particle = new Particle();
var token;

function login() {
	particle.login({
		username: document.querySelector("#username").value,
		password: document.querySelector("#password").value
	}).then(
		function(data) {
			console.log('API call completed on promise resolve: ', data.body.access_token);
			token = data.body.access_token;
			document.querySelector("#login").style.display = "none";
			document.querySelector("#iot-control").style.display = "block";
			displayTemp();
		},
		function(err) {
			console.log('API call completed on promise fail: ', err);
		}
	);
};

function displayTemp() {
	particle.getVariable({ deviceId: 'e00fce6872f90e7cbce1b406', name: 'temp', auth: token })
		.then(function(data) {
			document.querySelector("#temp").innerHTML = `The temperature is ${data.body.result} ℉`
		}, function(err) {
			console.log('An error occurred while getting attrs:', err.body);
		});
}

function toggleLight() {
	particle.callFunction({ deviceId: 'e00fce6872f90e7cbce1b406', name: 'toggleLed', argument: null, auth: token })
		.then(
		  function(data) {
				document.querySelector("#light").innerHTML = `The light is ${data.body.return_value ? 'on.' : 'off.'}`
		  }, function(err) {
		    console.log('An error occurred:', err);
		  });
}

4. Run your replit.com program.

5. Login to your web app with your Particle account.

6. Confirm that the temperature is displayed on your page.

7. Click the `Toggle Light` button and confirm that the light on your device changes and the text on your web app is consistent with the change.

That's it for our first web-enabled IoT experiment 🎉.

★ If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

For Reference