Let’s Make a Tiny Gradebook with Angular2

What It’s All About

So, what’s this little app about? Mostly I wanted to learn how to use the Angular CLI and do a little experimenting with the CLI’s unit test integration. It’s also a great chance to learn a little more about Angular2 in general. With that in mind, let me tell you what the little app is or rather, what I think it is. 

The Lady gave me a seed of an idea a week ago when she told me how student at her school have to use multiple portals to turn in online homework. It seems her schools allows teachers to use whatever system they want, so each class can have a different system. As an adult, this would piss me off. Poor kids. The problem made me think of how I would go about making a single portal that would allow students to turn in their work. My solution is by no means a great, or even good one. I already had a few things I wanted to do visually so I’m basically forcing the design, regardless or whether it’s the best one. It’s just for fun after all. 🙂

How This Will Work

My github account will have all the code. At the top of every post will be a link to that day’s commit. So if you do a pull from that, you’ll get everything up to that point.  Example: I have 5 commits, but you only want the code for commit #3. Find the post 3, and grab the link. Boom done. 

Instead of going over everything that’s in the commit, I’ll do a generally overview of what I did and talk about any problem I encountered. Pretty simple.

My Design

Step 1: No backend. Wait what? Yea, I don’t feel like taking the time to make a backend for this. What this means is that any data I want to include will be in a static file and any “saving” will use the browser store. 

Step 2: Login page. I mean, it’s a login page.

Step 3:Dashboard

  • I don’t have this totally flesh out, but I thinking of a page fill with cards. Each card will represent an assignment. If the student needs to upload their work, the card will show an upload button. If it’s uploaded, they’ll have an option to upload a newer one. If it’s graded, they can see their score. The card will also be flippable with the reverse side showing any assignment comments. 
  • A side menu that slides out and allows a student to toggle views. -This is an example of me forcing a design because… I want to do a side menu. 🙂
  • Should be allowed to filter
  • Cards should be reorganizable. 
  • And grow in size. – Mostly because I want to try out a cool looking library.

Step 4: Some sort of user page.

Step 5… Who knows.

Today Work

Source Code

Today I did the basic framework step-up by downloading the CLI and using it to create a new project. The CLI team made integration with SASS/LESS super easy, as in you just have to install the correct node library. I’ll be using SASS. I then added bootstrap for the layout goodies it provides. It took a few minutes reading the CLI docs to find out how to add a 3rd party. It’s pretty straight forward, but here’s what I had to do. 

The CLI has its own build system that stuffs everything into a dist folder. If you use a 3rd party lib, you need to tell that build system to stuff the lib into the folder. Makes sense. To do that you’ll need to edit the angular-cli-build.js file. Inside you’ll see a function that returns an object with a single variable called vendorNpmFiles. That variable is an array of strings that tells the build what to grab. I wanted the bootstrap css files, so I added that to the array. Here’s how my file looks now. 

You can see bootstrap at the bottom.

Next I went about setting up a main entry component(src/app/components/main/main.ts). The component sets up all the routes and global services. In the real world I would add code to see if a user is already authenticated with the server. Since this is not the real world, I took the blue pill, I didn’t do this. But if you look at the my code you’ll see a comment about where I would have done it. Hint Hint, it’s in the ngOnInit function. 🙂

Next I created a login page. I wanted to learn a bit more about forms and validators so… I used the Angular2 forms and validators directives. I found an awesome post that helped me enormously.

Next I wanted to implement a design idea I saw last week involving a label and an input box. The idea is that you have a label resting on top of the input and when the user activates the input, the label translates to the top of the input box and makes what looks like a legend. Like this.

Being all componenty I wanted to make this a component. But sadly, I failed. Or rather Angular2 failed. There is currently a long running bug where you can not add properties to component in a form.  It seems that I was not the only one to encounter the problem as many people have spoken! There are a few hacks in the comment section, but nothing I tried worked. Then again I only spent an hour or so trying. Maybe you can figure it out and tell me?!

Moving on, I made the link to the dashboard. 

That’s it for today. Here is the result of my labor.

Stop peeking at my bookmarks. You little devil.

Thanks for reading!

Facebooktwittergoogle_plusredditpinterestlinkedinby feather