{"id":5507,"date":"2023-02-01T05:12:27","date_gmt":"2023-02-01T05:12:27","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=5507"},"modified":"2023-02-01T06:05:33","modified_gmt":"2023-02-01T06:05:33","slug":"how-to-build-your-own-blog-app-with-swiftui","status":"publish","type":"post","link":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/","title":{"rendered":"How to Build Your Own Blog App With SwiftUI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">New technologies frequently increase the complexity of the <\/span><a href=\"https:\/\/dianapps.com\/\"><b>app development company<\/b><\/a><span style=\"font-weight: 400;\">, making coding less approachable for the general public.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The contrary is typically true with SwiftUI, as the framework makes it quite simple to swiftly construct whole apps from scratch or iterate on design concepts through coding.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We created and open-sourced a blog app that uses a content management system to serve your entries and supports many design aspects, including dark mode and accessibility, as standard to demonstrate how easy it is to use SwiftUI for big projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although, to start the project, here are a few things you need:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Download Xcode 12+.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">New SwiftUI projects should be made.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the project settings, choose an <\/span><a href=\"https:\/\/dianapps.com\/ios-app-development\"><span style=\"font-weight: 400;\">iOS deployment<\/span><\/a><span style=\"font-weight: 400;\"> target of 14.0 or above.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Repository on GitHub<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Downloading the<\/span><a href=\"https:\/\/github.com\/roman-luzgin\/BlogAppSwiftUI\"><span style=\"font-weight: 400;\"> final project from GitHub<\/span><\/a><span style=\"font-weight: 400;\"> will allow you to follow along.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-to-Build-Your-Own-Blog-App-With-SwiftUI\"><\/span><span style=\"font-weight: 400;\">How to Build Your Own Blog App With SwiftUI<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Setting-Up-Contentful-for-Content-Management\"><\/span><span style=\"font-weight: 400;\">Setting Up Contentful for Content Management\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Setting up your model on the content management system is the first step (CMS). Once the app is built, this model will specify what will be published there. Since we are developing a blog application, in our instance, we must design a model for a blog post, complete with a title, subtitle, content, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will choose Contentful as our CMS because it offers a substantial free tier and works well with Swift and SwiftUI in particular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first thing to do after making an account is to draught the blog post&#8217;s content model. Go to Content model Add content type and select a name for the model to accomplish that. SwiftBlog will be used with a swiftBlog API identity.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The content model must then be updated to include all relevant fields: Add a field, select a type, and then create it. The list of all the fields we&#8217;ll be using is provided below; feel free to modify it to suit your needs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At this stage, we may also add a few articles to help with debugging our upcoming app. Go to Content Add SwiftBlog to make a post. Include a title, a subtitle, a photo, and text. When we begin creating the relevant area of our application, we may leave the featured field empty for the time being and return to it later.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Building-the-App\"><\/span><span style=\"font-weight: 400;\">Building the App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Once Contentful is configured, the real app may be made. We need to link a few important libraries before we can go on to the interesting stuff.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Most importantly, we must include SDWebImageSwiftUI and Contentful from the Swift package manager. If you&#8217;re not sure how to proceed, go to File Add packages and look for the two aforementioned names. Use these GitHub folders instead for SDWebImageSwiftUI and Contentful. Once you have added these dependencies, Xcode will handle the rest.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We may now begin the application itself.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creating-the-data-model\"><\/span><span style=\"font-weight: 400;\">Creating the data model<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The data model for our blog post is now being created. The structure of this model should be the same as the one we established for our Contentful content model, which entails the presence of a featured field boolean as well as a title, subtitle, image, and actual text (a blog post).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unless we indicate otherwise, we are setting the default value of featured to false. This allows us to make the field in our Contentful content model optional and only take note of it when we wish to showcase a post.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note that by including a UUID, we also conform the blogpost struct to the Identifiable protocol. We will utilize ForEach statements in our next view models, therefore this is necessary.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Setting-up-a-Contentful-connection\"><\/span><span style=\"font-weight: 400;\">Setting up a Contentful connection<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll develop a logic to link to our CMS next. You will want both an access token and your space id for that. On Contentful, you may obtain these under Settings API keys.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Client instance, which is a component of the Contentful library, must receive both the space id and the access token before it can be used in a method to retrieve the array of our blog entries. Using the following piece of code, you can also arrange the list that is returned by any field any way you like:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The final step is to construct a BlogPostStore observable class and fill it with a list of blog articles using the getArray method. All future views that display the list of blog posts will immediately redraw whenever the list is refreshed because we are utilizing the @Published property wrapper for our blog posts. In other words, new information will instantly display in our views once we publish a new article and a user refreshes the list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another crucial point is that the SDWebImageSwiftUI library has to be imported first since we cast our photos as URLs. The WebImage class from the library will enable us to display the picture from this URL.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The backend portion of our CMS integration is now complete. The only thing left to do is create our application.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Designing-the-App\"><\/span><span style=\"font-weight: 400;\">Designing the App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For our blog app, we will create simply three elements and two pages (the main screen with a few featured articles and a list of all posts) (a blog postcard for the main screen, a blog post row for the list, and an actual blog post view).<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Making-the-main-screens-card-design\"><\/span><span style=\"font-weight: 400;\">Making the main screen&#8217;s card design<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Using all the usual SwiftUI components, such as words, vertical and horizontal stacks, and stacks, designing cards is quite simple. Presenting the online pictures from our CMS would be the only little difficulty with this, which we are addressing by utilizing the SDWebImageSwiftUI package, as was already explained.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, we&#8217;ll need an extension to enable hex values for colors as Swift doesn&#8217;t already handle that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On to the actual card itself. We&#8217;re going to address two very important issues here.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, by reducing the number of hardcoded values for the card size, we will make the card as adaptive to the screen size as feasible. Since all VStack and HStack views in SwiftUI automatically adjust to the screen size, achieving this goal is often straightforward, but when it comes to photos, we want to make sure they appear nice on any size of the screen. Due to this, the image&#8217;s height will be fixed at 220 pixels, and its width will be set using the code below:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This indicates that we are using the actual screen size of the device the app will be opened on, shrinking our picture by 80 pixels to fit the available space on the screen. Although there are other methods to accomplish flexibility with SwiftUI, for our particular card, this approach would be most effective.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Second, the card must appear attractive in dark mode. Although SwiftUI includes support for the dark mode by default, it is still our responsibility to ensure that all of the colors seem acceptable and orderly in both appearance modes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If the @Environment(.colorScheme) var colorScheme value is.dark: we will just utilize the actual hex value of a dark grey color as we only require one custom color for the card in our app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is our main blog postcard&#8217;s whole code:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The outcome for the iPhone 12 and iPhone 8 is shown here. You&#8217;ll see that the card instantly adjusts to the screen size and appearance mode, and both look nice.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Designing-the-list-row\"><\/span><span style=\"font-weight: 400;\">Designing the list row\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We must plan how each row will appear in the list of all blog entries. Since this view will be used as a row in a List, we can reuse much of the code from our main card without having to worry about adding shadows or changing the color scheme for the dark mode, which makes things even simpler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The final code we employ for the last row of each blog post is shown here:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And this is the final appearance of each row.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creating-the-blog-detail-view\"><\/span><span style=\"font-weight: 400;\">Creating the blog detail view<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The next stage is to create the appearance of our blog entries when we open them. Again, we don&#8217;t do anything special in this case; we simply stack a picture, a title, and some text vertically and cover it with a ScrollView. SwiftUI will handle accessibility and dark mode as normal.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can see what our posts will look like inside when we open them in the picture below.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creating-the-final-screens\"><\/span><span style=\"font-weight: 400;\">Creating the final screens\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We can simply organize our primary components in the final screens as we like now that we have constructed them. We will only have two tabs on our app: Home, which will have a few featured and most recent articles, and See all, which will include a list of all blog entries.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The latter may be used to illustrate SwiftUI&#8217;s simplicity compellingly. All that remains to be done is to develop a NavigationView with a List that displays blog posts using a ForEach statement because we already have a store of our blog articles and a component to show them in the list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Currently on the Home screen. The Home screen will be divided into two sections: one for featured posts and the other for the most recent entries. The latter is quite straightforward and does not require much attention; all we do is utilize a horizontal ScrollView with the cards we created earlier and set a limit on the number of posts in the ForEach statement. The repository for this view contains the whole code.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The featured boolean field that we introduced to our content model in Contentful will now be used in relation to the featured posts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We may use a calculated property to filter all posts and return just those that have the featured field set to true in order to only get featured posts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The last step is to arrange our two screens using a TabView in the ContentView file and to establish a @StateObject for the blog posts store that will be employed by all child views.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That was it; our application is now prepared for usage!<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Over-to-you\"><\/span><span style=\"font-weight: 400;\">Over to you<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We quickly created a blog app with a content management system by using the instructions above. Here is the outcome we came to.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As we can see, SwiftUI makes it exceedingly simple to develop apps with intricate interfaces that easily adjust to various displays and appearance modes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By using this blog app as an example, you can also implement a feature that allows you to add fresh material to an existing application without having to publish the app itself. This feature is ideal for showing a variety of pictures, articles, or practical advice over time.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>New technologies frequently increase the complexity of the app development company, making coding less approachable for the general public. The contrary is typically true with SwiftUI, as the framework makes it quite simple to swiftly construct whole apps from scratch or iterate on design concepts through coding. We created and open-sourced a blog app that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5505,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[5],"tags":[51,160,179,178],"class_list":["post-5507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-ios-app-development-services","tag-ios-apps","tag-swift","tag-swiftui"],"featured_image_src":{"landsacpe":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1-1140x445.png",1140,445,true],"list":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1-463x348.png",463,348,true],"medium":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1-300x169.png",300,169,true],"full":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build Your Own Blog App With SwiftUI<\/title>\n<meta name=\"description\" content=\"Read How to Build Your Own Blog App With SwiftUI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Your Own Blog App With SwiftUI\" \/>\n<meta property=\"og:description\" content=\"Read How to Build Your Own Blog App With SwiftUI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-01T05:12:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-01T06:05:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build Your Own Blog App With SwiftUI","description":"Read How to Build Your Own Blog App With SwiftUI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Your Own Blog App With SwiftUI","og_description":"Read How to Build Your Own Blog App With SwiftUI","og_url":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-02-01T05:12:27+00:00","article_modified_time":"2023-02-01T06:05:33+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-50-1.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/","url":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/","name":"How to Build Your Own Blog App With SwiftUI","isPartOf":{"@id":"https:\/\/www.dianapps.com\/blog\/#website"},"datePublished":"2023-02-01T05:12:27+00:00","dateModified":"2023-02-01T06:05:33+00:00","author":{"@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Read How to Build Your Own Blog App With SwiftUI","breadcrumb":{"@id":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dianapps.com\/blog\/how-to-build-your-own-blog-app-with-swiftui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build Your Own Blog App With SwiftUI"}]},{"@type":"WebSite","@id":"https:\/\/www.dianapps.com\/blog\/#website","url":"https:\/\/www.dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/www.dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=5507"}],"version-history":[{"count":1,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5507\/revisions"}],"predecessor-version":[{"id":5510,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5507\/revisions\/5510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media\/5505"}],"wp:attachment":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=5507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=5507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=5507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}