3.4: Programming and Flowcharts

Flow Charts

Flow charts are very valuable in writing code. In essence, each node of the flow chart describes a process that you will need to code.  If your code gets complicated it can be very difficult to see where you are, but also, in object oriented coding, you can make an object or a function that does a task, and then call it when your flow chart needs it. So you can imagine in procedural coding you have one complicated script that crawls down the entire flowchat, while in object oriented coding you can call objects when the flow chart requires them.

In this class we will use the diagrams.net to make two types of flow charts; those for describing the flow process of a computer script (this section), and later, those involved with electric circuits.  You can use shapes of common programs like PowerPoint or a flowchart app.  We will install and use the  draw.io app at https://app.diagrams.net/ and connect this to your course folder in Google Drive.  Once you create a flow chart, you can use it as a template for future flow charts.  IOST systems typically involve sensors that provide data about the environment and actuators that do a task. Many of these processes do not need to communicate with the internet and are called edge devices (they are on the edge of the cloud).  Your first assignment will be to make a simple flow chart where a sensor provides data that is read, and based on the value, an action is taken.

https://app.diagrams.net/

There are two ways you can install the app.  Either right click in your google drive, click on more apps, and search for "diagrams.net".  Or you can go to diagrams.net site and follow the following instructions.  Figure \(\PageIndex{1}\) is a flow chart that gives the steps for activating drawio and connecting it to your account.  Please do not set this to your folder in Google Drive, but the subfolder called current work

Figure \(\PageIndex{1}\): Steps for activating draw.io in your Google Drive.  Be sure to use the CURRENT WORK folder of your class directory to keep flow charts you are working on. (Copyright;  Bob Belford, CC 0.0)

To activate the draw.io app go to your current work folder in Google drive, right click, and open diagrams.net

Figure \(\PageIndex{2}\): Right clicking in the "Current Work" folder and choosing more gives the option to open the draw.io app. (Copyright; Bob Belford, CC 0.0)

The following is a fast no-nonsense video that you should watch before proceeding.

Video \(\PageIndex{1}\): 3:22 YouTube, "Create flowcharts with diagram.net" by Bianca Ruiz (https://youtu.be/jbAJk1pBUYk).