I asked ChatGPT how to create a todo app in Angular and it provided me with an unexpectedly accurate answer. With very little input from myself, it was able to provide the code for the entire application.
Get weekly content and tips exclusive to my newsletter:
Learn Angular with Ionic:
Source code:
0:00 Introduction
1:02 Creating a component
1:35 Creating a form
2:40 Displaying todos
3:24 toggleCompleted and ngClass
4:00 Deleting and final touches
4:58 Something harder?
6:28 ChatGPT vs CoPilot
6:52 Thoughts
8:53 Conclusion
#angular #chatgpt #ai
– More tutorials:
– Follow me on Twitter:
Open AI released a research preview of Their new ai-powered chat bot last week It’s supposed to make interfacing with AI systems easier I asked it how to Create a to-do app in angular and it Provided me with a surprisingly detailed Description of how to do just that then I started feeding each step that it Suggested back into it as an additional Question for example it told me to Create a new component for the to-do app Called to-do list this will be the main Container for your to-do items and so I Would ask it how do I create a new Component for a to-do app in angular Called to-do list that will be the main Container for the to do items each time It gave me detailed instructions on Exactly how to write the code it was Detailed enough to where I figured if Chat gpt’s code actually worked that it Would allow someone with zero coding Experience to put together the entire Application so I fed each step back into It as an additional question and this is What happens step by step for the first Step it had me run the NG generate Component to-do list command it then Showed me the code that I need to add to This component and how to declare it in The app module now this wasn’t actually Required since the CLI does this Automatically anyway but it is still Useful to know it then told me to modify
The root component template to look like This and then that resulted in the Application that we see on the right Hand side of the screen now just a Simple to do up title with a component That says to-do list works the next step I needed to ask it was about creating a Form with a button to add new to do Items so first it told me to make the to Do template look like this so this is Close but it’s actually where it made Its first mistake it never told me to Include the forms module which I need to Import to make use of NG model and it Also did not provide a name at attribute For this input which would also cause an Error and the other mistake it made here Was in the class So although it was referencing this new To do class member in the template it Never actually created it so I had to Add that in manually so I fixed these Errors manually and obviously someone Who does not know angular would not know To do these things but still these Things result in errors that would quite Easily be googleable or could even just Be fed back into chat GPT for Clarification so I don’t think it Necessarily makes this unrealistic so Now we have an application where we have A simple input with an add button we can Type stuff click add but nothing happens At this point so for the next step I
Needed to ask it how to use ng4 to Iterate over the to Do’s array and Display each to do so it had me modify The to-do list component template to Include this ng4 Loop and that was it Now we have a application where we can Actually add items and we can see those Being added to this to-do list so now we Needed to add the check boxes for the to Do’s so first it got me to modify the Class to include a completed prop Property and it also created its own Type to reflect this it then got me to Modify the template to make use of this New data and bind the check box to the Completed property so now if we enter in Some items we have a check boxes being Displayed next to them so the next step Is interesting because it wanted me to Create a toggle completed function to Update the completed property but this Isn’t actually required because the NG Model is already bound to the checkbox Value anyway but I’m just doing what it Tells me so I went along with it it got Me to add this toggle completed method Here and also bind to that in the Template when the item is clicked and Then for The Next Step It showed me how To use NG class to add a class when an Element is completed which is what I Have done here so now the items will Have a different class applied if they Have been marked as completed and the
Final step it actually initially asked Me to do was to add the delete button so When I asked it how to do this it asked Me to add this delete to do method here And then trigger it with this delete Button in the template and then at this Point I had completed all of the initial Steps it asked me to do and we had a Working app but it was a bit ugly so I Wanted to see if chat GPT could make it Look a little more modern so I asked it How can I add styles to make it look Like a modern to-do app and it told me To add these styles to the to-do list Component which resulted in the sort of Final application that we’re seeing on The right here I can add a to do item it Is listed here let me just add a few of These we can mark them as completed and It gets a little strike through styling Through it we can remove items by Clicking delete and generally it’s just You know simple but fully functional app That doesn’t look amazing but also Doesn’t look completely terrible so I Was almost able to create this entire Application without using any prior Coding knowledge the only bits where it Actually failed was in forgetting to to Set up the forms module name attribute And the new to do class member but as I Mentioned before those were all things That someone who didn’t have coding Knowledge probably could have got by
With Googling or asking chat GPT about The error so this is obviously a pretty Simple case so to run it through its Paces a bit I decided to extend the Challenge a little bit and I asked it How could I modify this application to Use Firebase as the back end to store The to do data and this is where it Started falling apart a bit at least in Terms of being usable by someone with no Coding knowledge so I think it did Surprisingly well but it asked me to use The angularfire 2 package which is three Years out of date I asked it how to use The angular fire package instead which I Think is still fine because the angular Fire 2 package warned me to use this Package so it didn’t necessarily require Any prior knowledge but when installing Angularfire it never mentioned using the NG ad schematic which would configure Fire base in the application Automatically and it was still trying to Use the old angular fire apis and also Importing them from the wrong place so Even with me intervening and fixing up These mistakes the code supplied still Did not work and I figured at this point We were pretty well beyond being able to Easily get this working with no coding Knowledge so I think chat GPT is Interestingly different to GitHub Copilot whilst copilot can do similar Things in general it relies on the
Developer sort of steering the ship and Then GitHub co-pilot can offer Suggestions with chat GPT it feels more Like it is steering the ship for you and You are this potentially unnecessary Middle step that is just doing what it Says and to be honest I don’t really Know what to make of this I think most People’s opinions mine included about Where this is all heading in the next Few years and what it will mean amount To little more than guesses but it seems So far we have have underestimated what AI systems would be capable of I Certainly have been surprised by both Chat GPT and GitHub co-pilot not to Mention image generating AIS like stable Diffusion and mid Journey so Acknowledging it is mostly worthless Here is my gut feeling take away from This little experiment what I saw felt Like what someone with little or no Coding knowledge could achieve with Google searches running a bunch of Queries and piecing together code from Stack Overflow and elsewhere it’s like That only maybe a hundred times quicker Better more efficient and importantly Chat GPT maintains the context of what Code it has already written for you as You re-query it and that’s something That you’re not going to get when you’re Searching across 50 different stack Overflow threads where I feel chat GPT
Would have trouble replacing software Developers in the near future is in Dealing with and architecting large or Complex systems that need to be Maintained over time and require careful Planning and full with thinking the Sorts of problems that require the Experience built up over a career that Can’t be solved with just Google Searches but maybe that is just wishful Thinking chess Grandmasters don’t just Calculate as many possible moves as they Can and determine the best one they use The experience of thousands of games of Chess and Relentless studying to Intuitively recognize positions what is Winning and what is losing and what a Good move would be in certain situations The popular line of thinking was that Computers could not possibly beat chess Grand Masters until they did now chess Engines vastly outperform top Grandmasters so maybe even veteran Software engineers and their wealth of Experience will go the same way Eventually maybe not so in conclusion is This thing going to take over the types Of programming jobs we do today maybe Eventually I have no idea a popular Stance I’ve been seeing is that we will Just utilize AI to handle all of the Mundane Plumbing work of pro programming Boilerplate scaffolding crud operations Removing items from arrays and so on
Freeing us up to work on the more Interesting problems that actually Matter but I think we should be Suspicious of our willingness to accept That idea because it makes us feel good Maybe that is just wishful thinking too So let me know what you think in the Comments although this does make me Somewhat fearful for our future careers It does also make me excited and hopeful Either way it is a remarkable leap in Technology to be able to witness and Let’s hope we use it well so if you Found this video interesting or maybe Just slightly terrifying feel free to Leave a like And subscribe before you go And I hope to keep seeing you here for More videos before AI makes my YouTube Channel redundant Foreign [Music]
