{"id":27687,"date":"2023-09-26T17:31:54","date_gmt":"2023-09-26T15:31:54","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=27687"},"modified":"2023-09-26T17:31:54","modified_gmt":"2023-09-26T15:31:54","slug":"how-to-code-an-app","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-to-code-an-app\/","title":{"rendered":"How to Code an App for Beginners: A Complete Guide"},"content":{"rendered":"<p><strong>We spend a lot of time on our phones, and even more specifically, on TikTok. The <a href=\"https:\/\/www.statista.com\/topics\/1002\/mobile-app-usage\/#topicOverview\" target=\"_blank\" rel=\"noopener\">stats from Statista<\/a> can prove it. But have you ever wondered how things work behind the scenes to keep us entertained on apps such as, well, TikTok?<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Or how code becomes an app? Or whether you even need to code to make an app, especially now <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/ai-and-web-development\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">in the age of AI<\/span><\/a>, low\/no-code tools, and \u201cbots that can code\u201d?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Maybe you\u2019ve even thought of creating a \u201cTikTok\u201d of your own, reverse engineering the existing one, or even creating a \u201cbetter version\u201d without the issues that you might have come across.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we define an app, go through the basics of coding one, and show you step-by-step how to code an app from scratch.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We also talk about why learning by doing is a great approach and answer some questions you might still have about how to build an app from scratch.<\/span><\/p>\n<p>If you want to learn coding in general, build your first website in CareerFoundry&#8217;s <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\" target=\"_blank\" rel=\"noopener\"><strong>free 5-day short course<\/strong><\/a>.<\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-an-app\"><strong>What is an app?<\/strong><\/a>\n<ul>\n<li aria-level=\"2\"><a href=\"#types-of-app\"><span style=\"font-weight: 400;\">Types of app<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#mobile-apps-vs-web-apps\"><span style=\"font-weight: 400;\">Mobile apps vs web apps<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#why-coding-an-app-is-useful\"><span style=\"font-weight: 400;\">Why coding a mobile app is useful<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#understanding-the-basics-of-coding-a-mobile-app\"><strong>Understanding the basics of coding a mobile app<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#what-is-app-development\"><span style=\"font-weight: 400;\">What is app development?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#what-coding-language-is-used-for-mobile-apps\"><span style=\"font-weight: 400;\">What coding language is used for mobile apps?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#learning-the-basics-of-coding\"><span style=\"font-weight: 400;\">Learning the basics of coding<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-code-an-app-step-by-step-guide\"><strong>How to code an app: Step-by-step guide<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-one-plan\"><span style=\"font-weight: 400;\">Step One: Plan<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-two-design\"><span style=\"font-weight: 400;\">Step Two: Design<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-three-set-up-your-development-environment\"><span style=\"font-weight: 400;\">Step Three: Set up your development environment<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-four-write-unit-tests\"><span style=\"font-weight: 400;\">Step Four: Write unit tests<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-five-code-the-mobile-app\"><span style=\"font-weight: 400;\">Step Five: Code the mobile app<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-six-test\"><span style=\"font-weight: 400;\">Step Six: Test<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-seven-publish\"><span style=\"font-weight: 400;\">Step Seven: Publish<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#why-learning-by-doing-is-a-great-way-to-learn-to-code\"><strong>Why learning by doing is a great way to learn to code<\/strong><\/a><\/li>\n<li><a href=\"#how-to-code-an-app-faq\"><strong>How to code an app FAQ<\/strong><\/a><\/li>\n<\/ol>\n<h2 id=\"what-is-an-app\"><span style=\"font-weight: 400;\">1. What is an app?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">An &#8220;app,&#8221; which is short for &#8220;application,&#8221; is software that\u2019s designed to carry out specific functions and that runs on a device.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A banking app is designed to help customers access financial services, while a dating app helps users connect with people they might want to go out with. A gaming app\u2014surprise surprise\u2014allows you to play a game.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apps bundle features together, making them accessible to users. For example, you can create an account on a dating app, build a profile, and include the specifications that you want in an ideal partner.\u00a0<\/span><\/p>\n<h3 id=\"types-of-app\" style=\"font-weight: 400;\">Types of app<\/h3>\n<p><span style=\"font-weight: 400;\">There are different types of apps, categorized based on the platforms they\u2019re built to run on:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Native<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hybrid<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Web<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Desktop<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Progressive web apps<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s briefly look at each of these:<\/span><\/p>\n<h4>Native apps<\/h4>\n<p><span style=\"font-weight: 400;\">These are built to run on specific mobile operating systems (OSs). There are two mobile OSs: iOS (for iPhones and iPads) and Android.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apps built for iOS, for example, can\u2019t function on Android\u2014you\u2019ll need to install a native app on your smartphone or mobile device before you can use it. You\u2019ll find native apps in app stores (the iOS App Store and the Android Play Store).<\/span><\/p>\n<h4>Hybrid apps<\/h4>\n<p><span style=\"font-weight: 400;\">These can run on both iOS and Android. Like native apps, you can find them in app stores. The entire or part of the app displays web content when you launch a hybrid app.\u00a0<\/span><\/p>\n<h4>Web apps<\/h4>\n<p><span style=\"font-weight: 400;\">These are accessed via a browser and aren\u2019t device or platform-specific. You need to be connected to the internet to interact with web apps.\u00a0<\/span><\/p>\n<h4>Desktop apps<\/h4>\n<p><span style=\"font-weight: 400;\">As the name suggests, these are installed on computers. They\u2019re built to run on the computer\u2019s OS, for example, Linux, Windows, or MacOS. They\u2019re usually not OS compatible, and you need to install the particular version built for your OS.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Desktops apps may require internet access or not. For example, Microsoft Word doesn\u2019t require internet access to use it. You do, however, need to be connected to the internet to access more font options, though.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Others, like the Spotify desktop app, require an internet connection to stream music or podcasts.<\/span><\/p>\n<figure id=\"attachment_29088\" aria-describedby=\"caption-attachment-29088\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29088\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/spotify-desktop-app.png\" alt=\"An image of a laptop with the Spotify desktop app open on it.\" width=\"1200\" height=\"459\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/spotify-desktop-app.png 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/spotify-desktop-app-300x115.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/spotify-desktop-app-1024x392.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/spotify-desktop-app-768x294.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-29088\" class=\"wp-caption-text\"><em>Source<\/em>: <a href=\"https:\/\/newsroom.spotify.com\/2021-03-25\/introducing-a-new-spotify-experience-across-desktop-app-and-web-player\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Spotify<\/span><\/a><\/figcaption><\/figure>\n<h4>Progressive web apps<\/h4>\n<p><span style=\"font-weight: 400;\">Also known as PWAs, these are, in essence, web apps. However, they\u2019re geared towards a <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/what-is-user-experience-ux-design-everything-you-need-to-know-to-get-started\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">user experience (UX)<\/span><\/a><span style=\"font-weight: 400;\"> that\u2019s akin to that of native apps on the web.<\/span><\/p>\n<p>A good example of a progressive web app would be the social magazine <a href=\"https:\/\/flipboard.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Flipboard<\/span><\/a>, which manages to transfer its excellent mobile experience across onto the browser.<\/p>\n<figure id=\"attachment_29089\" aria-describedby=\"caption-attachment-29089\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29089 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/flipboard-progressive-web-app.png\" alt=\"Screenshot from Flipboard progressive web app.\" width=\"1200\" height=\"653\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/flipboard-progressive-web-app.png 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/flipboard-progressive-web-app-300x163.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/flipboard-progressive-web-app-1024x557.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/flipboard-progressive-web-app-768x418.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-29089\" class=\"wp-caption-text\"><em>Source<\/em>: <a href=\"https:\/\/flipboard.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Flipboard<\/span><\/a><\/figcaption><\/figure>\n<h3 id=\"mobile-apps-vs-web-apps\"><span style=\"font-weight: 400;\">Mobile apps vs web apps<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s spend a little more time on mobile and web apps.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Web and mobile apps have a lot of similarities. This is because web apps are optimized to \u201cfit&#8221; the screen size on which you view them. This is known as &#8220;<strong>responsiveness<\/strong>.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll therefore see the same content when you view the same brand\u2019s web or mobile app. For example, your WhatsApp messages look the same on your phone and on a laptop when you use WhatsApp Web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are, however, a few differences. For example, on your mobile device, the placement of the message icon is different from the web version.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apart from the miniature differences in the way content is displayed on the web and in mobile apps, there are bigger distinctions between the two.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Speed<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Mobile apps tend to be faster than web apps, especially when you view the latter on a mobile device. This is because mobile apps are optimized to run on a specific OS and even hardware.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Technologies<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Mobile apps are built using specific programming languages, depending on the platforms on which they run. iOS apps are created using <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/intro-to-swift\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Swift<\/span><\/a><span style=\"font-weight: 400;\"> and Objective-C, while their Android counterparts are written in Kotlin and Java.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hybrid apps are built with web technologies like HTML, CSS, and JavaScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Known as the building blocks of the web, you can start learning how to use these languages in CareerFoundry\u2019s <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\"><b>free coding short course<\/b><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These apps are then \u201cpackaged\u201d into native apps via <\/span><a href=\"https:\/\/reactnative.dev\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">React Native<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/cordova.apache.org\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Apache Cordova<\/span><\/a><span style=\"font-weight: 400;\">. You can also use <\/span><a href=\"https:\/\/flutter.dev\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Flutter<\/span><\/a><span style=\"font-weight: 400;\"> to build apps that run on both iOS and Android.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Flutter is based on another programming language, Dart. It\u2019s a toolkit or <\/span><a href=\"https:\/\/www.redhat.com\/en\/topics\/cloud-native-apps\/what-is-SDK\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">software development kit (SDK)<\/span><\/a><span style=\"font-weight: 400;\">, which is \u201cpackaged\u201d with code, tools, libraries, and customizable widgets to make it easier to \u201cconvert\u201d your hybrid app to a native app.<\/span><\/p>\n<p><strong>Learn more: <\/strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-the-difference-between-a-mobile-app-and-a-web-app\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">What&#8217;s the Difference Between a Mobile App and a Web App?<br \/>\n<\/span><\/a><\/p>\n<h3 id=\"why-coding-an-app-is-useful\"><span style=\"font-weight: 400;\">Why coding a mobile app is useful<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Why would brands need mobile apps if they already have websites, web apps, or even desktop apps?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A lot of businesses use what\u2019s called an &#8220;omnichannel approach.&#8221; This is where they aim to reach their customers across multiple platforms, including mobile, web, and even in person.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition, mobile apps allow for:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Ease of access<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">It\u2019s easier to use an app while on the move, for example, your banking app to make a transaction, than having to type in your bank\u2019s name, access internet banking, and then log in. Some native apps can be used offline too, making them more accessible to your users.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Easier communication<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Brands can easily send push notifications to a customer\u2019s mobile device. This way, customers can be informed about offers and discounts, for example. They can then promptly take the appropriate action.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Better UX<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Native apps could give a user a better UX on mobile because they can take advantage of the particular OS that they\u2019re built for. Apps can also access phone features better, for example, the camera that customers can use to scan QR codes.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Customer acquisition<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Brands can also use mobile apps to acquire new customers, increasing revenue.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Is it useful to know how to code a mobile app as a web developer?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">By all means, yes. Knowing how to code a mobile app as a web developer means that you have a more diverse skillset. You can take advantage of opportunities to build mobile apps too.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Since businesses sometimes have both web and mobile apps, being able to build both means that you can create better user experiences on both platforms and also be paid more for your skills and knowledge.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also help businesses integrate the two apps to create seamless <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/what-is-a-user-interface\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">user interfaces (UIs)<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2 id=\"understanding-the-basics-of-coding-a-mobile-app\"><span style=\"font-weight: 400;\">2. Understanding the basics of coding a mobile app<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You have an amazing idea. It might even be the <\/span><a href=\"https:\/\/www.techadvisor.com\/article\/738783\/what-is-a-tech-unicorn-and-where-did-the-term-come-from.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">next tech unicorn<\/span><\/a><span style=\"font-weight: 400;\">, or Fortnite. But before you start learning how to code an app, there are things you need to keep in mind.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s important to consider the purpose of building the app, the intended audience, the platforms on which the app will run, your or your team\u2019s skillset, and the user experience.<\/span><\/p>\n<h3 id=\"what-is-app-development\"><span style=\"font-weight: 400;\">What is app development?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">App development is simply the process of creating software that runs on a mobile device. It begins with preliminary steps such as understanding the goal, the platform on which the app will run, the type of app you want to build, and the skills you or your team possess.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, define your experience and navigation, as well as other supportive tools you\u2019ll need, for example, for collaboration and communication. This will help you stay on track.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ultimately, once the app is complete, it\u2019s time to test it. You can also ask your users for feedback and keep improving the app.<\/span><\/p>\n<h3 id=\"what-coding-language-is-used-for-mobile-apps\"><span style=\"font-weight: 400;\">What coding language is used for mobile apps?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are various programming languages used to code mobile apps, depending on the type of mobile app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As I mentioned earlier, native apps built to run on iOS are created using Swift and Objective-C, while native apps built to run on Android are coded using Java and Kotlin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Hybrid apps<\/strong> are built using web technologies like HTML, CSS, and JavaScript. You can use a framework like React Native to achieve &#8220;native-level performance.&#8221;\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s important to note that you can use <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/a-beginners-guide-to-the-10-most-popular-programming-languages\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">other programming languages<\/span><\/a> that we haven\u2019t mentioned here to build apps, but there may be more hurdles to overcome.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that we know what programming languages to use to build a web app, what are some coding basics that you need to learn?<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4596\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/fixedfcoding_office-min.png\" alt=\"Woman coding on a laptop attached to a monitor.\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/fixedfcoding_office-min.png 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/fixedfcoding_office-min-300x150.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/fixedfcoding_office-min-1024x512.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/fixedfcoding_office-min-768x384.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3 id=\"learning-the-basics-of-coding\"><span style=\"font-weight: 400;\">Learning the basics of coding<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Obviously before you learn how to code an app, you&#8217;ll have to learn how to code.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While you might want to start your app-coding journey by building a native app, the learning curve might be extremely steep and arduous.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A friendlier learning curve to get you equipped with the basics of coding is starting with web development languages like JavaScript and frontend technologies like HTML and CSS.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is why the <\/span><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/courses\/become-a-web-developer\/\" target=\"_blank\" rel=\"noopener\">CareerFoundry Full-Stack Development Program<\/a><\/strong><span style=\"font-weight: 400;\"> starts by teaching you these technologies with the help of a tutor and mentor, before moving on to more complex areas of web and software development.<\/span><\/p>\n<h2 id=\"how-to-code-an-app-step-by-step-guide\"><span style=\"font-weight: 400;\">3. How to code an app: Step-by-step guide<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When you build an app from scratch, you\u2019ll be going through what\u2019s known as the <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-sdlc\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">software development life cycle<\/span><\/a><span style=\"font-weight: 400;\"> (SDLC), which begins with planning and ends with deployment and maintenance.\u00a0<\/span><\/p>\n<h3 id=\"step-one-plan\"><span style=\"font-weight: 400;\">Step One: Plan<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We\u2019ve already come across some initial steps that you need to take when building an app. We\u2019ve talked about:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Defining a goal for your app<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choosing the type of app to build<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Defining the app\u2019s audience<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choosing the platform\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Deciding on the technologies<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Identifying the skillset that you have as an individual or as a team<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Determining your app\u2019s UX and navigation<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In addition, you need to create a project requirements document.<\/span><\/p>\n<h4>Project requirements<\/h4>\n<p><span style=\"font-weight: 400;\">As you mapped out your app\u2019s layout and UI, you hopefully gained more insights into the specific items that you need to build to achieve functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These items are referred to as &#8220;features.&#8221; For example, you\u2019d need a search button for a user to enter the type of job they\u2019re looking for in our student job app project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition to the features, we\u2019d also need to determine the tasks that we need to carry out to successfully build the student app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An app project requirements document (PRD) needs to be concise but should contain enough details. You can learn more about them in our <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/product-management\/prd-meaning\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">product manager\u2019s guide to the PRD<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4>What to include in your project requirements document<\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The goal you intend to achieve with your app<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App features and user stories<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">User flow<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Technologies to use<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Assumptions and constraints<\/span><\/li>\n<\/ol>\n<p><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/product-management\/user-stories-guide\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">User stories<\/span><\/a><span style=\"font-weight: 400;\"> are features that are more user-focused. For example, instead of saying, \u201cCreate a search button for users to enter the job they\u2019re looking for,&#8221; you can say: \u201cAs Jamie, I want to be able to enter the job I\u2019m looking for.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User stories are a preferred approach as they keep the focus on <strong>the end user<\/strong>. As a mobile app developer, you need to keep your end user in mind at all times. This way, you\u2019ll learn how to code an app with a great UX.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User stories are part of the <\/span><a href=\"https:\/\/www.atlassian.com\/agile\/scrum\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Scrum framework<\/span><\/a><span style=\"font-weight: 400;\">, which is part of the Agile philosophy. An \u201cagile\u201d approach to development makes teams better poised to achieve their goals as they can better estimate their sprints.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve defined your project requirements, it\u2019s easier to define particular goals to achieve.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can then use project management tools like <\/span><a href=\"https:\/\/www.atlassian.com\/software\/jira\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Jira<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/www.notion.so\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Notion<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/asana.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Asana<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/trello.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Trello<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a href=\"https:\/\/clickup.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ClickUp<\/span><\/a><span style=\"font-weight: 400;\"> to keep tabs on your project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you choose to use the scrum approach, you\u2019ll begin with a backlog of a number of features to be built. You then choose the number of features to build within a single sprint, for example, 2 weeks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can then create a workflow like \u201cIn Progress\u201d, \u201cReview\u201d and \u201cDone\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can estimate how much time each task will take so as to stay on track.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In our app example, a feature like having a button to type the job a user is looking for might seem like a simple thing to build at face value.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, if you break it down further, you\u2019ll have more tasks, like:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Showing successful results after a user clicks \u201center\u201d or is done typing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Showing a \u201cfailed\u201d message if there are no jobs that match their criteria<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">To show results, you need to think about where the data is coming from. Is it from a database <\/span><a href=\"https:\/\/aws.amazon.com\/what-is\/api\/#:~:text=API%20stands%20for%20Application%20Programming,other%20using%20requests%20and%20responses.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">or from an API<\/span><\/a><span style=\"font-weight: 400;\">?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If from an API, then you need to do an API integration. If from a database, then you need to connect a database to your project.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One feature could take an entire sprint.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you have a task like \u201cAPI integration,&#8221; you need to move it to \u201cin progress\u201d when you start working on it and then to \u201creview\u201d or \u201cdone\u201d when you finish.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This way, everyone on the team can see the project\u2019s progress. Even if you\u2019re building the app by yourself, you\u2019re able to keep track of your progress.<\/span><\/p>\n<h3 id=\"step-two-design\"><span style=\"font-weight: 400;\">Step Two: Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Before building an app, you need to design it. You can use a pen and paper. This is known as &#8220;paper wireframing.&#8221; You can also use a whiteboard.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A wireframe is the \u201cskeleton\u201d of what your app will look like eventually. The following image shows a wireframe.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6277\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/Animation-designer-day-in-the-life.jpg\" alt=\"A designer sketching out wireframes\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/Animation-designer-day-in-the-life.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/Animation-designer-day-in-the-life-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/Animation-designer-day-in-the-life-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/07\/Animation-designer-day-in-the-life-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">As you do this, your users\u2019 flow through the app will become clearer.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Begin with your \u201chome screen.&#8221; This is the first screen that your users will see. When building an app to help students in your area get part-time jobs, your home screen might ask the students to choose the kind of job they\u2019re looking for, for example.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After they choose the job, the next screen might list the jobs available. Remember, there might be no jobs available. So you need to factor in an extra screen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve drafted your wireframe on paper, or at least your users\u2019 flow through your app, you can use a tool like <\/span><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><span style=\"font-weight: 400;\"> to create a design for your app. There are a whole range of <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/website-app-wireframe-examples\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">wireframe examples and templates<\/span><\/a><span style=\"font-weight: 400;\">, out there to be inspired by.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note that you might opt to create your wireframe directly on Figma instead of first mapping it out on paper, and that\u2019s just fine!.There are also other tools that you can use for wireframing, like <\/span><a href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">InVision<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/www.lucidchart.com\/pages\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Lucidchart<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a href=\"https:\/\/whimsical.com\/wireframes\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Whimsical<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3 id=\"step-three-set-up-your-development-environment\"><span style=\"font-weight: 400;\">Step Three: Set up your development environment\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">So, you\u2019ve already listed the technologies that you need to build your app. You need to ensure that you\u2019ve installed them in your coding environment.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re building for Android, you need, for example, to have <\/span><a href=\"https:\/\/developer.android.com\/studio\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Android Studio<\/span><\/a><span style=\"font-weight: 400;\"> installed. You also need to install some APIs in Android Studio and the Android SDK as well.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, choose the Android version you want React Native to support.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Install an emulator, which you\u2019ll use to test your app. You could use a real Android device too, or even Android Studio emulators. Installing one is recommended, though. <\/span><a href=\"https:\/\/www.genymotion.com\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Genymotion<\/span><\/a><span style=\"font-weight: 400;\"> is a good emulator.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When using a Macbook, you can install Android Studio as well as Genymotion.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also need to install the react-native command line interface (CLI) and its dependencies, like <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-nodejs\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Node.js<\/span><\/a> (version 4.0 or later).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also install Xcode if you want to set up native iOS SDKs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><a href=\"https:\/\/docs.expo.dev\/more\/expo-cli\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">expo-cli<\/span><\/a><span style=\"font-weight: 400;\"> is highly recommended if you\u2019re new to React Native. It will make setting up React Native a bit easier. It will also help you test your app when you\u2019re done building it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re absolutely new to React Native, you can also use <\/span><a href=\"https:\/\/reactnative.dev\/docs\/getting-started.html\" rel=\"noopener\"><span style=\"font-weight: 400;\">Create React Native<\/span><\/a><span style=\"font-weight: 400;\">, which is the app\u2019s equivalent of <\/span><a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Create React App<\/span><\/a><span style=\"font-weight: 400;\"> for web apps.\u00a0<\/span><\/p>\n<h3 id=\"step-four-write-unit-tests\"><span style=\"font-weight: 400;\">Step Four: Write unit tests<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Writing unit tests is a great industry practice that will help you later on when you begin to work for a company or even take on freelance projects.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s recommended that you write unit tests before you begin coding your app. This makes it easier for you to identify errors and bugs and fix them as early as possible.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unit tests focus on testing small pieces of code, for example, functions, objects, classes, or methods.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In fact, React Native comes with a testing framework called \u201cJest\u201d preinstalled. You can also use other testing frameworks like <\/span><a href=\"https:\/\/mochajs.org\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Mocha<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/jasmine.github.io\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Jasmine<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some best practices to keep in mind when writing unit tests are that you should only test a single thing and that tests should be readable and maintainable.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can learn more about tests in <\/span><a href=\"https:\/\/reactnative.dev\/docs\/testing-overview#:~:text=Writing%20Testable%20Code%E2%80%8B,are%20safe%20and%20function%20correctly.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">React Native\u2019s documentation<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Congratulations\u2014you&#8217;re now all set to start writing your app\u2019s code!<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-460\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/what_is_python_used_for.jpg\" alt=\"Two data analysts looking at code on a computer screen\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/what_is_python_used_for.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/what_is_python_used_for-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/what_is_python_used_for-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/what_is_python_used_for-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3 id=\"step-five-code-the-mobile-app\"><span style=\"font-weight: 400;\">Step Five: Code the mobile app<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Beginning with the first task that you defined, you can begin to write code. Some best practices that you need to follow here include backing up your code on <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-github\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GitHub<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/bitbucket.org\/product\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Bitbucket<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This way, if anything happened to your code, you could still retrieve it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Code repositories like GitHub are also great for collaboration.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You need to keep track of the latest changes you&#8217;ve made to your project, something referred to as &#8220;<\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/whats-version-control-and-why-do-i-need-it\/\"><span style=\"font-weight: 400;\">version control<\/span><\/a><span style=\"font-weight: 400;\">&#8221; or &#8220;source control.&#8221; For this, you can install a version control system like <\/span><a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Git<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you write your code, you\u2019re likely to make mistakes. Some of those mistakes may cause malfunctions in your app.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You, therefore, want to find those mistakes and fix them, a concept referred to as &#8220;<\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-debugging\/\"><span style=\"font-weight: 400;\">debugging<\/span><\/a><span style=\"font-weight: 400;\">.&#8221;\u00a0 In order to do this, you can use <\/span><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" rel=\"noopener\"><span style=\"font-weight: 400;\">Chrome DevTools<\/span><\/a><span style=\"font-weight: 400;\">, which you can find on your browser, or debug on <\/span><a href=\"https:\/\/reactnative.dev\/docs\/debugging#android-studio\" rel=\"noopener\"><span style=\"font-weight: 400;\">Android Studio<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/reactnative.dev\/docs\/debugging#android-studio\" rel=\"noopener\"><span style=\"font-weight: 400;\">Xcode<\/span><\/a><span style=\"font-weight: 400;\">. You can also use <\/span><a href=\"https:\/\/github.com\/jhen0409\/react-native-debugger\" rel=\"noopener\"><span style=\"font-weight: 400;\">react-native-debugger<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3 id=\"step-six-test\"><span style=\"font-weight: 400;\">Step Six: Test<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In addition to writing and running unit tests, you also need to test your app after every sprint. This ensures that you catch any bugs and fix them before moving to the next sprint.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also need to test your app at the end, when it\u2019s fully functional, to ensure that you met your users\u2019 needs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a result, we have two types of testing: <strong>integration testing<\/strong> and <strong>component testing<\/strong>.<\/span><\/p>\n<h4>Integration testing<\/h4>\n<p><span style=\"font-weight: 400;\">In integration testing, you check whether different components of our app work in sync. You might find, for example, that an outdated dependency creates an error in another part of your app.<\/span><\/p>\n<h4>Component testing<\/h4>\n<p><span style=\"font-weight: 400;\">Component testing involves checking whether your app does what the user intends it to. For example, if they type in a job that they\u2019re looking for and hit enter, do they see the expected results?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In component testing, we also check how the UI renders. Are the buttons too big, or wrongly placed on the user\u2019s screen?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ultimately, you need to see your app in action. You can use <a href=\"https:\/\/www.techopedia.com\/definition\/30676\/mobile-emulator\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">an emulator<\/span><\/a> or a real mobile device. It\u2019s useful to note that with emulators, you might miss some details about the app\u2019s performance on a mobile device or even UI interactions when a user takes an action.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is because the processors on laptops and devices are different, resulting in poor emulations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Emulators also take up considerable disk space, which causes your devices to lag and your emulators to crash.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That isn\u2019t to say that emulators can&#8217;t be used for testing. They should, however, help with debugging rather than testing for production.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React Native recommends <a href=\"https:\/\/www.genymotion.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Genymotion<\/span><\/a>. You can also use the free Android Studio emulator, or simulator, on XCode.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To be safe, you can use both an emulator or simulator and a real mobile device.\u00a0<\/span><\/p>\n<h3 id=\"step-seven-publish\"><span style=\"font-weight: 400;\">Step Seven: Publish<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You\u2019ve worked really hard, and you\u2019re now ready to share your work with your users. To make the app accessible to users, you need to publish it on the Google Play Store and App Store, if your users are on both Android and iOS.<\/span><\/p>\n<h4>Publishing on the Google Play Store<\/h4>\n<h5>Step 1: Create a Google Play Store account<\/h5>\n<p><span style=\"font-weight: 400;\">First, you need to create a Google Play Store account. To do this, you need a Google account, which you probably already have if you use Gmail or, well, pretty much anything these days.<\/span><\/p>\n<h5>Step 2: Digitally sign your app<\/h5>\n<p><span style=\"font-weight: 400;\">You then need to digitally sign your app using a release key. You can use <\/span><a href=\"https:\/\/developer.android.com\/studio\/publish\/app-signing#app-signing-google-play\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Play App Signing<\/span><\/a><span style=\"font-weight: 400;\"> to allow Google to manage your signing key, keep it safe, and use it to sign your app\u2019s APK (Android Package Kit).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google distributes and installs your app as a <strong>.apk<\/strong> <strong>file<\/strong>.<\/span><\/p>\n<h5>Step 3: Generate an upload key<\/h5>\n<p><span style=\"font-weight: 400;\">Next, you need to generate an upload key. Google uses it to upload your app to the Play Store. You can use <\/span><a href=\"https:\/\/developer.android.com\/studio\/publish\/app-signing\" rel=\"noopener\"><span style=\"font-weight: 400;\">keytool<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can learn more about upload keys on <\/span><a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">React Native\u2019s official documentation page<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, you need to <\/span><a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android#setting-up-gradle-variables\" rel=\"noopener\"><span style=\"font-weight: 400;\">update the Gradle files<\/span><\/a><span style=\"font-weight: 400;\"> to include keystore information. The keystore is where your keys are stored.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Including keystore information allows your app to be signed with it.<\/span><\/p>\n<h5>Step 4: Generate the release build<\/h5>\n<p><span style=\"font-weight: 400;\">Next,<\/span> <a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android#:~:text=Generating%20the%20release%20AAB%E2%80%8B&amp;text=The%20generated%20AAB%20can%20be,on%20the%20Google%20Play%20Console.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">generate the release build<\/span><\/a><span style=\"font-weight: 400;\">. This is a production-ready build for Android, which simply means that we\u2019re packaging our app in a format that the app store can work with to allow users to install it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our app will be generated in a format known as <\/span><a href=\"https:\/\/developer.android.com\/guide\/app-bundle\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Android App Bundles<\/span><\/a><span style=\"font-weight: 400;\"> (AAB). The AAB format helps Google generate optimized APKs, allowing for smaller app sizes across different device specifications.<\/span><\/p>\n<h5>Step 5: Testing<\/h5>\n<p><span style=\"font-weight: 400;\">Before you upload the release build, you need to <\/span><a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android#testing-the-release-build-of-your-app\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">test it<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also use a tool like <\/span><a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android#publishing-to-other-stores\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Proguard<\/span><\/a><span style=\"font-weight: 400;\"> to reduce the size of your APK.<\/span><\/p>\n<h5>Step 6: Gather your app information<\/h5>\n<p><span style=\"font-weight: 400;\">The last step is to come up with your app&#8217;s information. Here is a short list of the app information you need to publish your app on the Play Store:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App name<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App description<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App screenshots<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App version<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bundle ID. This is your app\u2019s unique identifier. Its format is \u201c<\/span><span style=\"font-weight: 400;\">com.company.appname.\u201d \u201cCompany\u201d is the company\u2019s or publisher\u2019s name and \u201cappname\u201d is the app\u2019s name.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Developer or publisher profile.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">That\u2019s it for the Google Play Store. You\u2019re home free!<\/span><\/p>\n<h4>Publishing on the Apple App Store<\/h4>\n<h5>Step 1: Create an Apple Developer Account<\/h5>\n<p><span style=\"font-weight: 400;\">First, you need to create an\u00a0<\/span><a href=\"https:\/\/developer.apple.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Apple Developer Account<\/span><\/a><span style=\"font-weight: 400;\"> and enroll in the Apple Developer Program. Note that<strong> this is a paid program with an annual fee of $99<\/strong>.<\/span><\/p>\n<h5>Step 2: Use Expo<\/h5>\n<p><span style=\"font-weight: 400;\">Use <\/span><a href=\"https:\/\/expo.dev\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Expo<\/span><\/a><span style=\"font-weight: 400;\"> to make it easier to publish your app on the app store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also need to sign up for an Expo account and install Expo Application Services.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, adjust some settings in your app, like your app name and slug.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The next step is to configure your project using Expo in your terminal.\u00a0<\/span><\/p>\n<h5>Step 3: Configure your project<\/h5>\n<p><span style=\"font-weight: 400;\">Create your app\u2019s build by simply running an expo command on your terminal. Add a bundle identifier that will be used to uniquely identify your app.<\/span><\/p>\n<h5>Step 4: Set up your app on the App Store<\/h5>\n<p><span style=\"font-weight: 400;\">Next, create and set up your app on <\/span><a href=\"https:\/\/appstoreconnect.apple.com\/login\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">App Store Connect<\/span><\/a><span style=\"font-weight: 400;\">. You can use the same credentials as your Apple Developer account.\u00a0<\/span><\/p>\n<figure id=\"attachment_29114\" aria-describedby=\"caption-attachment-29114\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29114 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/apple-app-store-example.png\" alt=\"A screenshot showing an app in the Apple App Store.\" width=\"1200\" height=\"694\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/apple-app-store-example.png 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/apple-app-store-example-300x174.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/apple-app-store-example-1024x592.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/09\/apple-app-store-example-768x444.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-29114\" class=\"wp-caption-text\">An example of the screenshots and information needed for the App Store. <em>Source:<\/em> <a href=\"https:\/\/www.apple.com\/app-store\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Apple App Store<\/span><\/a><\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Add app information and screenshots. You can use screenshots from your simulator. Just like on the Play Store, you need to add details like:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App promotional text (appears above your app\u2019s description)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App description<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Keywords<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Support URL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App version<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Copyright<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You also need to provide app review information that testers will use. You may also need to provide sign-in details and contact information in the event that the tester needs to contact you.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ensure that all the necessary app details are filled in, including pricing and a privacy policy. <strong>You need to specify pricing even if your app is free.<\/strong><\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are <a href=\"https:\/\/www.app-privacy-policy.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">online generator tools<\/span><\/a> that you can use to generate a privacy policy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Choose whether you want to release your app manually after it has been approved or automatically. You can specify the release date for an automatic release.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Before submitting your build to App Store Connect, you need to update details like ascAppId, which is your application ID under your app information.\u00a0<\/span><\/p>\n<h5>Step 5: Build<\/h5>\n<p><span style=\"font-weight: 400;\">We can then run a command to submit your build to App Store Connect. Generate a key and log in to your Apple Developer account.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wait for the build to complete.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, add compliance to your app. If it doesn\u2019t use any encryption, choose internal testing.<\/span><\/p>\n<h5>Step 6: Submit your app for review<\/h5>\n<p><span style=\"font-weight: 400;\">You\u2019re now ready to submit your app for review by Apple. The review process takes around 24 hours. Fingers crossed.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also use <\/span><a href=\"https:\/\/reactnative.dev\/docs\/publishing-to-app-store#:~:text=Click%20on%20App%20Store%20Connect,Click%20on%20Upload%20.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Xcode to publish your app to the app store<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your app is approved, then your iOS users can access it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s now time to celebrate your hard work! Your app is live on the Play Store and the App Store!<\/span><\/p>\n<figure id=\"attachment_812\" aria-describedby=\"caption-attachment-812\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-812 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/how-to-design-mobile-app-ui-like-a-professional.jpg\" alt=\"a designer holding up a smartphone, looking at the screen\" width=\"1200\" height=\"600\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/how-to-design-mobile-app-ui-like-a-professional.jpg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/how-to-design-mobile-app-ui-like-a-professional-300x150.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/how-to-design-mobile-app-ui-like-a-professional-1024x512.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/01\/how-to-design-mobile-app-ui-like-a-professional-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-812\" class=\"wp-caption-text\">See if you can improve on this app.<\/figcaption><\/figure>\n<h2 id=\"how-to-code-an-app-faq\"><span style=\"font-weight: 400;\">4. How to code an app FAQ<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In this section, we answer some questions you might still have regarding how to code an app.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Is it hard to code a mobile app?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Coding a mobile app might seem difficult, especially when you\u2019re a beginner. However, once you acquire some <strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\" target=\"_blank\" rel=\"noopener\">basic coding skills<\/a><\/strong>, you can learn how to code functional apps with great user experiences.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How much does it cost to code a mobile app?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">It all depends on who\u2019s building it and the tools you choose to use. If you\u2019re building it, then it will cost you time. If you place a monetary value on your time, you can calculate the cost.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you hire other people to do it, they\u2019ll charge you based on their experience level. The top app developers on Upwork charge between $54 and $100 per hour.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you hire a company to do it, they\u2019ll charge you based on their rates, how fast you want the app developed, and the number of people on the project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The tools you use will also determine your cost. You might choose to pay for some tools, which will increase the cost of building your app. Publishing your app on the app store means that you get to pay the Apple Developer Program&#8217;s annual fee of 99 USD.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Can I code a mobile app with Python?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Yes, you can build an app from scratch with Python, using packages like <\/span><a href=\"https:\/\/github.com\/kivy\/kivy\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Kivy<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/wiki.python.org\/moin\/PyQt\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">PyQt<\/span><\/a><span style=\"font-weight: 400;\">, and the <\/span><a href=\"https:\/\/github.com\/beeware\/toga\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Toga library<\/span><\/a><span style=\"font-weight: 400;\">. Among these, Kivy is the most recommended, as it gives users the same UI no matter the platform that they use to access your app. You won\u2019t also need to compile your code every time you make changes.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Which platforms are best to create a mobile app?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Each platform is \u201cbest\u201d depending on the type of app you\u2019re building. You can build native iOS apps using XCode and native Android apps using Android Studio. You can also build hybrid apps in Android Studio. Other tools like Expo and Flutter make it easier to build hybrid apps for both iOS and Android.\u00a0<\/span><\/p>\n<h2 id=\"why-learning-by-doing-is-a-great-way-to-learn-to-code\"><span style=\"font-weight: 400;\">5. Why learning by doing is a great way to learn to code<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It might seem like a paradox to say that <strong>learning by doing is the best way to lear<\/strong>n. Don\u2019t you need to learn something first before you can do it?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, there are basics that you need to learn to lay a good foundation for your learning. For example. <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-long-does-it-take-to-learn-javascript\/\" target=\"_blank\" rel=\"noopener\">You&#8217;ll need to learn JavaScript\u2019s syntax<\/a> before learning React. However, once you\u2019ve learned the basics, you need to build an app from scratch, which is the best way to learn.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you start to build a project, you\u2019ll be taking the acquired knowledge and skills and applying them to a particular use case. It\u2019s more taxing than just recalling what you\u2019ve learned.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll come across challenges as you try to implement a solution like building an app. You might need to review the learned concepts and do research on how others have solved the problem that you currently face.<\/span><\/p>\n<p>This is all part of learning how to code an app, and trust me, it&#8217;ll be worth it in the long run.<\/p>\n<p><span style=\"font-weight: 400;\">Why? In the end, you\u2019ll be a better developer, as you\u2019ll understand not only the concepts but also how to execute them in different situations and environments to solve problems.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>A true problem solver is the mark of a great developer<\/strong>, and it\u2019s really what companies and individuals are looking for. Someone to help them find solutions and implement them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s much easier to land a client or job when you can show that you not only understand the concepts, but can also implement them. This is why <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/web-developer-portfolio\/\" target=\"_blank\" rel=\"noopener\">web developer portfolios<\/a> are such an important part of a coder&#8217;s application materials.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">6. How to code an app: Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019ve taken the seemingly long journey of learning how to code an app. The important thing to remember is to take it one step at a time. All the coding steps aren\u2019t to be done in a single sitting.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Break them up into smaller, manageable steps, and you\u2019ll be amazed at the progress you\u2019ll have made over a few weeks or even months, depending on how complex your project is and your skillset.<\/span><\/p>\n<p>Think designing, building, testing, and publishing an app is too big a challenge for you right now? Then CareerFoundry&#8217;s <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\" target=\"_blank\" rel=\"noopener\"><strong>free 5-day web development short course<\/strong><\/a> is a more gentle learning curve. In some video lessons, you&#8217;ll learn to build a responsive website with the languages HTML, CSS, and JavaScript.<\/p>\n<p>If you&#8217;d like to read more about the world of coding, check out these articles:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/is-coding-hard-to-learn\/\">Is HTML Hard to Learn?<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/rubber-duck-debugging\/\">Rubber Duck Debugging: A Beginner&#8217;s Guide<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/chatgpt-coding-prompts\/\">7 Great Coding Prompts for ChatGPT: A Beginner\u2019s Guide<\/a><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how to code an app, starting at the very start. Pro coder Agnes teaches us how to build a mobile app from scratch and then publish it.<\/p>\n","protected":false},"author":137,"featured_media":29116,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-27687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/27687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/137"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=27687"}],"version-history":[{"count":10,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/27687\/revisions"}],"predecessor-version":[{"id":27951,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/27687\/revisions\/27951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/29116"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=27687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=27687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=27687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}