Monday, May 27, 2019

#CodeConfident: Angular7 Example App

After my recently fulfilled challenge to implement a backend feature for an existing application, I now wanted to do the same on the frontend side. Once again, as soon as I had found my practice application to extend, I could not let go. What helped me accomplish my goal within one week in the end was to pair up, this time with the wonderful Mirjana Andovska! We had already paired on my Testing Tour last year which was a great experience. Now she saw my call for collaboration for my #CodeConfident challenge on Twitter and scheduled a session with me. It was super fun and enlightening and it definitely won't be the last! I feel really honored and lucky that even further pairing sessions are coming up Amitai Schleier and Parveen Khan. Can't wait!


May 19


May 20


May 21

  • small things are easy to change, like removing the GitHub link, removing the footer, etc.; looking for something bigger where I can learn more
  • learned about Firebase, the example app is using a cloud database for all instances, same for the deployed example https://www.angularexampleapp.com
  • learned that even opening a hero detail page will result in POST requests to the Firebase database (interesting to follow up on!)
  • one of the first goals was to be able to open the detail page for newly created heroes instead of getting routed to the hero list itself --> found this decision is done in the heroes list page component html, just a basic case detection
  • feels now that this is the right practice project to work on, forked it
  • played a bit more with "default" and non-default heroes, adapted the search to include both, checked how to display default avatar images for detail page for non-default heroes etc.
  • feature idea would be the one from the project: implement material tables

May 22

  • recent feature idea were to implement tables
  • alternative feature idea would be to implement "Personal heroes", the heroes you liked
  • tried the latter, copy & paste & adapt

May 23


May 24

  • made first steps in Visual Studio Code, had not used it as IDE yet, got really popular at work for frontend development, even over IntelliJ
  • filtered list of heroes not displayed; debugging in Chrome shows that heroes is undefined
  • TODO: display list; write tests

May 25

  • cleaned commits to what is already working (without filtering for heroes that I liked)
  • tried to push, got error that translations are not configured correctly for spec file; lesson learned: run the tests first... -_-
  • found the culprit, fixed, now tests are passing
  • learned how git controls work in Visual Studio Code; yet lacking permissions to push
  • pushed again using IntelliJ UI, failed again due to quite cryptic message
    Push failed: 0% compiling�������������� 10% building 0/0 modules 0 active���������������������������������� 10% building 0/1 modules 1 active ...s! ...
  • using git push in command line finally revealed the prerequisites to push, like running tests in advance etc.; this explained why it took so long... and it worked in the end!
  • TODO: learn how to add authorization to VisualCode to be able to push from IDE as well
  • TODO: filter for heroes I liked only

May 26

  • paired with Mirjana Andovska
  • Mirjana already checked out my practice project and had a look how to filter for personal heroes
  • we found out that the live app URL https://www.angularexampleapp.com runs into a timeout (522) for her, yet does work for me although be both shared the same browser versions; she's located in Skopje, would be interesting path to investigate in itself (yet not now)
  • we shared our approaches how to filter for personal heroes, by using the Angular filters in the html or directly in the TypeScript component like it's also done on the home page; I showed I tried to use the filter function there yet no personal hero was listed; Mirjana had found that the value was always reset to false by logging, so the filter would work it just did not list any as they were set again to false
  • in the hero model the attribute personalHero was set to false whenever we fetched them; we could confirm this by adding simple console logs; for now we just used simple console logs, yet for proper logging we would use the framework used; Mirjana: "logging is like adding adjectives in an essay"
  • we changed the constructor's attribute value to and it was working!
    this.personalHero = hero.personalHero || false;
  • when testing this in different browsers we found that now not only any likes are stored in the global database, but seemingly also the personalHero flag; which we did not intend to, to not interfere with the global database but keep things local for practicing
  • we started learning more about Firebase and how to verify whether we actually stored it globally
    https://medium.com/factory-mind/angular-firebase-typescript-step-by-step-tutorial-2ef887fc7d71
    https://www.learnhowtoprogram.com/javascript/angular-extended/firebase-retrieving-data
    https://www.learnrxjs.io/operators/transformation/map.html
  • we found that we could log the values when subscribing:
    getHero(id: string): Observable<any> {
      const retrievedHero = this.afs.doc(`${AppConfig.routes.heroes}/${id}`).get().pipe(
        map((hero) => {
          return new Hero({id, ...hero.data()});
        }),
        tap(() => LoggerService.log(`fetched hero ${id}`)),
        catchError(HeroService.handleError('getHero', []))
      );

      const subscribe = retrievedHero.subscribe(val => console.log(val));
      return null;
    }
  • this way we could verify it's really stored in the global database; when looking at the tests, we found the same way was done for the mocked databases! Lesson learned: should have looked at the tests in the beginning :)
  • we reset all values by setting the flag to false again, and then re-implemented it using the local storage of the browser instead, setting a new entry for each hero we liked; we tested things out, it worked! we noted for later to change this store a list of ids instead to avoid creating new entries and save memory (https://www.taniarascia.com/how-to-use-local-storage-with-javascript/)
  • we wanted to have our feature covered in the tests as well; added expectations that a hero should be a personal hero after liking them; wanted to test the filtering as well; learned to add a new fixture for a different test setup
  • shortly investigated how to run a single test but then skipped this for later; UPDATE: as we're using Karma & Jasmine here, we can just focus on one test or suite by using "fit" instead of "it" or "fdescribe" instead of "describe"; f = focused, x = ignored
  • we cleaned up files for commit and tried to push; yet TSLint checks failed; we ran the tests but forgot to run about them! fixed them; then the push was successful :D
  • the scope of my personal challenge is now fulfilled, yet we identified next steps we could do to improve and extend the code to practice further:
    1. store the personal heroes ids in an array in the local storage
    2. add proper logging using the framework used
    3. write e2e tests for our new feature
    4. show the user which heroes they liked, either by adding an icon or not allowing them to vote again for the same hero and marking the heart icon gray
  • Retrospective:
    • Mirjana: normally it's a great thing to go to the tests first, can learn a lot from them; now we rushed ahead due to time, but would have been valuable as well
    • Mirjana: we had to be reminded of writing tests; interestingly this would be the first thing we as testers would remark, yet when developing we often stay inside our little box, this is why it's crucial to have someone with a different perspective looking at it from a different angle
    • Lisi: learned there's so much more to learn, there are so many more question marks now in my head as it usually is with learning and trying to puzzle all bits and pieces of knowledge together; thank you so much for sharing your knowledge with me, learned a lot in this session!
    • Mirjana this whole challenge idea a super cool thing to learn outside of our work's boundaries! Would like to create a GitHub account herself and contribute to the project or future ones, we could create pull requests and also learn so much by reading code from each other
    • Mirjana: you reminded me how to learn! use a small project to practice, and especially pair! Lisi: pairing helps me so much, it keeps me accountable and also together we always generated new ideas so we did not get stuck, or at least quickly unstuck again
    • Looking back, we paired for nearly 4h instead of the originally planned 1.5h! It was fun and super enlightening, and afterwards we could fully enjoy our evenings :)

What else?

The great news is: I fulfilled now the promise to myself to have at least 5 repositories published on GitHub. Even in 5 months! Still can't quite believe it. The next and final step: build an application from scratch which will serve as my proof of concept. I'm really excited. And that's not the only thing I'm excited about these days. These are busy days, great days, and especially exciting days!

Posted by at No comments:
Labels: , , , , ,

Sunday, May 19, 2019

#CodeConfident: Spring PetClinic

My last weeks were super busy. As a result, I had to neglect my code-confident challenge and was feeling sad about it. I knew already knew for longer what my next practice project should be about: extending an existing backend feature. I found, however, that getting it started was a lot more difficult than I expected. When I finally could start, I got intrigued yet realized I need to learn a lot more. In the end, I did the biggest part just on one day as I couldn't let go anymore!


April 27


May 12


May 13


May 14

  • pairing session with Amitai Schleier
  • presented him my current problem, first lack of time and now stuck in researching projects trying to decide which one to work on
  • told him about my criteria and desired tech stack
  • started to present my latest list of 5 candidates
  • Amitai: likes to look at tests first to see if they are readable and to see what the app is supposed to be doing
  • after the first project he stopped me and suggested a project he just found by using Duck Duck Go search "open source spring-based application": Pet Clinic, a Spring demo project
    https://github.com/spring-projects/spring-petclinic
    http://projects.spring.io/spring-petclinic/
  • cloned the project
  • Amitai: let's try to run it first
  • ran it using the run configuration detected by IntelliJ; ran but did not find css
  • the readme showed how to run the app --> worked this time including building of css
    ./mvnw package
    java -jar target/*.jar
  • wanted to use IntelliJ and make it faster, found we could add the package step as Maven goal step before launch: "package"; tried out different variants, found we needed to keep the build step before
  • discussed general approach to tackle an existing app; I shared it depends what I am looking for, if I'm reviewing other people's code or if I'd like to contribute myself, etc.; Amitai: wants to see if he can quickly get something to change, see the cause and effect; he could read a lot and model and everything but rather prefers changing something as better test of understanding; wrote a tweet thread about cause & effect
  • we decided to change the pet picture on the welcome page to a different one; used this as valid reason to google for cute animal pictures ^^; replaced the image, replaced the image reference, verified the change got applied after application restart
  • before going further, we felt that packaging took too long as it was running all tests; wanted to comment them out, but could not find them in the pom; looked upMaven lifecycle (https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html) and found that tests are included by default; found we can skip them by calling "package -Dmaven.test.skip=true"; startup now a lot faster, still a bit slow for actual fast feedback during development, yet doable
  • had a look at what the app already provided, like "find owner"; decided to add "find pets"
  • added a new menu item (copy & paste from find owners), restarted - nice, we land on the error page as expected
  • added a controller, copied over from owners; copied the owners html page, adapted as well; our "hopothesis" would have been that now we would be able to access a find pets page with a form to search for owners; yet we knew we probably missed something and indeed, we got the error page instead
  • we realized the relationship of owners and pets was not modeled parallel as assumed, but having pets subordinate to owners
  • Retrospective:
    • Lisi: thank you so much, you got me unstuck in a few minutes! Amitai: seems like my super power, as I have to always get myself unstuck: I know how to orient myself in my problem space, and know how to help people orient themselves in their problem spaces
    • Amitai stayed in the navigator role, Lisi as driver; both thought it went well, were not sure if it was okay for the other one but only addressed it in the end; Amitai: felt you picked up things, needed to instruct less and less, you already knew what I wanted; Lisi: when I want to learn, I try to keep myself on the driver seat; I also learn a lot as navigator, having to express my intent and decide where to go next, yet now it's about hands-on practice; Amitai: agree, it's always good to practice; agreed to switch roles next time
    • learned that copy & paste is not always working, we have to learn more; was a good reminder to think about the model and how we would want it to be; having pets subordinate to owners did not feel right; what if a pet changes the owner? We would not want to loose the record for the pet, or the past owners; also from a moral standpoint a partnership would be better
    • I will have to decide where to go next and define my scope for this practice project; Amitai: Gilded Rose is known as refactoring kata, but he likes to call it the "when to stop" kata; what's the cheapest thing you can do? It's about business, not about the cleanest code; it's really important to zoom out, zoom back in, zoom out again, and realize when to stop
    • Lisi: last session and this one as well I gained a lot of benefit from what you shared, bits and pieces of knowledge here and there, and especially from your approaches, how to tackle things; they work well for the concrete thing, but are also applicable in a generic way, will also help me later
    • Amitai: last time you gave me energy, happy to give it back this time!
    • agreed to do a third session end of June / July
  • TODO:
    • set up practice project
    • define scope
    • do it

May 15


May 16

  • tried to understand app better
  • need debugging to understand more
  • not much time today

May 18

  • debugging the owner controller: did not stop in debugger - why? still haven't found out; would be something to investigate in a pairing session
  • learned more about the demo project; https://projects.spring.io/spring-petclinic/ provided lots of info, however, for an outdated version
  • found the community built a lot more versions: https://github.com/spring-petclinic among them also one for Angular :) https://github.com/spring-petclinic/spring-petclinic-angular (could be the perfect target for my next challenge!)
  • learned more about MVC (Model View Controller): https://spring.io/guides/gs/serving-web-content/
  • saw our get mapping is a bit different, realized I need to look that up and learn more
  • learned more about Thymeleaf inputs https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#inputs
  • trying to adjust controller to have correct result collection for binding, adding results from search by first name to the results from search by last name https://docs.oracle.com/javase/8/docs/api/java/util/Collection.html#addAll-java.util.Collection-; assumed the resulting collection will contain duplicates --> assumption was correct! keeping fields empty to get full list is now showing duplicates; also, existing first name is still showing full list
  • https://www.geeksforgeeks.org/how-to-remove-duplicates-from-arraylist-in-java/ tried the Stream version and found it cannot be cast to a collection
  • used set instead of collection and it works! bye bye duplicates :)
  • found that when I provide values for both fields, search by first name does work now indeed! --> found I always list all in case one field is empty... o_O changed this to only show all in case both are empty --> still, one empty field will show the list of all owners
  • cases:
    • last name empty, first name empty => list all owners
    • last name exists once, first name empty => show owner details (does not work yet)
    • last name empty, first name exists once => show owner details (does not work yet)
    • last name exists multiple times, first name empty => list selection of owners (does not work yet)
    • last name empty, first name exists multiple times => list selection of owners (does not work yet)
    • last name does not exist, first name exists once => show owner not found (does not work yet)
    • last name exists once, first name does not exist => show owner not found (does not work yet)
    • last name does not exist, first name exists multiple times => show owner not found (does not work yet)
    • last name exists multiple times , first name does not exist => show owner not found (does not work yet)
    • last name does not exist, first name does not exist => show owner not found
    • last name empty, first name does not exist => show owner not found (does not work yet)
    • last name does not exist, first name empty => show owner not found (does not work yet)
    • ...
    • more cases:
    • both names exist, but for different records => show owner not found (now shows both records)
    • parameterless GET request /owners should still list all
  • feel the database query should already take care of filtering everything; implemented look up by full name for results list --> oh my it works!!
  • what about exact same full name, but different entries? should still list both entries --> and it does!
  • not flawless but worth to commit it :D
  • added tests for new controller feature; test for not existing first name fails, not sure why yet --> experimenting made me finally understand better what the "rejectValue" method does in the controller! added handling in case first name is not found; now error message is displayed twice! ^^
  • researched a lot more regarding Thymeleaf and error messages
    https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#validation-and-error-messages
    https://stackoverflow.com/questions/50005969/thymeleaf-or-operator-in-thif?rq=1
    https://spring.io/guides/gs/validating-form-input/
    https://teamtreehouse.com/community/where-does-thymeleaf-get-the-error-messages-from
    https://howtodoinjava.com/spring-mvc/spring-mvc-display-validate-and-submit-form-example/
  • found how to display an error for a specific field:
    <p th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}">Error</p>
  • however, wanted to have a combined message if an owner is not found, not separated per field; found how to add and display global error:
    • Controller:
      result.reject("ownerNotFound", "not found");
    • Template:
      <p th:if="${#fields.hasGlobalErrors()}" th:each="err : ${#fields.globalErrors()}" th:text="${err}">Global Errors</p>
  • downside: the test for the global error is super generic, did not find a way to test for exact error
    https://docs.spring.io/spring/docs/current/spring-framework-reference/testing.html
    https://blog.codeleak.pl/2014/08/spring-mvc-test-assert-given-model-attribute-global-errors.html
  • tested the tests, made them fail, added assertions; how to assert at least for the number of results found? haven't found an answer yet
  • still, the scope of this challenge is fulfilled for now, I implemented a small new feature :D can still extend it, improve it further and clarify the open questions when pairing with others
Posted by at No comments:
Labels: , , ,
Subscribe to: Posts (Atom)