LWC — Facebook Feeds

I have been observing this for a year that, people are mad about LWC and creating a lot of cool stuff. I also thought of, creating something cool, but WHAT?

After a hell lot of research, I thought of starting with the “Hello World”.

WHAT!! Don’t Judge me.

People who are new to LWC, “Hello world” is also tough. Don’t take it lightly.

So without wasting any time, I logged in to my trailhead profile and searched for the Lightning Web Components tutorial.

It has 3 modules

  1. setting up the SFDX environment.
  2. Setting up the VS Code.
  3. Creating the hello world application.

I did all the steps and BOOM!

Everything worked. But I didn’t enjoy it.

I had the developer in me, who wanted to do something else, something creative, something which can make the first LWC implementation memorable.

So, the search began again.

If you are don’t know LWC, please go through the trailhead tutorial first and implement it. We are going to modify the existing code.

The idea was to get some free rest API source and convert this monotonous Lightning web component into something interesting.

So, I went to my GitHub and searched for some API source which I might had used for some other implementation, and I got something.

I had done the Facebook Feeds implementation in Android using an API. So, I thought of using the same.

So, Coming back to LWC, Now, I know what to do. I am gonna create the same timeline in my first ever LWC implementation.

Let’s do research, on calling a Rest API for LWC?

Initially, I thought, It would something different, nothing changed as such in terms of HTTP callouts.

Let’s start with registering the Remote site settings.

Then, created a class called RequestProcessor in the classes folder

So, we are done with API call, Next step is taking the response and show it in LWC. So, let’s move to LWC’s folder

Let’s keep the names as it is. We can change them later. (If you are wondering from where did this helloWold came, Scroll up to start off the article and go through the trailhead tutorial first. We are only modifying the existing code.)

Update the helloWorld.js

And then the helloWorld.html

Now, All coding stuff is done, It’s time to see the magic. Open the org and refresh Page.

A quick demo.

Source:

--

--