Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » cross-platform

ionic framework and cordova or phonegap – getting started

September 26, 2014 by Source Freeze 1 Comment

What is ionic framework ?

ionic framework is a open source html5 framework for developing highly interactive apps using mobile optimized html5, css and js components, build with Sass and optimized for Angular JS.

ionic framework or ionic template for ionic apps

 

ionic is mainly focused look and feel UI interaction of the app it closely resembles native mobile counter parts, and it is well to use with phonegap or cordova mobile  application development, rather then mobile site ionic is focused on native/hybrid mobile application development so it takes html5  on mobile development into next level.

What is Cordova or Phonegap ?

Apache Cordova it is a open source cross-platform mobile application development framework using the HTML5, JavaScript and CSS, so  it makes user can create native applications without knowledge of native programming like Objective-c, java, C#.  many of them confused cordova framework with phonegap,  cordova and phonegap frameworks are almost same but it is having minimal difference, again i am not like to confuse, you can find the detailed answer here.

Install ionic framework and cordova

For install ionic framework and cordova must need Node.js,  you can get the node.js and npm packages directly from Node.js site,  or using the below command.

 npm -v

then install the latest ionic cordova using command line tools, use the below command line to install the cordova ionic framework.

// install the ionic framework and cordova

  npm install -g cordova ionic  // windows platform 

$ sudo install -g cordova ionic // for MAC and linux platform

Install Android SDK and iOS Platform tools for ionic

next you need install the platform specific SDK for develop the application for separate platforms.

ionic framework tutorial team created a video for Installing Cordova and the Android SDK on Windows 7 and 8,  and also check out the cordova guide for android platform.

For developing application for iOS platform you must need MAC and follow the guidelines in the Cordova guide for iOS platform.

 ionic template types for mobile app

ionic provides set of ready-made templates for creating mobile apps, listed in the below

1. blank ionic template

2. tab ionic template

3. sidemenu ionic template

for creating the blank ionic app

 $ ionic start [appname] blank

creating tab ionic template

 $ ionic start [appname] tabs

creating sidemenu ionic template

$ ionic start [appname] sidemenu

Build and Run the ionic app

Testing your ionic app into browser use the below command line, any  changes are made in your html, javascript and css files the browser automatically reloads.

$ ionic serve

you can build and run the ionic app for ios and android platform directly using command line, for running the ionic application into simulator

$ ionic build ios

$ ionic emulate ios

for running ios ionic application into real devices use the below command lines

$ ionic run ios

instead iOS in the above commands use android to test applications into android device, and make sure you have enabled USB debugging in your connected devices.

Filed Under: cordova, cross-platform, Hybrid, ionic framework, Mobile App Development, phonegap Tagged With: cross-platform, ionic

visual studio cordova plugins for cross-platform mobile apps

June 11, 2014 by Source Freeze 1 Comment

As per present market, mobile application development is hot trend in the software industry.Growing number of mobile phone and tablets is the proof that this field will reach the top position in the software development. But mobile development having different platforms like iOS, Android, windows, etc.  Customer eager to develop their business application that supports all platforms, so most of them choosing cross platform application development. Cross platform  is the tool that support all platform, so user can create application using their existing skills like HTML5, JavaScript/jQuery, CSS and using existing development IDE (visual studio),  yes it’s amazing,  visual studio  supports cross platform application development,  here going to list out some of the top visual studio extensions that support cross platform development, done extensive research and find the below top visual studio extension that support hybrid application development.

  • Visual studio Cordova

Cordova –This is Adobe Phonegap framework that is used to create hybrid mobile applications for iOS, Android, Windows Phone and other platforms, using HTML, JavaScript and CSS. Microsoft integrated this Cordova into visual studio user can download “visual studio cordova plugin” using the below link. http://www.microsoft.com/en-us/download/details.aspx?id=42675 Cordova Project This Microsoft Cordova integration support all the API provide by Cordova and easily access the android emulators right from the visual studio, at the same time user can access the all services already available in the visual studio, so this makes visual studio users to build application for cross-platform.

  • Telerik App Builder(formerly “Icenium”)

Telerik provides App Builder visual studio extension for developing cross platform applications using HTML5, JavaScript and CSS and it also provides support for jQuery, Kendo UI Mobile, with Telerik app builder user can create interactive UI prototype using drag and drop visual designer, and it provide browser client to build and deploy the applications. Telerik not only provide UI for mobile it also provides Telerik back end services (formerly “everlive”), Telerik analytics and Telerik mobile testing services. Telerik Project download the Telerik app builder extension for visual studio using the below link. http://www.telerik.com/appbuilder/visual-studio-extension

  • VSNoMAD

VSNoMad plugin for visual studio which provided by RedGate that is used to create cross platform application using HTML5, JavaScript and CSS. Nomad support for iOS, Android and Windows Phone. Also nomad support default set of Phonegap plugins. Nomad manage to create android,iOS and windows build files in easy manner just uploading the files into server. It provides set of emulator using chrome extension but in nomad debugging process in little problematic. Nomad Project Download the vsnomad visual studio plugin using the below link. http://vsnomad.com/download.html

Filed Under: cross-platform, visual studio - plugin Tagged With: cross-platform, mobile application development, Visual Studio plugin

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS javascript mobile application development nextjs objective-c swift uiwebview Visual Studio plugin

Copyright © 2023 Source Freeze