Building Spotify App in Swift 5 & UIKit - Get Started (Xcode 12, 2021, Swift 5) - Build App

what is going on guys welcome back to another series this video is video number one in building the spotify app with swift uh in ui kit so quick overview of spotify for not familiar it's basically a very popular music streaming app very similar to things like apple music and all the other ones out there we're going to be building out basically search browse playlists you know most of the big features in spotify and what's really great is spotify gives us a first party api where we can get the data from them directly so we can log users in and all that really great stuff that you expect from the app so quick housekeeping so we're going to be doing all of our ui programmatically we're going to be working with ui kits we are going to be working with their api directly going through their docs and you know their direct api calls no library any funny business like that so if that all sounds good to you and if you're excited for this definitely destroy the like button before we get started hit subscribe if you're new to the channel and into ios and swift that all said let's get into some implementation all right so we're going to get started by opening up xcode and creating a new project we're going to stick with the app templates i'm going to go ahead and call our project spotify we're going to make sure it is set to swift for our language life cycle will be ui kit and our interface will be fully programmatic so let's just go ahead and stick with storyboard but we'll see how to delete it in just a moment here go ahead and continue and save this wherever you'd like we will save it to our desktop and first things first we're going to select a simulator in our list here i'm going to go with the 12 pro max go ahead and hit that run button to get your simulator loaded and the app running and let's uh let's go ahead and lay the foundation for our project in this video so we're going to be creating the files we're going to need we're going to get rid of the storyboard and talk a little bit about architecture so we're going to be sticking with a little bit of model view view model and model view controller in our project so we're going to want to go ahead and create folders respectively for all those elements i like doing this in the beginning of a project just to keep things organized from the get go because things do become pretty messy pretty quick and it's just kind of suits your needs of building out something that's well you know organized in terms of architectural components so i'm just going to go ahead and create folders here for views models view models we'll also need some manager objects let's go ahead and make that plural views and we're also going to need another folder for anything else that doesn't fit into one of these categories and i like to call that resources let's go ahead and move our app delegate and scene delegate here into resources just like that we're going to move our controller into view controllers we'll move our assets i guess into resources as well since it's not really a view we're going to move our launch storyboard in two views and i'm gonna go ahead and right click the main storyboard hit delete and we're gonna say move to trash since we're cool and we're gonna do everything programmatically so now that you've gone ahead and uh done that let's go into our view controller the next thing that we're going to want to do is configure our project to boot to this controller directly now that we've gone ahead and deleted the storyboard file so one thing that you notice is once you move stuff around xcode might start giving you issues so go ahead and close execute and reopen if it's not syntax highlighting it just does that time and time again i've noticed it does that often when you delete the storyboard but just bear with it here once you open it on up go ahead and hit command b and you should get your syntax highlight back i'm going to go ahead and set a title on here of home and i'm just going to give it a background color of red now before we go ahead and give this a run because we deleted the storyboard we need to open up our info p list and find the entry for uh main storyboard file and go ahead and hit backspace to delete it you also need to open up this application scene manifest and keep opening these little arrows up these collapsed boxes until you get to the last one and delete this last entry uh where it tells you the storyboard name now that we've deleted those references we do need to configure you know which controller pops up when our app first launches so we're going to jump into the app delegate here i'm going to go ahead and create a property for the window and this window is going to be optional this is the window that gets created when our application loads up so here we are going to say let window is a ui window we're going to create a window with a frame which is the entirety of the screens bounds we'll say screen dot main dot bounds just like that now on this window we're going to say window make key and visible and we're going to say self.window is window now this window needs to have one root view controller which is going to be you know what you see we only have one view controller in the app at the moment it's called view controller so i'm just gonna assign it just like that and one more thing we need to do before we go ahead and give this a run jump into your scene delegates and in this first function here get rid of all those comments and paste in what we did in the other file and the one change you're gonna make here is this guard let underscore that's discardable go ahead and change this to window scene and you're gonna wanna go ahead and create this ui window with a windows scene so i believe yep there's a window scene right there go ahead and pass that in and hit command b to build your project and hit command r to give it a run and you should see that your app loads up to the red screen which is your red view controller just like that so we've gone ahead and successfully got rid of that pesky storyboard since we're going to do everything in code let's go ahead and create a bunch of you know stubbed out files for what we will need as we progress through these series so first things first we're going to want to rename this view controller because it's called a view controller and it's pretty ambiguous of what it is um so what what we're gonna need in the core app is basically three tabs um which implies we're gonna want a tab bar controller so i'm gonna create a new file it's gonna be a coco touch class that is subclassing ui tab bar controller i'm going to go ahead and call this tab bar view controller let's go ahead and create it just like that and then in the tab bar the first tab here i'm going to go ahead and call it home view controller that's probably a much more appropriate name than just view controller we're going to create another file here it's going to be a coco touch class again the second tab in our app in spotify is search so we're going to call it search view controller and this guy should inherit from ui view controller not tab bar controller again go ahead and create that and give it a save let's continue along here the third tab is basically our library where we can see you know the artists that we have saved as well as playlists so go ahead and create it and save it and what i like to do is take these four controllers and put them into their own group since they're kind of the core of the app i like calling them core just like that the next thing we're going to want is a bunch of other view controllers because we are going to want a bunch of other like you know peripheral things in our app aside from you know the core ui so let's go ahead and just create a bunch of the ones off the top of my head and we'll adjust as we build on out so we do need to go ahead and allow the user to log in somehow so we're going to want a auth view controller this is where they will be kind of signing in with the api we're also going to want to show a screen when the user first opens the app so i'm going to go ahead and call this let's say welcome view controller kind of the welcome screen if they're not signed in we are also going to want a you know a settings screen of sort so i'm going to go ahead and we could call it a settings controller or profile i think we'll keep those separate so i'm going to go ahead and say settings view controller let's go ahead and create that as well so you kind of have a viable already if i'm creating a controller for every screen i think we're going to have in the app so let's continue along on that trend and create a profile and let's see what else do we want we're going to want a player um you know to see like what the current playing song is so we're going to want a player view controller and you can quickly see how this project is going to get pretty large i'm going to try to keep it fairly focused because i want to finish it but let's continue let's see the next one we're going to want a playlist view controller which is going to show a single playlist shocker and let's see so we've got search we've got home we've got the library i believe that's really the majority of what we're going to want we could potentially also have a search results view controller since we are going to be you know searching so we'll say search results view controller and that should probably do it for the you know search results that we are going to want in uh or rather the view controllers that we're gonna want in the app so let's go ahead and close that and let's start putting uh some other stuff in here so we're going to want a bunch of managers as well and managers are objects in the app that you know allow us to you know perform operations across the whole app so things like you know auth management right make sure the user is logged in so the first one we're going to create you guessed it is a auth manager and this object will be responsible for you know making sure the user is signed in signing them in all that good stuff the next thing we're going to put together is another one called api caller you should you know fairly well understand what that's going to do and i'm a pretty big fan of haptic feedback in an app you know those little vibrations i'm also going to go ahead and create a haptics manager we're going to say this is a haptic manager and let's see what else we would want so let's just stick with this for now i don't think we're going to want really too much more in here so that's managers now view models will really depend on the views that we create so i'm not going to put stuff in here just yet but i will start putting in some model stubbed files so we are going to want a model for something for example like a playlist that will definitely be a model in our app we're also going to want a model for a audio track which represents you know a single song i like calling an audio track it's a bit more technical versus a song [Music] we're also going to want a model for an artist so i'm really kind of just guessing off honestly at the top of my head of what we're going to want um and i suspect we're going to want to you know tweak these as we go along so an artist we're going to want a profile perhaps for the current user so i'm going to say user profile and then we're going to have a bunch of api responses as well but let's keep it simple and stick with that and in views um i guess we're going to want some views too but i'm not going to create these yet since i don't really know but if you go ahead and hit command b you'll notice an error in your app now because we got rid of that view controller file and we no longer have that view controller class what we're going to say here is when the app launches what we basically want to do is for now we are going to show the tab bar controller just like that and this tablet controller will be responsible for setting up its tab so let's do that in the scene delegate as well there and the app delegates hit command b and you'll notice that your build errors go away go ahead and hit command r to build and run and you'll see this black empty kind of screen with a tab bar down here so let's go ahead and let's set up our tab bar controller at minimum so we're going to jump into core and tab bar controller let me move it up so it's a little more organized now in this tab bar controller what do we need to do we essentially need to set the view controllers for this tab bar controller so i'm going to create the controllers here so we'll say the first vc is home view controller the second one is going to be the search view controller and the third one here is going to be the library view controller now each of these view controllers is going to have a large title so there is a property off of i believe it's navigation uh bar or i guess it's navigation item and it's large title display mode we'll say always i'm going to copy and paste that for the other two controllers as well just make sure you update the property we're going to want uh three navigation controllers now so i'll say nav one is a ui navigation controller now if you're not familiar with navigation controllers it's basically a controller in which you have you know a title bar a navigation bar and you can you know navigate between other controllers horizontally hence the name and now that we've created these three nav controllers i believe there's a property we need to set on each of these called on their navigation bar prefers a large title something along those lines here we go prefers large titles will be true go ahead and paste that a few times for nav1 nav2 and nav3 let's go ahead and line break that to keep it organized and finally now that we have these set up we can say on this tab where controller sets your view controllers and it's going to be nav1 mav2 and nav3 animated you can go ahead and say false and let's see we're also going to want titles for our controllers here so let's go ahead and do that vc1 we're going to say its title is going to be browse vc2's title is going to be to make sure we spell title correctly going to be search and vc3's title is going to be library let's go ahead and give this a run and let's make sure that we're starting to see some some of our screens so there's our red screen which is our home we have the navigation bar item title at the bottom here to home search and the library they're still black because we're not setting a background color let's go ahead and set a background color in each of these controllers to a system background so our app will support light mode and dark mode which is pretty great so we're going to use system background let's get rid of this comment block since we don't need it let's continue along let's get rid of this comment block since we don't need this either and we're going to paste that guy in as well go ahead and give it a run one more time and let's make sure we're now seeing our titles at the top so there's home there is a search and uh there is library now you'll notice that we don't have tab bar icons here the reason that is because we haven't set them yet so let's go back to our tab bar controller and we want to set tab bar items for each of these nav controllers i'm going to say nav1 dot tab bar item is going to be a ui tab bar item and we're going to go ahead and create this with a title image and tag so the title for the first one here will be home the image is going to be a system image which is a bunch of built-in images something called sf symbols there's a tool you can download from apple's own website called sf symbols which is apple's library of icons i'm opening it up right here and you can see there's a bunch of icons you can pick from they're all really great so we'll be using that a lot in this series since you know they're kind of built in for us so why not let's go ahead and copy and paste that for nav two and three this uh next one is going to be search and this last one will be library i think there's an image called magnifying glass we're gonna find out in just a moment actually the smart thing to do would probably be to look in here so we're going to search for magnifying glass and their indies indeed is one and i think there should also be a library or book icon or something we can use for libraries so i've got a book here we can probably let's see let's go ahead and use i actually don't like any of these let's look for a music note we can use one of these let's use this one right here for our library tab icon which is this third one here and we already called the library go ahead and give it a run and you should now be seeing your three tabs at the bottom with their respective images so looking pretty great now one other thing you might notice is right now we open the app it looks like we come straight into here but we probably want to be showing the welcome screen since we're not logged in yet so i'm briefly going to set that up and then in the next video we're going to get into authentication moreover signing the user in so i'm going to jump into the auth manager file that we created and we are going to create an object with it which is called auth manager now we're going to use this as a singleton across our app so we're going to create an instance which is static called auth manager we're going to privatize the initializer now there is going to be a boolean on here which is a computed property of is signed in and for now we're just going to return false and we're going to probably want a few different properties on here that we want to be able to get so and they're all going to be private so i'm going to say private var access token is an optional string i'm just going to return nil for all of these for now we're also going to want a refresh token here and if you're not familiar with like you know what any of the stuff is this access and refresh business don't worry about it um we're you know not really too concerned with it yet we're going to do that in the next video but i'll explain it all in the next video we're also going to want an expiration date we can call this a token expiration date and we can go ahead and return nil and then finally we'll add one last one here we'll say private var i should refresh token which is a bull and we'll just say false for now and now what we can actually do which is pretty cool is if you recall in the app delegate we are basically saying you know make the tab bar controller your route for the window right here but instead what we can do is we can say if uh you know auth manager auth manager.shared is signed in go ahead and use the tab bar controller otherwise we can do is we could use the welcome controller so we're basically just adding a pretty simple trivial if else check here and in this case we're going to say this is going to be a navigation controller which is going to be nesting the welcome view controller as its child and don't forget that you need to copy this and also move it into your scene delegate here where we're assigning it the root view controller just like that and just for the sake of having something on the welcome screen let's go ahead and open up controllers other and welcome a view controller i'm going to get rid of this comment about code which is useless we're going to provide a title in here called let's call it spotify and i'm going to say the views background color is a system green and let's go ahead and give this a run we should see a green screen now with a spotify title at the top just like that so looking pretty great the app launched and basically said okay we're not signed in so show this as your route the one thing i'm going to go ahead and tweak here a little bit in the app delegate i don't like that it's using the small title at the top for the navigation controller here which is nesting the welcome controller we're going to go ahead and tweak two things on here fairly quickly we'll say nav vc nav vc and i'm going to say nav vc navvc.viewcontrollers.first and i'm going to say it's navigation item large title display mode is always and i'm also going to say on this nav vc that it prefers on its navigation bar a large title large titles are kind of uh kind of more first party they just look a lot nicer in my personal opinion which is why i'm very biased to have them always don't forget to add this into your scene delegate as well otherwise you're going to run into some weird issues nav vc and let's get rid of this guy here let's assign to our newly created navigation view controller go ahead and give that a run one more time we should see spotify and big letters just like that awesome so looking great so just a quick recap we set up our project we stubbed out a bunch of files we got rid of the storyboard everything is looking pretty good in the next video we're going to explore the api a little bit as well as set up the ability for the user to sign in i've set up a kind of a test user for ios academy that we're going to be working with through the duration of all these videos so if that all sounds good to you and you haven't liked the video already make sure to do so leave a comment if you're confused about anything love hearing from you guys and of course subscribe for uh the rest of this series and other swift videos as well so thanks for watching we'll catch you in the next one

Channel: iOS Academy

Views: 19,144

Keywords: swift 5 tutorial, swift 2020, swift, swift 5, swift tutorial, swift for beginners, swiftUI 2020, swift programming, swift basics, swift apps, make iPhone app, swift make first app, build spotify app, spotify app tutorial, swift 5 build app, swift 5 build spotify, swift build music app, music app tutorial, how to make music app, build app like spotify, making spotify app, spotify clone, swift tutorial 2021, ios app spotify, swiftUI spotify, swift spotify api, siwft play

Id: im5n5gpTHTM

Length: 22min 35sec (1355 seconds)

Published: Mon Feb 15 2021