Programas de ética empresarial

If we navigate to the root directory of the Ionic app that we created in the previous chapter we should see a structure that resembles the following:

.editorconfig .gitignore config.xml hooks/

ionic.config.json node_modules/

package.json platforms/

plugins/

resources/

tsconfig.json

www/

// myApp root directory

For those new to Ionic 2 development the above structure, with all its different files and directories, might seem a little intimidating at first but over the following pages we’ll break each part of the app down so we fully understand their function and why they are there.

.editorconfig

This file defines the coding styles to be used for the app across different editors and IDE’s - which might be helpful for development teams to ensure consistency in code

tslint.json src/

.gitignore

If you’re using a git based repository (such as Github or Bitbucket) for your version control then this file simply states what should be excluded from commits/pushes to the repository.

config.xml

Provides global configuration options for the app which can include:

• Meta-data for app store listings (such as the app description and author name)

• Control options for certain plugins used within the application (I.e. splash screen settings)

• Platform specific settings (I.e. iOS, Android)

• Determining the level of access to external URLs for the app

• Configure app launch icon and splash screen images per platform

We’ll be working with this file and relevant configuration options later on in the book, particularly in the chapter where we prepare our apps for submission to the Apple App and Google Play stores.

hooks

Deriving from the underlying Apache Cordova framework this directory is used to store scripts, known as hooks, which could be added to the application to execute Cordova related commands prior to, for example, adding a new platform, before compiling and building our app or after installing a plugin.

These hooks might perform actions such as, for example, linting JavaScript so as to avoid any potential script execution errors when using the app.

This directory is now considered deprecated (although this can still be used deprecated simply means that future versions of the Cordova framework won’t support using this directory and might even remove it altogether).

The official Apache Cordova documentation recommends that developers looking to

use hooks in their application should define these in the following files instead:

• config.xml (for all application related hooks)

• plugins/plugin-name-here/plugin.xml (for hooks related to a plugin)

More information on Cordova hooks can be found here: https://cordova.apache.org/

docs/en/latest/guide/appdev/hooks/index.html.

ionic.config.json

A JSON file displaying the configuration options for the Ionic app. These are created from the initial CLI start command but additional options can be added to the file if required.

node_modules

Contains all of the different software modules used within the Ionic 2 app, the most notable being the angular 2 framework.

It is highly unlikely that you will ever need to, and it’s strongly advised that you refrain from, performing any code edits to the files contained with these directories as these form the core default logic for the app. Doing so could have unintended consequences for your app.

Mess with these at your peril!

IMPORTANT - When you create a new app you will need to run the npm install command within the root of the newly created app directory. This will install all the required dependencies listed in the package.json file, along with any additional packages that they may depend on.

package.json

This serves to manage locally installed NPM packages (those in the node_modules

are installed in your project and makes a project easier to share with other developers (as they can quickly see what software dependencies the project requires).

platforms

Contains the different mobile platforms that the app is being developed for. Ionic 2 by default adds iOS when creating your app from the command line.

All other supported mobile platforms have to be manually added to the app through the Ionic CLI.

plugins

Contains all of the Cordova and third party supported plugins for the app.

Default plugins that were installed on app creation are as follows:

• Console

• Device

• Splashscreen

• Status Bar

• Whitelist

• Ionic Keyboard

We’ll look into managing and using plugins in the aptly named Plugins chapter.

resources

Contains all of the default iOS & Android launch icons and splash screen images, contained within their own sub-directories, for use on both mobile and tablet screen sizes and orientations.

These assets can be updated/replaced and we’ll look at how to do that in the Preparing apps for release chapter.

src

This is the directory where all of the development work for your app will take place as well as storing any custom assets used within your app.

The src directory, by default, contains the following:

• app/ - Contains application configurations and bootstrapping - see below

• assets/ - Contains assets to be used for the app such as, for example: images, videos or JSON files

• declarations.d.ts - Provides information to the TypeScript compiler about the type information for scripts and third-party libraries used within the app

• index.html - the HTML wrapper for the app which includes links to the base styles and JavaScript files to be used by the app

• manifest.json - Provides support for Progressive Web Apps

• pages/ - contains all of the pages - aka components - for the app (each of which are separately packaged into named directories, that correspond to each page, and include HTML templates, TypeScript and Sass files)

• service-worker.js - provides basic functionality, which can be customised and extended further, to control how the Ionic 2 app accesses and uses the network it connects to

• theme/ - contains all of the default Sass files for styling the app

The app/ directory is one of the most important directories within an Ionic 2 application as it helps structure and bootstrap the app through the following files:

• app.component.ts - the app’s root component (every app has a root component which controls the rest of the application)

• app.module.ts - the root module for your app which basically describes how the application fits together and what it’s constituent parts are (this helps instruct the Ionic compiler on how to prepare the app for being launched)

• app.scss - used to store and organise style rules that a developer may want to be implemented globally within the application

• main.dev.ts - used during application development

• main.prod.ts - used for production of the application

In addition any services and pipes that you create using the Ionic CLI will be stored in their own named sub-directories within the src directory - such as src/pipes/ or src/providers/ for example.

Any directives generated via the CLI will be stored in the src/components directory instead.

We’ll be working a lot with the src directory in following chapters.

For more information on service workers please access the following links:

• An introduction to Service Workers

• Progressive Web App support in Ionic

• Service Workers Cookbook

tsconfig.json

A configuration file that indicates the directory it is contained within is the root of a TypeScript project. This file, amongst other options, lists the TypeScript files to be processed and what compiler settings should be used when converting, or

transpiling, TypeScript into JavaScript for web/mobile browsers to be able to execute.

More information on the different tsconfig.json configuration options is available here: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html.

tslint.json

A configuration file used to lint, or check, TypeScript files for any formatting issues and code errors.

www

Directory that contains the index.html file, and assets and build sub-directories which are copied and replaced from the src directory whenever we build an app

using the Ionic CLI tool.

The index.html file loads the necessary CSS and JavaScript files for the Ionic app as well as containing the <ion-app> directive within the body of the HTML document (which is the wrapper where view templates are rendered for display).

The app stylesheet, generated from ALL of the imported Sass files used within the node_modules/ionic-angular/themes, src/theme and src/pages component directories, is loaded within the head of the document HTML.

All JavaScript files are loaded underneath the <ion-app> root component, towards the bottom of the document, and consist of the following 3 files:

• cordova.js - Required for Cordova apps (remember that Apache Cordova is the framework that Ionic uses for publishing to mobile/tablet devices)

• polyfills.js - A polyfill for legacy browsers that don’t support certain ES6 features such as Promises

• main.js - Transpiled TypeScript code from the src/ directory that contains the custom logic for your app

IMPORTANT - Any images, fonts and other assets (such as JSON files or video media) that are to be used within your app should be stored within the src/assets directory. After a successful build operation these will be copied to the www/assets directory.

So that’s a very basic introduction and breakdown to the structure of a freshly created Ionic 2 App which will hopefully give you a good understanding of what all the various parts do and how they fit together.

We’ll keep revisiting some of the topics that we’ve covered here, as well as those from previous chapters, as we continue with our learning so don’t worry if it seems a little overwhelming right now - you’ll be up to speed with Ionic 2 in no time!

In the next chapter we’ll start digging into some code and familiarising ourselves