Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

Tech Guides - Cross-Platform Mobile Development

5 Articles
article-image-react-native-vs-ionic-which-one-is-the-better-mobile-app-development-framework
Guest Contributor
01 Mar 2019
6 min read
Save for later

React Native Vs Ionic : Which one is the better mobile app development framework?

Guest Contributor
01 Mar 2019
6 min read
Today, mobile app development has come a long way, it isn’t the same as it used to be. In earlier days, the development process included only simple decisions such as design, features and the cost of creating the app. But, this scenario has changed now. Nowadays, mobile application development starts with the selection of the right app development framework. There are lots of options to choose from like Flutter, AngularJS, Ionic, React Native, etc. In this post, we are going to compare two powerful mobile app development frameworks: Ionic and React Native, to figure out the best option for your app development needs. React Native - An introduction React native is developed by Facebook using JavaScript which is one of the most popular languages used by mobile developers. React Native allows creating high-end applications for specific operating systems. Developers can reuse the code from this framework and don’t need to build an application from scratch. This is a helpful tool to create applications for Android and iOS operating systems. Features and benefits of React Native As it is reusable across Android and iOS, it saves development time and cost. With virtual-DOM support, it allows viewing changes in real time. There is a huge community of React native developers. Code written by one developer can be read, studied, understood and extended easily by other developers. Once the code is developed,  it can be used on iOS and Android. Issues with React Native apps for Android or iOS can be resolved quickly. It’s consistently improving and with every new release app development becomes interesting and convenient. Ionic - An introduction Ionic is developed by Drifty using TypeScript. It’s an open-source platform for developing hybrid mobile applications using HTML5, JavaScript and CSS technologies. Apps built with the Ionic framework are mainly focused on the UI, appearance, and feel. As it utilizes a combination of Apache Cordova and Angular, Ionic for many developers, is the first choice for app development. It provides tools such as HTML5, CSS, SaaS, etc to develop top-notch hybrid mobile apps to be run on Windows, Android, and iOS. Features and benefits of Ionic Ionic is an open source framework used for developing hybrid mobile applications. It is built on top of AngularJS and Apache Cordova. Ionic Framework comes with a command line interface (CLI) that empowers developers to build and test apps on any platform. It offers all the functionalities that are available with native app development SDKs to allows to develop apps and customize them for the different OS then deploy through Cordova. Apps require one-time development with Ionic and can be deployed on Android, iOS and Windows platforms. Facility to build apps using HTML5, CSS, and JavaScript technologies. The apps developed with Ionic are majorly focused on UI to provide the better user experience. It offers a multitude of exciting elements to choose from for development. Ionic 4 is the newest release of Ionic so far. The release is a complete rebuild of the popular JavaScript framework for developing mobile and desktop apps. Although Ionic has, up until now, been using Angular components, this new version has instead been built using Web Components. This is significant, as it changes the whole ball game for the project. It means the Ionic Framework is now an app development framework that can be used alongside any front end frameworks, not just Angular. React Native Vs Ionic: A comparison The following table below shows the difference between these two on different bases. Basis for comparison React Native Ionic Ease of learning Due to a few pre-developed elements, learning takes time. With plenty of pre-developed and pre-designed elements, learning is easier and shorter. Code language JSX (A syntax extension to JavaScript used to optimize code before compilation into JS) TypeScript (A typed superset of JavaScript for compiling clean and simple JS code on any browser) Code reusability It allows using the same code to develop Windows, Android, and iOS mobile apps. Same code can be utilized for creating apps for iOS, Android, Windows as well as web and PWA. Performance It has excellent performance as it doesn’t use WebView. The performance is average because it uses WebView. Community support Strong Strong Ease of development React follows the approach, ‘learn once write anywhere’ Written only once, it can be executed on any platform Phone hardware accessibility To access phone hardware Apache Cordova is used. No third Party tool is required to access phone hardware. Code testing An emulator or real mobile is needed for testing. Apps can be tested on any web browser. Documentation Very basic documentation Quite simple, clear and consistent documentation Developer Facebook Drifty.co By now, you must have obtained knowledge about the basic differences between Ionic and React Native. Both these frameworks are different from each other and they provide distinguishing features. Let us now further investigate both frameworks based on some board parameters Performance Android apps developed with React Native usually have a better performance score than ones developed with Ionic. This is because Ionic uses web-view in mobile app development and this is not the case with React Native framework. Design Ionic comes with plenty of pre-developed elements that allows creating elegant apps with excellent UI. This is what makes Ionic beat React Native when it comes to design. React Native offers a few pre-developed elements as compared to Ionic. Cost Developing apps with Ionic is cheaper than developing with React Native. This is because, in Ionic, the same code can be utilized across different platforms. Final words So which technology you should use? Well, this is not easy to tell. There are several factors you can consider like cost, features, requirements, platforms, and team size when deciding the best app development framework. They both serve different purposes and choosing any of them may be easy. If you a low budget then Ionic can be your choice to build an appealing application with a good performance. On the other hand, React Native lets you build native-like apps but the cost of development may be much than Ionic. Depending on your requirements and preferences, you can decide to choose any of the frameworks. Author-Bio David Meyer is a senior web developer at CSSChopper, a front end, and custom web development company catering customers across the globe. David has a passion for web development and likes to share his knowledge through informative blogs and articles.
Read more
  • 0
  • 0
  • 9947

article-image-4-key-benefits-of-using-firebase-for-mobile-app-development
Guest Contributor
19 Oct 2018
6 min read
Save for later

4 key benefits of using Firebase for mobile app development

Guest Contributor
19 Oct 2018
6 min read
A powerful backend solution is essential for building sophisticated mobile apps. In recent years, Firebase has emerged to prominence as a power-packed Backend-as-a-Solution (BaaS), thanks to its wide-ranging features and performance boosting elements. After being acquired in 2014 by Google, several of its features further got a performance boost. These features have made  Firebase quite a popular backend solution for app developers and other emerging IT sectors. Let us look at its 4 key benefits for cross-platform mobile app development. Unleashing the power of Google Analytics Google Analytics for Firebase is a completely free solution with unconstrained reporting on many aspects. The reporting feature allows you to evaluate client behavior, report on broken links, user interactions and all other aspects of user experience and user interface. The reporting helps developers make informed decisions while optimizing the UI and the app performance. The unmatched scale of reporting: Firebase analytics allows access to unlimited reports on as many as 500 different events. The developers can also create custom events for reporting as their need suits. Robust audience segmentation: The Firebase analytics also allows segmenting the app audience on different parameters and grounds. The integrated console allows segmenting the audience on the basis of device information, custom events, and user characteristics. Crash reporting to fix Bugs Firebase also helps to address performance issues of an app by fixing bugs right from its backend solution. It is also equipped with robust crash reporting feature. Its crash reporting helps to deliver intricate and detailed bug and crash reports to address all the coding errors in an app. The reporting feature is capable of grouping together the issues in different categories as per the characteristics of the problem. Here are some of the attributes of this reporting feature. Monitoring errors: It is capable of monitoring fatal errors for iOS apps and both fatal and non-fatal errors for Android apps. Generally, reports are initiated as per the impact caused by such errors on the user experience. Required data collection to fix errors: The reports also enlist all the details concerning the device in use, performance shortfalls and user scenarios concerning the erroneous events. According to the contributing factors and other similarities, the issues are grouped in different categories. Email alerts: It also allows sending email alerts as and when such issues or problems are detected. The configuration of error reporting: The error reporting can also be configured remotely to control who can access the reports and list of events that occurred before an event. It is free: Crash and bug reporting is free with Firebase. You don't need to pay a penny to access this feature. Synchronizing data with real-time database With Firebase you can sync the offline and online data through NoSQL database. This makes the application data available on both offline and online states of the app. This boosts collaboration on the application data in real time. Here are some of its benefits. Real-time: Unlike the so-called HTTP requests that work to update the data across interfaces, the Real-time Database of firebase syncs data with every change thus helping to reflect the change in real time across any device in use. Offline: As Firebase Real-time Database SDK helps save your data in local disk, you can always access the data offline. As and when connectivity is back, the changes are synced with the present state of the server. Access from multiple devices: The Firebase Real-time Database allows accessing application data from multiple devices and interfaces including mobile devices and web. Splitting and scaling your data: Thanks to Firebase Real-time Database, you can split your data across multiple databases within the same project and set rules for each database instances. Firebase is feature rich for futuristic app development In addition to the above, Firebase is fully empowered with a host of rich features required for building sophisticated and most feature-rich mobile apps. Let us have a look at some of the key features of Firebase that made it a reliable platform for cross-platform development. Hosting: The hosting feature of Firebase allows developers to update their contents in the Content Delivery Network (CDN) during production. Firebase offers full hosting support with a custom domain, Global CDN, and an automatically provided SSL Certificate. Authentication: Firebase backend service offers a powerful authentication feature. It comes equipped with simple SDKs and easy to use libraries to integrate authentication feature with any mobile app. Storage: Firebase storage feature is powered by Google Cloud Storage and allows users to easily download media files and visual contents. This feature is also helpful in making use of user-generated content. Cloud Messaging: With Cloud Messaging, a mobile app powered can easily send a message to users and indulge in real-time communication. Remote Configuration: This feature of Firebase allows developers to incorporate certain changes in the app remotely. Thanks to this, the changes are reflected in the existing version, and the user does not need to download the latest updated version. Test Lab: With Test lab, developers can easily test the app in all the devices listed in the Google data center. It can even do the testing without requiring any test code of the respective app. Notifications: This feature gives developers a console to manage and send user-focused custom notifications to the users. App Indexing: This feature allows developers to index the app in Google Search and achieve higher search ranks in app marketplaces like Play Store and App Store. Dynamic Links: Firebase also equips the app to create dynamic links or smart URLs to present the respective app across all digital platforms including social media, mobile app, web, email, and other channels. All the above-mentioned benefits and useful features that empower mobile app developers to create dynamic user experience helped Firebase achieve such unprecedented popularity among developers worldwide. No wonder, in a short time span it has become a very popular backend solution for so many successful cross-platform mobile apps. Some exemplary use cases of Firebases Here we have picked two use cases of Firebase, respectively for one relatively new and successful app and one leading app in its niche. Fabulous Fabulous is a unique app that trains users to dispose of bad habits and get used to good habits to ensure health and wellbeing. The app by customizing the onboarding process through Firebase managed to double the retention rate. The app could incorporate custom user experience for different groups of users as per their preference. Onefootball This leading mobile soccer app OneFootBall experienced more than 5% increase in user session time thanks to Firebase. The new backend solution powered by Firebase helped the game app engage the audience more efficiently than ever before. The custom contents created by this popular app can enjoy better traction with users thanks to higher engagement. Author Bio: Juned Ahmed works as an IT consultant at IndianAppDevelopers, a leading Mobile app development company which offers to hire app developers in India for mobile solutions. He has more than 10 years of experience in developing and implementing marketing strategies. How to integrate Firebase on Android/iOS applications natively. Build powerful progressive web apps with Firebase. How to integrate Firebase with NativeScript for cross-platform app development.
Read more
  • 0
  • 0
  • 12597

article-image-top-frameworks-for-building-your-progressive-web-application-pwa
Sugandha Lahoti
15 May 2018
6 min read
Save for later

Top frameworks for building your Progressive Web Apps (PWA)

Sugandha Lahoti
15 May 2018
6 min read
The hype and rise of progressive web apps are tremendous. A PWA is basically a web application that feels like a native application to the user. By making your app a PWA, not only do you acquire new users, but you can also retain them for longer. Here’s a quick rundown of all things good about a PWA. Reliable: Loads instantly even under poor network conditions. Lighting fast and app-like: Responds to the user’s actions with speed and with a smooth interaction. Engaging and responsive: Gives the feeling that it was made specifically for that device, but it should be able to work across all platforms. Protected and secure: Served over HTTPS to make sure the contents of the app are not messed with. If you’re not already developing your next app as a PWA, here are 5 reasons why you should do that asap. And if you’re confused about choosing the best framework for developing your PWA, here are the top 3 frameworks available to make your next app a PWA. Ionic Ionic is one of the most popular frameworks for building a progressive web app. Let’s look at a few reasons why you should choose Ionic as your PWA framework Free and open-source:  Ionic is open source, and licensed under MIT. Open-source means developers can manage the code structure easily, saving time, money and efforts. They also have a worldwide community forum to connect with other Ionic developers, ask questions, and help out others. Cross-platform and one-codebase: Ionic allows seamless building of apps across popular operating systems, such as Android, iOS and Windows. It has a one codebase feature. This means apps are deployed through Apache Cordova with a single code base, and the application adapts automatically to the device it is functioning in. Rich UI: Ionic is equipped with pre-built components that are used to customize design themes and elements. It is based on SASS UI, with rich features to create fast, robust, interactive, native-like applications. Powerful functionality: Ionic is supported by Angular. The component API of Angular helps developers create interactive hybrid and web apps. Ionic is equipped with Cordova Plugins for accessing various native features, like Camera, GPS, and so on. It also features a powerful CLI for building, testing and deploying apps across multiple platforms. Read our Hybrid Mobile Development with Ionic to build a complete, professional-quality, hybrid mobile application with Ionic. You can also checkout Hybrid Mobile apps: What you need to know, for a quick rundown of all that is to know about a Hybrid mobile app. Polymer Google’s Polymer App Toolbox is another contender for the development of PWAs. It is a collection of web components, tools, and templates for building Progressive Web Apps. Blends PWAs with Web components Polymer allows developers to architect a component-based web app using Polymer and Web Components. Web components can form encapsulated and reusable custom HTML elements. They are independent of the frameworks because they are made of pure HTML/CSS/JS, unlike framework-dependent UI components in React/Angular. The web components are provided through a light-weight Polymer Library for creating framework-independent, custom components. More features include: Responsive design using the app layout components. Modular routing using the <app-route> elements. Localization with <app-localize-behavior>. Turnkey support for local storage with app storage elements. Offline caching as a progressive enhancement, using service workers. Build tooling to support serving the app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1. Each component whether used separately or together can be used to build a full-featured Progressive web app. Most importantly, each component is additive. For a simple app one only needs the app-layout. As it gets more complicated, developers can add routing, offline caching, and a high-performance server as required. Read our Getting Started with Polymer book to create responsive web apps using Polymer. Angular Angular, probably the most popular front-end web application platform, can also be used to make robust, reliable, and responsive PWAs. Before the release of version 5, supporting progressive web apps in Angular required a lot of expertise on the developers’ part.Version 5 comes equipped with a new version of the Angular Service Worker for built-in PWA support. Angular 6 (released a few days back) has two new CLI commands. Both these versions make it very simple to make web application downloadable and installable, just like a native mobile application. Service Worker Updates With Angular 5 the development of Service Workers is becoming significantly easier. By using Angular CLI developers can choose to add Service Worker functionality by default. The Angular Service Worker functionality is provided by the module @angular/service-worker. Service worker can power up an application by only providing some JSON configuration instead of writing the code manually. The key difference with other service worker generators (like Workbox, sw-precache) is the fact, that you do not re-generate the service worker file itself, you only update its control file. New CLI commands Angular 6, also introduces two new commands apart from the service worker updates. The first, ng update, is a CLI command for updating dependencies and code. The second command, ng add, supports turning applications into progressive web apps, which support offline web pages. Apart from these frameworks, React is also a good alternative. Backed by Facebook, it has a Create-React-App generator which is the official scaffolding tool to generate a Reactjs App. Get started with Scott Domes's Progressive Web Apps with React as your first step for building PWA applications. Yet another popular choice, would be Webpack. Webpack plugins can generate the service worker and manifest required for a PWA to be registered. It uses a Google project called Workbox which provides tools that help make offline support for web apps easier to set up. The bottom line is that the frameworks for building progressive web apps are growing and expanding at a rapid rate with regular updates every couple of months. Choosing a particular framework thus doesn’t make much difference to the app behavior. It only depends on the developer’s area of interest and expertise. Windows launches progressive web apps… that don't yet work on mobile How to Secure and Deploy an Android App How Android app developers can convert iPhone apps
Read more
  • 0
  • 0
  • 32203

article-image-hybrid-mobile-apps-what-you-need-to-know
Sugandha Lahoti
26 Apr 2018
4 min read
Save for later

Hybrid Mobile apps: What you need to know

Sugandha Lahoti
26 Apr 2018
4 min read
Hybrid mobile apps have been around for quite some time now, but advances in mobile development software and changes in user behavior have allowed it to grow. Today, users expect hybrid apps, even if they wouldn’t know what a ‘hybrid app’ actually is. What is a Hybrid mobile app? A Hybrid app is essentially a web application that acts like a native app. Or a native app that acts like a web application. That means it can do everything HTML5 does while also incorporating native app features, like access to a phone’s camera. Hybrid mobile apps consist of two parts. The first is the back-end code built using languages such as HTML, CSS, and Javascript. The second is a native shell that loads the code using Webview. Advantages of hybrid mobile apps Hybrid apps are much easier to build than native apps. This is because they are built using HTML, CSS, and Javascript - software that typically runs in the browser. They also have a faster development cycle than native apps because you only have a JavaScript codebase. It is, however, important to note that hybrid mobile apps require third-party tools such as Apache Cordova to ease communication between the web view and the native platform. Noteworthy Hybrid apps include MarketWatch, Untappd, Sworkit etc. Hybrid mobile apps can run on both Android and iOS devices (the two most prominent OS). This is great for developers as it means less work for them - code can be reused for progressive web applications and desktop applications with minor tweaking. Disadvantages of hybrid mobile apps Although they’re extremely versatile, hybrid apps have certain disadvantages. They’re often a little more expensive than standard web apps because you have to work with the native wrapper. It’s also sometimes a disadvantage to be dependent on a third-party platform. Compared to native apps, hybrid apps aren’t quite as interactive and often a bit slower. Of course, the app is dependent on resources from the web. Hybrid mobile apps also generally have a standard template. Any customization you want to do in your application will take you away from the hybrid model. If this is the case, you may as well go native. Hybrid mobile app frameworks There are a good range of hybrid mobile application frameworks out there for mobile developers at the moment. Let’s take a look at some of the best. React Native Facebook’s React Native is a mobile framework for implementing a single code multiple times. It compiles to native mobile app components to build native mobile applications (iOS, Android, and Windows) in JavaScript. React Native’s library includes Flexbox CSS styling, inline styling, debugging, and supports deploying to either the App Store or Google Play. Ionic Ionic Framework is an open-source SDK for hybrid mobile app development, licensed under MIT. It is built on top of Angular.js and Apache Cordova.  Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps build using Ionic can be distributed through native app stores to be installed on devices by using Cordova. Xamarin Microsoft’s Xamarin Hybrid development platform allows developers to code in C# many platforms in C#. Developers can use Xamarin tools to write native Android, iOS, and Windows apps with a C#-shared codebase, and share code across multiple platforms. PhoneGap Adobe PhoneGap framework is an open source distribution of Apache Cordova framework. With PhoneGap, hybrid applications are built with HTML5 and CSS3 (for rendering), and JavaScript (for logic) to be used across multiple platforms. Hybrid mobile apps are great for users Hybrid mobile apps are particularly effective when you want to build and deploy an app more efficiently. They are also useful for building prototype applications. However, the key thing to remember about hybrid mobile apps is that many users today expect the type of experience they deliver. The old distinction between browser and native experiences has almost disappeared. A well-written hybrid app does not behave or look any different than its native equivalent and that, really, is what users want. Also, check out React Native Cookbook React and React Native Learning Ionic - Second Edition Ionic 2 Cookbook - Second Edition Mastering Xamarin UI Development
Read more
  • 0
  • 0
  • 4375

article-image-introduction-phonegap
Robi Sen
27 Feb 2015
9 min read
Save for later

An Introduction to PhoneGap

Robi Sen
27 Feb 2015
9 min read
This is the first of a series of posts that will focus on using PhoneGap, the free and open source framework for creating mobile applications using web technologies such as HTML, CSS, and JavaScript that will come in handy for game development. In this first article, we will introduce PhoneGap and build a very simple Android application using PhoneGap, the Android SDK, and Eclipse. In a follow-on article, we will look at how you can use PhoneGap and PhoneGap Build to create iOS apps, Android apps, BlackBerry apps, and others from the same web source code. In future articles, we will dive deeper into exploring the various tools and features of PhoneGap that will help you build great mobile applications that perform and function just like native applications. Before we get into setting up and working with PhoneGap, let’s talk a little bit about what PhoneGap is. PhoneGap was originally developed by a company called Nitobi but was later purchased by Adobe Inc. in 2011. When Adobe acquired PhoneGap, it donated the code of the project to the Apache Software Foundation, which renamed the project to Apache Cordova. While both tools are similar and open source, and PhoneGap is built upon Cordova, PhoneGap has additional capabilities to integrate tightly with Adobe’s Enterprise products, and users can opt for full support and training. Furthermore, Adobe offers PhoneGap Build, which is a web-based service that greatly simplifies building Cordova/PhoneGap projects. We will look at PhoneGap Build in a future post.   Apache Cordova is the core code base that Adobe PhoneGap draws from. While both are open source and free, PhoneGap has a paid-for Enterprise version with greater Adobe product integration, management tools, and support. Finally, Adobe offers a free service called PhoneGap Build that eases the process of building applications, especially for those needing to build for many devices. Getting Started For this post, to save space, we are going to jump right into getting started with PhoneGap and Android and spend a minimal amount of time on other configurations. To follow along, you need to install node.js, PhoneGap, Apache Ant, Eclipse, the Android Developer Tools for Eclipse, and the Android SDK. We’ll be using Windows 8.1 for development in this post, but the instructions are similar regardless of the operating system. Installation guides, for any major OS, can be found at each of the links provided for the tools you need to install. Eclipse and the Android SDK The easiest way to install the Android SDK and the Android ADT for Eclipse is to download the Eclipse ADT bundle here. Just downloading the bundle and unpacking it to a directory of your choice will include everything you need to get moving. If you already have Eclipse installed on your development machine, then you should go to this link here, which will let you download the SDK and the Android Development Tools along with instructions on how to integrate the ADT into Eclipse. Even if you have Eclipse, I would recommend just downloading the Eclipse ADT bundle and installing it into your own unique environment. The ADT plugin can sometimes have conflicts with other Eclipse plugins. Making sure Android tooling is set up One thing you will need to do, no matter whether you use the Eclipse ADT bundle or not, is to make sure that the Android tools are added to your class path. This is because PhoneGap uses the Android Development Tools and Android SDK to build and compile the Android application. The easiest way to make sure everything is added to your path is to edit your environment variables. To do that, just search for “Edit Environment” and select Edit the system environment variables. This will open your System Properties window. From there, select Advanced and then Environment Variables as shown in the next figure. Under System Variables, select Path and Edit. Now you need to add sdkplatform-tools and sdktools  to your path as shown in the next figure. If you have used the Eclipse ADT bundle, your SDK directory should be of the form C:adt-bundle-windows-x86_64-20131030sdk.  If you cannot find your Android SDK, search for your ADT. In our case, the two directory paths we add to the Path  variable are C:adt-bundle-windows-x86_64-20131030sdkplatform-tools  and C:adt-bundle-windows-x86_64-20131030sdktools. Once you’re done, select OK , but don’t just exit the Environment Variables  screen yet since we will need to do this again when installing Ant. Installing Ant PhoneGap makes use of Apache Ant to help build projects. Download Ant from here and make sure to add the bin directory to your path. It is also good to set the environment variable ANT_HOME as well. To do that, create a new variable in the Environment Variables screen under System Variables called ANT_HOME and point it to the directory where you installed Ant: For more detailed instructions, you can read the official install guide for Apache Ant here. Installing Node.js Node.js is a development platform built on Chrome’s JavaScript runtime engine that can be used for building large-scale, real-time, server-based applications. Node.js is used to provide a lot of the command-line tools for PhoneGap, and to install PhoneGap, we first need Node.js. Unix, OS X, and Windows users can find installers as well as source code here on the Node.js download site. For this post, we will be using the Windows 64-bit installer, which you should be able to double-click and install. Once you’re done installing, you should be able to open a command prompt and type npm –version and see something like this: Installing PhoneGap Once you have Node.js installed, open a command line and type npm install –g phonegap. Node will now download and install PhoneGap and its dependencies as shown here: Creating an initial project in PhoneGap Now that you have PhoneGap installed, let’s use the command-line tools to create an initial PhoneGap project. First, create a folder where you want to store your project. Then, to create a basic project, all you need to do is type phonegap create mytestapp as shown in the following figure. PhoneGap will now build a basic project with a deployable app. Now go to the directory you are using for your project’s root directory. You should see a directory called mytestapp, and if you open that directory, you should see something like the following: Now look under platforms>android and you should see something like what is shown in the next figure, which is the directory structure that PhoneGap made for your Android project. Make sure to note the assets directory, which contains the HTML and JavaScript of the application or the Cordova directories that contain the necessary code to tie Android’s API’s to PhoneGap/Cordova’s API calls. Now let’s import the project into Eclipse. Open Eclipse and select Create a New Project, and select Android Project from Existing Code. Browse to your project directory and select the platforms/android folder and select Finish, like this: You should now see the mytestapp project, but you may see a lot of little red X’s and warnings about the project not building correctly. To fix this, all you need to do is clean and build the project again like so: Right-click on the project directory. In the resulting Properties dialog, select Android from the navigation pane. For the project build target, select the highest Android API level you have installed. Click on OK. Select Clean from the Project menu. This should correct all the errors in the project. If it does not, you may need to then select Build again if it does not automatically build. Now you can finally launch your project. To do this, select the HelloWorld project and right-click on it, and select Run as and then Android application. You may now be warned that you do not have an Android Virtual Device, and Eclipse will launch the AVD manager for you. Follow the wizard and set up an AVD image for your API. You can do this by selecting Create in the AVD manager and copying the values you see here: Once you have built the image, you should now be able to launch the emulator. You may have to again right-click on the HelloWorld directory and select Run as then Android application. Select your AVD image and Eclipse will launch the Android emulator and push the HelloWorld application to the virtual image. Note that this can take up to 5 minutes! In a later post, we will look at deploying to an actual Android phone, but for now, the emulator will be sufficient. Once the Android emulator has started, you should see the Android phone home screen. You will have to click-and-drag on the home screen to open it, and you should see the phone launch pad with your PhoneGap HelloWorld app. If you click on it, you should see something like the following: Summary Now that probably seemed like a lot of work, but now that you are set up to work with PhoneGap and Eclipse, you will find that the workflow will be much faster when we start to build a simple application. That being said, in this post, you learned how to set up PhoneGap, how to build a simple application structure, how to install and set up Android tooling, and how to integrate PhoneGap with the Eclipse ADT. In the next post, we will actually get into making a real application, look at how to update and deploy code, and how to push your applications to a real phone. About the author Robi Sen, CSO at Department 13, is an experienced inventor, serial entrepreneur, and futurist whose dynamic twenty-plus year career in technology, engineering, and research has led him to work on cutting edge projects for DARPA, TSWG, SOCOM, RRTO, NASA, DOE, and the DOD. Robi also has extensive experience in the commercial space, including the co-creation of several successful start-up companies. He has worked with companies such as UnderArmour, Sony, CISCO, IBM, and many others to help build new products and services. Robi specializes in bringing his unique vision and thought process to difficult and complex problems, allowing companies and organizations to find innovative solutions that they can rapidly operationalize or go to market with.
Read more
  • 0
  • 0
  • 2972
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at $19.99/month. Cancel anytime