LWC Project - Part 1 | Build a Movie Search App with Lightning Web Components
Вставка
- Опубліковано 30 вер 2024
- Topmate Link for One to One Connect
topmate.io/tec...
Salesforce Interview Questions and Answers
• Salesforce Interview Q...
LWC Bootcamp
• LWC Bootcamp Free | Li...
Salesforce Integration
• Salesforce Integration...
Salesforce Advanced Flows
• Advanced Salesforce Fl...
Salesforce Projects
• LWC Projects
🎬 Movie Search Using LWC - Part 1
⭐ If you find this project helpful, please consider giving it a like.
📝 Description:
In this project, we'll create a Movie Search web application using Salesforce's Lightning Web Components (LWC). This web component allows users to search for movies using the Open API. We'll walk through the entire development process, from setting up a Salesforce environment to fetching and displaying movie results. Whether you're a beginner or an experienced developer, you'll find valuable insights in this tutorial.
🚀 Key Features:
- Integration with Public API
- Real-time movie search functionality.
- Dynamic results displayed using Lightning Web Components.
- Easy-to-follow step-by-step tutorial.
📚 Resources:
- Remote Site Setting and CSP Trusted Site for this project
⭐ m.media-amazon...
⭐ www.omdbapi.com
- Public API Documentation:
⭐ www.omdbapi.com/
🔧 Technologies Used:
- Salesforce Lightning Web Components (LWC)
- JavaScript
- HTML/CSS
🤝 Support:
If you have any questions, suggestions, or encounter issues during this project, please leave a comment below. I'll do my best to assist you.
🤝 Learning from this project
👉 Use of Fetch API
👉 Parent to Child Communication - @api
👉 Child to Parent Communication - customEvents
👉 Independent Component Communication - Message Channel
👉 External CSS
👉 Use Component on LWR Sites
👉 Template Looping and Conditional Rendering
👉 Getter methods
👍 Don't forget to like this video, subscribe to the channel, and ring the notification bell to stay updated with more tutorials like this one!
#salesforce #lwc #lwcproject #lwcminiproject #lwcadvanced #lwcbasics #lightningwebcomponent #lwr
Hello, could you please provide a more detailed explanation? I am having difficulty understanding, as it seems you are only presenting the code. I would appreciate it if you could elaborate on the concept in your response.
Thank you."
Noted. Will take care of this in future videos
Thanks for the video .I have a doubt
You mentioned about debouncing..Does debouncing and throttling is the same and if not then can you let m know what is the difference?
Hello Sir, I am getting error as {Response: 'False', Error: "Incorrect syntax near 'this'
Recheck if url endpoint is created correctly and there are no typos in property name
For movies and series it is working but how can we search for "type 3" Episodes?. How to put the name?
Not explored that
I am getting a pop error as A Component Error has occurred! "Cannot read properties of undefined (reading 'Poster')".but when I close the pop then do search the movie everything working fine
do the debug and please try to check line by line , where it is failing
hello sir, i was stuck on tile component. It is not rendering the tiles. There is no error in code but on UI it is showing only black background. Please help me with it.
Might be an error in html file or js file. Debug line by line
Sir during compilation I am not getting any errors. but I am getting "Cannot read properties of undefined (reading 'length')" error in the component
Debug the code or initialise with blank array
Hello sir i I am looking for a job in salesforce development as a fresher for a long time so please help if any reference
Thank you
I don't have any openings. Will let you know if there is any
Can we not make the child component (movie tile) communicate with the other component(movie Detail) making it a child component of (movie tile)
yes it is possible by keeping both movie tile and movie detail under another component ( let's say master component) , but again for this project i want to explore all types of communication
Hello Sir I am getting this error
{Response: 'False', Error: 'Incorrect IMDb ID.'}Error: "Incorrect IMDb ID."Response: "False"[[Prototype]]: Object
Double check your api key. Check if url is formed correctly
@@TechJourneyWithAnkit solved 😊 thanks for your reply 😊
56:00 why to do it unnecesarry. passing data to parent and then again passing the same data from parent to the same child
we follow this approach to create modular components
Hi @Ankit I unable to solve this error: "{Response: 'False', Error: 'Incorrect IMDb ID.'}Error: "Incorrect IMDb ID."Response: "False"[[Prototype]]: Object".
I tired by double checking my apikey and i checked URL also which is in correct form. What could be the reason? And pls guide me to reslove it.
Check if message service sending the imbd I'd correctly
Hi have you found what was the reason for that error because I am also getting the same error. Tell me if you know what is the mistake
@@sundichaithanyareddy In my case ,I forgot to add onchange property to one of the ligthning-input
Getting an error like : Movie Search Output {Response: 'False', Error: 'Invalid API key!'} . I have formed the URL correctly also I have authorized the API key. Still getting this error ! Can you please help ?
Recheck if you are using https or http while making any fetch request and accordingly configure remote site setting and CSP as well
@@TechJourneyWithAnkit I have checked everything. It's as per your Video 🥲. The problem still persists 🫡 . Do you have any other Solutions?
@@prathamkunjeer any update on your problem?
I am also facing same issue
@@prathamkunjeer same Error i am also getting
When i am searching movie name then any image are not showing
Check logs and make sure you are using the correct node from json. Note it is case sensitive
Hi sir can you provide code for the movie search?
I can't due to copyright
In video 8:41 i am unable to find that page in my security tab
Can you please how should I find that csp trusted sites
help.salesforce.com/s/articleView?id=sf.security_trusted_urls_manage.htm&type=5
In the spring 24 csp trusted site place came up with -----> Trusted URLs once search with this name Trusted URLs.
I have already set up the CSP and Remote Site settings but still I am getting this error when I try to fetch the results, would really appreciate your help.
*because it violates the following Content Security Policy directive: "connect-src 'self'*
Finally, it works, but I have to deploy the component to the experience site and it worked fine. I don't know why it is not working in the org itself although the settings are unchanged (CSP and Remote Site)
Check url it should be http or HTTPS at all places
@@Dante-yd9ou even im getting same error, how did you rectify that?
@@thotaupendra901 I have already mentioned my method in the above reply
The Movie Details tab does not show up at all.
The code executes without any error.
The component goes invisible in the 'Edit Page' as well.
what might be the problem?
I have yet to reached at your step so can't help with your issue right now, just curious after making the first call to the API did you get any error like this - because it violates the following Content Security Policy directive: "connect-src 'self'
FYI, I have already setup remote site and CSP according to the video tried in edge and chrome also but getting same error. Would really appreciate if you can help on this
Check in console if you are getting value using Message Channel
Check the used url and configured URL, both most have http. It should not be http and https at different places
Thank you@@TechJourneyWithAnkit
Just tested the key in postman, it says invalid API key.
Make sure you are authorising it from your email
@@TechJourneyWithAnkit yes now working
Thanks Ankit, It is really helpful.
Please keep on creating such videos.
Glad you liked it
Hi, I need help actions not available on record list arrow tab
Check out Data Table series
Thank you for sharing your knowledge. I subscribed and looking forward to part 2 of this video.
Glad you liked it. Part 2 is live now
Trusted sites not showing in my org (in the quick find)
From Setup, in the Quick Find box, enter Trusted URLs, and then select Trusted URLs.
not showing in my org CSP Trusted site so what can I do
Search for trusted site
i search trusted site but they show trusted URL...?
Trusted URLs came in the place of csp trusted site.
Good explanation ❤
Thank you 🙂
Hello sir I am getting error like - incorrect IMDb ID.
If you are getting an error on page load, validate Api key is correct and url is also formed correctly