Yay, 3 more pairing sessions scheduled during the next 2 months for my #CodeConfident challenge! 🤩 Thank you @schmonz @mirjando @Parveen_Khan10, you rock! 😊🙌 https://t.co/yvNk63Kppi— Elisabeth Hocke (@lisihocke) 23. Mai 2019
May 19
- tried to run https://github.com/spring-petclinic/spring-petclinic-angular to see if it would be feasible as candidate
- running the rest project without issues
- frontend: could not start the Angular via "ng serve", had to use "npm start", could start the app then; yet when navigating there the page is only showing "Loading..."; to be investigated
- https://programmingwithmosh.com/angular/common-angular-errors/
- deinstalled the Angular CLI again, reinstalled as global --> now ng is recognized as command; alternative would probably be to adapt the environment variable manually (http://ovinitech.blogspot.com/2017/08/ng-is-not-recognized-as-internal-or.html)
- yet when started, same result; several warnings, and frontend only shows "Loading..."
- mismatch between latest CLI and Angular 6? not sure what's missing
- or maybe look for Angular demo projects to extend?
- can try on Macbook again; or maybe try with correct CLI version, not latest
- later:
https://www.baeldung.com/spring-boot-angular-web
https://github.com/oktadeveloper/spring-boot-angular-example
https://github.com/dsyer/spring-boot-angular - or: could follow this tutorial and then extend it!
https://www.javaguides.net/2019/02/spring-boot-2-angular-7-crud-example-tutorial.html
https://www.javainuse.com/spring/ang7-hello - basically trying to do this: https://www.udemy.com/full-stack-application-development-with-spring-boot-and-angular/ without a course :o probably a good thing to do afterwards to learn the details? right now at 12€ instead of 200 - observe how the price evolves..
- other potential candidates:
https://github.com/wekan/wekan
https://github.com/doriguzman/passion_project
https://github.com/gojko/bugmagnet
https://github.com/gojko/user-story-estimator
May 20
- tried PetClinic Angular on Macbook, same result
- projects for later:
https://developer.okta.com/blog/2019/05/13/angular-8-spring-boot-2
https://github.com/gothinkster/angular-realworld-example-app but no license
https://github.com/luixaviles/angular2-demo
https://angular.io/tutorial
https://blog.codewithdan.com/10-angular-and-typescript-projects-to-take-you-from-zero-to-hero/
https://medium.mybridge.co/angular-open-source-projects-for-the-past-year-v-2018-dba2041e6ff8
https://github.com/aviabird/yatrum - found the first projects that have an MIT license, are still updated, and just run without issues! both Angular 7
https://github.com/DanWahlin/Angular-JumpStart
https://github.com/orizens/echoes-player
--> both apps have some things working, some not - two other ones on googling "angular 7 demo app":
https://github.com/Ismaestro/angular7-example-app --> yay, app runs, tests pass
https://jasonwatmore.com/post/2018/10/29/angular-7-user-registration-and-login-example-tutorial & https://github.com/cornflourblue/angular-7-registration-login-example - most promising: hero app https://github.com/Ismaestro/angular7-example-app
- tried simple change, as we did for the backend practice app: replaced default hero image, change was picked up, no restart required
- newly created heroes do not show link to profile URL, but id is generated
- anchor the hero is not implemented as feature
- there's not much validation; can create hero with spaces as name
- how many votes do you have until you cannot vote anymore? --> 3, configured in apps config
- how is data stored? research Firestore
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
- found out about internationalization labels, added translations
- found how to create routing to new page and component
https://blog.angular-university.io/angular-2-router-nested-routes-and-nested-auxiliary-routes-build-a-menu-navigation-system/
https://angular.io/guide/router - found votes are saved in local storage
- want to filter for voted heroes as personal heroes; yet no hero displayed on page
http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/ - TODO: find out why and fix it
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:
- store the personal heroes ids in an array in the local storage
- add proper logging using the framework used
- write e2e tests for our new feature
- 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 :)
Just paired with @mirjando on my #CodeConfident challenge and loved it! 😍 We implemented a new frontend feature together for my practice project https://t.co/X2m9HhnzDe and learned so much by doing so. Thank you so much Mirjana, let's definitely do this again! 🙌— Elisabeth Hocke (@lisihocke) 26. Mai 2019
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!
What a week: Did 2 2-day workshops with 2 of our Berlin teams to help them improve their #testing & #quality culture. Now each team has identified workflow problems & product risks, documented their test strategy as well as designed an experiment to probe 1 of their challenges 💪— Elisabeth Hocke (@lisihocke) 24. Mai 2019
Super excited about my upcoming conference series! First giving a mob session at #NTD2019, then the opening keynote at #GermanTesting Day, and finally another mob session at #RTC2019. Can't wait to learn with all these wonderful people! 😊— Elisabeth Hocke (@lisihocke) 13. Mai 2019
No comments:
Post a Comment