The primary piece of learning for me with this assessment was everything related to the front-end of the application. Creating a Web API in .NET and using Entity Framework is where my core developer strengths lie. While The Fellowship doesn't currently use .NET Core anywhere, my side projects and code experiments have all been in the new libraries as I prepare the team to make the shift. This was a fun little activity as a way to quickly get the basics of how Angular works - creating components, routing requests, abstracting communication with the server, and binding with the user input.
<blockquote>
The final post in a four-part series of posts on <a href="/series/technical-assessment-series">'An Assessment of a Technical Assessment'</a>.
</blockquote>
Framing this mini-project as a look into whether this is the "best I can do", it certainly falls short. In the interest of time, there were several features that I had to cut.
<ul>
<li>There is no meaningful user input validation</li>
<li>I never found the right place to use <code>ngrx/store</code> in the application.</li>
<li>I did not implement any server-side data validation</li>
<li>I did not create/implement a SQL Server database, instead just using the <code>InMemoryDatabase</code></li>
<li>I did not roll out a SQL migration script or do any custom model building</li>
<li>There is no retry policy on persisting requests to the database</li>
<li>Error logging is non-existent - I could have easily dropped in Application Insights, but it seemed overkill for this project</li>
<li>There are no unit tests, integration tests, or other automated testing to ensure the code is working as expected</li>
<li>There is minimal dependency injection, only for passing the data context around.</li>
<li>Least importantly, the UI looks terrible. But I never claim to be a designer, so I'm ok with that.</li>
</ul>
This project serves well as a Proof of Concept. It shows that I can quickly learn the basics of a new (to me) JavaScript framework, put together a simple solution to prove I can do it, and check it all into GitHub for others to examine.

Technical Assessment - Final Notes

I am starting to make some real progress with this. I have a better idea of how components, service injection, and input binding works in Angular. These are all concepts that I am very familiar with in my extensive use of <a href="https://knockoutjs.com/">Knockout</a>, but anytime one is learning a new framework, there will be a learning curve in figuring out how this particular framework implements various features. Next on the requirements list is the ability to create a new blog post.
<blockquote>
The third in a four-part series of posts on <a href="/series/technical-assessment-series">'An Assessment of a Technical Assessment'</a>.
</blockquote>
<h2>Creating a Form</h2>
Back to the Angular tutorial, this piece took several steps to get to where I needed to be to start writing code. Unfortunately, the opening tutorial (<a href="https://angular.io/tutorial/toh-pt6#add-a-new-hero">Add a new hero</a>) only shows how to declare an input's id and then how to wire a button to pass the value of that element back to the component. This works fine for a single value, but I need the ability for a user to edit multiple fields and send them all to component. I now needed to jump into the "Fundamentals" section of the docs; specifically, the "<a href="https://angular.io/guide/forms-overview">Forms</a>" section.
I decided to do a quick shuffle of files, and move the <code>blogpost</code> model into the "blogposts" folder. This is one of those decisions that I couldn't tell if it jives with convention, but it felt a little dirty keeping component-specific files in the root "app" folder. It's decisions like these that I'm excited to learn more about as I dig into larger Angular projects.
Creating the form, adding some styling to it, and binding it to a model in the component was all pretty straight forward. This is another case where knowing how one MV* framework (Knockout) informed me on what I was looking for, and the tutorial did an adequate job of showing how to put that concept into practice. After a bit of trial and error, I assembled the necessary controls to display a half-way decent form.
<img src="/images/techass-create-new-blog-post.png" alt="Create New Blog Post">
Working through everything, now was the time for the big test - would it actually submit my data to the server?
<img src="/images/techass-post-request-body.png" alt="POST Request Body">
Huzzah! This part works - now to the API controller to see if it's receiving the data.
<img src="/images/techass-modelbound.png" alt="Controller Model Binding">
Ok - well, it wasn't really that easy. I had to do a bit of refactoring from the default template. They were all expected changes, though. This part of the project was what I was most confident that I could get working fairly quickly.
I created a <code>BloggingContext</code> to handle the ORM side of things, and to make it easier, I just mapped it to an <code>InMemoryDbContext</code>. Changing the connection to a SQL database or an Azure Cosmos Db account would be fairly trivial.
<h2>I Think I'm Done</h2>
At this point, the chief requirements are completed.
<ol>
<li>Allow the user to view blogs posts in chronological order</li>
<li>Allow the user to create a blog post</li>
<li>Allow the user to remove a blog post</li>
</ol>
I'll write one more post about where I would take the solution from here if I wanted to really put together a complete software package.

Technical Assessment - Adding Create Functionality

Now that I have a static list, the next step is to make it slightly more dynamic. This means that I need to learn how to send something back to the server, instead of just retrieving data from the server. My guess is that a delete method should be easier than an insert of a new record, though I expect them both to be about equal. The first piece I recognized that I needed to add is an identifier for indicating which record to delete. I am a big fan of using a <code>Guid</code> as the datatype for a "primary key", so I quickly added a new field to the <code>BlogPost</code> and added that to my seed data. But how to I make a button in <code>Angular</code> and then make a <code>DELETE</code> call to the controller with the id of the selected post?
<blockquote>
The second in a four-part series of posts on <a href="/series/technical-assessment-series">'An Assessment of a Technical Assessment'</a>.
</blockquote>
It was time for me to turn to the <a href="https://angular.io/tutorial">tutorial</a>. The Tour of Heroes tutorial on the Angular website certainly looked to be what I needed. I tried jumping straight to <a href="https://angular.io/tutorial/toh-pt6#delete-a-hero">"Delete a hero"</a>, but it's talking about services and delegates and... whoa. Ok, time to take it back to the top.
<h2>Refactoring the Template</h2>
I zipped back to the top of the tutorial and quickly made sense of a lot of the work that the initial Visual Studio template created for me. Much of what the early parts of the tutorial teach the user were refactors that I thought would be necessary, but I didn't know how to do it yet.
<ul>
<li>Refactor the <code>BlogPost</code> interface out to its own class.</li>
<li>Refactor the data retrieval into a <code>BlogPostService</code> and inject it into the component.</li>
<li>Rename the <code>home</code> component to be <code>blogpost</code> - it's still that I'm still using the generic name.</li>
<li>Refactor the <code>blogpost.component</code> to use the new service.</li>
</ul>
What do I get after all that refactoring? Exactly the same output - which is what I had hoped for. No new functionality has yet been added, but I feel better about where things are.
<img src="/images/techass-recent-blog-posts.png" alt="Recent Blog Posts">
<h2>Delete a ~~hero~~ Blog Post</h2>
<ol>
<li>Add a delete button and have it call a delete method.</li>
<li>Create a delete method and have it call the delete service.</li>
<li>Create a delete method in the service, and have it call the API server's delete method.</li>
</ol>
<img src="/images/techass-404-delete.png" alt="HTTP404: NOT FOUND on DELETE">
Oh, and I tried all kinds of things to get it to work. I tried explicitly setting the route in the attribute. I tried explicitly setting the action in the route. I tried using different action names in the URL. I tried turning it into a <code>GET</code> method. NOTHING WORKED!!! What was I doing so very wrong???
After a much longer time than I wish to admit, the problem was that I needed to put the id parameter in the attribute. Clearly I needed more coffee this evening.
<pre><code class="language-csharp">[HttpDelete("{id}")]
public void DeleteBlogPost(Guid id)
{
 new BlogPostService().DeleteBlogPost(id);
}
</code></pre>
From there, I was able to verify that the call made it into the <code>BlogPostService</code> that I had previously created. It properly removed the item from the original list and returned a <code>200:OK</code> response. All is well, and I am going to call this step complete. Once I get the entire front-end working, that's when I will handle persisting these changes to some storage medium. This part reminds me of my <a href="/posts/2016/user-can-create-new-patron/">User* Can Create**** New Patron*****</a> post from 2016.

Technical Assessment - Adding Delete Functionality

Yesterday, I did a phone interview with a company offering the possibility for a rather exciting position. The person I spoke with seemed very intelligent, articulate, passionate, and sold the organization well. It's a small organization that is growing, and is looking to consolidate all of their development work into their Chicago office instead of relying on developers in foreign countries. This feels very similar to <a href="/about">what I did</a> with Falkor Group and again with The Fellowship — start with a small team, map out a strategy for the next several sprints, then mentor and grow the team from there. Of course, the interview process is a two-way sales process, and they need to make sure that I can live up to expectations. This leads to why I am doing a Technical Assessment.
<blockquote>
The first in a four-part series of posts on <a href="/series/technical-assessment-series">'An Assessment of a Technical Assessment'</a>.
</blockquote>
The requirements are fairly straightforward.
<blockquote>
Technical Assessment
This assessment is intended to give us a better idea of your technical ability and code style as a developer. It will also give you an opportunity to learn about and utilize the tools we work with at the company.
Instructions
Create a dynamic blogging application that meets the following requirements:
<ul>
<li>Allow the user to view blog posts in chronological order</li>
<li>Allow the user to create a blog post</li>
<li>Allow the user to remove a blog post</li>
</ul>
Technologies
You must use the following technologies to complete this assessment:
<ul>
<li>.NET 4.6+ / .NET Core</li>
<li>Angular 5+</li>
<li>ngrx/store</li>
<li>Entity Framework</li>
<li>SQL Server</li>
</ul>
Notes
<ul>
<li>You do not have to implement user authentication into your solution</li>
<li>Your code should follow SOLID principles and make use of modern design patterns</li>
<li>Be prepared to explain your solution in depth</li>
</ul>
</blockquote>
<h2>Visual Studio -> New Solution</h2>
I set off right away to get working - this should be easy, right? I've never used <code>Angular</code> before (Knockout is the JavaScript framework of choice at The Fellowship), and I've never used <code>ngrx/store</code> (client state isn't that complicated in KesherNet). But Visual Studio has a template for creating a new ASP.NET Web Application using <code>.NET Core</code> and <code>Angular</code> - this should be super easy!
<img src="/images/techass-new-core-web-application.png" alt="New ASP.NET Core Web Application">
<ol>
<li>By the power vested in me, I command thee to build!</li>
<li>Oh, this project requires <code>Node.js</code> to build; so let's install that.</li>
<li>... lots of progress bars.</li>
<li>Great - now let's build and run this barebones project!</li>
<li>Internal Server Error? huh - well let's do a search for this error message "The NPM script 'start' exited without indicating that the Angular CLI was listening for requests."</li>
<li><a href="https://stackoverflow.com/a/53162998">This Stack Overflow answer looks promising</a>, I'll just do that.</li>
<li>... more progress bars. "MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe"." That can't be good.</li>
<li><a href="https://stackoverflow.com/a/39235952">Another Stack Overflow answer</a></li>
<li>... more progress bars. But it's all green text - so that should be good.</li>
<li>New let's build and run this barebones project!</li>
</ol>
<h2>Hello, World</h2>
<img src="/images/techass-hello-world.png" alt="Hello, World">
Well that worked out well enough - time to break this template down and make it do what I want.
The sample comes with three components - Home (display static content), Counter (show ability to modify non-persistent state on the page), and Fetch Data (demonstrate calling a Web API endpoint). I deleted the Home and Counter components, then renamed everything "Fetch Data" to "Home".
The initial object is a <code>WeatherForecast</code>, which I repurposed to be my <code>BlogPost</code> interface. The <code>component.html</code> is easy enough to repurpose to spit out the data coming from the controller. The new <code>HomeController</code> was refactored to return a collection of <code>BlogPost</code>. I added a second project to hold a <code>BlogPostService</code> which will handle the data retrieval. Later, this can be refactored to use EF and SQL Server to store and retrieve the data.
After throwing together some quick static seed data, the project was ready to go. I had a few typos and case sensitivities that needed correction. Once I got all of that straightened out - I finally had the initial pass at a "Recent Blog Posts" application.
<img src="/images/techass-recent-blog-posts.png" alt="Recent Blog Posts">

Rovani's Sandbox

Technical Assessment

Technical Assessment - Final Notes

Technical Assessment - Adding Create Functionality

Technical Assessment - Adding Delete Functionality

Technical Assessment - Requirements and First Pass