Create a Sleep Sound App from Scratch - Full Part SwiftUI Tutorial

hello everyone in this video I'll show you how to create the sleep sound application from scratch we'll progress step by step and share this process together today first I'll show you the Json file and the audio player with reciter files before we begin if you'd like to access all the codes without waiting for the parts you can download them from my patreon account in the description section if firstly I'm adding both the applications icon and the colors and images in the assets section then I'm creating a file named model after that I'm opening a file named reciter We Define a structure named reciter We implement the codable protocol which means it can be converted to and from Json format we Define an inom called coding keys this helps us match the keys when converting from Json inside the enum each case represents a property of the reciter struct that we want to map from Json keys for example case ID this case corresponds to the ID property of the reciter struct case reciter name this case corresponds to the reciter name property case reciter description this case corresponds to the reciter description property and so on for the other properties when decoding Json data into a swift struct using codable the coding Keys enm helps Swift know how to match the keys from the Json data with the properties of the struct this allows for smooth and seamless conversion between Json and Swift types properties of the reciter structure this code snippet defines the properties of the reciter structure each property contains necessary information for representing an audio record ID represents the unique identifier of the record this is typically stored as an integer recite a name represents the name of the audio it is stored as a string recite a description represents the description of the audio also stored as a string Banner title represents the banner title of the audio again stored as a string platform title represents the platform title of the audio stored as text artwork represents the visual artwork of the audio stored as a path or URL list holds the list structure within an array named list representing a list of audio files it serves as a reference to the list structure which may contain details of each audio file such as its identifier name file path and image we Define a structure named list this represents the list within each reciter this code snippet defines the list structure list is used to store Json data and conforms to the code notable protocol each list item represents an audio file and has an identifier ID list items contain the name file name and image of the audio file for example audio name represents the name of the audio file variable name should be meaningful and in this case audio name should be used instead of surra name this ensures that the code is more understandable and accurately represents the project I apologize for mistakenly using the term surra name we define a class named read data which implements the observable object protocol this allows us to dynamically update the data within Swift UI this code defines a class named read data this class implements the observable object protocol which means that data changes can be automatically updated in Swift UI views the class contains an array named items which stores ele ments of the reciter type Additionally the class's initializer in it is called when the class is instantiated triggering the load data function to load data this ensures that data is loaded automatically when an instance of the class is created we create an array to store our data and publish it this function named load data is responsible for loading data from Json it begins by attempting to retrieve the URL of the Json file named audio Json from the app's main bundle if the Json file cannot be found it prints an error message indicating that the file was not found and the function returns early in this section the loading and conversion of Json data are performed firstly the content of the Json file is loaded into a variable of type data using data contents of URL code next the Json data is decoded into to an array of reer structures this is achieved using Json decoder and the decode operation during this process the Json data is expected to be converted into the reciter type if the decoding process is successful the resulting array of reciter structures is assigned to the variable named items if an error occurs within the catch block an error message is printed details about the error are obtained from error localized description and printed out first let's examine the Json file where we'll store the data this file contains the names of the sounds file paths and other information I have written all the codes for reciter files let's move on to the audio player file I'm opening a new file and naming It audio player we assign the loaded data into the items array this code defines an audio player class responsible for playing audio it tracks the current playback time and manages an AV player instance for playback additionally it conforms to the observable object protocol to automatically update views when its properties change it starts the playback process this function starts playback it begins playing the audio file using the AV player instance inside additionally it calls the add time Observer function to add a time Observer this function pauses playback it pauses the playback of the audio file using the AV player instance inside this function stops the playback of the audio file and resets it to the beginning firstly the AV player instance is paused then the audio file is seek to the beginning additionally the time Observer is removed halting the updating of time this private function adds a Time Observer and updates the current time it sets up a time interval and at specified intervals the change in time is observed by the AV player instance when the time changes the elapse time is calculated and assigned to the current time variable this ensures that the current playback time is automatically updated this private function removes the time Observer if the token of the time Observer exists meaning the time Observer has been previously added it is used to remove the time Observer from The Av player instance then the time Observer token is set to nil this function rewinds the audio file by 15 seconds it retrieves the current playback time subtracts 15 seconds from it and determines the new time if this new time is less than zero it is set to zero then the AV player instance rewinds the audio file according to this new time this function fast forwards the audio file by 15 seconds it retrieves the current playback time adds 15 seconds to it and determines the new time if this new time is less than zero it is set to zero then the AV player instance fast forwards the audio file according to this new time this function sets up the remote transport controls an instance of MP remote Command Center is created and a shared instance is obtained play pause and stop commands are added to this instance each command is assigned a closure which is called when the commands are triggered and the corresponding audio player functions are executed first let's open a group and use it to store the files there then let's open a file named scaled button style this code adds a simple interactive effect to a button in Swift UI by reducing its size when pressed this code adds a new feature to the view type used in Swift UI this feature is used to obtain the size of the safe area on the device's screen the safe area refers to the areas near the edges of the screen such as the notch at the top or the button bar at the bottom with this code any Swift UI view can access the size of this safe area helping ensure that content placed near the edges of the screen is properly positioned the codes written in this file were this much now let's open a file named custom Corner this code allows creating a custom Corner shape using Swift UI it defines a structure called custom corner which specifies how much the corners should be rounded and which corners should be rounded it includes a method called path in that determines the path of the shape this code can be used to create custom corner shapes in Swift UI now let's open a new file and create a new group the file name will be gear this code represents a view designed solely for layout purposes it creates a view for the settings section the content includes the text settings formatted as a title the page title is set to set settings using navigation Title by the way I've changed the applications icon and I'd like to mention it in case it differs from part one now let's open a new file and create a new one the file name will be Bottom bar this code adds a new feature to the view type used in Swift UI this feature is used to obtain the size of the safe area on the devic's screen the safe area refers to the areas near the edges of the screen such as the notch at the top or the button bar at the bottom with this code any Swift UI view can access the size of this safe area helping ensure that content placed near the edges of the screen is properly positioned now let's open a new file and create a new one the file name will be audio card we need to add a list containing properties that represent audio files to the audio card structure we'll use the list structure we defined in the reciter Swift file for this purpose this allows us to display the name image and other details of each audio file in the audio card this code creates a card view representing an audio file inside the card there is an image and a text displaying the file name finally an audio waveform icon image system name waveform is added a divider is present between cards first let's open a new file and name the file audio player this code defines a state object property to manage an audio player object State object ensures that an object is retained throughout the lifetime of a view and does not trigger the recreation of The View when the object changes audio player is likely a class performing functions such as playing and stopping audio files this code defines a state property to hold a width value if the screen height is less than 750 the width is set to 130 otherwise it's set to 230 this is likely used to adjust the size or position of the user interface this code is used to fetch a presentation mode value from the environment object this is probably used to dismiss or navigate back from a page this code defines a property named audio which is of type list list likely represents a list of audio files this code defines a state property named is playing and initializes it to false initially navigation view is a navigation structure in Swift UI that typically facilitates transitions between a series of screens or content this structure can be used to provide a navigation bar and navigation functionality Zac is a structure used in Swift UI to arrange nested views think of it as a stack the view placed on top appears in the front for example a view within a z stack can be positioned above and displayed on top of another this expression creates an image View and sets it image to the one specified by Audio audio. image is expected to contain the data or reference of the image this expression forms the foundation of the image View and creates an image View using the specified image this expression sets the preferred color scheme of the user interface to dark mode two V Stacks are nested the first vstack contains a image and other adjustments the second v stack is nested inside and contains additional adjustments image represents the image specified by Audio image the soda name is retrieved from a pre-written Json file and displayed on the screen this code adds a fixed text sleep sound below each sound in the application this text represents the current time of the audio player this code creates a horizontal layout H stack and adds three buttons to it these buttons perform the functions of rewinding play pause and forwarding the audio file the first button is used to rewind the audio file when clicked the audio player. backword function is called the second button performs the play pause function when clicked it toggles the state of the isplaying variable and if it's playing the audio player. playay function is called otherwise the audio player. pause function is called the third but button allows you to forward the audio file when clicked the audio player. forward function is called first an audio session category is set to ensure audio playback functionality then an audio file is loaded from a specific URL and loaded into the audio player the name artist and image of the audio file are specified finally remote control functionality is enabled this code sets the title display mode to in line in the navigation View and creates a close button on the right side of the navigation bar this button allows the user to dismiss the current View and stop the audio player yes that's all for today part four will be the final part first let's open a file named home view let's write the content of your home view file in the content view section so that when we run the simulator our application appears as the home view encompasses every part of the application since the application will exclusively feature a dark mode I'm opting for dark mode throughout this code current item represents a currently selected reciter object show detailed page controls whether the detailed page is shown animation manages the interactions of animations animate View and animate content control animations of the view and content datas an observer tracking a data model containing the application data selected item represents an item selected by the user e e e e e e e e e e e for

Channel: Ayhan

Views: 157

Keywords: #SwiftUI #iOSDevelopment #AppDevelopment

Id: KDinXkPGzQo

Length: 22min 45sec (1365 seconds)

Published: Mon Apr 15 2024