Building Your First iOS App with JavaScript

  • Published on
    15-Apr-2017

  • View
    60

  • Download
    1

Transcript

  • Building Your First iOS App with JavaScript

    With the increase in usage of mobile devices, web applications have

    become more powerful these days. In fact, many organizations

    considering a mobile app for the growth of their business and for

    improving conversion rate.

    Generally, we have four ways to build a mobile app such as:

    1. native iOS

    2. native Android

    3. PhoneGap

    4. Appcelerator Titanium

    Even though we have already learned a lot in iOS development. But

    being a developer, we always want to develop something cool and

    useful. In this article, we will discuss the whole new idea of building

    mobile apps with JavaScript, which require significant amount of learning

  • as the web development industry is always changing. Also, we need to

    learn new languages and frameworks to meet the current requirement.

    Though it's not widely known, we can write native-feeling iOS apps for

    the iPhone and iPad in JavaScript and package it into an executable file

    and distribute it accordingly across Windows, OS X and Linux.

    Before we start, here are some things you should be familiar with:

    JavaScript

    Some ES2015 features, namely Classes, Arrow

    Functions, Destructuring andTemplate Strings

    Mac OS X Terminal

    CSS (yup!)

    React (optional)

    Using Xcode, you'll create an iOS project from scratch, then install third

    party modules and components, linking libraries, styling with flexbox,

    creating a custom gesture listener, and many other things. Modify the

    project's source code, and run your application on either the iOS

    Simulator or a physical device.

    We take this example Unsplash which fufilles all my wallpaper needs. On

    the phone: Settings Wallpaper .

    1. Setting up A Blank React Native Project

    Make sure you have Xcode 7.0 or higher installed. It can be downloaded

    free from the App Store. Install Node too. Another important tool well

    need is npm

    Run react-native in it SplashWalls.

    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

  • This should fetch and install all the required modules and create a new

    folder called SplashWalls.

    Notice the Deployment Info section. It has some default settings applied.

    Go ahead and hit the Run button at the top-left in Xcode

    2. Fetching Wallpaper Data from the API

    Here Unsplash.it API asking for wallpaper data.

    3. Adding a Loading Screen

    By the end of this section we will have a loading screen show up while

    the JSON data is being downloaded.

    4. Filtering and Picking Random Wallpapers

    Here, we will filter through the wallpaper data and pick specified

    number of random wallpapers.

    5. Adding the Swiper Component

    Include a Swiper component in our app that will allow us to display

    wallpapers in a swipeable container.

    Hope this article will help you learn how to build an iOS app with

    JavaScript and keep you updated with the hot topics in mobile

    application development.

    http://unsplash.it/https://www.imediadesigns.ca/mobile-application/https://www.imediadesigns.ca/mobile-application/