Presentation materials for workshop on Hybrid App Development with Ionic Framework. Organized by Women Leaders in Technology, Nepal. Workshop conducted by Aayush Shrestha.
Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course.
In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore.
It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.
A dive into Ionic Framework. What is it, why should you use it, how can it work for you and we build a basic application to show how easy and fast it is to use.
Most of the major internet companies have now declared themselves to be mobile first. Smartphones have become ubiquitous throughout the development world. But mobile development is fraught with challenges. There are more Android devices than iOS, but iOS users tend to spend more money. If you build your app for one, it is a complete re-write for the other. You may have heard of Cordova/PhoneGap, but the apps tend to be somewhat clunky looking.
Enter the Ionic Framework, a cross platform framework which combines PhoneGap with AngularJS and super fast CSS3 to make apps which perform at near native levels.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
Creating an hybrid app in minutes with Ionic FrameworkJulien Renaux
Creating an hybrid app in minutes with Ionic Framework.
* Technology presentation
* Creating a ionic project
* Building android/iOS apps
* Debugging tools
* Splashscreens and icons helper
Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course.
In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore.
It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.
A dive into Ionic Framework. What is it, why should you use it, how can it work for you and we build a basic application to show how easy and fast it is to use.
Most of the major internet companies have now declared themselves to be mobile first. Smartphones have become ubiquitous throughout the development world. But mobile development is fraught with challenges. There are more Android devices than iOS, but iOS users tend to spend more money. If you build your app for one, it is a complete re-write for the other. You may have heard of Cordova/PhoneGap, but the apps tend to be somewhat clunky looking.
Enter the Ionic Framework, a cross platform framework which combines PhoneGap with AngularJS and super fast CSS3 to make apps which perform at near native levels.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
Creating an hybrid app in minutes with Ionic FrameworkJulien Renaux
Creating an hybrid app in minutes with Ionic Framework.
* Technology presentation
* Creating a ionic project
* Building android/iOS apps
* Debugging tools
* Splashscreens and icons helper
Intro to Ionic for Building Hybrid Mobile ApplicationsSasha dos Santos
Ionic is a free framework that allows users to easily build hybrid mobile applications for iOS and Android using Angular and Cordova. Ionic provides a command line interface, CSS classes, reusable components (directives) and various tools for testing and development. In this session, you'll get a birdseye view of what Ionic has to offer, as well as guidelines for building your first Ionic app, including the use of tools such as Yeoman, Bower and Grunt.
> Mobile world
> Hybrid Apps vs Native Apps
> Cordova and Its Architecture
> What and Why IONIC ?
> What Techniologies IONIC does it use ?
> Ionicon and Its usage
> IONIC CLI
> IONIC and Packed Android Project File Structure.
> Example To Do List
Presentation from my conference in Lublin. Details, photos and video could be found there http://tryshchenko.com/events/ . Feel free to ask any questions.
Building Hybrid Apps with Angular JS and IONIC...
***********************************************************************
In this tutorial, you learn how to build a native-like mobile application with Ionic and AngularJS. You build a Conference application that allows the attendees of a conference to browse through the list of sessions, and share information on Facebook.
The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps.
Learn how to use the power of Ionic CLI, you'll see the most important commands and resources to go deeper into all goodies provided by this amazing tool.
Ionic CLI is so fun to use, after this presentation you'll feel more comfortable using the terminal while develop hybrid apps with Ionic Framework.
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesJacob Friesen
A presentation on Ionic Mobile Applications presented at Boca JS: http://www.meetup.com/Boca-JS/events/227150049/.
Traditionally, building Hybrid Mobile Apps with JavaScript (or other languages) was a middle ground between Mobile websites and Mobile Applications. Generally providing a more native like experience than websites, but with a reduced user experience compared to applications due to issues like slow animations or limited mobile OS access. The Ionic framework was created to provide hybrid development that does not compromise; matching native user experience while still allowing tools and techniques used on websites.
Intro to Ionic for Building Hybrid Mobile ApplicationsSasha dos Santos
Ionic is a free framework that allows users to easily build hybrid mobile applications for iOS and Android using Angular and Cordova. Ionic provides a command line interface, CSS classes, reusable components (directives) and various tools for testing and development. In this session, you'll get a birdseye view of what Ionic has to offer, as well as guidelines for building your first Ionic app, including the use of tools such as Yeoman, Bower and Grunt.
> Mobile world
> Hybrid Apps vs Native Apps
> Cordova and Its Architecture
> What and Why IONIC ?
> What Techniologies IONIC does it use ?
> Ionicon and Its usage
> IONIC CLI
> IONIC and Packed Android Project File Structure.
> Example To Do List
Presentation from my conference in Lublin. Details, photos and video could be found there http://tryshchenko.com/events/ . Feel free to ask any questions.
Building Hybrid Apps with Angular JS and IONIC...
***********************************************************************
In this tutorial, you learn how to build a native-like mobile application with Ionic and AngularJS. You build a Conference application that allows the attendees of a conference to browse through the list of sessions, and share information on Facebook.
The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps.
Learn how to use the power of Ionic CLI, you'll see the most important commands and resources to go deeper into all goodies provided by this amazing tool.
Ionic CLI is so fun to use, after this presentation you'll feel more comfortable using the terminal while develop hybrid apps with Ionic Framework.
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesJacob Friesen
A presentation on Ionic Mobile Applications presented at Boca JS: http://www.meetup.com/Boca-JS/events/227150049/.
Traditionally, building Hybrid Mobile Apps with JavaScript (or other languages) was a middle ground between Mobile websites and Mobile Applications. Generally providing a more native like experience than websites, but with a reduced user experience compared to applications due to issues like slow animations or limited mobile OS access. The Ionic framework was created to provide hybrid development that does not compromise; matching native user experience while still allowing tools and techniques used on websites.
Mobile HTML5 websites and Hybrid Apps with AngularJSCarlo Bonamico
AngularJS lets you use today the features of next-generation web standards, making front-end development more productive and fun.
What's better, it provides its "magic" tools to both web AND mobile apps: databinding, dependency injection, modularity, composable and event-driven architecture
This code-based interactive talk will share some lessons learned: how to structure applications, tune bandwidth and performance, interact with mobile-specific elements such as touch, sensors and finally native-looking UX with Ionic Framework
Building Hybrid Apps with AngularJS and IonicYounes Adounis
Ionic est un SDK HTML5 puissant qui vous aide à construire des applications mobiles Hybrid en utilisant des technologies web comme HTML, CSS et Javascript.
Durant cette session on verra quand faut it choisir Hybrid au lieu de Native, comment utiliser Ionic et tous ses composants et à la fin on fera un exemple réel d'application Android et iOS pour voir les meilleurs pratiques de développement.
We can know about what is mobile application. Especially we can know about Hybrid Mobile Application.
Hybrid mobile Application's Overview information and few thing about Native and Web mobile applications.
Ionic is a great tool for building hybrid mobile apps and AngularJS is a great JavaScript framework that plays very nicely with Ionic. In this talk we'll go over the basics of getting started with AngularJS+Ionic. We'll look at some real code from each of the 2 libraries and see what all is involved in building a hybrid mobile application. We will finish our journey with a real-life Ionic app presentation powered by RESTFul services.
Target Audience: People that want to see where to start with AngularJS and how it fits into Ionic. This talk assumes no prior knowledge with either library. If you've built a PhoneGap mobile app but felt lost when adding MVC-style structure or Bootstrap-esque UI components, this is the talk for you.
Assumed Knowledge: Attendees should be comfortable with "modern JavaScript". A basic understanding of classes and objects and variable scopes will be helpful. Some basic prior exposure to PhoneGap/Cordova and a UI-framework such as Bootstrap will also be helpful.
Diese Präsentation zeigt wie man Hybrid Apps mit dem Ionic 2 Framework erstellt kann. Dazu wird eine Beispielapp auf Basis der Open Movie Database programmiert.
Ionic Framework - get up and running to build hybrid mobile appsAndreas Sahle
Overview over frameworks for hybrid app development. Cordova, Supersonic, Ionic. Architecture, differences, setup and scaffolding for development. Angular based development for Apps with a web view.
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
Apache Cordova is a platform for building native mobile applications using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile application developers to access mobile native functions such as (Audio, Camera, File, Battery, Contacts …etc) using JavaScript. Although there are many JavaScript mobile application frameworks, jQuery mobile is one of the best mobile web application frameworks which allows the web developers to develop web applications that are mobile friendly. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to develop a native Android hybrid application and deploy on a real Android device. The demo application (“Memo” application) utilizes mobile native functions (Audio and Camera) using pure JavaScript.
Get the session recording from SoundCloud:
http://tinyurl.com/cordova2014
Ionic is a hybrid concept that uses the angular JS and Apache Cordova to build the applications. Ionic uses web technologies that enables web developers to switches to mobile technologies.
Hybrid apps are developed using HTML, CSS, and Javascript, and then wrapped in a native application using platforms like Cordova. This PPT covers the initial setup of developing hybrid mobile applications using frameworks like Ionic, NativeScript, and Cordova.
PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.
Introduction to the cordova framework for developing mobile apps1Lisa Brown
Cordova is an open-source framework for building hybrid mobile applications by using web technologies like HTML, CSS, and JavaScript. It was developed by Apache. The application will run as a native application both on iOS and Android platforms. On top of the Cordova platform, we can use various third-party plugins to do things like access the device's camera, microphone, geolocation, etc. These are very useful in developing mobile apps. In this session, we'll take an introduction to the Cordova framework. We'll discuss its structure and how we can create an application with it. We use eclipse and Como to build an app with PhoneGap CLI. We'll also see how we can deploy the app on android devices.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework.
With Ionic you build mobile apps using the web technology you already know. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which uses responsive design to change its look based on the device's screen dimensions.
In this session, we will build an app together to show many of Ionic's major features including CollectionRepeat, UI Widgets, Modals, and Slide Boxes. We will also discuss development workflow, debugging and which tools we use.
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
Building cross-platform mobile apps using open source tools. A manic paced session where I build the same app across 4 different open source mobile development frameworks.
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
Apache Cordova is a platform for building native mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.
Introduction to hybrid application developmentKunjan Thakkar
The presentation I prepared for in-house skill building. Introduction to Hybrid development. Understanding different frameworks and choosing the right one.
Similar to Workshop on Hybrid App Development with Ionic Framework (20)
JavaScript : What is it really? AND Some new features in ES6Aayush Shrestha
I built this presentation for Prime ICT Meetup that happened in Kathmandu on June, 2016.
Here, I talk about What JavaScript really is and about some new features introduced in ES6.
The first part of the slides are taken/influenced from David Crockford's talk called "Really. JavaScript" : https://www.youtube.com/watch?v=lTWGoL1N-Kc
This presentation was made for "Facebook Dev Meetup Kathmandu" held on 3rd April, 2016.
In this presentation, we talk about Facebook's Social Graph, Facebook Open Graph v2.5 and How we can use the api to build our apps. We explore the Graph API using Facebook's Graph API Explorer.
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesAayush Shrestha
The beauty of internet is in its availability and universality. However, developers are neglecting a big chunk of population when they build websites that are not accessible.
In this workshop, we will talk about accessibility and how it can be achieved in the websites that we build with very little extra effort to what we have been doing all along.
Organized by:
Sangai Hami - Together We
American Embassy
nLocate | Locate things nearby
XBRL Implementation for Financial Reporting | NCASAAayush Shrestha
Presentation on Limitations on current business reporting and XBRL.
Presented to an event organized by Nepal Chartered Accountant Students' Association (NCASA) about an XBRL solution proposed by me and my team in 2013 as a part of my Engineering's Final Project.
Credits :
Team :
Aayush Shrestha - aayush@nlocate.com
Ashok Basnet - mail@ashokbasnet.com.np
Umanga Bista - bistaumanga@gmail.com
Sarvagya Pant - sarvagya.pant@gmai.com
Supervisors :
Dr Aman Shakya - amanshakya@gmail.com
Er Sansar Jung Dewan - sansardewan@gmail.com
Presentation on Limitations on current business reporting and XBRL.
Presented to an event organized by Nepal Chartered Accountant Students' Association (NCASA) about an XBRL solution proposed by me and my team in 2013 as a part of my Engineering's Final Project.
Credits :
Team :
Aayush Shrestha - aayush@nlocate.com
Ashok Basnet - mail@ashokbasnet.com.np
Umanga Bista - bistaumanga@gmail.com
Sarvagya Pant - sarvagya.pant@gmai.com
Supervisors :
Dr Aman Shakya - amanshakya@gmail.com
Er Sansar Jung Dewan - sansardewan@gmail.com
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
Cosmetic shop management system project report.pdfKamal Acharya
Buying new cosmetic products is difficult. It can even be scary for those who have sensitive skin and are prone to skin trouble. The information needed to alleviate this problem is on the back of each product, but it's thought to interpret those ingredient lists unless you have a background in chemistry.
Instead of buying and hoping for the best, we can use data science to help us predict which products may be good fits for us. It includes various function programs to do the above mentioned tasks.
Data file handling has been effectively used in the program.
The automated cosmetic shop management system should deal with the automation of general workflow and administration process of the shop. The main processes of the system focus on customer's request where the system is able to search the most appropriate products and deliver it to the customers. It should help the employees to quickly identify the list of cosmetic product that have reached the minimum quantity and also keep a track of expired date for each cosmetic product. It should help the employees to find the rack number in which the product is placed.It is also Faster and more efficient way.
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
2. CURRENTLY
◦ Head of UI/UX Architecture and Design at Viveka Health
◦ Co Founder of Lishn.com
PREVIOUSLY
◦ Chief of Design at nLocate
Find Me At:
aayushonweb@gmail.com
fb.me/ShresthaAayush
@AayushShrestha
AAYUSH
SHRESTHA
6. .. and with the web technologies that
you are already familiar with.
7. Native Apps
Platform specific
Respective development tools
Time consuming to develop
Development is expensive
Performance is best
Platform Independent
HTML5, CSS3, JavaScript
Quick Development
Direct access to native APIs
Limited Performance
Hybrid Apps
8. Apache Cordova is a platform to build
mobile applications using HTML5, CSS
and JavaScript.
9. Cordova is an application
container
◦ You develop a web app.
◦ Cordova will take that web app and bundle it in a native
app.
◦ A Cordova app opens a webview (an instance of a web
browser) where the web app will operate
11. Supports most mobile platforms
◦ Android
◦ iOS
◦ Windows
◦ Blackberry OS
◦ Ubuntu OS
◦ Firefox OS
◦ LG Web OS
◦ FireOS
BUILD ONCE.
RUN AT ALL
PLATFORMS.
12. Cordova gives access to Native
APIs
◦ Battery Status
◦ Camera
◦ Contacts
◦ Device
◦ Device Orientation
◦ Dialogs
◦ File System
◦ Geolocation
◦ Media Capture
◦ Network Information
◦ Splashscreen
◦ Statusbar
◦ Vibration
13. Cordova is Free, Open Source and
Extensible
◦ Free and Open Source
◦ Cordova provides ways to develop your own plugins
that can interact with the device and/or the platform’s
SDK so you can build more advanced native features
14. What is PhoneGap?
◦ Cordova was initially called PhoneGap when it was
developed at Nitobi Labs
◦ Adobe bought PhoneGap.
◦ Then Adobe donated the project to Apache Software
Foundation and it was renamed to Cordova
◦ Now, PhoneGap is a distribution of Cordova that is
managed by Adobe.
◦ Phonegap is also free and open source
◦ Analogous to Chromium engine and Google Chrome
15. Ionic Framework is a front-end
framework built on top of Cordova with
Angular JS.
16. Ionic Framework
◦ Front end framework for hybrid mobile apps
◦ Angular JS to build mobile web application
◦ Cordova to create, build, run and deploy native apps
◦ UI components that will make your apps look more like
native apps
◦ Ionic-CLI that makes building, running, testing and
deploying apps easier
21. $ ionic build android
$ ionic emulate android
$ionic run android
BUILD THE APP AND TEST IN SIMULATOR.
REPLACE ANDROID WITH IOS TO BUILD AND TEST IN IOS.
* ANDROID SIMULATOR MUST BE INSTALLED
25. Platform specific CSS classes
Class Name Platform
platform-browser When app is working on a browser
platform-cordova When app is working on any device
Platform-ios When the device is iOS
Platform-android When the device is android
Platform-ipad When the device is iPad
Platform-
windowsphone
When the device is android phone
27. Dynamic Templates : Merges
Folder
You can have a special folder named merges in the same level where www folder
resides
Merges folder can have directories for android and ios that can override www
folder
29. $ cordova plugin add
cordova-plugin-camera
ADD CAMERA PLUGIN FOR CORDOVA
HTTPS://CORDOVA.APACHE.ORG/DOCS/EN/LATEST/REFERENC
E/CORDOVA-PLUGIN-CAMERA/
30. $ bower install ngCordova
INSTALL NGCORDOVA LIBRARY. NGCORDVA IS AN ANGULAR
LIBRARY THAT HELPS YOU PROPERLY USE CORDOVA PLUGINS
IN ANGULAR.
HTTP://NGCORDOVA.COM/
33. Create a CameraCtrl in
controllers.js
Notice: There is another parameter $cordovaCamera in the controller function.
$cordovaCamera is a service provided by ngCordova that helps you access the device
camera
34. Create a new template tab-
camera.html
The template has two buttons. One for taking phot. Another for Choosing Photo from
Gallery.
The <img> element shows the image selected or clicked.
35. In CameraCtrl.js, write takePhoto
function
Options object defines various options to start the camera, like the width and height of image,
source type (here Camera)
$cordovaCamera.getPicture() function starts the camera.
From the imageData received from camera, we create an imageURI which is used in template to view
the image.
36. In CameraCtrl.js, write
choosePhoto function
Similar to takePhoto function
But in options object, for sourceType, we use Camera.PictureSourceType.PHOTOLIBRARY