# Home Welcome to the Berkeley IEEE Wiki. Here, we try to store all of our collective information about how to best run IEEE, and pass along information about academics and industry. ## History The Berkeley IEEE student chapter was established in 1912 and is part of Region 6 (US - West) of the national branch. Since we are part of national organization, we are provided with numerous benefits, such as monetary funding. All IEEE members are also required to register themselves as National IEEE members. ## The EECS Community One of the main goals of IEEE is to benefit the EECS community. As such, our members participate in a variety of outreach and industry related activities such as inter-organization socials and information sessions in order to spread awareness and better acquaint ourselves with company contacts. We also participate in events such as Cal Day, when we do soldering and project demos for visitors, host tours of Cory/Soda to prospective students, and speak on panels to give information on the EECS program. {% embed url="" %} UC Berkeley Startup Fair {% endembed %} * Infosessions * Research Fairs Traditional IEEE Events IEEE holds a handful of events every semester without fail, in addition to other occasional fun activities. * EOY Banquet See the Activities page for less frequent events. # Page # Events These events are popular amongst our members: * Boba Run/Boba Social * Usually Southside has a bunch of boba spots, such as Sharetea, TP Tea, The Alley, Purple Kow, Yi Fang, etc. Not all of them have enough seats, so check ahead to make sure. * This event is usually held in the beginning of the semester to allow members to get to know one another. * Expected turnout: 20+ members * Ice Skating * This event is held usually two months into the semester. In the past we've subsidized the whole cost of the tickets and shoe rentals, which was $15 per person. * We have collaborated with CSUA (unsubsidized) to increase turnout. * Expected turnout: 15+ members # Home Welcome to IEEE TechOps! # History # Members Members list as of Fall 2022(?) # Projects # IEEE Time # SIEEECURE ## Project Proposal {% file src="/files/S4vfH7QbVa81LSG0Bz1l" %} # Getting Started with TechOps Projects Welcome to IEEE projects! Here, we host a variety of external projects that cater to a variety of audiences, especially those with interest in both software and hardware practical applications. This page will give a quick rundown of our most used tools that you should have before we start. ## Common Developer Tools and Software ### VS Code {% embed url="" %} VS Code is probably the most preferred text editor for most development use cases. It has many powerful commands and extensions that can cater to our needs. Some extensions to get: * Remote SSH * Gitlens (for easy git blame) * GitHub Copilot (you get a free subscription with Student Developer Pack!) * Language specific support (e.g. Python, C/C++, etc) ### Python {% embed url="" %} Surprisingly, Python does not come pre-installed on Windows/Mac (go Linux lol). Please try to have the latest Python version installed. ## Web Projects Here are some software you should have if working on web-based projects: ### Node.js and npm {% embed url="" %} Node.js is a JS runtime for modern JavaScript projects. We recommend getting the latest LTS version from the Node.js website. This should come with npm, the node package manager #### nvm {% embed url="" %} Another possible way to install Node.js is through Node Version Manager, a handy tool that manages your Node.js version through CLI. ### Docker {% embed url="" %} Docker is a containerized application deployment platform. What this means is that Docker does the following: * Virtualizes "containers" which you can think of as mini virtual machines on your computer (or any server) * Distributes and deploys software packages through Dockerfile configurations * Standardizes the overall development process for developers by using a common Docker configuration with the same package versions, environment, etc. ### Postman/Insomnia {% embed url="" %} {% embed url="" %} You will likely soon learn (if not already learned) what HTTP requests are. While it's easy to run these requests in the browser, it's even better to have a client that visualizes these requests and give you a fast GUI-based way to run, test, and develop workflows with these requests. **You only need one of these, not both**. ## Hardware Projects TBD # GitHub Setup To be added to the current GitHub repositories, please Slack your project leader your GitHub username ## Setting up SSH To authenticate your local computer, you need a way to confirm your identity with GitHub. To do this, we recommend using SSH. You can read more here: To set up SSH, follow these steps 1. Create a SSH key if you don't already have one. Open a terminal and run the following. Please DO NOT USE COMMAND PROMPT. 1. `cd ~/.ssh` 2. `ls` 3. Check if you have a file that ends in `.pub`. Examples include `id_rsa.pub` or `id_ed25519.pub`. 4. If you do, run `cat ` and copy the key 5. If you don't have a file like that, please run `ssh-keygen -t ed25519` to create a SSH key and then copy the key. 2. Navigate to GitHub's interface and click on your profile picture, then click `SSH and GPG Keys`. Add your SSH key you copied above into GitHub ## Cloning a repository Navigate to the repository and click the green "clone" button. Select "SSH" as the tab option and copy the link:
Then navigate to a suitable location to clone the repository, such as `~/Documents` and run: `git clone ` Congrats, you've clone the repository! Now just navigate into the repository and run VS Code! # Git Workflow Here's the general Git workflow that you will run into: 1. Pull from origin main/master: `git pull origin main` 2. Create your own development branch: `git checkout -b ` 3. Make your edits 4. Commit and push your changes to your branch: ``` git add git commit -m "commit message" git push --set-upstream origin ``` 5. Open a pull request (PR) in the GitHub interface to merge into main: Remember to **never commit and push directly to main**. The purpose of git is to create a way for many people to work on the same code at the same time without major conflicts. We also would like to see a clean git history. This means: * Rebase often: try to pull the latest changes from main as needed * Make PRs for features and try not to run into conflicts * Make commits linear if possible: ![](https://3246829168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOBPUn06p2VQiK8dW3pV9%2Fuploads%2FyioAc8PQT1YYcTi6DXXV%2Fimage.png?alt=media\&token=dff6dc48-5b54-4003-af43-cb410044eb5e) As a first assignment, please complete [Git Practice Assignment](/techops/getting-started-projects/getting-started-with-techops-projects/git-practice-assignment) # Git Practice Assignment Now that you've learned the basic git workflow, let's do a quick practice assignment! Visit the repo: {% embed url="" %} Then follow the workflow you've just used. Add your name (or username if you don't want your name out there openly) to the README.md file (branch, commit, then PR) to main. Your project lead will then approve/merge your PR! # Hardware Projects Setup # Web Demo Project We have a Node.js app for you to get started in web dev! This is a continuously developed project and will be used for future web tutorials! What's important right now is that with Node.js installed, you're able to run the the project successfully and configure your tools to work with it (e.g. you can send HTTP requests via Postman/Insomnia through localhost to the Node.js server). See the project here: {% embed url="" %} Once you've cloned the repository, this will be the general workflow: 1. check the `package.json` file 2. run `npm i` or `npm install` to install the required dependencies through npm. 3. run `npm run dev` or `node .js` to execute a runtime to run the file. 4. For this project specifically, visit `localhost:8080` and if you see the following screen, you've made it! ### Concept Check Questions: Do some of your own digging through the repository and answer the following questions: 1. What is the tool that manages node packages? 2. What command line command triggers this tool? 3. How do we install the required dependencies? 4. If we wanted to add dependencies to our project, where can we look? 5. Which file holds the dependencies? 6. Typically, to run a Node.js file, the command to start it is `node .js`. What other commands can we run to start the server? 7. If we want to make more of these custom commands, where do we put it? 8. What does `nodemon` do? How is it used? Next, please go to [Assignment 1: HTTP Requests](/techops/getting-started-projects/web-demo-project/assignment-1-http-requests) to complete the first assignment. # Assignment 1: HTTP Requests This assignment gives you practice using HTTP requests to your local server. Feel free to use Postman or Insonmia to run these requests. Remember, Google is your friend! Since you're all starting to learn this infrastructure, rely on ChatGPT as little as possible so you actually *remember* how to do these things! Now that you have your server running, you should see a landing page with a small library of books. Our task is to find a way to manage this library! We want to 1. retrieve the list of books 2. add a new book 3. update an existing catalog entry 4. remove a book Which HTTP request corresponds to which action? ### Your Task Look through `server.js`. This should contain all the existing server code that exposes these possible actions to a user. Additionally, to give you some more context, there's a database file that's cleared and repopulated every time the server restarts. If you restart the server, you will clear the database! Based on the code in the file, please write the following: 1. a request to get all the books 2. add a new book to the library 3. update the author of an existing book 4. remove a book from the library You may do this in several ways: * Postman/Insomnia provides a user-friendly way to make these requests. Feel free to search wherever to learn how to use these tools * Write Python, JavaScript, or any other code to make these requests. Postman also generates code for you, so you might find that feature helpful. * Write cURL requests. These are much harder for people to read but they work! Some tips: * You may want to figure out what the data structure looks like for each database entry, or what data structure is used in general. Hint: they look pretty similar to Python dictionaries! Which fields are critical to operation? * Feel free to try as many things out as you want. Since everything is local to your computer and the database resets on server restart, nothing destructive will happen! ### Changing code: If you locate any errors, improvements, or code changes, please follow our workflow! Branch, modify your code, commit, then make a PR and one of the project leads will review it! # Assignment 2: MongoDB Please follow [MongoDB Setup](/techops/getting-started-projects/web-demo-project/assignment-2-mongodb/mongodb-setup) to make sure you can use MongoDB locally *and* access MongoDB Compass (the browser for MongoDB projects). Most of our database stack uses MongoDB for simplicity. Some more antiquated stacks (e.g. Ghost CMS) uses SQL but it's never directly exposed. ## Part 1: Writing MongoDB queries To set up, navigate to the left panel after you connect to localhost:
Click the `+` button and add a database. You may call the database whatever you want. I'll name it `ieee-library` for the sake of the exercise. You may also enter `books` or any other collection name. This creates a collection upon database creation. > Note: In SQL, you may recognize some of these terms. "Database" refers to an overall database that contains information. However, in SQL, you may be more familiar with the word "table." A collection is similar to a table. The reason that it's different is because NoSQL (MongoDB-like) databases do not contains "rows," so it makes no sense to call something without rows and columns a "table." Instead of rows, we have "documents" that store a JSON aggregation of data. ### Manipulating Data Recall the command to open the mongo shell. Let's open it. Then we need to switch to use our new database we just created. ```bash use ieee-library # switch to new db db # should print the new database name ``` Then let's insert a book: ```javascript db.books.insertOne({ title: 'Computer Architecture: A Quantitative Approach', author: 'John L. Hennessy, David A Patterson'}); ``` Then let's insert multiple books. You can probably see these update in MongoDB Compass after you refresh. ```javascript db.books.insertMany({ title: 'Design of Analog CMOS Integrated Circuits', author: 'Behzad Razavi' }, { title: 'Low Power Design Essentials', author: 'Jan M. Rabaey'}) ``` Now, let's list all the books: ```javascript db.books.find() ``` If we wanted to find a specific entry, you can do: ```javascript db.books.findOne() ``` If we wanted to update a document, you can do the following: ```javascript db.books.updateOne() ``` If we wanted to delete something, you can do: ```javascript db.books.deleteOne() ``` If you wanted to count the number of documents: ```javascript db.books.countDocuments() ``` If we wanted to filter by a field, you can do ```javascript db.books.find( search_field: value ) ``` You can sort a retrieve by ```javascript db.books.find().sort(field) ``` There are many more actions you can do! Please feel free to Google any of them at any time. ## Your assignment Since you operate a library, you want to hold information about users! Let's start thinking about how we want to store this information! ### Question 1: List out what information you want your user to have. Structure them in a key: value\_type structure like below in JSON format. This is your "schema." ```javascript { key: string } ``` ### Question 2: Go ahead and insert 1 new user into the database. What commands do you run? ### Question 3: Now it gets a bit harder! We're going to try and adapt the code from `nodejs-demo` to work with your local MongoDB database! First of all, we need a package that allows NodeJS to interface with MongoDB. Thankfully MongoDB curates their own package called MongoDB Client. {% embed url="" %} What command do you need to run to install this package? Go ahead and do so! ### Question 4: Let's start editing our code. Here are some lines of code that you may want to add to the project. You won't be adding this as a block somewhere. Each line is separate! They go in different places in the file. See if you can figure out where to add these. 
const { MongoClient, ObjectId } = require('mongodb');
const uri = 'mongodb://localhost:27017';
const dbName = 'techopsLibrary';
const client = new MongoClient(uri);
Even after you put these in, it won't work fully. Why is that the case? What crucial step are we missing? We won't talk about how to complete the integeration for this assignment. If you're ambitious, please go ahead and try to finish the integration! We will cover more of this in 1 or 2 weeks. # MongoDB Setup Please follow the setup guide for MongoDB Server Community Edition. Make sure you DO install the Mongo Shell. {% embed url="" %} Then install MongoDB Compass (or another similar MongoDB client): {% embed url="" %} Make sure you aren't installing Atlas CLI. We don't actually need that functionality. ### Verifying your install To make sure you've done everything correctly to set things, up, please open up MongoDB Compass and click the "connect" button. The address should say mongodb`://localhost:27017`
Additionally, type `mongosh` in a terminal (git bash, or powershell) to make sure you've installed the mongo shell properly. ### Concept Check: * What does `localhost` mean? What is `27017` mean? * If you were to connect to a remote server (a database that's NOT on your computer), how would your URL be different? # Assignment 3: Frontend We're going to jump straight into React! React is one of the most popular modern frameworks powering most modern websites. Here's a quick place to get started learning how React works {% embed url="" %} This guide will have sections that walk you through the process of setting up a new React project. However, we will *not* be doing this for our intro assignment. We will be working out of an existing project, which is more often the case when inheriting codebases. ## Setup To get started, pull the latest changes from the repository. Make sure you're in the `nodejs-demo` project folder and run: ```bash git pull ``` You might get an error saying that you will be overwriting changes in your database file. That's okay! Unless you have some important stuff to save, just run: ```bash git stash # this will temporarily remove your changes ``` and then pull from the repository again. You should now see a new folder called `ieee-library-react`. This is where our React codebase lives! Typically, we separate the frontend and backend of our project into different folders, but right now let's just have it this way. ### Installing dependencies Navigate into the folder. Install the dependenices for the project by running ```bash npm install ``` Please be used to this workflow from now on. When dealing with JS projects, if you see a `package.json` file, you're likely going to need to install dependencies with `npm`. ### Starting the React app Now, you will run ```bash npm start ``` and this will start the React development server. After maybe \~30 seconds, visit: ``` http://localhost:3000 ``` to access the development server. Lastly, **make sure your backend is running**. Look at [Assignment 1: HTTP Requests](/techops/getting-started-projects/web-demo-project/assignment-1-http-requests)to recall how to start the server. Now let's move on to navigating the project! # Going through the Files React is based on JavaScript, which you may not be familiar with. However, you probably have *some* coding experience already, so do your best in reading the code. For this part of the assignment, we will not be writing code for the most part. The coding part will come at the very end of the assignment into next week. #### Typescript Our repository is based on TypeScript, which is based off of vanilla JavaScript. You might notice that in JavaScript syntax, it's much like Python where there are no types. However, having o types often leads to user error. Enforcing *typing*, meaning that constraining values to certain types like String, Objects, Lists, Integers, etc help make sure that your system is cleaner. ## Files Let's take a look a the different files in the folder #### node\_modules/ You've seen this before! Recall what this does #### public/ This is a folder where all your publically served images should go. If you want to include #### index.tsx (or index.js) `index.html` is usually the entrypoint for classic websites. `index.tsx` is the entrypoint for React apps. An entrypoint is where the runtime first reads anything, so you can think of this as the "top of your code" #### App.tsx This is usually named `App`, but sometimes people call it something else. It doesn't mean much, but just make sure that your `index.tsx` has this line: ```typescript root.render( // this has ); ``` This will make sure that the `App` instance is included in `index`. App represents the core file that contains the core structure of your frontend interface. This is sort of the "homepage." Notice that `App.tsx` contains a line ```typescript ``` The homepage then can contain other React *Components*, which is the terminology for each structure that's attached to the homepage. If you wanted to add a navbar, for instance, you can make a `NavBar.tsx` file and add a line `` line on the home page. #### BooksGallery.tsx Here's where this particular *component* called BooksGallery is contained. This is the overall container that acts like the "bookshelf" on our home page. This is a container that holds many book objects. ```typescript return (
{books.map((book) => ( ))}
); ``` Each book that the page gets is mapped (remember how Python `map` works?) to a `BookCard` component. This file then returns what's basically HTML containing a list of `BookCard`s. #### BookCard.tsx This is the individual "book" that you see in the library. Notice the type definition: ```typescript type Book = { _id: string; title: string; author: string; }; ``` This is how we define custom types in Typescript. Then notice ```typescript const BookCard: React.FC = ({ _id, title, author }) ``` You might notice these passed from `BooksGallery.tsx` when creating new `BookCards`. We call these *props*, which are parameters that are passed between *components*. To pass information from the Gallery to Card, you need to use props. Then look at ```typescript return (
Book Cover

{title}

{author}

); ``` This is where the "meat" of the content is located. This is how the cards are rendered on the screen and where the image is attached. #### \*.css CSS, or cascading style sheets, are the main way that your pages are styled. Is the page green or blue? What font are we using? How much space is there between each component? CSS is where the aesthetics of a web page design comes in. Look at this guide for more: {% embed url="" %} # Modifying your Frontend Let's start off with some simple exercises for understanding React. 1. Let's start off by changing the library title. This is not from the database! This is hard coded somewhere. Let's change our library title to anything you'd like! 2. Then let's find the where the image from each book cover is coded. Let's change the image! You may find any image to change it to. 3. Notice the "bookmark" button is a little hard to see. Find which file the CSS for this text is located in. Change the CSS so that the button is easier to see! That's it for the assignment! Next week, we'll put our backend and frontend together to add and remove books from this library. Also, please familiarize yourself with HTML, JS, and CSS on a high-level if you aren't familiar with it. React takes many of these concepts from vanilla web development, so it's good for you to know how these work {% embed url="" %} # Assignment 4: Starting with Full Stack Now that you've learned how to mess with both parts, the frontend and backend, let's put them together! First, save your changes from the previous section by 1. creating a new branch 2. staging the files you've changed 3. committing to your new branch 4. push to remote if you'd like Let's get the most updated skeleton code by running ```bash git pull origin main ``` Ideally, you should have no merge conflicts and no error messages. However, it's likely that you will run into a message that may look like this ``` warning: Pulling without specifying how to reconcile divergent branches is discouraged. You can squelch this message by running one of the following commands sometime before your next pull: git config pull.rebase false # merge (the default strategy) git config pull.rebase true # rebase git config pull.ff only # fast-forward only You can replace "git config" with "git config --global" to set a default preference for all repositories. You can also pass --rebase, --no-rebase, or --ff-only on the command line to override the configured default per invocation. ``` This means that your set of local changes have diverged from the remote. Generally, we like to use the `rebase` method. This means that you move your set of changes on top of the new ones on remote, and combine them. More about rebasing here: {% embed url="" %} Now let's move on to the actual assignment. # Part 1: Adding A Form Forms are used everywhere in websites. Now let's make one using React! Let's start off simple. Navigate to `BookForm.tsx` and create the form. ### Writing the Form Here's some code. Go ahead and figure out where to put this ```typescript
setTitle(e.target.value)} required />
setAuthor(e.target.value)} required />
``` ### Form submission logic Let's work on the form submission logic. Look at `const handleSubmit`, which is the function that allows us to submit the form's data using a `POST` request. Here's some skeleton you can use to fill out the block. Make sure to replace all the `// YOUR CODE HERE`. {% hint style="info" %} If you are stuck, try to use Postman's JavaScript -- Fetch generation method to reference what the code should look like. {% endhint %} ```typescript try { await fetch('', { // YOUR CODE HERE method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ key1, key2 }), // YOUR CODE HERE: REPLACE KEY1, KEY2 }); setTitle(''); setAuthor(''); alert(); // YOUR CODE HERE } catch (error) { console.error(); // YOUR CODE HERE alert(); // YOUR CODE HERE } ``` ## Styling the Form You may have noticed that the form looks... pretty bad! Here's the last *challenge* to the assignment. You should do the following: 1. Style the form so it has a consistent background, text styling, button styling, etc. 2. Add *placeholder* text for each of the fields. Here's an example of placeholder text:
4. Challenge: Make this form pop up as part of a *modal*. A modal is basically a pop up window. The workflow would look something like this: 1. The main page has a *button* labelled "Add Book." 2. Clicking the buttom should open a modal that has two fields: title and author 3. On successful submit, the modal should close and you should see another "success" popup on your page that remains there for 1 second. There's purposefully no guidance for this part. You are free to Google, ChatGPT, or use whatever resources to complete this part. # Part 2: Connecting to a Live Database TBD # Beginner VLSI Design Project Starting in Spring 2024, TechOps has started the initiative to run technical projects covering aspects of VLSI Design. To get people started, we're introducing some beginner "Labs" for people to familiarize themselves with the technology. ### Resources: {% embed url="" %} HDL Bits: your primary resource for learning Verilog {% endembed %} HDL Bits is your best resource for self-learning Verilog. It has modules, assignments, etc so you can practice and also build your mini-projects there {% embed url="" %} For people that already have a background on how RTL works, you can try writing some stuff up in here to simulate it. It's a more robust tool than the simple editor in HDLBits. # Initial Exercise: ALU Let's start with some initial exercises! 1. Complete these two HDLBits exercises, if you have not already {% embed url="" %} {% embed url="" %} 1. Read these ChipVerify pages (it will be helpful for the design!) {% embed url="" %} {% embed url="" %} ## ALU The ALU, or the arithmetic logic unit, is one of the core components of any processor design. It has 3 simple inputs: * `a`: operand 1, 32 bits wide * `b`: operand 2. 32 bits wide, * `ALUSel`: selector signal, 4 bits wide There's also one output: * `out` output, 32 bits wide At a high level, what the ALU does is based on the `ALUSel` signal, it will choose the proper operation to perform on the operands `a` and `b`. Our design follows the RV32 specification and should support the same operations, listed below. Some helpful links: RISC-V Green Card {% embed url="" %} Signed vs unsigned representations {% embed url="" %} Here's a quick table what some of the `ALUSel` do. For the sake of this assignment, just do the ones that are listed here. The `-` incidates operations that we will not support at the moment. | ALUSel | Operation | Explanation | | ------ | --------- | ------------------------------ | | 0 | ADD | Adds the operands | | 1 | SLL | logical left shifts `a` by `b` | | 2 | SLT | Signed less than comparison | | 3 | SLTU | Unsigned less than | | 4 | XOR | XORs the operands | | 5 | SRL | logical right shift | | 6 | OR | logical OR | | 7 | AND | logical AND | | 8 | - | - | | 9 | - | - | | 10 | - | - | | 11 | - | - | | 12 | SUB | subtract the operands | | 13 | SRA | arithmetic right shift | | 14 | | | | 15 | BSEL | set the result to `b` | {% hint style="info" %} Your task: Please write a Verilog module that accomplishes the above operations. These actions should be performed irrespective of clock. {% endhint %} You may choose to write this in either EDAPlayground or the editor in HDLBits, though the EDA Playground editor is much more robust. We also expect you to be able to test this through writing a testbench. ## Testing the ALU When testing Verilog, you typically write something called a *testbench*. Testbenches simulate the Verilog code that you wrote and checks if certain waveforms are what you expect at each clock tick. Here are some links to read about this: {% embed url="" %} {% embed url="" %} Your next task is to create a testbench for the ALU you just made. Make sure it tests all the possible cases in the module!