Developing An App using Ionic 1 and AngularJS (Part 2)

Hi guys!

We’d be taking off from where we stopped the last time. If you were able to start a new App like I explained in the previous article, congratulations!

Now I’d go ahead to explain the file/folder structure of the project you created, and then explain how to build the APK and IPA on your Android and Apple Devices (Tablets, Phones) respectively.

If you were able to start a new project in the last lesson and you successfully served your project with “ionic serve”, you should see the below App in your default web browser.

A new ionic app project currently being served

Also, your Ionic project folder should look like this;

Project Structure of an Ionic 1 App

Explanation of The Project Structure

• bower.json: It is used for managing your app’s dependencies via the bower package management tool. By default, the Ionic Framework is the only dependency that is added in a fresh App.
• config.xml: This is the configuration file for Cordova, it contains information about the App such as Name, Description, Author, Contact Information and Preferences.
• gulpfile.js: This file is used for compiling SASS and other Ionic Framework specific tasks via the gulp task runner.
• hooks: Contains Cordova files which allows you to execute javascript code during the multiple phases of building your app.
• ionic.config.json: This is used for the configuration of the ionic CLI tool.
• node_modules: This contains all NPM packages installed locally into your project. The package.json file in the app root defines what libraries will be installed into node_modules when you run npm install .
• pacakge.json: Contains file used by NPM where we define packages and dependencies to install and can specify scripts to run.
• platforms: Contains the files for the various native platforms that the App would be installed upon.
• plugins: It contains all the Cordova plugins installed in the App.
• resources: Contains the splash screen images and App icons.
• scss: Stores Ionic’s SCSS file, but you can (optionally) add your own SCSS files too.
• www: This is is the heart of your project, the files and folders in it are discussed below.

The Heart of The Project

• css: This is where you store all your css (stylesheet) files.
• fonts: This contains the fonts used in your project.
• img: Contains all your image assets.
• index.html: This is the starting point for our application. It will load up all of the necessary Javascript, HTML and CSS files. Whenever you create a new Javascript or CSS file, you will need to ensure you are linking to it from the index.html file.
• js: This contains all the Javascript files used by your App. It typically is scaffolded with an app.js file, and sometimes will have a controllers folder for your app's controllers and a services folder for any services you have.
• lib: Any external libraries will be placed in here. To start, only Ionic shows up in this folder.

You can go ahead to customize your App. Visit the Ionic Framework for a complete documentation.

Building For Android

Now to generate an APK that can be installed on your android device. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the following commands;

ionic cordova platform add android
ionic cordova prepare android
ionic cordova build android

The generated APK to be installed on an Android device would be found in this directory;

/Users/MacBook/ionic-projects/development/SampleTestApp/platforms/android/build/outputs/apk

Building For iOS

To generate an IPA that can be installed on an iPhone. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the below commands;

ionic cordova platform add ios
ionic cordova prepare ios
ionic cordova build ios

You can get then go ahead to navigate to the below directory;

/Users/MacBook/ionic-projects/development/SampleTestApp/platforms/ios

Here you would find an XCode file usually of extension, projectname.xcodeproj this file should be opened with Xcode where you can then archive an IPA to be installed on an iPhone.

By now, you should have a functioning App both on your Android and Apple phones.

Hint: To avoid having to generate an APK or IPA to be installed on your phone every time before testing, you can install the Ionic DevApp on your mobile device. This allows your App to run on a device at real time as it is running on your local machine. Even changes you make in real time to your source code reflects automatically on the App running on your phone.

I hope the two articles have been helpful and would kickstart someone to begin the process of mobile development. Please drop your comments and suggestions in the comments section, if you have any.

You can also follow all my articles on my website nihinlolafaj.com

Till Next Time! ✌

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.