[Workshop] From API to UI: LoopBack with Angular with client generator

[dhmlau]

Since Angular is in TypeScript, it would be a good case to illustrate how to go from LoopBack to Angular.

With the same content, it can be used for:

• Workshop material, e.g. NodeConf.EU, CASCON
• Tutorial in LB4 docs or blog post

Acceptance Criteria

We can possibly use todo app as the base,

• [ ] Create a working repo
  • [ ] generate the client using openapi-generator or ng-openapi-gen sdk
  • [ ] create a Angular frontend app for the todo APIs
• [ ] Create an instruction maybe under page https://loopback.io/doc/en/lb4/Examples.html

Note: @derdeka might have some recommendation on the sdk client to use. See his PRs https://github.com/strongloop/loopback4-example-shopping/pull/578 and https://github.com/strongloop/loopback4-example-shopping/pull/577

[dougal83]

Plenty of avenues for adoption via https://openapi-generator.tech/docs/generators

[dhmlau]

Now that we have lb4 openapi --client, we should try to use this to generate the openapi client.

[madaky]

Please let me know if can contribute. NodeConf.EU, CASCON : CfS closes at 9:00 AM 27 Jul 2020

[dhmlau]

You're more than welcome!

Now that we have the lb4 openapi --client option to generate the client, I'm thinking to:

• use todo example as the starting example
• generate the client
• create a frontend application with Angular (i think a separate app is better).

I'm not sure if it's better to create a separate repo in the strongloop GH org as a standalone workshop material. @madaky @strongloop/loopback-maintainers, any thoughts?

[madaky]

Thanks @dhmlau . IMO, We should have a separate repo for workshop material. Which will help us better to track the work progress and specified material for workshop. Also, I think the todo example is better to demonstrate with, but we should also include the RTS in todo example which will help user to get closer to the real benefits of powerful Framework.

[dhmlau]

IMO, We should have a separate repo for workshop material. Which will help us better to track the work progress and specified material for workshop.

+1. I can create a repo. Any suggestions on the name? loopback4-workshop-angular?

Also, I think the todo example is better to demonstrate with, but we should also include the RTS in todo example which will help user to get closer to the real benefits of powerful Framework.

What does RTS stand for? :). We have used https://developer.ibm.com/tutorials/create-rest-apis-minutes-with-loopback-4/ in the past for workshops. But this is pretty much the todo tutorial.

[madaky]

What does RTS stand for?

Oh sorry, actually , I mean to to say Real time Scenario/scene. And for name my opinion is we can use name the repo as the purpose for which we are working on, which makes it specified, looback4--<?>.

[dhmlau]

@madaky, I've created this repo: https://github.com/strongloop/loopback4-workshop-angular.

[madaky]

https://github.com/strongloop/loopback4-workshop-angular

@dhmlau : it's 404

[dhmlau]

@madaky, sorry about that. Didn't realize it was a private repo. I set the right access now. Please try again. Thanks.

[dhmlau]

@madaky, I used ng-openapi-api to generate the models and web client from the OpenAPI spec we got from LB app to Angular. Here is my blog post: https://medium.com/@MobileDiana/building-a-frontend-application-with-loopback4-and-angular-e15c6fb48971 Here is my repo: https://github.com/dhmlau/loopback4-example-todo-angular

[dhmlau]

Closing as done. See https://loopback.io/doc/en/lb4/Building-frontend-angular-application.html.