gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
guide/english/mobile-app-development/cordova-ios-application-development-setup-to-deployment/index.md Normal file
View File

@ -0,0 +1,235 @@
---
title: Cordova iOS Application Development Setup to Deployment
---
# Cordova iOS Application Development Setup to Deployment
<img src="https://image.ibb.co/iKCSuQ/Xz_J197k8_QI32.jpg" alt="iphone_1737513_1920" width="100%">
Hybrid Application development for android is a breeze, be it for development or production configuration, however i personally find cordova iOS setup, development and deployment a bit complicated.
Most of the Hybrid Application Developers who are in learning stage are not able to explore hybrid iOS app development process due to the simple reason that they dont own a mac, since developing iOS apps requires the iOS SDK and XCode unlike Android SDK which runs on any Desktop OS. Therefore the aim of this guide is to show the basic workflow of hybrid iOS app development on a mac, so that a develoer even if he/she cannot develop iOS apps, is atleast familiar with how its done.
## Creating cordova project
Begin by opening the terminal and creating a new cordova project ( use sudo only if you have permission issues, ie. EACCESS errors ) :
```
sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add ios
```
At the time of writing this guide cordova iOS platform version is : 4.3.1
We wont modify any source code of the app and simple continue with the default sample code that is added by cordova automatically when we run the create command. However it is assumed we will add plugins modify code in the ```www``` folder during normal development flow.
Next step is to run the cordova build command. This will convert our app code to an .xcodeproj file which we will use next.
```
sudo cordova build ios
```
The generated Xcode Project file will be in :
```
[Your App Folder]/platforms/ios/[Your App Name].xcodeproj
```
Now incase of Android the code signing is done using the Keystore file which is in .jks format.
However incase of iOS for distributing iOS apps it is required that you have a Apple developer account,
This is so that we can generate the *Certificates* and *Provisioning Profiles* required for distributing the app.
For pricing of Developer account refer <a href='https://developer.apple.com/support/purchase-activation/' alt='apple developer account pricing' target='_blank'>this page</a>
## Creating Development Certificates
Once you have the account ready we can proceed further and login to <a href='https://developer.apple.com/account/' alt='apple developer dashboard' target='_blank'>Apple developer account</a>
The dashboard screen should look something like this :
<img src="https://image.ibb.co/j0d8zQ/Clipboard_image_2017_09_18_11_35_58.png" alt="Project opening in Xcode" width="100%">
Click on ```Certificates, Identifiers & Profiles```
This should take you to the following screen, which by default displays Certificates issued from your account :
<img src="https://image.ibb.co/fk8mm5/1.png" alt="Certificates, Identifiers & Profiles" width="100%">
iOS Certficates are of mainly two types : Development or Distribution, click on the Plus (+) button on the top right corner of the list which will open the following page :
<img src="https://image.ibb.co/dksXtk/2.png" alt="Add iOS Certificate" width="100%">
First lets create a development profile :
Select *iOS App Development* and click continue.
This should bring you to the following screen, where you are asked to create and upload a Certificate Signing Request or CSR file.
<img src="https://image.ibb.co/iwBE65/3.png" alt="Upload CSR file" width="100%">
Follow the on-screen instructions to generate it, and continue.
Once the certificate is ready, download it to your Mac, and double click it.
This will add it to Keychain Access in the Mac.
<img src="https://image.ibb.co/dJg6m5/4.png" alt="Download development certificate" width="100%">
## Creating Distribution Certificates
Creating distribution certificates is similar to the process for creating development certificates,
However here we select ```App Store and Ad Hoc``` from ```Production``` section in the ```Add iOS Certifcate Page```
<img src="https://image.ibb.co/bEKFeQ/5.png" alt="Add iOS Certificate" width="100%">
## Creating the App ID
Select ```App IDs``` from ```Identifiers``` section, this will open the list of existing app IDs,
Next click on the Plus button on the top right (+), This will open the *Register iOS App IDs* page.
<img src="https://image.ibb.co/iXTuOk/6.png" alt="Register iOS App IDs" width="100%">
Select Explicit App ID
App Description can be any related name this will be displayed in the app id list against the particular app id.
An app id is a string in the format *AB11A1ABCD.com.mycompany.myapp* where *AB11A1ABCD* is the app id prefix which is by default the team ID and *com.mycompany.myapp* is the bundle ID which is unique to each app.
Its recommended that the bundle id must be in a reverse-domain name style string for example, the company MYCOMPANY may have two apps (App1 and App2), therefore the http url for each app is usually app1.mycompany.com and app2.mycompany.com,
Hence the bundle IDs for each app will be com.mycompany.app1 and com.mycompany.app2
Next select any services from the chceklist that you need to use in your app, such as Push Notifications, Wallet etc.
Next click on continue and confirm the details and finally register the app id.
## Adding devices to developer account
Select ```All``` from ```Devices``` section, this will open the list of already added devices to your apple developer account,
Only these devices are allowed to run the app during development.
To add a new device Next click on the Plus button on the top right (+)
The following screen will be displayed:
<img src="https://image.ibb.co/gTmW3k/8.png" alt="add device screen" width="100%">
Here name can be any easily undertandable name example, iPhone 5s ABC Pvt Ltd.
The device UDID is the unique ID associated with each Apple device.
To find the UDID of a device follow the below mentioned steps:
1) Connect the device to your Mac.
2) Open the System Information app located in the /Applications/Utilities folder.
3) Select USB under Hardware in the left column.
4_ On the right, select the connected device under USB Device Tree.
The device ID, or “Serial Number”, appears below.
Once you have entered the device UDID and name click continue, then confirm the details and register.
## Creating Development Provisioning Profile
To create a development Provisioning Profile click on Provisioning Profiles -> All
This should show all the profiles, development as well as distribution.
Next click on the Plus button on the top right (+)
This should show the following page :
<img src="https://image.ibb.co/dk3KOk/7.png" alt="Creating a development provisioning profile" width="100%">
Here select ```iOS App Development``` and click continue.
In the dropdown that is displayed select the App ID we created previously and continue.
Next A checklist list of certificates is displayed from which we can select one or multiple.
These are development certificates and not distribution ones.
The generated provisioning profile will be linked to these certificates.
On click of continue a checklist of devices is displayed, select one, multiples or all.
Only selected devices will be allowed to run the app using this provisioning profile.
Next on clicking continue, enter the name for the provisioning profile, and download the generated .mobileprovision file.
## Creating Adhoc Distribution Provisioning Profile
This process is same as Development Profile Creation
## Creating AppStore Distribution Provisioning Profile
This process is same as Development Profile Creation, except here we dont select devices, as the app will be available publicly through AppStore.
Now that we have all that we need we can continue generating the actual ipa using Xcode.
*Note: cordova build command converts our app code to xcode project, using Xcode we create an .ipa file which is the actual app to be installed.*
---
efore moving forward double tap on both Certificates to add them to keychain
## Continuing in Xcode
Next, double tap the .xcodeproj file which should open it in Xcode.
( Please use the latest version of Xcode, i have used Xcode 8.3.2 )
<img src="https://image.ibb.co/mPdGKQ/Screen_Shot_2017_09_18_at_11_06_55_AM.png" alt="Project opening in Xcode" width="100%">
The Xcode screen should look something like this.
Click on the App Name on the top left corner fo the window, this will open the detailed view on the right side.
<img src="https://image.ibb.co/fqb3ZQ/Screen_Shot_2017_09_18_at_5_07_53_PM.png" alt="Project settings" width="100%">
Then click on Targets-> App Name
<img src="https://image.ibb.co/i0znTk/Screen_Shot_2017_09_18_at_5_11_28_PM.png" alt="targets" width="50%">
This will display the following details tab :
<img src="https://image.ibb.co/ksBj8k/Screen_Shot_2017_09_18_at_5_15_29_PM.png" alt="target details" width="100%">
Clik on general, which should display :
<img src="https://image.ibb.co/k8KFEQ/Screen_Shot_2017_09_18_at_5_18_29_PM.png" alt="general details" width="100%">
Uncheck the Automatically Manage Signing Checkbox
This should display the following error, stating AppNAme requires provisioning profile
<img src="https://image.ibb.co/mDq5EQ/Screen_Shot_2017_09_18_at_5_20_35_PM.png" alt="profile error" width="100%">
Next, under Signing (Debug) Click the Provisioning Profile Dropdown and select the *impot profile* option.
In the file selection dialog that pops, navigate to the path where the development provisoning profile is downloaded, and select it. It will have an extension of *.mobileprovision*
After selection the error should be gone, and it should show Team as the Team Name in Apple eveloper account and Signing Certificate Name.
Do the same thing for Signing (Release) section, however in the file selection dialog slect the Ad Hoc distribution Profile.
Now that the Code signing steps are done we either
* run the app directly on device
* run the app on a simulator
* generate an ipa file for distribution
* upload app to appstore
## Running the app directly on device
To run the app on device connect the device to the Mac via USB,
then in the top left corner in the list of devices select the cnnected device, and click the run or play button (black triangular button)
<img src="https://image.ibb.co/k4xo15/Screen_Shot_2017_09_18_at_5_34_14_PM.png" alt="run device" width="100%">
<img src="https://image.ibb.co/hjzhuQ/Screen_Shot_2017_09_18_at_5_36_55_PM.png" alt="run device" width="100%">
The build status will be displayed in the status bar on the top of the window.
If all goes fine, the app should be installed on the device, and automatically load in a while.
## Running the app on a simulator
The steps are same as running on device, but instead of an actual device we use the available iPhone and iPad simulators from the device list.
## Generate an ipa file for distribution
This approach can be done in case you require to distribute the app to the testing team, etc. However the device used by them must have a UDID present in the provisioning profile.
From the Xcode menu select ```Product``` -> ```Clean```,
Then ```Product``` -> ```Archive```,
The Archives organizer appears and displays the new archive.
<img src="https://image.ibb.co/iunfMG/6_ios_archive_organizer_2x.png" alt="ios archive organizer" width="100%">
In the righthand side panel select Export option, al ist of optios will appear.
To distribute your app to users with designated devices, select “Save for Ad Hoc Deployment.” The app will be code signed with the distribution certificate.
To distribute your app for internal testing, select “Save for Development Deployment.” The app will be code signed with your development certificate.
<img src="https://image.ibb.co/jQJLMG/6_ios_createappstorepackage_1_2x.png" alt="ios archive organizer export as ad hoc" width="100%">
In the dialog that appears, choose a team from the pop-up menu and click Choose.
<img src="https://image.ibb.co/gH2VMG/6_ios_export_choose_team_2x.png" alt="ios export select team" width="100%">
Next the device selection dialog popus up
Select either *All devices* or *specific devices* click next.
Next the review dialog is displayed,
Here it will show the signing certificate and provisioning profile used for generating the build.
Review and click next.
Finally the file save as popup is displayed to select the location in the file system to store the exported app file.
The app is exported as ``.ipa``` file .
To run this file on device simply double tap it which will open it in itunes.
Then connect your device (This should show a small device icon on the top left corner of the itunes window )
tapping on it will show the device summary such as apps, music etc on the device.
Select the apps tab,
in the left pane, select the app to be installed and click install.
Wait for the process to complete and click apply,
This should install the ipa file on your device.
To debug the app :
1) Open safari,
2) open the app on device
3) In the Safari menu bar select ``` Develop --> Your Device Name --> Your App ```.
## Thats all Folks !!!

305
guide/english/mobile-app-development/firebase-cloud-messaging-integration-for-cordova-hybrid-apps/index.md Normal file
View File

@ -0,0 +1,305 @@
---
title: Firebase Cloud Messaging Integration for Cordova Hybrid Apps
---
## Firebase Cloud Messaging Integration for Cordova Hybrid Apps
This is a basic straight forward walk through regarding how to implement push notification in Android as well as iOS using the <a href='https://github.com/fechanique/cordova-plugin-fcm' target='_blank' rel='nofollow'> cordova plugin for fcm </a> and Google Firebase FCM from scratch.
I will be using Ubuntu 16.04 LTS for this, but OS used for development should not matter much.
## FCM Integration for Cordova Hybrid Apps
### Android Implementation
Create an empty folder pushSample
```
cd '/opt/lampp/htdocs'
mkdir pushSample
cd pushSample
cordova create pushSample
cd pushSample
cordova platform add android
cordova plugin add cordova-plugin-FCM
```
While adding the cordova FCM plugin will show an error :
```
Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.
```
Note : This is because we have not added the google-services.json file which has to be created in the next following steps.
Next open the <a href='https://console.firebase.google.com/' target='_blank' rel='nofollow'> google firebase console </a> and Add Project ( basically means create a new project )
Once the project is created click on the Notifications section in the left side panel.
Now click on the Android icon to add **Android** platform support to our project.
In the next popup form fill the details as follows :
**Android package name :** Package name or ID is the unique identifier for an app in the play store.
Note that it is a very important value which cannot be changed for an app once it is uploaded to the play store.
It will be in reverse domain name syntax : eg hello.pushSample.com will have app id : com.pushSample.hello.
Also in the **config.xml** file in your cordova project set the same app id.
For our sample project it will be in :
pushSample/pushSample/config.xml
eg for me the contents of this file are :
```xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
```
Note the tag
```xml
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
```
Here the attribute id is the package **id** which will by default be **io.cordova.hellocordova** change it to the app ID you have specified in the firebase console. I will be using com.pushSample.hello
Next field to be filled in the firebase console popup is :
**App nickname (optional) :** This can be the same app name which is displayed in the menu for the app, this can also be changed in the config.xml, by default it will be HelloCordova, i will update it to **PushSample**
**Debug signing certificate SHA-1 (optional) :** This is optional please leave it blank.
Next click on **Register App**
Next step is to download the **google services json** file.
<img src="https://preview.ibb.co/nEjbwv/1_Wje_TClf8o9z_Dxw3_W_wkpw.png" alt="download google services json" border="0">
Click on the **Download google-services.json** button, which should download the file to your PC.
Once you get the file paste it in the root folder of your cordova project, in my case :
```
/opt/lampp/htdocs/pushSample/pushSample
```
Next build the project
```
cordova build android
```
After adding the google-services.json file it should build successfully.
Next we have to write the client side code for handling push notifications :
```js
FCMPlugin.getToken(function(token) {
//this is the FCM token which can be used
//to send notification to specific device
console.log(token);
//FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
//Here you define your application behaviour based on the notification data.
FCMPlugin.onNotification(function(data) {
console.log(data);
//data.wasTapped == true means in Background : Notification was received on device tray and tapped by the user.
//data.wasTapped == false means in foreground : Notification was received in foreground. Maybe the user needs to be notified.
// if (data.wasTapped) {
// //Notification was received on device tray and tapped by the user.
// alert(JSON.stringify(data));
// } else {
// //Notification was received in foreground. Maybe the user needs to be notified.
// alert(JSON.stringify(data));
// }
});
});
```
The code basically first calls the **getToken** function to get an FCM token from firebase, then in the callback registers another callback **onNotification** to handle what happens when a push notification is received.
the **onNotification** function has a data value which contains the notification data. data.wasTapped indicates whether the notification is sent when the app is in foreground or background, so that we can define separate logic for each case.
Now to trigger a sample push notification click on the Notification section in the left side panel, this should now show you the firebase notification composer, showing the list of past notifications sent.
In case you have not sent any push notifications yet. You should see a **send your first notification** button.
**Note:** The Notification Composer will look like this :
<img src="https://preview.ibb.co/b4qc3a/1_s_W2_Ad_QJz_JEFjto6rz1_8r_A.png" alt="send your first notification" border="0">
Note While sending push notification using firebase console you need to select app name **com.pushSample.hello** in my case.
To send the custom application specific data select advance options -> Key value pairs.
<img src="https://preview.ibb.co/ensbUF/1_qp9_Mz_XBZvn_PYawyo0_TQBRA.png" alt="advanced options" border="0">
The data object in the onNotification callback will look as follows
```js
{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}
```
Also note while sending push notifications using REST APIs from your app server instead of the firebase notification composer, you have to use the following syntax :
```js
//POST: https://fcm.googleapis.com/fcm/send
//HEADER: Content-Type: application/json
//HEADER: Authorization: key=AIzaSy*******************
{
"notification":{
"title":"Notification title",
"body":"Notification body",
"sound":"default",
"click_action":"FCM_PLUGIN_ACTIVITY",
"icon":"fcm_push_icon"
},
"data":{
"param1":"value1",
"param2":"value2"
},
"to":"/topics/topicExample",
"priority":"high",
"restricted_package_name":""
}
//sound: optional field if you want sound with the notification
//click_action: must be present with the specified value for Android
//icon: white icon resource name for Android >5.0
//data: put any "param":"value" and retreive them in the JavaScript notification callback
//to: device token or /topic/topicExample
//priority: must be set to "high" for delivering notifications on closed iOS apps
//restricted_package_name: optional field if you want to send only to a restricted app package (i.e: com.myapp.test)
```
**Note : “click_action”:”FCM_PLUGIN_ACTIVITY”** field is very important as not mentioning it will not execute the onNotification callback in foreground mode.
<img src="https://image.ibb.co/gRS1UF/0_QIzc_JZH9_Nqzpjygg.jpg" alt="done with android implementation" border="0">
### iOS Implementation
For the iOS implementation we will require the following things to be generated in the <a href='https://developer.apple.com/' target='_blank' rel='nofollow'> apple developer page.</a>
I am using XCODE 8.3
App ID : com.example.app
Apple Push Notification Authentication Key ( APNs Auth Key )
Development Provisioning Profile with Push Notifications Enabled.
APNs Certificates
Also <a href='https://firebase.google.com/docs/cloud-messaging/ios/client' target='_blank' rel='nofollow'> Firebase docs for push notifications </a> is an excellent in depth starting point.
Note: You cannot run push notifications in the simulator, you will need an actual device.
Lets begin.
Firstly login to firebase developer’s console, and select an existing project or create a new project, we will be using the same pushSample project.
In the project overview add another app with iOS as platform.
In the popup that comes up, enter the following details :
* Step 1
**Bundle id :** this is the unique identifier which is used to identify an app in the apple appstore, this should be same as the bundle id you will specify in the config.xml file of the cordova project or the Bundle Id section in xCode.
we will use **com.pushSample.hello**
**App Name** : This is the option identifier nick name, we will be using the same name which will display in the iOS app menu which is PushSample.
**App Store Id** : Leave this blank.
Once you click on register app the iOS app step 2 appears.
* Step 2
Here click on the download **Googleservice-info.plist** button to download the file which we will use in the later steps.
**Step3 and Step 4** we can skip as these will be handled internally by the cordova FCM plugin.
Once the iOS app is added to your project Click on the gear icon besides the overview label in the left side panel and select project settings. ( Refer below image. ) . This should by default open the General Tab of your project settings.
<img src="https://preview.ibb.co/ddcwwv/1_c_Pee_Xdmf76l_W0_YRr_I83_Log.png" alt="Project Settings" border="0">
Next click on your iOS app in Your Apps -> iOS Apps.
In the iOS app details update the **App ID Prefix**, the value for which you will get in the Apple Member Center under the membership tab.
Now switch to the **Cloud Messaging** tab -> iOS app configuration section.
<img src="https://preview.ibb.co/m2Ktbv/1_0p_Vvf_JGYb_TEUIhwr_DIek_Q.png" alt="cloud messaging" border="0">
Here as discussed earlier upload the APNs Auth Key you generated in the Apple member center.
Next we do the client side app setup.
Create a new folder sampleApp in your development folder, for me it is
```
/Volumes/Development/
```
so the new folder will be
```
/Volumes/Development/pushSample
cd /Volumes/Development/pushSample
```
Create a new cordova project, **Note : Use sudo if required**
```
cordova create pushSample
cd pushSample
```
Now add the latest iOS platform
```
sudo cordova platform add ios
```
Now paste the **Googleservice-info.plist** file we downloaded earlier in the cordova project root folder, for me it is
```
/Volumes/Development/pushSample/pushSample
```
add the cordova fcm plugin.
```
cordova plugin add cordova-plugin-fcm
```
Update the default app id and app name with the bundle id we decided earlier while configuring firebase console and the app name.
```xml
<widget id="com.pushSample.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>PushSample</name>
```
At this point the sample code will have an app.js file, which you can modify and add the getToken and onNotification functions same as android. The javascript code is same for both platforms.
Next run cordova build command
```
sudo cordova build ios
```
Once the cordova build command is successful, open the app in xcode. To do this open the xcode.proj file, which will be located in
```
your_cordova_project/platforms/ios/app_name.xcodeproj
```
for me it is
```
/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj
```
<img src="https://preview.ibb.co/hePLOa/1_Xe_Kh4_VXU_o_BQ05_UGRa_B6_A.png" alt="Xcode Project" border="0">
Next enable Push Notifications in the Capabilities Tab of the project.
Connect an actual device and run the app.
Now trigger the push notification from the firebase notification composer and everything should work…
<img src="https://image.ibb.co/jz8VOa/1vnhjv.jpg" alt="happy steve" border="0">
<a href='https://medium.com/@t1tan1um/fcm-integration-for-cordova-hybrid-apps-c679f5fc1988' target='_blank' rel='nofollow'>The original post on Medium</a>.

53
guide/english/mobile-app-development/index.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Mobile Application Development
---
## Mobile Application Development
<img src="https://preview.ibb.co/chfPGv/Whats_App_Image_2017_09_11_at_12_48_41_PM.jpg" alt="hybrid applications" border="0">
This section contains articles related to Mobile Hybrid Applications Development using frameworks such as Apache Cordova, Ionic Framework, and React Native.
## Advantage & Disadvantage of Native vs Hybrid Application
Native App Definition
- Built for a specific operating system and can be accessed only from the dedicated app store.
Android App can only be accessed by Android users and is developed using Java, Windows, C++ etc.
iOS App using XCode / Objective-C etc.
- Development Costs & Effort is Higher
Hybrid App Definition
- Uses Native Device's Browser container to contain HTML5 App.
- Developing hybrid app is consistent, cross platform UI.
Development Cost and Time
Hybrid apps take least amount of time & money to develop compared to native app.
One code for both platforms.
User Experience
Native apps provide the best user experience in terms of coherent look & feel to the device's specific.
Better performance for Native App compared to Hybrid App
### Apache Cordova
Apache Cordova is the wrapper that wraps your HTML, CSS, and JavaScript into a buildable mobile package, acting as the magic that glues everything together and turns it into a mobile app
### Ionic Framework
Ionic Framework is a CSS framework that allows you to style your screens to look mobile friendly, essentially acting as bootstrap but for mobile apps while developing using web technologies.
### React Native
React Native is a front end development framework that contains a lot of the building block elements for Android/iOS development and is a different kind of magic from Apache Cordova
### NativeScript
Originally created by Progress, NativeScript apps are built using JavaScript, or by using any language that transpiles to JavaScript, such as TypeScript, for instance. NativeScript directly supports both Angular and Vue frameworks via a community-developed plugin. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio.
### Flutter
Flutter is a cross platform mobile development framework from Google, i,e it can be used to create both ios and Android apps with ease. It uses Dart as its primary language. It's hot reload feature helps in speeding up the overall Development process. Flutter produces real native apps as in the case of React Native as opposed to cordova, Ionic and Cordova which produces hybrid apps.

23
guide/english/mobile-app-development/mobile-app-development-definition/index.md Normal file
View File

@ -0,0 +1,23 @@
---
title: What Is A Mobile Application?
---
Here’s the Wikipedia definition:
A mobile application (or mobile app) is a software application designed to run on smartphones, tablet computers and other mobile devices.
So pretty straightforward then? Not quite.
The history of the mobile app begins, obviously, with the history of the mobile device and the first mobile phones whose microchips required the most basic of software to send and receive voice calls. But since then things have got a lot more complicated.
A mobile application or mobile app is a software application. Basically, it is a computer generated program designed and developed to run on iPhone, Smartphones, tablets and many other mobile devices. Without doubt, the world has accepted the fact that apps are the way to get the most of the smartphones. So, it will be riveting to trace the history markups for the mobile apps development.
### Where Did It All Start?
On the 3rd day of April 1973, the first mobile phone call was made by Martin Cooper of Motorola to Dr. Joel S. Engel of Bell Labs. That device or instrument weighed 1.1 kg and measuring (23 x 13 x 4.45) cm. And, it took two decades of Research and development (R&D) to get first mobile application for smartphones, and the credit goes to IBM Simon, who introduced the world with the first mobile apps for smart phones.
### What Makes Mobile Apps So Popular?
Most people have smart phones and iPhones today, so apps are easy to access and simply make your life better as a result. There are millions of mobile apps at present. For examples, apps for social networks, travel, health, banking, fitness, calendars, games, news and much more. The Apple App store adds more than 20,000 apps every month.
### Mobile App Development Timeline
Mobile application development is not only the leading business of today, but it is also the bread earner for many individuals across the globe. Take WhatsApp; this small app was developed and revolutionized the global communication, and is now part of the biggest and arguably the most popular social network while at the same time has rewarded its owners with millions of dollars. What business owners fail to realize when asking an app development industry are the timelines that should be minded by both the parties for the app development. Through this article, we intend to clarify the misconceptions clients have with the application development process. App development is not a child’s game; it requires a significant amount of critical thinking, research, and market analysis prior to development. All this takes time.
### How can you start making apps?
There are many tools at your disposal from which you can start making your own apps. The most popular is Android Studio which uses Java and XML. XCode lets you create apps for iOS. But these apps require good amount of programming knowledge. For all the beginners out there, MIT AppInventor 2 comes to the rescue. With simple block-based programming one can easily code and make there own apps very easily and publish it for the others.

25
guide/english/mobile-app-development/mobile-app-development-distribution/index.md Normal file
View File

@ -0,0 +1,25 @@
---
title: Distribution of mobile app development
---
### Distribution
The two biggest app stores are Google Play for Android and App Store for iOS.
#### Google Play
Main article: Google Play
Google Play (formerly known as the Android Market) is an international online software store developed by Google for Android devices. It opened in October 2008. In July 2013, the number of apps downloaded via the Google Play Store surpassed 50 billion, of the over 1 million apps available. As of September 2016, according to Statista the number of apps available exceeded 2.4 million. The store generated a revenue of 6 billion U.S. dollars in 2015.
#### App Store
Main article: App Store (iOS)
Apple's App Store for iOS was not the first app distribution service, but it ignited the mobile revolution and was opened on July 10, 2008, and as of January 2011, reported over 10 billion downloads. The original AppStore was first demonstrated to Steve Jobs in 1993 by Jesse Tayler at NeXTWorld Expo As of June 6, 2011, there were 425,000 apps available, which had been downloaded by 200 million iOS users. During Apple's 2012 Worldwide Developers Conference, CEO Tim Cook announced that the App Store has 650,000 available apps to download as well as 30 billion apps downloaded from the app store until that date. From an alternative perspective, figures seen in July 2013 by the BBC from tracking service Adeven indicate over two-thirds of apps in the store are "zombies", barely ever installed by consumers.
#### Others
Amazon Appstore is an alternative application store for the Android operating system. It was opened in March 2011 and as of June 2015, the app store has nearly 334,000 apps. The Amazon Appstore's Android Apps can also be installed and run on BlackBerry 10 devices.
BlackBerry World is the application store for BlackBerry 10 and BlackBerry OS devices. It opened in April 2009 as BlackBerry App World.
Ovi (Nokia) for Nokia phones was launched internationally in May 2009. In May 2011, Nokia announced plans to rebrand its Ovi product line under the Nokia brand and Ovi Store was renamed Nokia Store in October 2011. Nokia Store will no longer allow developers to publish new apps or app updates for its legacy Symbian and MeeGo operating systems from January 2014. Windows Phone Store was introduced by Microsoft for its Windows Phone platform, which was launched in October 2010. As of October 2012, it has over 120,000 apps available.
Windows Store was introduced by Microsoft for its Windows 8 and Windows RT platforms. While it can also carry listings for traditional desktop programs certified for compatibility with Windows 8, it is primarily used to distribute "Windows Store apps"—which are primarily built for use on tablets and other touch-based devices (but can still be used with a keyboard and mouse, and on desktop computers and laptops).
Samsung Apps was introduced in September 2009. As of October 2011, Samsung Apps reached 10 million downloads. The store is available in 125 countries and it offers apps for Windows Mobile, Android and Bada platforms.
The Electronic AppWrapper was the first electronic distribution service to collectively provide encryption and purchasing electronically
F-Droid — Free and open Source Android app repository.
There are numerous other independent app stores for Android devices.

28
guide/english/mobile-app-development/mobile-app-development-evolution/index.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Evolution of Mobile Application Development
---
One of the most convincing arguments from the voting floor was from a woman who said that even her grandmother had heard of it, said Ben Zimmer of American Dialect Society. He was explaining the reasons behind the decision of the 128-year-old organisation to choose the word App as the word of the year for 2010. It was two years earlier in 2008 that Apple launched iOS App store which allowed third-party app development and distribution. This freeing up of the App market led to an explosion of new and innovative apps and became part of the lexicon of mobile device users.
#### 1980s
Mass consumption of mobile apps began in the late 2000s with the arrival of app distribution services but the history of mobile application development lies further in the past. In the 1980s, British company Psion launched series of pocket computers called Psion Organiser. The second model of the PDA (Personal Digital Assistant) featured apps like file manager, password protection applications as well as puzzle and adventure games. Later it launched EPOC operating system with Backronym Electronic Piece of Cheese, which fuelled more sophisticated apps like spreadsheets and word processors.
#### 1990s
Often called the world’s first smartphone IBM Simon featured applications like e-mail, address book, calculator, and calendar which were focused on productivity. As processors became faster and memory devices became cheaper, new innovations filtered through. In 1998, EPOC became Symbian which was a joint venture owned by Nokia, Psion, Ericsson, and Motorola. Symbian OS was widely used by Nokia, Samsung, LG and Ericsson albeit with different platforms and APIs.
Concurrently, another company Palm released Palm Pilot in 1996 with features like touchscreen and data synchronisation which are now ubiquitous in contemporary smartphones.
#### 2000s
In 2007, Apple launched its first iPhone which operated on the iOS operating system. A few months later, a Korean company HTC launched the first smartphone operating on the Android operating system developed by Internet giant Google. Both the platforms offered a marketplace for apps where users were free to install both paid and free apps for their smartphones. Apple’s App Store and Google’s Android Market (now named Google Play), as well as multi-touch screens, revolutionised the App eco-system. Microsoft also jumped on the bandwagon with Windows OS which was adopted by Nokia over its own Symbian OS.
#### 2010s- Present
Both Android and iOS platforms hit a billion installations milestone in 2009-10 and in 2011, app usage surpassed mobile web usage. The convenience of the mobile phone gave apps an edge over desktop software and it is increasingly preferred over mobile web.
2014 arrived with wearable tech through Apple Watch, Google Glass, and Android Wear. These devices could use haptic technology for niche utilities like fitness trackers and navigation tools and connect with smartphones for mail notifications.
#### The Future
Internet of Things (IOT), Cloud Computing and Virtual reality will open new avenues for mobile applications. A Refrigerator that detects empty can of milk and orders it through IOT integrated e-commerce App or Virtual Reality Game and Education Apps, possibilities are numerous. In the cut-throat competition between apps, innovation and dynamicity will be the key to capturing markets as well as customers’ minds.

34
guide/english/mobile-app-development/mobile-app-development-introduction/index.md Normal file
View File

@ -0,0 +1,34 @@
---
title: Mobile app development
---
### Introduction to App Development
One of the more popular forms of coding in recent times is the creation of applications, or apps, that run on mobile devices like phones and tablets. You probably use a range of different apps in your everyday life. Wouldn’t it be cool to create one of your own?
There are many perks of being a developer in the booming app industry. Quite a few people make a good living developing and selling apps, and you have the opportunity to be one of them. You could even become the next Nick D’Aloisio, who famously sold his iPhone app, Summly, to Yahoo! for $30m.
Plus, it’s the best way to get your work into people’s pockets!
### App Development Overview
Mobile apps are developed for a certain platform, and the two most popular platforms today are iOS and Android.
The iOS platform powers apps built for iPhone and iPad. To develop an app for iPhone or iPad, you need to use the Objective-C coding language and the Cocoa framework. You also need to use an IDE (integrated development environment) called Xcode. Note that Xcode only runs on the Mac, so you will need a Mac to make an iOS app.Android apps are developed with the Java coding language and the Android Software Development Kit, which runs on Mac, PC or Linux. You also need to use an IDE such as Eclipse.There are other mobile platforms such as Windows Phone, but iOS and Android are definitely the most popular. Most training focuses on these platforms.
#### iOS (iPhone, iPad)
iOS is a mobile operating system developed and distributed by Apple Inc. It was originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used in Apple computers.
#### Ionic
Ionic is open source framework used for developing mobile applications. It provides tools and services for building Mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices. This is an introductory tutorial, which covers the basics of the Ionic Open Source Framework and explains how to deal with its various components and sub-components.
#### Android
Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. This tutorial will teach you basic Android programming and will also take you through some advance concepts related to Android application development.
#### Xamarin
Xamarin is a software company based in San Francisco. It provides commercial software development tools that allow a user to develop applications for Android, iOS and Windows using C# language and the .NET framework. Xamarin is built on the .NET Framework. It allows one to create apps that easily run across multiple platforms. In this tutorial, we will explain how you can use Xamarin to deliver native iOS, Android, and Windows Apps.
#### PhoneGap
PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript. PhoneGap produces apps for all popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile OS etc. In this tutorial we will focus on developing App for Android platform. This tutorial will give you adequate information about how to produce apps quickly using PhoneGap services.
#### React Native
React Native just like PhoneGap and cordova offers the opportunity for Web Developers to step into the world of Mobile App Development. It is a cross platform mobile application framework from Facebook i,e one can build apps for the Android and ios platform using Javascript (JSX). As opposed to those hybrid apps produced by cordova and phonegap, React Native produces real native apps which can utilise all the native features. It comes with the tagline, "Write once, run everywhere". Usually Tech companies used to had separate teams who would maintain the codebase for ios and android. React Native solves this problem in an effective way allowing Web Developers with React background to build awesome mobile apps. To go on with this track, get started with React. One should be familiar with all those concepts like components, states, props, routing etc. before jumping into React Native. It is also good if one can create bunch of projects in React so as to familiarise with the JSX syntax and all other stuffs which would certainly benefit when it comes into React Native.
#### PowerApps
Launched in 2017, PowerApps is a browser-based platform by Microsoft that allows developers and non-developers to build mobile applications from selectable templates or from a blank canvas. PowerApps at its core is a Platform as a Service. It allows you to create Mobile Apps that run on Android, iOS, Windows (Modern Apps) – and with almost any Internet browser. It takes care of the differences between the operating systems and just allows you to run your apps. It is essentially a container that makes mobile apps much easier to use across mobile platforms. PowerApps offers to dramatically accelerate how business apps are built, reducing time to solution from weeks or months to minutes and empowering a new category of app creators.

49
guide/english/mobile-app-development/swift-development/index.md Normal file
View File

@ -0,0 +1,49 @@
---
title: Swift Development
---
## Swift Development
This section contains resources related to Native iOS Applications Development using Swift.
This is my curated list of awesome Swift and iOS Resources for becoming a self-taught iOS Developer.
## Some motivation to get you started
* [14-Year-Old Prodigy Programmer Dreams In Code](https://www.youtube.com/watch?v=DBXZWB_dNsw)
* [Facebook's Youngest Engineer - Michael Sayman](https://www.youtube.com/watch?v=mmQG_BCiVHU)
* [A 12-year-old app developer | Thomas Suarez](https://www.youtube.com/watch?v=Fkd9TWUtFm0)
* [Life of an Indie App Developer - Computerphile](https://www.youtube.com/watch?v=yVRtJbXQsL8)
* [Full-Time Indie iOS Dev and Co-Founder of 1Button: A Top Dev Interview With Thomas Castel](https://www.raywenderlich.com/159963/full-time-indie-ios-dev-co-founder-1button-top-dev-interview-thomas-castel)
* [How much money (on average) does an iOS Developer make in 2017 - Brian Voong](https://www.youtube.com/watch?v=6t3ue7dX5WI)
## Learning Swift
### Beginner
#### Books
* [Swift Programming - Big Nerd Ranch Guide](https://www.bignerdranch.com/books/swift-programming/)
* [Hacking with Swift](https://www.hackingwithswift.com/read)
#### Video Tutorials
* [Swift Track - Team Treehouse](https://teamtreehouse.com/tracks/learn-swift)
* [The iOS Developer Nanodegree - Udacity](https://www.udacity.com/course/ios-developer-nanodegree--nd003)
#### Youtube Playlists
* [The Complete Swift 3 Tutorial with Bob](https://www.youtube.com/playlist?list=PL8btZwalbjYlRZh8Q1VK80Ly0YsZ7PZxx)
* [Getting Started with Swift 3 - Apple WWDC 2016](https://www.youtube.com/watch?v=AzesJrOcFDU)
### Advanced
#### Books
* [Pro Swift](https://www.hackingwithswift.com/store/pro-swift)
* [Swift Coding Challenges](https://www.hackingwithswift.com/store/swift-coding-challenges)
* [Practical iOS 10](https://www.hackingwithswift.com/store/practical-ios10)
#### Youtube Playlists
* [Swift Advanced Object Oriented Programming](https://www.youtube.com/playlist?list=PL8btZwalbjYmZwMwqeeAZKHsQ81GxiuaD)