Head to to save 10% off your first purchase of a website or domain using code SEANALLEN.
I demonstrate how to use ChatGPT to create an iOS App that makes a network call to the GitHub API to pull down a list of my followers and present it in a grid using SwiftUI. I also give my thoughts on how this will impact our jobs as iOS Developers and if you should be worried.
ChatGPT Website:
My iOS Dev Courses:
Twitter:
Sean Allen –
Hired.com:
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Paul Hudson’s Hacking With Swift:
Donny Wals – Combine:
Mark Moeyken’s SwiftUI Books:
www.bigmountainstudio.com/swiftui-views-book/fzc51
Objc.io Books (Thinking in SwiftUI & Advanced Swift):
Ray Wenderlich Books:
#swift #softwaredeveloper #iosdeveloper
Timestamps:
0:00 – This is the app AI built
0:26 – My thoughts on AI & the future of developers
1:27 – Evolution of programming
2:20 – Know how to speak to the prompt
3:08 – Are our jobs in danger?
4:25 – Initial ChatGPT prompt for the app
7:39 – Prompt – Make Follower object conform to Identifiable & Hashable
9:16 – Prompt – Remove a VStack and add a NavigationStack
10:15 – Prompt – Create a FollowerCell
11:46 – Prompt – Make the grid have 3 flexible columns & add FollowerCell
12:35 – Prompt – Use AsyncImage instead of Image
13:49 – Prompt – User the correct version of AsyncImage
15:11 – Prompt – Change username to login on Follower
16:25 – Prompt – Write a network call to fetch followers from GitHub
17:04 – Prompt – Put the fetchFollowers() network call on the FollowerListView
18:27 – Prompt – Make the Follower object conform to Codable
20:15 – Prompt – Use the JSONDecodingStrategy convertFromSnakeCase
22:32 – Prompt -Make the avatars a little bigger and truncate login if necessary
23:50 – Final Thoughts
This app makes a network call to the GitHub API that pulls down a list of my Followers and presents them nicely in This grid view in Swift UI and I didn’t Write a single line of code it was all Done by Ai and chat GPT crazy in this Video I’m going to walk you through the Process of how that happened and then I’m going to give my thoughts and Opinions on what this means for Developers in the future today’s video Is sponsored by Squarespace here are my Thoughts on how chat GPT will affect us As developers and should you be scared With the huge disclaimer that look no One knows this shit’s mind-blowing uh Who knows what this is going to be in Five years but after playing with it for A day I hear my initial thoughts first Up if you’re just learning iOS Development in Swift should you be Scared that your job is going to be Replaced for example I tweeted out a Preview of this video and got this Response as you’ll see later in this Video when I’m fumbling around using Chat GPT no you should not be worried at Least as of now right of course this is Like the first version they’ve released To the public it’s still pretty much a Beta you know in two three four years Who knows where it’s going to be but if You are just learning now as you’ll see Again and I highly recommend checking
Out the rest of the video to see it in Action yeah you got nothing to worry About at least as of now as you’ll see Throughout the video you still have to Know the code someone who doesn’t Understand Swift UI or understand iOS is A platform can’t just type in like a Human sentence and it spits out good Working Swift UI code that’s not the Case yet you still have to know what’s Going on and that’s why I view this as More of a productivity tool and an Evolution in programming now of course I Haven’t been a developer for 40 years so I’m not speaking from first-hand Experience but the evolution as I Understand it you know back in the day You used to write what was called close To the metal right machine code wasn’t Human readable and then we made things Easier with Ides and then human readable Languages like Swift and that made Programming more accessible because it Wasn’t as difficult and Swift UI itself Is even another layer on top of the UI Kit that makes things easier right we All know if you’ve built a simple UI in Swift UI it’s super easy super fast Versus building that same UI in UI kit And again we’re just adding layers to Make things easier and I view chat GPT As another layer on top of that to make Programming faster and easier and that’s Why I think Chad gbt will be a great
Tool because like I said before you need To know the code and that’s why I think You’ll see something like a prompt Engineer or something like that because As you’ll see in the video if you know What’s going on in the code you know Exactly what you want and you can speak Technically you can tell gpt3 a very Technical precise prompt and it will Spit out you know good code whereas if You try to do the human readable thing Like for example if I said you know put All these followers in a grid that’s a Very human sentence it might not spit Out the greatest code but if I said Something like create a lazy V grid of Followers with a flexible three column Layout each follower cell should have a V stack that contains an async image at The top and the login of the follower on The bottom you know something very Technical speaking these DIY language to The prompt you will get good code out of That so again you have to know what You’re talking about to get good stuff Out of the prompt so that’s why I don’t Think our jobs are in danger because you Still have to know what’s going on not To mention all the decisions like Architecture and the trade-offs of like Why you decided to code something Because in programming everything as a Trade-off I think chat gbt is a long way Away from all that like meta type stuff
But as far as like the execution of Knowing exactly what you want again that Like prompt engineer of typing in the Exact thing and speaking the technical Language I think will be a huge Productivity boost for us as developers But it’s not going to take our jobs yet So you still have to know the code to Use chat gbt effectively as a developer But you know what tool helps you build a Great website even if you don’t know the Code Squarespace Squarespace is an All-in-one platform to help you get that IOS Developer portfolio blog or personal Website up and running very quickly now I know we’re all developers with the Skills and the desire to build the web Page ourselves but I would argue There’s An opportunity cost to your time if You’re an iOS Developer trying to build A great product a great app maybe Spending a lot of time learning the ins And outs of web development responsive Design isn’t the best way to spend your Time that’s why I recommend Squarespace To build that personal website the blog Your portfolio or maybe a landing page For your app they have all kinds of Beautiful themes and templates to get You started to handle all the analytics And the SEO for you again it just saves You so much time so you can get back to Doing what you want to do and that is Building iOS apps so when you’re ready
To get started go to squarespace.com to Start your free trial and when you’re Ready to launch go to squarespace.com Sean Allen to get 10 off your first Purchase of a website or domain here we Are at the chat GPT prompt if you want To try this out yourself and play around Which I highly recommend you go to the Website create an account and you’ll be Taken here and you’re off and running I’ll put a link in the description to Their site so here’s the prompt that you Just start typing into and here’s the Prompt I started with Create a swift UI app that displays the First 30 followers of the user S-a-l-l-e-n0400 that’s my username on GitHub on git Hub these followers should Be displayed in a grid with their Avatars on top and username on bottom Hit return okay so sometimes it takes a Few seconds to think and you know spit Out its results and I will tell you this Is now like the fifth time I’m trying to Record this is that you will get Different outputs even for the same Prompt right I did my practice run Following the same prompts that I used And I’ve been getting different outputs And it’s been taking me down some wild Paths that made the video to Meandering And too long and too confusing so I keep Trying again until I get like a a decent Path so hopefully nope it’s not doing oh
No I only got three users I said add More followers here one of the past it Created 30 dummy users so again it’s Early in the AI chat GPT just as a heads Up even if you follow my prompts exactly You’re going to get different answers But let’s see what we got and how we can Work with this because work with this is The key you’re going to get an initial Response and then you got to tweak it Tell it to do something different tell It to add something build upon it so our First iteration here see what we got we Have a followers list with an array of Followers got a scroll view with a v Stack that has text followers I don’t Know where that came from uh lazy V grid Okay image with the follower Avatar cool And the follower username padding okay We have a follower object we have some Dummy followers here just some random Dummy code it looks like Okay so let’s Start with this I’m going to copy this Code and put it into an xcode project so We can start playing around with it Alright going xcode here’s a blank Switch UI project I’ve done nothing you Can still see the hello world so let’s Replace our content view with the code I Copied well actually it’s a follower List is what they named The View as you Can see here on line 10. so I’m probably Going to update my preview nope it did Do the content view that has the
Follower list in there so content view Is still fine expect the expression in Container I don’t know what that means Oh it didn’t finish the array or this is Still commented out so I’m going to Delete this comment here so what you’re Going to see is like you do have to Clean up the code a little bit because It’s not going to be perfect so what Happened was they never closed off the Array or that was commented out so that Was like messing up the code so let’s See what errors it gave us generic Struct for each requires that followers Conform to hashable okay so I need to go Back and tell GPT My follower here needs to conform to Hashable it is using ID self I can make It conformed identifiable as well so Let’s go back and do that again I’m Going to try to do this without writing Any code myself I’m gonna have to clean Up the code but not writing anything so I will say make the follower object Conform to identifiable and hashable Hopefully it just spits out the follower Object and not all the rest of the code But I think it might update the lazy V Grid because cause now I don’t need that You know ID of backslash self because I’m currently identifiable but let’s see What it spits out okay there it goes yep There’s a follower identifiable hashable There’s the Avatar URL username cool
And the cool thing is that it does Explain it for you okay I think I am Going to get the updated uh Uh yep I’m getting the updated lazy V Grid cool so I’m going to copy this and That is my follower list code so if I go Back to xcode The follower list here so this is kind Of the process you’re going to be Copying and pasting a lot of different Stuff in there and I need to go back to GPT and copy the follower object that is Now identifiable and hashable so here’s My follower object I’m going to paste Over it so you can see identifiable and Hashable okay now what do we get here Okay I can just delete this ID it didn’t Delete that for me okay so what we’re Missing here is we’re missing we have The four each we have a grid item we Need to update our lazy V grid to show Some columns here and you see we have Some dummy data again it’s formatted all Kinds of weird but the content view does Take in this array of followers and That’s what we’re passing in so once we Get this code working I’m going to Refresh my preview we should actually See some like dummy users okay there’s Followers okay this is that v stack and The text we don’t want that like it’s Kind of recreating the navigation title But that’s not what we want so I will Tell it to remove the text of followers
And put the scroll view into a Navigation stack so that’s the next Thing so like I said you have to know What is going on in the code you have to Tell it what to do so I will say remove The text followers and put the scroll View into a navigation stack with the Navigation title of Sean’s followers so This should spit out a whole new scroll View then I was a navigation title and It should get rid of that text I’m Probably gonna have to go back and Manually take out the v-stack there we Go removing the text okay so cool Navigation view scroll view cool there’s No text okay now things should start Looking good and hopefully once I copy This code this is just an example I Still need to make the API call you’ll See us write that in a second we’re kind Of getting the UI going first back to Xcode I just copied that let me paste in The whole new follower list VC they gave Us and it should look the same but now That is a navigation title and you see Our lazy V grid is good to go but we Don’t have a follower cell so I’m going To create that follower cell I should Have done that from the beginning when I Did this the first time it just created That right away so I’ll say create a Follower Cell that has circular shaped avatar on Top and their name below put that into
The grid okay there it goes follower Cell we’re passing in a follower or v Stack with an image cool clip shape Circle nice okay see if it actually puts It into a grid see okay There it is lazy V grin follower cell We’ll be passing the follower nice okay So I’m just reading it as it was Scrolling down but let’s copy and paste This uh follower cell here that is going To be a sub review so I copied that go Back to xcode and we’ll put it we’ll put It down here at the bottom I’m not going To put stuff in separate files yet you Know you can do that later but that is Our follower cell and then I’m going to Go back to the GPT and now we have a Separate here this new follower list View so copy that code and you can see I’m going to replace that follower list View with the code we just got and now With the same code I just put in a Follower cell there so now as it reloads Okay we’re starting to see something Here user one user two user three and These are the three dummy users we got Here so I want to be in a three column Grid so I need to tell it three columns If you look at our lazy V grid here we Just have one grid item so that’s the First thing and then now that we have This newly formed follower cell you can See we have an image based on the Follower.avatar URL but we need an async
Image right Swift UI has an async image That is is what downloads the Avatar Based on the URL we’re going to get back From our Network call so back to chat Gbt let’s update those two things say Make the grid have three flexible Columns hopefully this just spits out The grid here and we can copy and paste That in I guess it’s going to give me the whole New follower list but there you go There’s our three flexible columns it Says render each follower here no you Should put the follower cell in there I’ll say put the follower cell into the Grid there we go here’s our new grid Item okay there are the follower cells In here so you can see how you have to Like direct it like what to do and it’s Very iterative so for those of you that Are worried that people are just going To be able to type in whatever they want Without even being a developer and print Out perfect code no at least not yet Right this is still super early so this Is my new follower list we’re gonna get To the network call in a second once the UI is good to go cool now I want to use Async image in our follower cell so That’s the next step that’s probably the Last step before our Network call so use Async image instead of image in our Follower cell I should leave Misspellings in there just I don’t know
See what it does but when you’re Recording a video that’s not time for Experimentation you want to be quick and Concise okay to use Asic image modify The follower so okay cool there’s async Image now this happened to me before on My my practice Runner when I was playing Around it doesn’t use the right version Of async image and you can read all this If you want but it does explain Everything to you but I know Swift UI Well enough that I can just look at the Code so I’m going to bring this new well Hold on see if it says this here Um the async image framework in this Example we import async image module to Use AC image you don’t have to do that It’s part of Swift UI it doesn’t know That so it thinks we’re bringing in like A package well we’re not so anyway I’m Going to copy the code on our new Follower cell and see what happens in Xcode here so follower cell paste that In here delete this async image we don’t Need that we have Swift UI so async Image with a URL that’s perfect yeah Except this placeholder this is not the Right parameter stuff right if I start Typing a sync image you can see if we’re Going to have the placeholder parameter We need the content parameter two Because they go hand in hand so this is Cool though this is what I had to do the First time too is I can tell it to use
Which version of async image so say use The version of async image that has the Content in play Place holder parameters Okay there it goes right away right I Don’t want to import async image but now Look at our async image right we have URL content it puts the content in our Placeholder not perfect that is exactly How async image should be but again I Had to know that right if I didn’t know That someone would just be stuck here Like why isn’t this working what’s going On here so again let me copy this and Back to xcode paste in our new follower Cell and I’m gonna have to tweak this a Little bit I believe well again yeah I Don’t want to import async image I don’t Know what that is chat GPT so now our Follower style has an Asic image from The URL with the follower.avatar URL we Have the image it’s resizable gave it a 50 by 50 Circle okay I believe we’re Ready to start working on our Network Call let’s go to our follower object now Again I know this because I’ve worked With this before but chat gbt didn’t Know it right away now the first time I Did this chat GPT did pick this up and It blew my mind but the GitHub Documentation here right for getting Followers you can see there’s no Username property over here a username Is actually called a login again when I Did this the first time I typed username
In my prompt which is why it’s putting Username in there but it went out and Corrected it to log in automatically That was mind-blowing it’s not doing it This time like I said you’re not getting The same responses every time so I’m Going to go down here and say change the Follower parameter of username to login So hopefully it just spits out a quick New follower object that changes Username to login there we go perfect That’s what I want my follower object to Be oh no I do have to update my Followers I’ll see it knew that because I’m using the name sometimes this Happens I’m going to try again sometimes It like stops doing code halfway through I don’t know if it like gives up I don’t Know if chat gbt servers are being fried Who knows what’s going on but sometimes It’ll like stop Midway through the code See if it actually makes it through nope It stopped again but I know the only Reason it gave me the follower cell is Because now I change the name to login So I’m going to copy paste this follower Struct go back to xcode replace this Because we switched the username to Login and then I know in my follower Cell I need need to do follower.login Not username maybe that’s somewhere else Too all through here great this needs to Be login copy that here username is Login username is login okay cool now we
Should be good to go with our preview Okay so now that my follower object Matches what the API is because you know When you get a network call when you’re Using codable it needs to match Perfectly so now we should be good to go So now if I go back to chat gbt I’m Going to tell it to write the network Call because it hasn’t done that yet so I will say write a network call in a Function called Fetch followers that Retrieves the first 30 followers of S-a-l-l-e-n0400 on GitHub okay see what Network call it spits out let’s write a Number call called whatever okay cool Here is just giving me the function Because it doesn’t know where I want to Put it okay there’s the basic code and Decoding okay I’m trying to read it as It flies by me okay it’s explaining Everything there it goes Note this is just an example it always Says that says there’s just one way to Do it it kind of gives out its Disclaimer here so I’m going to actually Update this and say put the fetch Followers function on the follower list View because right it just gave me a Random function I want I want GPT to put It so you know somewhere As you can see guys it’s going right on Up here called Fetch followers now this Function has a fetch follower here and It’s doing the error handling well it
Says handle the error it’s not doing the Full error handling but okay it’s fine If you stopped halfway through I don’t Need the explanation I just want the Code okay so back to copy the code now Again if you didn’t know how to code you Probably would need that explanation but I’m going to replace this whole follower List with the new one see we got out of State private far followers with an Array of followers and then here on up Here we’re calling fetch followers now Here here’s the URL for Sean Allen URL Session right if you get an error handle The air get missing data handle the Missing data uh Json decoder class Json Decoder requires that follower conform To decodable so let’s conform a follower To codable and but you see we’re trying To decode the Json and then we set the Followers equal to the followers we Decoded and that’s going to update our UI and you can see it handle the air Here we’re not going to go as far down Handling all the errors but you can play Around with that like I played around With handling errors I played around With hey convert this network call to Async await right I want to make this Video some what short but I highly Encourage you to go in there play around Tell what to do it’s it’s fun it’s Awesome so back to the Chrome here to Say make the follower object conform to
Codable scroll down to the bottom here There it goes to make the follower Codable cool now it’s codable Nice because Avatar URL is a string Login as a string okay what are we doing Here Um okay yeah that’s just explaining its Code so uh oh yeah what I just I just Updated the follower objects let me go To that follower object here command V That’s fine okay so now our follower List doesn’t take any arguments because It is a state variable now so now it’s Going to be updated when we fetch our Followers on a pier so what I can do Here is again just clean up the code Here we just have a follower list I no Longer want this dummy data let’s get Rid of that because now we should be Using a network call to get real data Here so if I refresh my preview here Okay nothing worked but things should Work so we’re calling fetch followers I Mean I know why they’re not working Because this happened to me before Because if we go to our Json decoder it Is decoding things again if you know Anything about codable your properties Have to match exactly so if I go to the GitHub documentation look at Avatar URL Right there’s a snake case right it has That underscore there and again if you Know codable you have to match exactly What you’re getting back from the Json
Or do some conversions we’re going to do Those in conversions so back to xcode Our Json decoder again this is stuff you Have to know in order to fix this stuff This is why I say like our jobs are in Danger yet talk to me in two three four Five years I might say something Different but as of right now we’re good So I have to know that there’s a Decoding strategy called convert from Snake case to convert this Json URL this Avatar underscore URL to match our Follower object where it’s camel case Avatar URL perfectly so again I don’t Want to write any code I want chat gbt To do it so back to chat gbt I will say Use the Json decoding strategy convert From snake case okay see what that does For us to convert from State case Okay So yes there should be a it’s giving me The whole fetch follower function again There it is decoding strategy it’s going By so fast I’ll come back up to it but It explains everything Um okay stop it stop it I’m gonna go up Okay so there it is decoder.key decoding Strategy that is the one line of code we Needed but again just in case I’m going To copy this whole function this fetch Followers function copy that back to Xcode and we’re going to replace this Whole fetch followers function with that But the only line of code that changes This decoding strategy well it should
Have been do command B see what we got Here same warnings those are kind of Irrelevant now if I refresh we should Decode properly which we’re not I don’t Know why okay let me dig into this I Wonder if it is the ID here I’ve Actually never seen that warning I use IDs all the time right on objects but Just for the sake of the video let’s do This real quick and that means our for Each here we can use ID Dot Login so We’ll use the login for the ID rather Than the uuid so hit refresh see if that Fixed it but we have an error here oh I Don’t perform to identifiable that’s Fine it’s only just a slight convenience Thing okay still not the culprit but We’re fine that way so something is Going on when we’re trying to decode This I believe yep I was right it was in The decoding so if I show you here if I Go to Google Chrome right Avatar URL When it converts from snake case it’s Going to go capital u lowercase R Lowercase L again GPT didn’t pick that Up so in my avatar URL that it gave me Instead of capital r capital L lowercase R lowercase L do a refresh nope not Quite yet I need my follower cell here Right I need to update the property name Now that I’ve updated that do a command B There we go okay look at this just Like that now it’s starting to work so Now I want to make my avatars a little
Bigger and the names I want them to Truncate if necessary so now we’re just Kind of tweaking the UI but you can see The network call is made it’s using Async image to pull out the Avatar URL And the followers so yeah it’s making a Network call all by itself it’s not Really handling the errors you see it Didn’t quite pick up on you know Changing the Avatar URL to the proper Casing that it originally gave but I had To discover that so back to chat GPT Here I want to say make the avatars a Little bigger and the login name in the Follower so truncate if necessary so Even knows how to do this is that like Minimum text size you’re going to pass In 0.6 Steven knows how to do this I’m Experimenting on the Fly here so here’s My new follower cell it changed the Width and height to 75.75 oh truncation Mode tail interesting I thought it was Going to go to like minimum size of 0.6 That’s usually what I use let’s see well I did say truncate if necessary making It minimum scale will not truncate it I Don’t know let’s go see see what it did For me here so let’s copy this follower Cell back to xcode give me the new Follower cell here just replace all that And it’s probably just going to truncate The names here let’s refresh the preview My oh okay so it’s still spitting out The old capitalize Avatar URL so anyway
We’ll take a little shortcut there make It lower case so my avatar should get a Little bigger they did there you go and Now it is truncating the name I can go Back and tell it to use minimum scale Instead of truncating but like I said at This point you’re just dialing in the UI But you can see the big things of how You know I built the UI I built the grid I had to tweak the grid to tell it three Columns I had to tell it to write out The network call and put it on the Follower list and you see that and then We had to adjust some decoding Strategies so as you can tell you still Need to know the code which in my mind Makes chat gbt a great productivity tool But I am very interested to see where The space evolves over the next five Years because even right now It’s mind-blowing
