Blazor API Client using REST & GraphQL APIs - Full Course

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/gp/book/978148...
🤩 Patreon Site (Exclusive Member Benefits!): / binarythistle
📕 Webhooks Course on Udemy: www.udemy.com/course/webhooks...
💻 GitHub Repo: github.com/binarythistle/S04E...
🔗 DTO Class Construction: app.quicktype.io/
🔗 Open Iconic: useiconic.com/open
🔗 Blazor Event Handling: docs.microsoft.com/en-us/aspn...
🔗 Bootstrap Course: www.udemy.com/course/bootstra...
🔗 Insomnia Client download: insomnia.rest
🔗 JSON Editor Online: jsoneditoronline.org/
🔗 Newtonsoft Vs Microsoft: docs.microsoft.com/en-us/dotn...
⏲️ 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

Пікірлер: 122

  • @zealtypedcode3119
    @zealtypedcode31193 жыл бұрын

    Best intro ever JavaScript is an abomination

  • @argeelearner3978
    @argeelearner39783 жыл бұрын

    Always an exiting day when Les Jackson releases a new course/video. Thank you so much!

  • @damilola_adegunwa

    @damilola_adegunwa

    2 жыл бұрын

    *exciting

  • @jamesallen74
    @jamesallen743 жыл бұрын

    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.

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Hey James thanks for the sub man! Glad you like the content, cheers, Les

  • @xinloung

    @xinloung

    3 жыл бұрын

    @@binarythistle The content you make is always appreciated.

  • @BrunSwick33

    @BrunSwick33

    3 жыл бұрын

    @@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!

  • @csilipo
    @csilipo3 жыл бұрын

    It much better that you are standing. You are far more animated. This is a good thing. Carlo

  • @joaofranco6779
    @joaofranco67793 жыл бұрын

    Hey, this video is looking real good! Because you have already timestamped the video, if you put 00:00 in the description, KZread will automatically create chapters in the progress bar

  • @joaofranco6779

    @joaofranco6779

    3 жыл бұрын

    Also, small note, the last timestamp should be 2:58:xx and not 3:58:xx

  • @rizaanjappie
    @rizaanjappie2 жыл бұрын

    Dude, your videos are amazing. You cover real world scenarios.

  • @AlThePal78
    @AlThePal782 жыл бұрын

    I am so happy that Tyson Fury knows a lot about blazor LOL love your content man :)

  • @mementomori8856
    @mementomori88563 жыл бұрын

    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!!!

  • @damilola_adegunwa

    @damilola_adegunwa

    2 жыл бұрын

    I'm going thru it!

  • @mbkvec
    @mbkvec3 жыл бұрын

    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!!!

  • @kandycan
    @kandycanАй бұрын

    @ 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.

  • @sgguitarfan7
    @sgguitarfan73 жыл бұрын

    Still working on the previous video, I made my first graphql server thanks to you, Love from Puerto Rico my brother.

  • @csilipo
    @csilipo3 жыл бұрын

    I want to say "great work" on your blazor tutorials. I am really enjoying it. Carlo

  • @h.verheijen7872
    @h.verheijen78722 жыл бұрын

    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.

  • @caloyness
    @caloyness3 жыл бұрын

    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.

  • @doctorrusty6494
    @doctorrusty64943 жыл бұрын

    Blazor stuff! Yes! Thanks Les - you're a STAR!!!

  • @mohamedfared9659
    @mohamedfared96593 жыл бұрын

    man thats amazing i just commented to ask for blazor and in the same day i get the full course i canot believe it

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    I aim to please! ;)

  • @lushman
    @lushman3 жыл бұрын

    A very good presentation, keep up the good work, learnt heaps about Blazor and GraphQL.

  • @joshvaughan3403
    @joshvaughan34033 жыл бұрын

    This is perfect timing! I was just giving up on Javascript!

  • @Grandhoy

    @Grandhoy

    3 жыл бұрын

    Same here - JS is a mess of a language IMO.

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Nice! Glad i could help!

  • @ukcryptolondonbased2953

    @ukcryptolondonbased2953

    3 жыл бұрын

    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.

  • @prubenheeren707
    @prubenheeren7073 жыл бұрын

    Very high quality, thank you.

  • @princeprince164
    @princeprince164 Жыл бұрын

    Excellent learning tutorial!!

  • @rodelruiz4713
    @rodelruiz47132 жыл бұрын

    Thanks for your efforts in sharing us what you know ...very generous indeed ...love to see more videos from you ...thanks again

  • @alexeisichov
    @alexeisichov3 жыл бұрын

    It would be amazing to see a video about blazor server from you. Your vids are great btw

  • @user-rw8nm6wc4z
    @user-rw8nm6wc4z2 жыл бұрын

    Every your lessons are amazing . Thanks you very much.

  • @rmclean101
    @rmclean1015 ай бұрын

    This is so awesome and I so appreciate you!!

  • @nicolass8941
    @nicolass89412 жыл бұрын

    Another great training course !!

  • @stevenbey
    @stevenbey3 жыл бұрын

    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.

  • @teach4355
    @teach4355 Жыл бұрын

    Thanks for this very useful tutorial! GraphQL is new to me, was great to learn, and also your useful tools.

  • @Moorer85
    @Moorer853 жыл бұрын

    one of your best video's. nice job!!

  • @dhananjays
    @dhananjays3 жыл бұрын

    Thank you sir, great tutorial.

  • @chidieberelevi3344
    @chidieberelevi33442 жыл бұрын

    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

  • @DougNelson
    @DougNelson2 жыл бұрын

    Wow.. Thank you for this video. I am a big fan and can not wait for more..

  • @onurozguzel8747
    @onurozguzel87472 жыл бұрын

    Thanks a lot for this quality content!

  • @matteobarbieri2989
    @matteobarbieri29892 жыл бұрын

    great video. thanks

  • @FnaticMedamri
    @FnaticMedamri3 жыл бұрын

    This dude saves lives

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Always happy to help my fellow devs!

  • @Gojam12
    @Gojam122 жыл бұрын

    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.

  • @johnpelitidis6297
    @johnpelitidis62972 жыл бұрын

    Thanks Les... exactly what I needed to learn. (ps. I'm in Bentleigh VIC with real insomnia)

  • @whatizzydoin
    @whatizzydoin3 жыл бұрын

    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)?

  • @raouftoumi6669
    @raouftoumi66693 жыл бұрын

    As always, a great video. Toooooop

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Thanks Raouf!

  • @yacine101
    @yacine1013 жыл бұрын

    ... Fantastic 🔥

  • @scottmulder9279
    @scottmulder92792 жыл бұрын

    Thanks for the awesome video! What program did you use for the UI mock up? Cheers

  • @matthewlevis4436
    @matthewlevis44363 жыл бұрын

    In Visual Studio you can create your classes from JSON using - Edit > Paste Special - creates much less noise and much simpler

  • @spuriustadius5034
    @spuriustadius50343 жыл бұрын

    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)?

  • 2 жыл бұрын

    LOL! Amazing intro!

  • @nainglinnaung6518
    @nainglinnaung65183 жыл бұрын

    Thank you sir

  • @Sad-Lemon
    @Sad-Lemon2 жыл бұрын

    I see JavaScript books thrown into the trash can - I give like.

  • @twistedfcuk
    @twistedfcuk3 жыл бұрын

    If everyone had a teacher like Les Jackson, 2021 would have been COVID Free

  • @jay-xi6xj
    @jay-xi6xj2 жыл бұрын

    #100 comment, your course are really great,

  • @twistedfcuk
    @twistedfcuk3 жыл бұрын

    Les deserves more subs

  • @ever-modern

    @ever-modern

    3 жыл бұрын

    Les deserves more :)

  • @zohaibqadir5245
    @zohaibqadir52453 жыл бұрын

    very very good learning content. can you please make a course about GRPC

  • @khalilsayhi4958
    @khalilsayhi49582 жыл бұрын

    what are you using as extension to be able to auto implement interface methods etc

  • @kallebysantos5167
    @kallebysantos5167 Жыл бұрын

    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 🤣🤣

  • @ThisIsSimonK
    @ThisIsSimonK Жыл бұрын

    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 :)

  • @W5AKC

    @W5AKC

    Жыл бұрын

    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.

  • @isaacbebawy603
    @isaacbebawy6032 жыл бұрын

    Is this tutorial available as book? thank you for your great video

  • @syedqasim936
    @syedqasim9363 жыл бұрын

    What are your thoughts on the latency issues in wasm project.

  • @wilpaulk6303
    @wilpaulk63033 жыл бұрын

    You had me at, no Javascript. 😄

  • @sagarchandrapradhan8769
    @sagarchandrapradhan87693 жыл бұрын

    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 .

  • @Radhakrishna-pq3yj
    @Radhakrishna-pq3yj3 жыл бұрын

    #My mentor. Whereever I am whenever I am.. you will always be my mentor. 😍🤘🤘🤘🤑

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Thanks Radha! What a privilege that is! Les

  • @tanmayfuse1747
    @tanmayfuse17473 жыл бұрын

    Can you please explain how we can integrate above project with Kubernetes?

  • @prem.sagar.m
    @prem.sagar.m2 жыл бұрын

    I like long videos

  • @invictuz4803
    @invictuz48032 жыл бұрын

    Woah, first person I've seen coding C# in VS Code, does he have a VS Code setup tutorial?

  • @bloopers2967
    @bloopers29673 жыл бұрын

    Love your videos man, can you please make videos on azure functions

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Try this? kzread.info/dash/bejne/eKhnlriQgNPPcZc.html

  • @bloopers2967

    @bloopers2967

    3 жыл бұрын

    @@binarythistle Yes already watched it, I just want more detailed with some business logic as an example.

  • @ramkumar12344321
    @ramkumar123443212 жыл бұрын

    How to implement ADFS SAML Assertion Consumer with Redirct binding in .net core razor pages application? Please help

  • @lardosian
    @lardosian3 жыл бұрын

    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!

  • @barryblack8332

    @barryblack8332

    3 жыл бұрын

    It's perfectly fine. Am lazy so I use visual studio.

  • @lardosian

    @lardosian

    3 жыл бұрын

    @@barryblack8332 Thanks Barry!

  • @pc2753
    @pc27533 жыл бұрын

    Oh you hero! I thought it was just me that thought javascript and it's attendant bloat was an enormous bad code smell!

  • @damilola_adegunwa
    @damilola_adegunwa2 жыл бұрын

    Which day will the ".NET Community Standup" feature you! should .NET have an Academy, you should be in the team. thanks again

  • @LossL3ss
    @LossL3ss3 жыл бұрын

    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

  • @troymitchel4790
    @troymitchel47903 жыл бұрын

    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?

  • @kresnofatihimani8402
    @kresnofatihimani84022 жыл бұрын

    hey jackson, when is the dotnet redis tutorial coming up? i need it T _ T

  • @tisurmaster
    @tisurmaster3 жыл бұрын

    how do you store tokens securely on the blazor client? or is it even possible?

  • @sgguitarfan7

    @sgguitarfan7

    3 жыл бұрын

    I have the same question

  • @blackpilledbuddha4944
    @blackpilledbuddha49443 жыл бұрын

    I wanna make a career as a c# web dev.. please advice what to avoid and what to follow

  • @jaderickerts
    @jaderickerts3 жыл бұрын

    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].

  • @crozierntwe6740

    @crozierntwe6740

    2 жыл бұрын

    Hi there, I am getting this error when I try to split my components. Were you able to resolve this issue?

  • @mwardell18290
    @mwardell182903 жыл бұрын

    He is Baaaahhhck!

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Yes Mate! Good to be back!

  • @Vasko10100
    @Vasko101003 жыл бұрын

    What kind of keyboard are you using?

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Hey Vasko, Logitech Pro with Romer G switches: kzread.info/dash/bejne/dItpj7ieXdzPcqw.html

  • @ui-code-tv8302
    @ui-code-tv83023 жыл бұрын

    I am a front end javascript developer, always looking out for new stacks. You haven't convinced me, But good Video. Thanks

  • @allthecommonsense
    @allthecommonsense2 жыл бұрын

    This sounds promising….

  • @ameeradel4835
    @ameeradel48353 жыл бұрын

    clicked for blazor, stayed for the GraphQL

  • @ameeradel4835
    @ameeradel48353 жыл бұрын

    hot reload for the annoying ctrl+c dotnet run tl;dr dotnet watch -p "directory name" run

  • @josbexerr5166
    @josbexerr51663 жыл бұрын

    No esta activado el subtítulos en ingles :), saludos de los andes peruanos

  • @AdrianTether
    @AdrianTether3 жыл бұрын

    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 :/

  • @h.jpouya4715
    @h.jpouya47153 жыл бұрын

    your movie has lots of associate producer but no director? did I miss something?

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    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!

  • @veshvesh2157
    @veshvesh21573 жыл бұрын

    fuckin legend

  • @AbrahamLaria
    @AbrahamLaria3 жыл бұрын

    You deserve a million subs. It is so sad that there are so many stupid channels and those are the ones people cares about 🤦🏻‍♂️

  • @afroz1198
    @afroz11983 жыл бұрын

    Hey, what's the deal with heavy vocabulary in code?

  • @afroz1198

    @afroz1198

    3 жыл бұрын

    Basically,you don't see that kind of vocabulary in js channnels for basic api fetch tutorial like this🙄

  • @muscleheadzzzz
    @muscleheadzzzz3 жыл бұрын

    First :-)

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Nice!

  • @demi9672
    @demi96723 жыл бұрын

    Js should go back to being only a frontend tool for web designers. Aka, not for programmers.

  • @HaoNguyen-km9xj
    @HaoNguyen-km9xj3 жыл бұрын

    Hi.....

  • @binarythistle

    @binarythistle

    3 жыл бұрын

    Hi mate!

  • @Arestkaramazov
    @Arestkaramazov3 жыл бұрын

    In most cases we treat javascript as if it was not a programming language, just something that is there for support

  • @enetstudio4176
    @enetstudio41763 жыл бұрын

    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.

  • @RickTheClipper
    @RickTheClipper3 жыл бұрын

    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

  • @tony007newcastkeNE4
    @tony007newcastkeNE4 Жыл бұрын

    HATE js also

  • @steliosvasiliadis3480
    @steliosvasiliadis34802 жыл бұрын

    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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @lammetjeslam2791

    @lammetjeslam2791

    2 жыл бұрын

    My advice : Make use of the handy added 'Time codes' which distinguish and separate the video-parts which make this full video complete.