SwiftUI Livestream: How we built our iOS app

welcome to my weekly live stream where we discuss about the latest techniques about ios development about swift ui about figma and how do we design in a way that code is always in your mind and so this week we have a very special live stream where i'm gonna show you you know what we've been building for the past roughly six months and we've been using you know exclusively swift ui i've been showing you the progress of the design over the past four weeks i believe and we've been implementing everything from scratch with a new design it's already on test flight you have the link in the description and it's available to anyone if you want to test it but otherwise i'm going to be showing you a demo here and i'm going to also explain the process so how we managed to get here from nothing what is it like to work in a project like this and uh how do we work between designers and developers and myself as a founder who does a little bit of both and how do i manage also the team right like someone has to follow up with all of these um issues and qa and organization and you know how do we distribute the task and what are the tools that we're using what is the workflow how do we get from a design to implementation from a design system from a team library and get our developers to be on board and then take those things set the sizing and the images and all that stuff and put that into xcode and also how do we get designers to work with xcode so we're going to cover all of that stuff in today's live stream so i hope you're really excited uh by the way if you enjoy these live streams it will mean a lot to me if you can give a like and if you can also subscribe because we do these every week every week at 3 p.m and so yeah you know i try to share everything that i do on a daily basis um you know in terms of work and i hope this inspires a lot of people of any experience to to take these challenges to want to be an ios developer to want to be an ios designer a web developer web designer and yeah i think this is a really exciting industry that we're in and especially i've been hurting um lately that it's kind of booming because of the sort of um stay-at-home age where everyone can work from anywhere so this is something that you can learn to do to craft to do uh to create to build to design from anywhere in the world and i think this is really exciting so i try to to bring that knowledge from my experience as someone who's been doing this for about 20 years so let's get started um first of all this is the ios app that we're building right now and the first goal is that first we're using swift ui 2 which means that we want to make sure that this works for both ipad for iphone and eventually if we want to do that for a mac os for apple tv because swift ui 2 is cross-platform on apple's platforms not in the sense that it's going to be available on android as well so this is what's happening and i think it's really exciting because if you look at flutter right now they're also going they're also going in the cross-platform direction where you know they they're trying to support web they're supporting mac uh apps as well and i believe windows app so there's a lot of things going on where you wanna build ones and you want to make it work anywhere but you don't want to necessarily be lazy too you want to respect the design language you want to use the same sample code that is going to work across all of these platforms and the platform will do the translation for you rather than you so let's say in the case of react native you have to sort of like redesign almost everything for each platform and it's not always easy but i think in the case of ui and hopefully flutter is that you you code once and using the same code uh it can be used anywhere else rather than using the same code base if you understand what i mean um so we're not going to necessarily use the same entire code base for all the apps but we will use the same sort of coding philosophies and snippets and controls that's going to be translated across platforms so i'm going to get more into the details of that but that's the goal and the design that we have is here so if you want to look what at what kind of you know a typical ios app is going to look like you're going to have about 20 to 50 screens and you will you will want to design in light mode and dark mode so here we're in the light in the dark mode one because we already have done the light mode version previously which is a more basic version of the app and you know and then we wanted to spend a little bit more details spent time on the details and you know if you look at this design here is a little more basic but then we wanted to kind of elevate it a little bit by adding uh more technique to to to all of that stuff we wanted to play with more animations with uh some of the latest uh stuff that we can do such as you know these uh glass backgrounds and the glow effects that we wanted to try and and and get that across to see if it might work and of course whenever you have a design in mind you have to be consistent you can't just like pick and choose one design from you know one piece from one design and then another piece from another design because it's going to look like a frankenstein of a design so essentially what we want to do is to be very very consistent and this is also something i've been discussing in my ui reviews previously where if you're going to use this button that is glowing you want to use that button pretty much anywhere where it fits this paradigm so that's very important it's also important to use dynamic type so you're going to look at the ios guidelines and you're going to want to use like large title title 1 to 3 headline and all of these things you're going to want to use the same names for in xcode as well and uh sometimes you're going to want to customize those things and you want to sort of like tell your developers what are the settings is it the medium is it you know uh using uppercase and stuff like that so my camera keeps breaking so i have to constantly reconnect it so i made it easier this time it's right next to me so it's going to take me five seconds instead of 15 seconds anyways the color schemes the gradients and you want to set for both light and dark mode you want to set the components of course and you want to make sure that any you know any of these things are reusable and some of these content are going to be taken from an api such as contentful so where we are we use contentful for content management which means that uh all our content com comes from a cms on a website and that website is a service called contentful so anytime we have a new course a new author a notification we're going to to publish that on contentful and so that's kind of like the content aspect and the components aspect so when you're designing in figma you want to make sure that everything is set in components and you can easily customize the titles and the backgrounds and the gradients using overrides you also want to use maybe a variant or interactive components if it's interactive and a lot of everything you know once you get past the first stage of design you want to set your design system you want to set your components you want to structure everything properly so that your developers can come in and they can easily inspect each and every element for designing you want to also take take care of the adaptiveness so that each of the screen when it's been resized it's going to look amazing right like here you want to make sure that uh maybe not this one i think this one is definitely set up right so you can see that it's um adaptive and so this also gives an idea to your developers well this is how it should be adapted across different screens and i think it's important to to spend as much time as possible in figma if you don't want to do the coding aspect and the ui aspect um but you know you want to spend all of this time kind of like making sure that all of these screens can fit for different screen sizes and iphones and ipad and you also want to study code to a minimum level to a point where you know that this is feasible and this technique very much matched that of the code and one key thing that i find to be very useful and and this is kind of like and of course for a lot of designers is to use something like figma or sketch rather than photoshop where photoshop is more like for photo editing and when you have an app like photoshop it's a lot it has too many options many options that are not available in code and a lot of effects that are not available in code versus figma most of the things that you do in figma can be done in code and everything is in vector everything you know is using background blur and it's using blur effects but it's not using let's say a spotlight or you know a lot of like different options that you find in photoshop that has nothing to do with this or you know the 3d options or the brush in photoshop that you wouldn't be able to do it in code so that's something that if you want to be a ui designer this is very important to use uh you know adobe xd or figma or or sketch and you want to be able to easily share your design to your developers so that they can inspect elements themselves sometimes you want to pass some comments so you can use annotations um and you want to set the different states for for each of the elements you want to set empty states press states and active states okay so yeah this is how you would this is how we organize our file and you know as a designer who codes i can always make changes to these things and whenever there's a question i can easily um you know make the adjustments necessary especially what happens as a designer personally is that a lot of my design decisions change when i start coding it in terms of ui and you have to expect that which is why i believe that designers should learn some of the foundation of code like what is a navbar what is a text field and how does it work and what is a visual effect blur how does it work what are the limitations of it and you don't need to necessarily code it but you need to know what are your limitations what is the blur strength what is you know what can you do with the colors what can you do with the gradients what can you how can you clip some of these shapes and so once you understand those things it makes you a much more efficient designer and when it comes to the discussion table with your developers you're going to be able to kind of speak the same language as them so that's the design aspect um we have different types of designers of course we have designers who are more ui oriented we have designers who are more ux oriented and we also have designers who are more visual and aesthetics and graphics oriented and you know it doesn't hurt to know a little bit of most of these things and then to specialize in one thing right so if you're a ui designer you want a specialized specialize in designer in design and ui and and all of these interactions if you are a ux you want to specialize in the flow but you also want to be a good copywriter or a content um you know to manage the content to also understand the flow and prototype and so you know which part doesn't work from a end user otherwise a visual designer you want to focus on the graphics so you will be the one taking care of the the backgrounds the gradients the colors and you want to be creating these shapes from scratch you want to set the animations so graphics designers tend to be very good with animations and that's why we allow them where actually we want to involve them to animate all of these things so back to the demo app the graphic designer would be the one you know prototyping these animations here so very subtle and small animations right now it's super basic but you can see that you know some of these things can be animated such as the text here these shapes and you can also use a morphing of the shape you can use a wave animation you can animate the stars within fading fade out you wanna you know use gestures eventually when you're gonna get there and um the same with some of these uh ui here so you will be taking care of like the visual aspect the aesthetics and you know eventually you want to learn ui as well now there's also another new kind of feel well not necessarily new but we have a number of people who are specialized in the ui aspect so ui aspect is what is more interactive what has to do with the content the text the containers the architecture the uh leveling of the content using overlay or background you you want to take care of the adaptiveness so that you know if you know you have a screen like this i'm it's going to adapt to landscape mode as well right and these are the tasks of a ui developer or ui designer a ui designer would be more focused on the figma aspect a ui developer would be more focused on the xcode aspect so you know we have a little bit of both and we want to make sure that everyone is kind of on the same table can work together to create the best results possible so this is the onboarding screen and we've we've been spending now let's go and take a look at the full app so this is the full app implemented using the new design and you know we're using this uh simple animation okay that's very simple and we're using a basic structure because when it comes to the more custom animations such as geometry reader you know it takes a lot more knowledge and experience and our team is fairly young right now we have a lot of people who have just started highways development in a team which means that we can really we can't really afford to go very very custom like you know instagram or snapchat or some of these big companies so you know depending on your resources and your level of experience and your team you you want to decide if you want to use a tab bar or if you want to use a custom tab bar you want to decide if if you want to use a custom title or a custom or a built-in large title in this case we decided to use a custom title so we can put the date here but also because when we go to the sub view it um it doesn't show we have like a custom nav bar here and so you know the cost was not that great and we thought it fits better the design because we have a background here and then we can add this little thing uh in the background to accommodate the status bar so some these are some of the things that you're gonna want to decide and you know you have more control of course over the interaction such as when you scroll down and this all of these things blurs and you have like a lot of controls over the animations such as these favorite buttons here and we have a little halo effect for the bell and we also have like a pop over and this little circle that rotates and uh you know having a lot of fun with some of these uis and of course this is not a 100 done yet but we're you know we're almost there right like we're kind of like a month away from launch and right now we're in a beta test stage and we have i think you know over a thousand or 2000 people testing the app um and so yeah this is the content aspect we also use a webview here and this is rendered using html we're also parsing from markdown that we write in notion for those who don't know what notion is is an app where you can write content and we we actually use notion for a number of reasons such as management of task so in the past in the past we've been using a lot of apps such as you know like i don't remember the name i've been it's been so long so trello and and some of these other apps we also tried using github for task but eventually we just thought well you know why don't we just i'll use notion because we're using notion for content we're using notion for you know for uh for task we're using notion for organizing you know different projects and even some of our team trips to japan so why don't we just use notion right and yeah you know all our tasks are basically set here and we feel like it's the easiest way to to get something done we don't need to follow up so closely with each and every one just everyone comes here and they're like okay this is the task and you check when you're done and you know before deleting it you ask the person who's in charge of qa and then they're gonna check if it's done well and then they can delete the task itself i'm going to get into the guidelines soon but this is notion and so notion is also what takes care of the content so we write all of our content into notion so for example we have the swift ui handbook where we have like 85 tutorials and you can see like the authors and you know we have the different properties such as the top subtitles the meta tags the source file the video file and each of these content are written in notion prepare the notion and you can even drag and drop files into notions such as the video files the source file the subtitle files the vimeo link the urls and all of this is written in in markdown which means that you can export that as markdown to contentful and content4 is going to take that turn that into html and for the web it's going to turn that html code and render directly but for ios we're using something called inc on github so the camera again all right so inc okay github github inc so inc is a library by john sundell who created this awesome library that lets you parse html or sorry markdown to html which means that can be used inside a webview in your xcode project and that's pretty awesome which allows us to have consistent content from the website to the ios app and of course we can also do the same for android so for example the content that i have here can also be found exactly the same way in the website and we don't have to like manually code this or put this into a you know a a local database everything is coming from a cms that is just publishing to every single platform at once and you don't even have to update the app in order to get the new content which is really awesome so yeah you know like this is fantastic um i think this is the one so pardon me it's a little bit slow right now because i'm live streaming at 4k so you can see that the content that you find here is exactly the same content that you find here and it's all rendered in html from markdown and uh you know we just spent a lot of time into all of these things the video is is hosted in vimeo so we link the vm vimeo and we use the player and you know it's going it's going to to do all of that stuff and we have the subtitles is also embedded and uh we also have a background play and that works for the ipad picture-in-picture and so we're spending a lot of time to make sure the content is extremely consistent but also the design is extremely consistent as you can see the design here is not very different from the design here except that the design is adapted to the language of the web where the menu and the navigation works like this versus on ios it's more like a tab bar it's more like a nav bar and uh you know we tried to be consistent also with the design language was a glass morphism that we use quite a bit in the design and so you know we have a course on this one um you can you can check all the the source file the design files and yeah you know all of this is really fun so everything is adapted for the ipad as well and you can see that instead of having a stack of content that that is vertical we're using lazy grid to to stack you know from three columns instead of a single column and that is better for bigger screens and for more content instead of scrolling a lot for 85 sections so a lot of these details need to be dealt with when it comes to the full development stage and you know you have to take care of adaptiveness you have to take care of um you know the dynamic content the apis the backend so for login we're using firebase here um yeah it's a little bit slow right now okay there you go and uh yeah you know it's all dynamic and we tried to pay special attention to the ui by the way and this is not easy right like i've worked with a lot of developers and designers it's not easy unless you're a designer you have to expect that your developers will make a lot of mistakes to your designs and your ui so you have to tell them okay well this this gradient is not done properly this color is not done properly uh this is using a blending mode but it's not appearing correctly or the opacity of the outline is not correct so i had to tell that a lot to my developers and they're happy to fix those things so you know make sure to be patient with each other and make sure to be participative in each of the stage of the process so you can see this is the design itself and this is the full development of it and you can see that it's it's done fairly well and you know it's all adaptive and so no complaints here even some of the blending mode of the outline here is done the blending mode of the outline of the fill and the gradient the we even added the animations which is super easy to do with swift ui and so yeah that's just to show you that we spent a lot of time on the details and making sure that it also works beautifully with the dynamic content so not just with lorem ipsum you want to make sure that all the titles are correct so when you design you can see that i'm using the full real titles rather than lorem ipsum i know a lot of designers that like to use placeholders and i tend to not like that because it doesn't give you a good idea of how it's going to look like when you have more text such as one one example that i can give you is for ui swift ui live stream we tend to have like super long titles so you know a lot of designers they don't really anticipate that it's going to have more text and so how it's going to look like and that's the big question so the same way sometimes you have some of these elements that are that are in the way of the text so i did this funny little thing where you can scroll down and it blurs and you can read the text so you know small details but we try to to kind of solve these issues as much as we can and this is not to say this these are the perfect solutions but you know as a small team we we try our best and um the same with the content dynamic-ness so for example when we have two lines of text here or three lines that makes the whole container smaller or bigger and it lines to the bottom of everything and you know so such small details but you have to really solve these when it comes to the development stage so now we're going to get into each of the tabs we want to have like an easy navigation so we feel like the tab bar is the best navigation especially when it comes to you know the longer iphones and the bigger iphones when we had the small iphones it was fine to have the navigation at the top with the hamburger menu but because you can reach everything using your thumb but nowadays now that the phones are so big it's impossible to use it with one hand when you have a navigation at the top which means that the tab bar is the best solution for navigation when it comes to the phone and so we even moved the search to instead of search like what we had before now we have the more tab which have a lot more options here and so now we move the search here because we don't feel that the search is going to be used as much as the more tab and before when you tab on the profile it goes to sort of the account which is a modal and then you you sort of navigate your history and your favorites here but we feel like using the tab as an option is just a better experience overall and so that's exactly why we did it this way and so now we have history that we feel that it works really great for a lot of apps such as for content like youtube and you know the developer app by apple or you know some of the um i guess the music app and the apple tv app so you know recently visited and history we feel that this is really important to the experience and the favorites and we just released a new feature thanks to our um to our team we now have the ability to have the bell notifications which means that you can subscribe to new content on a specific handbook or course so whenever you add new content to that handbook so for example here we have 85 sections 87 and we keep adding every single week or every single month and so you know if people want to get updated on those things they they're going to favor it first and then they're going to click on the bell notification and you know we we feel like the notifications on ios is so powerful nowadays uh because it's attached to the apple watch and um you know it's people are so used to notification instead of emails and emails it's not that it's dying but definitely with a gdpr it's it's definitely something that people have abused a lot in the past and you know it gets very annoying very fast and notification is is one of those tools that you have a lot of control over right you can easily you know first of all when you when you open an app it asks you well do you want to have notification yes or no you can always say no and never receive notifications right and so that in in in essence you always subscribe to it and um versus the website you think about it like oftentimes especially five ten years ago you just sign up and people start sending you emails you don't even you know give your consent so we feel notification is really cool you can send more and people can sort of like not can customize if they want to have it more frequently or less frequently they can subscribe depending on what content they want to subscribe to and uh we feel like it's great and especially for an app like stocks for example you want to make sure that you're always ahead of some of these notifications so yeah we feel notification is great so yeah we're really excited to to launch the new notification feature in a new build that we just sent in test flight so you can um decide to have notification turn on and when we're gonna have you know you can also turn it off and you can subscribe based on you know which course you want to subscribe to or the handbook so if you're really interested in this swift ui handbook for every new content you're going to be able to receive a notification and turn that off anytime so yeah you know um a lot of fun uh doing this and uh a lot of work and so the searching which was a ton of work as well and small things like to be able to navigate and how do you deal with navigation when you're in the sub view those are small things that seems so small but in reality it takes a lot of time to kind of figure it out um and a lot of like these adaptive layouts such as when you have multiple lines of text or if you have two lines or three lines and you know when you have a progress you know and then we also have the tests which is really exciting so you know you can easily take these tests to get a certificate so you want to take a test about flutter for example and you know i'm just going to click on one it's obviously not this one it gives you it tells you why it's the wrong answer right and then you go to the next question we have all of these beautiful animations here and then you know you get like your result for the test it's it's a lot of fun and we spent a lot of time creating these experiences and at the end of it if you succeed you gonna be able to get a certificate so when you get to your profile this is your profile and this is your certificate and you can edit your content and we have some animations here by our our graphics team our design team and so you know i did some of the ui animation that you can see here it's not you know i want to be able to kind of like swipe back and forth between certificates so that's that's another challenge that i'm going to have to deal with um but yeah it's it's it's so much fun and we spend a lot of time i hope you you're enjoying using the new app and we hope to launch that very soon so let's get into the xcode aspect right because when it comes to development uh you want to make sure that everything is set up properly and that you have some guidelines so let's take a look at some of the guidelines that we have for our team so i'm going to go to here and we have the ios app and i'm gonna have to some of the guidelines so it's really funny because with this you know we're working with developers and what i notice is that developers who use with ui they tend to not use the preview and so when you when you have ui designers and ui developers who come in and they want to be able to fix the ui they have to run and build the app every single time now that makes sense for a an engineer who doesn't have to deal with the ui but it doesn't make sense for a ui designer right and so we set a rule for developers say make sure to always set up the preview okay because if you don't do that it's going to be very hard for us to fix the ui problems and so yeah make sure to um to do that another thing that we said as as a rule is to have a maximum line lines of code per document i know i've worked with a lot of developers they tend to create like these 1000 lines of code document and it's just impossible to find yourselves and so we try to set a a philosophy a principle in which you want to organize your design file the same way that you will organize the code file so each component should have their own view and it should have a maximum like of 100 lines of code or 200 lines of code and likewise we want to make sure that we don't put all the functions there right we want to use app storage and you know we want to use environment object we only want to use combine and put the functions in those places rather than view so the view should be responsible for um for the ui mostly i'm not saying that you should only have the ui in your views but the views should be mostly composed of um of the ui and then the functions you would move that more in the environment object and some of these publishers and so this is where you're going to put the data you're going to put the functions and you know and you're kind of separating two things that is much more manageable in in the end so you want to make sure to learn well the difference between you know store state binding environment object and all of these things and you know some people are used to sort of like if parentheses and stuff like that well in swift ui you don't need to use that um yeah you know you want to also have some sort of an order when you're using environment and store and state and variables um you also want to you to avoid the parrot the pyramid of doom as much as you can so here we we want to make sure that all of these things look organized right like state objects are together the variables are together and so this is the design code you know the first file which is app and this is where we're gonna put um the firebase configuration we're gonna put um the state object and some of the the stores so that we can sort of put all the data so that it's all synchronized across every single view as chill as children and so that's what you want to do you want to organize things really well and so you can see here um you know we're setting the notifications we're setting um the content view so the content view is the first thing that's been loaded and we also have to make sure to pass the environment object and by the way i know a lot of these are jargon for a lot of people who are who are new to ios development so make sure to take the tutorials get more familiar with swift ui but essentially what this means is that we're synchronizing the states across the entire app so for example if you're logged in you want to make sure that we remember that you're logged in who you are and uh you know the widget and stuff like that the model we we have to organize our model the alerts and you know all of these things the favorites the history when you log when you visit different views and uh so this is where we're organizing all of these things and this is calling a the content view so um at the very basics that's what we do and let's take a look at the folder so you know as you can see we try to organize into folders so at the beginning of your project you might not need to get into folders yet uh i like to keep things simple at the beginning so i don't want to have it's like when you're designing figma you don't want to get started with components right away right so the same with when you start an ios project you don't want to get into folders right away unless you start getting to a point where you have like 50 copies of the same component or even 10 or even 5 or even 2 then you start creating a component and the same with here we we don't want to start creating folders until we have like maybe 10 views um and then we we start having like 10 components or you know the models and you know we have to separate the different types of data and yeah my xcode right now is giving me the beach ball of doom and that's because we have a big project and again you know sometimes it does this especially during the live stream so hopefully it's going to be solved but um yeah now let's talk about the config here i can't show the config because th these are the api keys for development and production which means that you don't want to store your api keys to github so we publish all of this stuff to github and github you know is going to be read by a lot of people sometimes it's also public which means that your api keys are going to be in the eyes of the public and you don't want to do that so that's why we have these development config for production as well where you're going to start store your api keys so let's take a look at the assets catalog typically you're going to have the app icon of course and you have the mac one you have the ipad ones and then you have the accent color then for designers you want to set your colors and the reason why you want to set your colors is because you want them to automatically uh adapts from light mode to dark mode versus having to set an if statement in your swift ui code so instead of doing that you reference the color name and then you have access to these different colors for light mode and dark mode and so you want your designers to organize this from the design system ideally and then you also want to set some of the preset assets sometimes especially for prototyping so excuse me when it comes to prototyping you don't necessarily want to set like an api data and set an api call so sometimes you're going to have like some sample illustrations and live streams and so you're going to use that right away in your prototype but when it comes to the production code that's when you start using api and that's where you're going to be using um sd web image sdweb sorry sd web image for you know calling some of these web images using urls asynchronously and so that's what we're using we have a lot a number of packages that we use so i mentioned about contentful i mentioned about firebase from google and then we all i also need to mention about apollo so we are using graphql and this is fairly new in ios development so um in ios development oftentimes people would use technologies or frameworks that are specific to apple platforms and for us unfortunately we can't do that because we have a website and the website needs to have the same data as the app and so because of that we can't use you know some of these uh frameworks that are specific to ios and so that's why we we also we use graphql on the website because we use gatsby so because of those reasons we um we want to make sure that we use all the same techniques and there are so also some key advantages to using um graphql so we have more control over the level of of of the data so you can go deeper into the the children elements right you can load the entire data and then you can go into the sub data into sub sub data and you can pick and choose which one you want versus content delivery api is going to have some of those limitations so that's why we decided to switch to to graphql and it's also more consistent with our website so yeah this is apollo apollo is is a is an ios library that allows us to use graphql from a a data that would be yeah graphql so that's uh that's why now in terms of the navigation so navigation is the first thing you have the content view the tab bar and the sidebar and so the sidebar is for the ipad the top bar is for the iphone and then you also have the views so the views are kind of the main views and we also have the modals and uh you know different so yeah we have the beach ball here which makes it really hard to show you what's going on here and it had to happen during the live stream but um okay so the views all right we have the main these are the main views which means that the main views of the you know the whole the home screen so learn courses tutorials and then the detail view so this is where we get into you know swift ui handbook and then this is a kind of like a detail view from the main view and the section view so this is um the chapter view and this is the section view and so you have to organize this here we also have the webview so this is going to take care of the content and uh what else notification view and then another type is called modal so modal is anything that goes on top of the content such as the login the sign up so this would be a modal view and the modal view is going to have a background so you can tap on the background and you can dismiss it this is all made custom this is not the main sort of uh you know you can also use the built-in presentation such as you have the full screen cover but also the sheet dot sheet modifier and that would be let me show you this one so again you know you can decide to go to the custom route which we did here or you can go to the the full screen cover mode which is what we did here so this is using full screen cover modifier versus here this is using our our modal system maybe i can show you what it looks like um so we have a bunch of modals such as sign in so you can see most of the views hopefully are roughly 200 lines right and we don't really count the preview because the preview you know allows us to set to different light mode and dark mode and for ipad as well so that this is great for the preview and so i don't really count this as line of lines of code but definitely here you know we try to put everything we have like these smaller components and and then we we try to set the structure at the beginning so at the beginning you have you're going to have body and the body sometimes is going to have the geometry reader what is geometry reader it allows you to to detect the screen size which allows you to make it adaptive to you know iphone and ipad but landscape and portrait and on top of that versus using the bounds of ui screen the geometry reader is going to update in real time when you change the light to to these different environments such as portrait and landscape versus the ui screen is not going to update when you go and switch between the two and so that's why you want to use geometry reader instead of the bounce um the ui screen right and so sometimes you're gonna have to do that and when you have the geometry reader and the z stack oftentimes you're gonna get this pyramid of doom unless you organize into multiple components and in this case that's why we have body and then we have content so the main structure is always going to have a z stack typically and the z-stack is going to take care of the background and um you know whatever background that you have and then we put the content inside it sometimes you're going to put the background as a modifier sometimes you're going to put this underneath the content so before the content and uh you know we try to avoid having too many of these containers as much as possible and use as much as possible the frame which means that we're using the mass max width infinity or max height infinity so that we can avoid having too many containers because if you think about it every every single modifier is a container and um you know that's the beauty of swiss ui sometimes you can have multiple backgrounds multiple foregrounds multiple sorry maybe not foreground but definitely multiple backgrounds multiple overlays and you know multiple frames and so that avoids having too many containers in your code and you know and yeah you know we're organizing two mini components we we also make sure that all of these components are easily readable and not have like a pyramid of doom kind of thing so that's what's going on so these are the views components so components is essentially the same as in your figma file and um you know in terms of components you can have like buttons you're going to have content illustrations graphics and you're gonna have like avatars then you're gonna have logos cards so back to xcode is essentially the same thing you have like items so items is like the cards uh or you have cards but item is more like anything that is um duplicatable and you know when you have a four each then you have multiple items and you're gonna loop that we sometimes we have titles we have buttons we have styles so the styles are more like for animations and shapes and the graphics is is what i've been discussing in the past where our designers who are more into the prototyping and some of these graphics and blobs that need to be to be turned into code as i explained previously you can turn all of these shapes from svg to swift using a converter and using that swift code right so if i look at each of these they're essentially shapes so yeah you can tell that we are french so is like mountain in french so path and uh and then you return the path so this is a shape that is fully drawn in in swift and so because it's fully drawn in swift you can use that inexpensively uh versus having to export the images from figma so some of the options that you're gonna have is to export this to pdf or to svg with some limitations but let me give you an example of why we're not doing that so if you look here this face here at the minimum resolution that this is not a big resolution or even this one even this is cut you can see that it's already 82 20 23 kb and that is that is a lot even some of the svg for some of these vectors that's a lot 2 megabit the blobs in pdf 3.5 megabit this blob here 8.3 megabit and why i don't know why specifically but probably because of some of these effects that we have the you know blur and um and things like that but when you do this in code you end up with 100th of the size so you go to graphics here look at that like each of these are about two maybe the phase one is 32 and it's fully code it's just code and our designers are the ones who are doing this not the developers because this is very basic stuff this is not difficult all you need to do is just select each and every shape turn this into a copy as svg and then convert that as vg into into shape using swift and once you have that then you have access to all of these shapes then you're going to start coloring these shapes using overlay using masking using you know fill see here i'm using a m1 shape you know and then it's using a fill using a linear gradient and so you color that in in the code inexpensively so you have something like 2 kb versus something like 2 megabit for some of these graphics so that's why we decided to do um yes megabytes sorry i always mix the two and that's why we decide to do all of this stuff in code but most importantly we do that because we want to be able to animate it because if you think about it some of these um you know some of these graphics are completely flattened which means that i can't separate each of these blobs to be able to animate them and so when you separate them from each other that's when you you can animate things and separately so for example um you know in this view here we have a background so this is separately animated we can add blur effect and whatnot the same with the stars so in light mode we don't have the stars and the same with like the background on the wallpaper here in light mode during the day we don't have the stars but in dark mode you have the stars so we try to do the same here and so you know the only way to do that is to separate these into multiple elements of course it's using alpha transparency and therefore you know you want to be able to separate these layers properly the same with the onboarding screens and let me see yeah so you can see that all of these planets are turned into graphics and all of these planets are animated inexpensively okay and all of these elements are about 2kb each which is absolutely fantastic so you know that's that's what we that's why we decided to turn in everything to code and i hope you're going to involve your designers to do that as well because it's such a big win and on top of that while they're doing this imagine well they're doing this process which is not that technically expensive and difficult they are learning code isn't that amazing i mean think about it once they learn how to do this and how to apply the modifiers and the structures and how to to use these shapes what is the next step well the next step is that they're going to start implementing you the ui then you're going to start animating the ui the the if they choose to they're going to start taking out the app logic they're going to want to build their own ios apps eventually they're going to learn how to prototype in swift ui right so think about it look i'm not the one who created this this file here it was created by axe and vadi and they're the ones who studied everything here they came up with even solution that i haven't thought myself and that's what is exciting because each of us have a different role and a different perspective and we all bring our flavor to the to the team and when you mix all of these things together that becomes a really exciting collaboration and you know we all learn from each other like developers learn from designers designers learn from developers and eventually developers are are going to be are going to become better at ui and graphics and design and animations and then designers are going to become better at application logic you know data prototyping back-end animations of course and gestures so that's why i'm so excited about where we're going from this so yeah this is how we work and what else can i cover let me just check um yeah so swift uix the package i've been mentioning multiple times is also allowing us to um to use some of these missing frameworks or elements and controls from swift ui such as a background blur inexpensively and uh yes swift ui inspector very important one so this is really cool for getting the gradients for your designers the colors and it's a figma plug-in that allows you to get the shape and the values of the colors you can get the modifiers in swift ui and from the creator himself he told me that they're going to be supporting swift shapes so you're you're not gonna need to use the tool for converting svg code to swift code anymore you're gonna you're gonna do that directly from figma and using the swift ui inspector like this so let me uh i'm loading that okay so when you select each of these shapes you can see that i have the swift ui code including the circle you know you have the shape itself and you have the the gradient which is a lot of code which means that this is what our designers use is instead of you know coding this from scratch they copy the code the same this is what i do with css anyways right like sometimes i go to inspect and i would get the css properties directly and so i find this to be so important for swift ui as well so this is a fantastic plug-in that we should all get and um and soon let me check for this shape here so soon they're going to be able to support some of these custom shapes that we've been dealing with in terms of converting from svg to swift code so i'm really excited for that and they also for the pro members they also have access to auto layout i haven't really tested that i should and you know since we're using this increasingly i feel like this is such a time saver and especially for your designers who don't really know how to code some of these gradients from scratch or at least you know at first maybe later you know after a week and by the way to give you some insight this is after two weeks of learning swift ui okay this is not you know she just started two weeks ago okay and she's already able to do some of these amazing graphics and animations that you see right here okay and right now we're trying to do some of the more complex animations such as morphing animation of these blobs we're also learning how to do the wave animations um that we have here so some of these waves in the background let me just show you right so we have a wave here so these these waves can be can be animated as well look at this like all the things you can do here it's it's incredible the blur effects which use a blur layer with blur background so blur background plus blur modifier gives this blur effect and then you can use the angular gradient to color it and that gives this beautiful effect and then each of these mountains can be animated using um you know maybe a looping as a basic or eventually we want to learn how to morph the shape itself that's going to give us an even cooler effect and of course we're still new like i said we only started two weeks ago our graphic designers or our designers in the team they just started two weeks ago to adventure into swift ui and this is already what they're able to do some of the like these shapes are they're the one who did it i didn't do it i i just applied some basic movement animation and they're they're able to do better than me in terms of like the some of these animations because they can spend more time than me um i have to focus on teaching and so sometimes i don't have like so much time to um you know to recreate some of these shapes from scratch so they're the ones who are doing it you know the shape of the girl and all of these lines the planets and uh you know we're gonna get better at animations this is just the start so yeah i think that's basically it maybe i can i can finish with the process of publishing your app so we definitely have tutorials about this this is in the course once you're done with the app you know uh well so this is the app i haven't covered this because of xcode beach balling but you know we have the beach ma the the view model for the data so from graphql and such and the model the data model for each so this is the data structure so for example a question has this and some default question and we have the graphql okay so the data from graphql we have the store so this is what's managing the the states of which modal is being active or not and network utils utility is for third-party libraries or local swift files that we use as utilities and instead of using a third-party library we're going to put our kind of custom code extensions and put that into utils utilities so yeah that's how we organize our xcode i hope you found this useful i also forget to show you the widget so we spent a lot of time okay you know who you are we spent a lot of time working on a widget and so we have the design code widget right here look at that it's it's a it has even dark mode let me just fix the camera again all right and all of this is datum dynamic data sorry and we have different sizes you can see um anytime that we have a new section like a new section of any course is going to show in the widget and you know we found that to be useful in fact you know after using the new ios version ios 14 i find widgets to be so useful for you know consuming the news because consuming the new content for stocks and yeah we believe that you know this is something that is going to be very useful a lot of apps are going to are going to want to do that and when you do that you're going to have to learn deep linking what is deep linking deep linking allows you to link any part of your app from you know a tab or i think a url as well so for example if i click here it's going to go to the app it's going to load that navigation and goes directly to the child view right and that goes directly to the search now this is not easy to do from a technical perspective and even from an experience perspective you have to think about well how do we do it can we do we go directly to the view or do we navigate from the chapter first and go into the view after and so yeah we spent a lot of time on some of these things that seems so easy but it's it's just not and that's why we have awesome developers and and by the way believe it or not even our developers are very new to swift ui we've only started uh really getting serious into swift ui for the past five months and um before that we spent a lot of time on the um on on graph sorry on gatsby so on the web uh the website we've been developing the uh the website for about six months and so we just recently switched to swift ui and everyone absolutely loves swift ui and swift and ios development as a result in fact it's really hard to go back to the web after you um you taste the glory of swift ui and uh you know you can ask them they're part of the chat so you know they they will be happy to tell you how much they love swift ui anyways i'm going to take some questions and in the meantime i want to show you also the process of publishing your app both to test flight and to the ios app store so once you have finished creating your app you're going to want to set this to your device and then you're going to want to organize to archive it so you're going to go to product and then you go to archive and it's going to create a distribu distributed distributable version of the app package of the app you're going to submit that to itunes connect and it's going to ask you a bunch of questions you go through the process it's going to check your package if it's valid and then once you're done it's going to send to itunes connect and from here you can either well obviously you have i can't show you some of this stuff but i can definitely show you the experience here so you have my apps and analytics and stuff like that and then when you get into your app you have the app store one so the ones that can be submitted to the app store where you're gonna publish your screenshots your description and all that stuff the pricing and also before even that you're gonna get into test flight so you're going to go to test flight and again once you publish your archive and submit your archive to itunes connect from xcode you're going to be able to see this build popping up here and from here you can set internal group or external groups and so you know you can set a public url for that group so for example here i have this here so apple does it all for you and they create this page for you to be able to distribute your ios app so once you're done okay archive sent to itunes connect and then you know set up your testers set up your test flight page and anyone's going to be able to come here and when they open this from the ios app they're going to be able to install the app directly and that's just magical so that's how you're going to be able to publish your app so it's not that scary anymore right and that is the goal of this live stream again we have like many many bills so you know you have your test flight your um your different builds of different versions and then you're gonna set your external group so for example um here i have the a public one called design code four and i share this on twitter share this on discord and then people are able to to test this so you can see we have 1487 testers and you can see you know for each of these versions how many crashes that we have and we also have a crash log if i see here right so here we so we're you can't say we're not transparent we're very we're just showing you guys everything today and we have the crash log of everything and these these on top of that these are the comments of the people who are testing so whenever there's a crash they can give a comment as to when it's it's crash and they even send us screenshots in terms of what are the problems for some of these uis and so yeah you know that's um you know that's the beauty of test flight right now and um there's also a really cool app called airport um where you're gonna be able to distribute your ios app um and it it's going to it's airport or community right yes so you're gonna be able to kind of like list your app so that more people are exposed to the app that you're building right now which is really cool and it's it's made by jordan who is an awesome creator in the community so you can definitely check this out when you're done with your ios app anyone can build an ios app by the way so don't be afraid okay it doesn't matter how much experience you have you can have two weeks of experience you can't have one month you can have two two years you don't have to have like a full-fledged ios app like ours or even apple's apps you can have like a super simple ios app where you're just like you know one person in in the people who are who have taken our course is simply making an ios app that measures um how much coffee uh to to to put to to you know to do your coffee basically so let me just get the stories it's i think it's right here okay so [Music] just make sure yeah you know these are all everyone who have been using our courses to build their apps it can be super simple like um you know my first ios app here which is a meditation app and uh there's definitely another one for a coffee making i'm just trying to find it uh this is randomized so that's why it's not showing we don't have a place where we're seeing a history of all the apps but um hopefully we're gonna get this this time oh all right maybe not anyways like your app doesn't have to be like super complex and the beauty of swift ui is that you can build for ios uh on the iphone and also for the the watch so you can have different experiences using the same code um not the same code base the difference between the code base and a snippet of code is that let me give you the difference from a technical perspective i know some you know it might be a bit confusing a code base is like the entire project so let's say the entire project here called ios or my app is for every single platform and so for every single view you're going to do an if statement that says if android if ipad if whatever you know and specifically is you now when it when we're talking about code that works across platform that's different because what it means is that your tab view here or navigation view is written exactly the same way regardless if it's for the app maybe not apple watch but for ipad or mac os right or the tab bar or the sidebar it's written exactly the same way but the entire source code is specific to the platform so for example you're going to have shared which which is shared across all platforms if you want to but you can also have specific files only for ios for mac os but most importantly all of these controls will work and will be translated perfectly without having you to touch the styling right you don't have to reinvent the wheel if you're using some of these uh basic controls such as navbar and tab bar and stuff like that so that's the the key difference between react native for example versus you know something like swift ui that is like learn once apply anywhere right and um i think i really like this approach i think i like the idea that the code doesn't have to change necessarily and that apple takes all the heavy lifting for you to adapt um across all of these different platforms so i find that to be a very exciting thing so you don't have to relearn um the code for different platforms if if you if you look at it for example between react native and react even though it's using react as as a foundation you're gonna find that the code is very different okay the controls are named differently but in swift ui the controls are named the same way right a tab view is the same name versus in um in react native like you have if i remember they have like this tappable view and stuff like that but in the web you don't name it that like that in the web you name it like an html it's image it's um a tag or h1 tag but on the um on react native it's named differently so in that sense it's not necessarily easier right because a lot of these code have to be relearned multiple times even though it's reus is using react as a base if you understand my point so that's why i'm excited about swift ui so that i don't have to relearn what is scroll view reader i don't have to relearn what is tab view just because i want to develop for um you know an uh an apple watch or an apple tv app or an ipad app i don't have to relearn these controls they work exactly the same way with some small customizations that might be different so again this is something that you're going to get used to but i find this to be so so exciting about swift ui so i hope you enjoyed this live stream i'm going to answer some questions before we end this and which database you are using and what service you you use to send personifications so i believe um so darren and stephanie can definitely answer those questions but i believe that we're simply using the apple platform for the push notifications and then we're using contentful to push that um from a sort of like a database and cms perspective so once we publish that from contentful it's going to send the notification to uh to to apple and then it's going to send to every device and in terms of database we're using contentful and we're using app apollo to turn that into graphql and also we're using firebase for authentication and some of the state management and so for example when you add a favorite content folder is for content so for example an article a section a course is part of a content but firebase is going to take care of the states such as when you add a favorite you're not going to store that as a part of content because the content is supposed to be a title a description but a favorite is more like saying okay section number 187 has been added to user 1500 right so that's more like a state thing and that's why we're going to use firebase for that versus contentful for the content and firebase also takes care of the authentication so let me see we have more questions how to get api i'm not sure what i'm not sure like first of all there are a lot of tutorials on youtube and everywhere and we also have a lot of tutorials about api calls so feel free to do that um yeah you know it's not it's not complicated you know there's like the basic one i have a bunch of videos about api so you can check in my youtube channel where i explain a little bit some of the basics combine and api um but otherwise if you want to get more deeper there are like many many channels where you're going to find this information so for cross-platform ios app work on mac os and yes so the concept of cross-platform you have to understand that it does not necessarily mean android and ios it can also mean between the different platforms on apple right because apple likes to be able to to control the quality of the experience and therefore when you create using swift ui you can create across all of their five platforms but um i know that android and google have a different approach which is they're gonna use flutter for example which is going to work for even ios and android but you know at the end of the day the question that you have to ask yourself is do you really want to cover every single platform at once because think about it sometimes you want to start with a niche first you want to start small such as ios or maybe apple tv or apple watch or maybe android or web and then once that specific audience is successful right like you know you have reach a certain point where people are asking for more platforms then you can expand and then it makes sense to um so if we really need to have an android app for example then yes but right now we do feel that we already have a website and the website is covering for most users and we want to focus on swift ui because we can take care of the mac app as well which allows us to have a really good um offline content this is something that we're working right now to make to be able to download the content and so to watch the videos offline so you're going to be able to download it the video and go to airplane mode and then you're going to be able to watch the video and read the content offline and so that's the goal and why we feel like you know swift ui for example is a very powerful tool and ios development in general is very powerful way to do that because we can store some of these content these videos offline can you please show how you do all the network calls so i'm not going to focus on that because this is not my expertise um i believe i explained quite a bit about network um and the problem with network things is that it tends to be a bit of um private in in a sense right like we have like the development keys and stuff like that let me see graphql so we have the con the content query i think this this should be fine i don't think this is private so this is the structure of graphql and this is your graphql query um so this is what we like about graphql is that you can sort of like query the title and then the child of the chapter collection and then you can pinpoint which part of each of these items that you want you don't when you query a certain piece of data you don't necessarily want the whole collection right and that's that's what happens often with content delivery api is that when you do an api call you just get the entire data at once and what we notice is that we ran into a problem when it's loading too much data like eight megabits of data at once eight megabytes sorry um and so we found that we had to find a solution in terms of how we load the data in a way that it's not gonna load eight megabytes of data but rather like 200 kb so that was the goal and yeah we spent a lot of time on the data aspect um the store api data let me see if i can show you some stuff i think it's in network and oops i hope i didn't show some api keys there but yeah you know you can see some stuff we're using url sessions and yeah this is stuff that you can definitely learn pretty much in a lot of places and yeah i can't show you that much also i'm not an expert in this field here so i have a question about toolbar placement okay yeah this is a very specific question um i don't know if i can answer that i haven't played that much with toolbar item placement we're still not yet in the phase where we're kind of making everything work across different devices and uh especially for mac for example because the mac is gonna have like the toolbar and action stuff uh differently from ipad so the placement can be customized differently so i'm not super familiar with that yet so i can't answer that specifically yes we will have more tutorials on the data side in fact psy who's part of the team he's creating a course about advanced swift ui so that should be launched in a few weeks and we're really excited to show you the whole experience of using cloud kit of using core data firebase and the whole like login experience and editing your data and uh some some of the environment object and hopefully app storage and state management so that should be a lot of fun and look forward to that while me i try to focus more on the ui aspect and getting you started into swift ui and so that's my kind of my thing you know i want to teach designers how to code but also developers how to design and i can't get as deep into the advanced stuff because the advanced stuff is when you're already kind of deep into development and we try to do that we have more and more people such as stephanie and and psy who's working on more advanced materials so that's why we have 85 87 tutorials now on handbook of swift ui and we're going to keep adding more and more stuff that are advanced so which is the best course for a beginner to start on your website so this is a really good question we keep having this question everywhere um what i can say is if you want to learn design i would i would suggest with ui design for developers design system in figma and i would also suggest to use our handbook so someone today asked me what is the difference between a handbook and a course well a course is when you build an entire experience from step one to step 100 okay and we we hand hold you every step of the way step by step so one is a continuity of the other one and so we try to make it as friendly as possible a tutorial on the other hand is when you can reference each of the technique in isolation so for example you know you've you finished the course and you're like oh maybe i i don't remember how how to do a modal well do you really want to go back to the course and search for modal or you can go to the handbook and just search for modal it's going to give you the five minute tutorial from scratch and it's going to tell you specifically what you want to learn and on top of that the handbook gives you more detail into each of those topics versus the the course is kind of like it's gonna give you a little bit of those steps and uh we do that to be friendlier and so that's the difference between the two content and um for beginner like i said for you for design you want to take the course ui design for developers and at the same time to reference or ios design handbook if you want to do for ios so the handbook are there for kind of like give you reference like a documentation and more depth so i we have ios design we also have uh ux design ui design and figma so figma is specific to figma so these are really popular especially figma is very popular um because a lot of people use figma nowadays and you know it's also great to be able to learn design when you know for what tool that you're using right so a lot of people they will learn design but they don't really know what tool to use and so it gets very confusing at first but when when you get directly into the tool that's when you can sort of imitate much easier those first steps that get you into realm of designing and so that's for design and the same for swift ui so swift ui i would start with the course called swift ui for ios 13 and and then work your well your way into part two part three and then for ios 14 and at the same time you should build your own app and while you're building your app you go to the handbook and you reference uh the swift ui handbook for each of those topics so the course itself is not going to cover every single topic and so whatever else is missing or if you want to go deeper into each of those topic you go to the handbook and let's say you want to build your own app for that and so that's what the handbook is for so that's for swift ui and we also have react i would start with react hooks and then work your way into you know the react handbook as well and if you want to get into react native we have courses for that yeah flutter for designers is great for you know if you want to do a cross-platform android and ios at the same time and recently they started uh supporting mac os and windows and you can also support the web so that's exciting size is part of the he can answer question about flutter as well so are you passing those uh store objects as environment objects this is a more i'm not like super family with store object and environment objects i i think dara or stephanie can answer that question if i'm not a designer where can i get nice mobile app design templates oh that's a good question um what i would do personally i would start with the basics okay and the basics is you know ios ui kit don't go with a custom design if you're not a designer at least at the very first i think this is going to teach you so much about ios design in general what you need to learn and how it works and you know you're going to want to to download the basic ios ui kit from apple and also in figma you have a bunch of them from the community so okay here and you want to go to community and uh you know you're going to find a bunch of these ui kits such as ios and ipad ui kit and you you want to design your app using this first it's going to teach you so much about ios it's going to also make your app so much more inexpensive to build when you're going to be talking to ios developer okay i would start with that if you want to get more into a custom-made design that's when you might want to get into dribble and hire someone or you can you can also you know design some of these templates that are given for free so food delivery app ui kit and i believe you can use some of these uis and i believe most of them are free and you can definitely google a lot of these things as well yes so we have a discount for ui8 um i believe we still have it still active yeah definitely okay so let me see we have more questions yeah i think that's it i hope you enjoyed this live stream again if you enjoyed please give a thumbs up and subscribe turn the bell notification on i'll see you next week bye

Channel: DesignCode

Views: 39,336

Keywords: iOS development, figma design tool, swiftui, design and code, swiftui inspector, design system, swiftui packages, TestFlight

Id: zerEdPmSMrk

Length: 92min 18sec (5538 seconds)

Published: Fri Apr 16 2021