Building Your First iOS App with JavaScript

  • Published on
    15-Apr-2017

  • View
    60

  • Download
    1

Embed Size (px)

Transcript

<ul><li><p>Building Your First iOS App with JavaScript </p><p>With the increase in usage of mobile devices, web applications have </p><p>become more powerful these days. In fact, many organizations </p><p>considering a mobile app for the growth of their business and for </p><p>improving conversion rate. </p><p>Generally, we have four ways to build a mobile app such as: </p><p>1. native iOS </p><p>2. native Android </p><p>3. PhoneGap </p><p>4. Appcelerator Titanium </p><p>Even though we have already learned a lot in iOS development. But </p><p>being a developer, we always want to develop something cool and </p><p>useful. In this article, we will discuss the whole new idea of building </p><p>mobile apps with JavaScript, which require significant amount of learning </p></li><li><p>as the web development industry is always changing. Also, we need to </p><p>learn new languages and frameworks to meet the current requirement. </p><p>Though it's not widely known, we can write native-feeling iOS apps for </p><p>the iPhone and iPad in JavaScript and package it into an executable file </p><p>and distribute it accordingly across Windows, OS X and Linux. </p><p>Before we start, here are some things you should be familiar with: </p><p> JavaScript </p><p> Some ES2015 features, namely Classes, Arrow </p><p>Functions, Destructuring andTemplate Strings </p><p> Mac OS X Terminal </p><p> CSS (yup!) </p><p> React (optional) </p><p>Using Xcode, you'll create an iOS project from scratch, then install third </p><p>party modules and components, linking libraries, styling with flexbox, </p><p>creating a custom gesture listener, and many other things. Modify the </p><p>project's source code, and run your application on either the iOS </p><p>Simulator or a physical device. </p><p>We take this example Unsplash which fufilles all my wallpaper needs. On </p><p>the phone: Settings Wallpaper . </p><p>1. Setting up A Blank React Native Project </p><p>Make sure you have Xcode 7.0 or higher installed. It can be downloaded </p><p>free from the App Store. Install Node too. Another important tool well </p><p>need is npm </p><p>Run react-native in it SplashWalls. </p><p>https://www.imediadesigns.ca/web-development/https://babeljs.io/docs/learn-es2015/https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classeshttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functionshttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functionshttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignmenthttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_stringshttps://facebook.github.io/react/http://unsplash.com/https://developer.apple.com/xcode/https://nodejs.org/en/https://docs.npmjs.com/getting-started/what-is-npm</p></li><li><p>This should fetch and install all the required modules and create a new </p><p>folder called SplashWalls. </p><p>Notice the Deployment Info section. It has some default settings applied. </p><p>Go ahead and hit the Run button at the top-left in Xcode </p><p>2. Fetching Wallpaper Data from the API </p><p>Here Unsplash.it API asking for wallpaper data. </p><p>3. Adding a Loading Screen </p><p>By the end of this section we will have a loading screen show up while </p><p>the JSON data is being downloaded. </p><p>4. Filtering and Picking Random Wallpapers </p><p>Here, we will filter through the wallpaper data and pick specified </p><p>number of random wallpapers. </p><p>5. Adding the Swiper Component </p><p>Include a Swiper component in our app that will allow us to display </p><p>wallpapers in a swipeable container. </p><p>Hope this article will help you learn how to build an iOS app with </p><p>JavaScript and keep you updated with the hot topics in mobile </p><p>application development. </p><p>http://unsplash.it/https://www.imediadesigns.ca/mobile-application/https://www.imediadesigns.ca/mobile-application/</p></li></ul>