Pemrograman mobile menggunakan ionic framework
Download as PPTX, PDF0 likes696 views
This document provides instructions for setting up an environment for mobile programming with the Ionic Framework. It describes downloading and installing Node.js, npm, Bower, Git, Gulp, Ionic, and Cordova. It also explains the basic project structure, including the www folder containing HTML, CSS, JS, and the config.xml file. Sample code is provided for a view template, App.js, and data service module.
Pemrograman mobile menggunakan ionic framework
- 1. Mobile Programing with Ionic Framework++ PUGUH RISMADI ISMAIL
- 4. SETUP ENVIRONTMENT Install npm (Node.js package) Install Bower via console : npm install bower -g Install git (download: http://git-scm.com/downloads) or via console npm install git –g Install Gulp : via console npm install gulp –g Install ionic Running Console (CMD/terminal) : npm –install –g ionic In Console(CMD): npm ionic lib update
- 5. Cek Installed Component Git : git --version Bower : bower –v Npm : npm -v Gulp : gulp -v Ionic : ionic -v Cordova : cordova -v
- 7. Update environment to last release After check component may have some issue like this
- 8. Install ios-sim and deploy ios application to devices
- 10. Test Project
- 12. Structure project If you open the chapter2 example1 folder in your text editor, you should see the following folder structure at the root of the project: . ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks ├── ionic.project ├── package.json ├── plugins ├── scss └── www
- 13. Description Here is a quick explanation of each of the items: bower.json: This consists of the dependencies loaded via Bower. In future,we will install other Bower packages to be used along with our app. All the information regarding the same will be available here. config.xml: This file consists of all the meta information needed by Cordova while converting your Ionic app to a platform-specific installer. If you open config.xml, you will see a bunch of XML tags that describes your project. We will take a look at this file in detail again. gulpfile.js: This file consists of the build tasks that we would be using while developing the Ionic app. ionic.project: This file consists of the information regarding the Ionic app.
- 14. Hooks : hooks: This folder consists of scripts that get executed when a particular Cordova task is performed. A Cordova task can be any of the following: after_platform_add (after a new platform is added), after_plugin_add (after a new plugin is added), before_emulate (before emulation begins), after_run (before the app run), and so on. Each task is placed inside a folder named after the Cordova task. If you open the hooks folder, you will see an after_prepare folder and a README.md file. Inside the after_prepare folder, you will find a script file named 010_add_platform_class.js. This will get executed after the prepare task of Cordova is executed. All that this task does is add a class to the <body> tag, which is the same name as the platform on which the app is running. This would help us in styling the app better, based on the platform. You can find a list of tasks that you
- 15. plugins: This folder consists of all the plugins added to the project. We will be adding a few more plugins later on, and you can see them reflected here. scss: This folder consists of the base scss file which we will be overwriting to customize the styles of the Ionic components. www: This folder consists of the Ionic code. Anything you write inside this folder is intended to land inside the web view. This is where we will be spending most of our time.
- 16. www folder The www folder As mentioned earlier, this folder consists of our Ionic app, the HTML, CSS, and JS codes. If you open the www folder, you will find the following file structure:
- 17. Description www folder index.html: This is the application startup file. If you remember, in config.xml, we pointed the src on the content tag to this file. Since we are using AngularJS as our JavaScript framework, this file would ideally act as the base/first page for the Single Page Application (SPA). If you open index.html, you can see that the body tag has the ng-app attribute which points tothe starter module defined inside the js/app.js file. css: This folder consists of styles that are specific to our app. img: This folder consists of images that are specific to our app. js: This folder consists of the JavaScript code specific to our app. This is where we write the AngularJS code. If you open the app.js file present inside this folder, you can see that an AngularJS module is set up, passing in Ionic as a dependency
- 18. 1st Project Sample 1. View Template (single/partial). 2. Apps.js (whatever) 3. Controller (angular) 4. Data Service (angular Module)
- 21. App.js
- 22. Data Service