Blazor API Client using REST & GraphQL APIs - Full Course
Вставка
- Опубліковано 5 жов 2024
- In this step-by-step tutorial I take you through how build a Blazor WebAssembly (WASM) app that will allow you to call both REST & GraphQL APIs.
This video includes:
Application architecture overview
Blazor theory and core concepts including WebAssembly, SignalR and websockets
Building Blazor Components
HttpClient & HttpClientFactory
Building Data Service to call REST & GraphQL APIs
Level: Intermediate
📕 My Book: www.apress.com...
🤩 Patreon Site (Exclusive Member Benefits!): / binarythistle
📕 Webhooks Course on Udemy: www.udemy.com/...
💻 GitHub Repo: github.com/bin...
🔗 DTO Class Construction: app.quicktype.io/
🔗 Open Iconic: useiconic.com/...
🔗 Blazor Event Handling: docs.microsoft...
🔗 Bootstrap Course: www.udemy.com/...
🔗 Insomnia Client download: insomnia.rest
🔗 JSON Editor Online: jsoneditoronli...
🔗 Newtonsoft Vs Microsoft: docs.microsoft...
⏲️ Time Codes ⏲️
PART 1 - INTRODUCTION
1:20 Welcome
2:29 Demo
7:00 Course Overview
9:30 Solution Architecture
12:13 Ingredients
PART 2 - THEORY
13:13 What is Blazor?
17:58 Why use Blazor?
19:10 Size by Size - the 2 flavours of Blazor
23:33 Blazor Server Closer Look
26:28 Blazor WASM (Client) Closer Look
PART 3 - CODING PART 1 - OUR FIST COMPONENT
29:46 dotnet new... (Start the prject build)
32:25 Project anatomy
47:55 A look at our first Component
49:21 Our Component UI
1:00:47 Adding UI Events
1:05:46 @Code - Adding our methods and properties
1:13:37 Error handling
PART 4 - CODING PART 2 - STARTING API CALLS
1:15:29 A look at our APIs
1:18:10 Exercising our APIs with Insomnia
1:29:47 A look at the "Fetch Data" Component
1:33:47 Working with JSON & DTOs
1:46:58 Calling our REST API
1:54:02 Separating Concerns
2:00:26 Adding an appsettings.json file
2:05:14 HttpClient & HttpCLientFactory
PART 5 - CODING PART 3 - DATA SERVICES
2:08:32 Creating our "Launches" Component
2:13:04 Introducing Data Services with HttpClientFactory
2:24:57 Our REST Data Service
2:28:54 Using out Data Service
2:32:46 Revisiting the GraphQL Payload
2:35:00 A new DTO
2:40:35 GraphQL Data Service
PART 6 - WRAP UP
2:56:33 Wrap up and Final thoughts
3:58:06 Patreon Supporter Credits
Hey, this video is looking real good! Because you have already timestamped the video, if you put 00:00 in the description, UA-cam will automatically create chapters in the progress bar
Also, small note, the last timestamp should be 2:58:xx and not 3:58:xx
Found your channel probably a few months ago. Really good videos dude. I like your style how you make them.
I subscribed to probably 100 channels of different things and you're probably one of the three channels that I actually clicked the bell on. Keep up the great work.
Hey James thanks for the sub man! Glad you like the content, cheers, Les
@@binarythistle The content you make is always appreciated.
@@binarythistle I also stumbled across a few months ago. Made sure to share with my team at work. I think everyone has watched and learned a ton. Thanks and keep up the great work!
Always an exiting day when Les Jackson releases a new course/video. Thank you so much!
*exciting
Dude, your videos are amazing. You cover real world scenarios.
What a timing! I needed this for what I'm building, just finished the MVC REST API video as well, I've learned a lot, thank you!!!
I'm going thru it!
Though the industry does not accept Blazor WASM like React or Angular, this course helped me on gaining knowledge on GraphQL, HttpClientFactory and quicktype tool. Hats Off!!!
Best intro ever JavaScript is an abomination
thanks for this, your channel is underrated. i've taken a lot of udemy course but i can say you're lessons are equally or much better than those. keep it up. My only additional input is that I feel like I'm listening to my strict professor.
I've been using Blazor for a while but I enjoy watching these videos as there's always new things to learn: i.e. I didn't know about the appsettings on the client.
However, the GraphQL service could have been simplified by using PostToJsonAsync and then the ReadAsJsonAsync extension method on the reponse.Content property.
I want to say "great work" on your blazor tutorials. I am really enjoying it. Carlo
Still working on the previous video, I made my first graphql server thanks to you, Love from Puerto Rico my brother.
man thats amazing i just commented to ask for blazor and in the same day i get the full course
i canot believe it
I aim to please! ;)
This is perfect timing! I was just giving up on Javascript!
Same here - JS is a mess of a language IMO.
Nice! Glad i could help!
Persevere! Spend a bit of time *properly* understanding Promises and Observables and life gets easier. It opens up so many opportunities. I learned a bit of Angular and suddenly I was able to write production quality mobile apps using Ionic.
TypeScript makes writing cleaner code much easier for C# devs too.
In Visual Studio you can create your classes from JSON using - Edit > Paste Special - creates much less noise and much simpler
It much better that you are standing. You are far more animated. This is a good thing. Carlo
This is really wonderful to follow (just my sort of liking in the way and order you explain things in sufficient and enough detail) and learn along the way. So a great THANKS from someone hugely interested in making a professional career switch as a code-developer towards Blazor in the broadest sense. So once again thanks! Pls. continue teaching this way. Have a great day.
It would be amazing to see a video about blazor server from you. Your vids are great btw
A very good presentation, keep up the good work, learnt heaps about Blazor and GraphQL.
Thank you for the work you put in your videos, they are very in-depth as well as conceptualized. I learnt how to write API from watching your .NET 5 Api tutorial
Thanks for this very useful tutorial! GraphQL is new to me, was great to learn, and also your useful tools.
This dude saves lives
Always happy to help my fellow devs!
@ 2:44:00 I am happy u made that choice. as viewers get to know what's underneath without thinking that it's some sorta magic.
Blazor stuff! Yes! Thanks Les - you're a STAR!!!
Very high quality, thank you.
Thanks for your efforts in sharing us what you know ...very generous indeed ...love to see more videos from you ...thanks again
I am so happy that Tyson Fury knows a lot about blazor LOL love your content man :)
Excellent learning tutorial!!
Every your lessons are amazing . Thanks you very much.
Wow.. Thank you for this video. I am a big fan and can not wait for more..
This is so awesome and I so appreciate you!!
Thanks Les... exactly what I needed to learn. (ps. I'm in Bentleigh VIC with real insomnia)
Just a note that the spacex api seems to be dead, and the creator said (in github issues) that hes going to shut it down. I recommend trying other rest+graphQL apis for this course, there are plenty available :)
how the hell do you get past the CORS issue with blazor wasm? I cannot find anything about this...everything refers to app which is not in blazor wasm. saw one thing builder.Services.AddCors() but that is not recognized.
Thanks for providing some clarity on this topic!
Two things are confusing me about Blazor wasm applications-- not your presentation, but really about Microsoft's intention:
1) I notice that the default template project brings in bootstrap CSS. Does that mean we are "required" to use bootstrap? Are there any implicit hooks into bootstrap itself within a blazor wasm application? Would I be setting myself up for a world of pain if I strip out the bootstrap and instead just use the more modern CSS grid for layout?
2) The blazor/wasm template brings in the CSS part of bootstrap, but not its usual js dependencies of Jquery and Popper. These are used for things like collapsing navbar menus, dropdowns, etc. If I am going to use bootstrap, I would very much like to use it like in the bootstrap docs and handle all low-level UI with bootstrap's facilities that depend on jquery. I notice that the template uses a method in an @Code block to handle collapsing the navbar menu. Does that mean it is not possible to add jquery js to HTML template and then just use bootstrap's data-target attributes to collapse the navbar menu (like in the bootstrap docs)?
Another great training course !!
Awesome video. Very useful for getting the newbie grads at work up-to-date with actual knowledge they can use. Would be good if you could cover OData as another option. Provides the filtering, sorting capability over a REST API. So a potential comparison for GraphQL. Would also advise using the UTC time from spacex api. In a real world app you want a specific locale to ensure back-end consistency. Also wold be good to have a deep-dive for system.text.json (maybe with use of Dahomey.Json library for the extra supported functionality)?
very very good learning content. can you please make a course about GRPC
one of your best video's. nice job!!
Les Jackson you should minimize that windows search field to have more space on taskbar.
Go right click on taskbar and than you'll find some option to display only the search icon!!
I hope that you see it, cause is so annoying to watch you change between taskbar levels 🤣🤣
If everyone had a teacher like Les Jackson, 2021 would have been COVID Free
Thanks for the awesome video! What program did you use for the UI mock up? Cheers
I am a front end javascript developer, always looking out for new stacks. You haven't convinced me, But good Video. Thanks
Is this tutorial available as book? thank you for your great video
Les deserves more subs
Les deserves more :)
You deserve a million subs. It is so sad that there are so many stupid channels and those are the ones people cares about 🤦🏻♂️
At 1:13:20 and I am thinking rock on my brother, thank you for this video, and again thanks for not being Tim "All about me me me" Correy.
Thank you sir, great tutorial.
Thanks a lot for this quality content!
Woah, first person I've seen coding C# in VS Code, does he have a VS Code setup tutorial?
you are really inspiration for us. eagerly waiting your videos to watch and learn some new concepts in dot net. while watching your videos one man comes to my mind The Braun Strowman WWE. you are like him strongest superstar. and one request could you please make a video on Kafka with dot net .
great video. thanks
hey jackson, when is the dotnet redis tutorial coming up? i need it T _ T
how do you store tokens securely on the blazor client? or is it even possible?
I have the same question
You had me at, no Javascript. 😄
what are you using as extension to be able to auto implement interface methods etc
I see JavaScript books thrown into the trash can - I give like.
Can you please explain how we can integrate above project with Kubernetes?
#My mentor. Whereever I am whenever I am.. you will always be my mentor. 😍🤘🤘🤘🤑
Thanks Radha! What a privilege that is! Les
What are your thoughts on the latency issues in wasm project.
I wanna make a career as a c# web dev.. please advice what to avoid and what to follow
Oh you hero! I thought it was just me that thought javascript and it's attendant bloat was an enormous bad code smell!
I keep looking for jobs in Blazor on Indeed, but there are hardly any available. Is learning Blazor worth it if no one is hiring for it?
... Fantastic 🔥
As always, a great video. Toooooop
Thanks Raouf!
Love your videos man, can you please make videos on azure functions
Try this? ua-cam.com/video/Ft34VWPpiA4/v-deo.html
@@binarythistle Yes already watched it, I just want more detailed with some business logic as an example.
Which day will the ".NET Community Standup" feature you! should .NET have an Academy, you should be in the team. thanks again
Thank you sir
LOL! Amazing intro!
Thanks Les, just subbed, I'm a React user but interested in C# world. Is it perfectly fine to use vs code as opposed to visual studio, thanks!
It's perfectly fine.
Am lazy so I use visual studio.
@@barryblack8332 Thanks Barry!
How to implement ADFS SAML Assertion Consumer with Redirct binding in .net core razor pages application? Please help
#100 comment, your course are really great,
hot reload for the annoying ctrl+c dotnet run
tl;dr
dotnet watch -p "directory name" run
Anyone can help me with Data Validators to use in GraphQL projects? I Have seen only FluentValidation, but I don't know if exists another good validator
What kind of keyboard are you using?
Hey Vasko, Logitech Pro with Romer G switches: ua-cam.com/video/BW5-Ve-yiBI/v-deo.html
In most cases we treat javascript as if it was not a programming language, just something that is there for support
clicked for blazor, stayed for the GraphQL
your movie has lots of associate producer but no director? did I miss something?
Hi H.J.! The Associate Producer credit is a benefit of supporting me on Patreon: www.patreon.com/binarythistle so it's important to me they go in at the start. In the past I have put the other credits, (Director, Editor etc.) at the end of the video, but as they're all me I've stopped doing that!
i code blazer and still find i need js interopt and js lol , at the moment anyways, hopefully they will remove the need for jsinteropt altogether, i never wanted to go any where near js but sadly my boss made us do it for 2 years :/
No esta activado el subtítulos en ingles :), saludos de los andes peruanos
I like long videos
Does anyone else get error messages from the App.razor file? The type or namespace name 'MainLayout' could not be found (are you missing a using directive or an assembly reference?) [BlazorAPIClient].
Hi there, I am getting this error when I try to split my components. Were you able to resolve this issue?
Js should go back to being only a frontend tool for web designers. Aka, not for programmers.
He is Baaaahhhck!
Yes Mate! Good to be back!
Hey, what's the deal with heavy vocabulary in code?
Basically,you don't see that kind of vocabulary in js channnels for basic api fetch tutorial like this🙄
This sounds promising….
Hey Les, I like Your classes but I suggest You find a way to split it in more clips. 3 hours is too long. Shorter clips are easier to handle in my opinion
fuckin legend
Hi.....
Hi mate!
First :-)
Nice!
Are you interested in getting help and private lessons via email in exchange for a small donation to a charitable organization ? You may find my email address in the stackoverflow site under the profile for the "enet" user.
HATE js also
Please not so big videos!!!!! You are making great videos but you loose it because it is 3 hours and more. PLEASE DONT DO IT!!!!!!"! You can split it to smaller ones max 1 hour each. It is a shame to make so good videos but because they are toooooooooooooo big someone cannot watch them after the first hour.
PLEASE DONT MAKE SO BIG VIDEOS PELASE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
My advice : Make use of the handy added 'Time codes' which distinguish and separate the video-parts which make this full video complete.