I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
create cordova project.
create react project inside of /www folder (or any other folder that will work with my use-case...).
run cordova run android from root to run application in Android Simulator and npm start from /www directory.
cordova should be able to listen for changes and live-reload react app inside Android emulator.
I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really npm build followed by cordova run android only way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
Run webpack-dev-server with --host 0.0.0.0 to make it accessible from outside
Change your config.xml and make <content src="..." /> point to your local-IP address and your dev-port, e.g. <content src="http://192.168.0.2:3000/" />
Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g. <allow-navigation href="http://192.168.0.2:3000/*" />
If you need native functionalities via cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
Related
I'm new to AngularJS. Is there any way to convert a whole AngularJS application to a mobile native App (Android and iOS) or AngularJS itself. Is there a way to create a mobile app?
I have referred the xdk and phonegap.
Another solution that worked for me in android :
1. Create a plain native app in android.
2. Keep the angular app in resources folder.
3. Call the app in webview.
Similar solution may be possible in ios also, I haven't tried yet.
You can use Apache Cordova or PhoneGap. The use of cross platform libs is very comfortable while you are able to create different native apps by using one sourcecode. With phonegap/cordova you need node.js.
These are the default CLI commands for setup your application. You should create a new hybrid app by using the following commands. You could migrate your AngularJS application by copy-past your files into the new app directory.
Install cordova via NPM
npm install -g cordova.
Create your app (You could put your AngularJS App in your app directory and make it work)
cordova create <path>
Add a platform e.g. iOS or Android (The following command need to be run in the app <path> directory cordova create <path> has been configured.
cordova platform add android --save
Run your app in emulator
cordova run android
Build a native App like:
cordova build android
I have a webapp which I build with Angularjs 2.0, I want to convert it to android apk and install it on android phone and test.
I dont have any experience in building mobile native app or converting webapp to native app.
I have gone through How to convert an existing AngularJS web app to a Cordova app?
Any suggestion/guidance will be helpful.
The most simple explanation is you will need to put your angular files in the www folder, setup your configuration file, make sure the android platform is installed, then run the Android emulate and/or build command to see if it works. That's a very oversimplified version.
Once you've got it working there's a process to go through to prepare the apk to be uploaded to the Google Play Store. You have to be a registered developer for the play store, which is $25/year.
https://scotch.io/#vijayk036/building-hybrid-mobile-apps-using-cordova-and-angularjs-for-android
https://thebhwgroup.com/blog/converting-angularjs-website-cordova-app-ios-and-android
I use Phonegap Desktop and Phonegap Developer app for a while now. This is really interesting for quickly testing my development.
But I'm facing a limitation with the embedded barcode scanner which is displaying the camera display in full screen.
I need to embed the camera display into a container so I have space for displaying information in the same time.
After searching for a while, I've discovered the Scandit SDK for PhoneGap was the only plugin which allows cropping the camera display.
I spent a lot of time trying to implement Scandit, but no success. At least I can build the app, but when using it, scanner is not working...
Here are the steps I've followed:
clone the PhoneGap Developer project from Git
Install using npm
add ios platform
open the xcode project file
build the application and run it on device
=> At this time the PG Dev is running well and my application is working fine
Then, i continued:
remove all reference to the default barcode scanner plugin
build the application and run it on device
==> PG Dev still working fine and my application is working fine
Next steps:
clone the Scandit phonegap plugin from Git
download the Scandit SDK from my scandit account
put the SDK into the cloned scandit phonegap plugin
modify the plugin.xml to change the path to the bundle and framework (mismatch of version name in the path)
<resource-file src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.bundle"/>
<framework src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.framework" custom="true"/>
copy bundle and framework into the correct folder of scandit
modify the config.xml to include reference to Scandit and set the spec attribut to the version of the SDK
build the application and run it on device
==> PG Dev still working fine and my application is working fine (it doesn't use scandit for the moment)
Next steps:
Remove my project from PhoneGap desktop
add Scandit Sample project to PG Desktop
I used the "Continuous Scaled/Cropped" example from there: http://docs.scandit.com/4.12/phonegap/cordova-examples.html
add my App Key for the license
launch my PG Dev app on my device and download the project files
==> PG Dev is running fine and download the Scandit Sample App.
But the app doesn't work. When clicking on the scan button, nothing happends..
After some investigation, I found that I ran through an exception on Scandit class.
Adding a try on the command 'Scandit.License.setAppKey' allowed me to report in the PG Desktop log the following error:
ReferenceError: Can't find variable: Scandit
Adding this try/catch made the app raising an exception at the next line:
var settings = new Scandit.ScanSettings();
After searching the web about my error, and some posts were suggesting to manually add the framework and bundle into xcode.
So I did it by drag&droping the framework and bundle into the framework folder of the xcode project.
But when I try building my project, it is failing with many errors...
To solve it, I had to had manually all the scandit plugin files (*.h and *.m) into my xcode project.
All previous errors have been solved, but new ones appeared.
This was due to some other missing native ios frameworks...
Once these framework added, all errors were solved and I managed to successfully build the application.
But when running it, I'm still having the error: "ReferenceError: Can't find variable: Scandit"
I'm now running out of idea..
What did I do wrong?
Is there anyone having managed to build a PG Desktop with Scandit embedded?
Thanks.
Sorry for this long post, just tried to be the more precise I could be.
The issue here is two fold. First you need to be aware that the Scandit Barcode Scanner plugin makes use of native code and can therefore not be used in the Phonegap Developer app, as the only thing transmitted to it is your html/css/javascript and the javascript part of the plugin. To also include the native parts of the plugin you have to build and deploy the project yourself. As you are trying to build the XCode project it seems like you are now doing this.
The second part is that you are way overcomplicating the adding of the plugin. There is no need for you to manually clone the git repo, add our libraries, adjust paths in the plugin.xml etc. You can directly download the entire plugin as a zip from your account at scandit.com where the library is contained and the plugin.xml is correct. After that you can simply add the plugin to your project through the CLI (also see our documentation for this at http://docs.scandit.com/stable/phonegap/cordova-integrate.html) and there is no need to do anything manually unless you are using a very outdated Phonegap version that fails to properly handle the plugin.xml. Doing it the automated way with our properly prepared plugin zip will remove most error sources, please try it that way.
Thanks #moritzha. It helped me finding the solution.
I followed this doc at the beginning but it was not working.
After adding the plugin and building the application, I never managed to see it in my xcode project.
I took the opportunity of changing my mac to restart everything from scratch, and after many tries I found where I was wrong.
In fact, the documentation provided by scandit is missing one step.
The command ' phonegap plugin add < path to downloaded and unzipped plugin > ' is doing half of the job.
The command is correctly copying the plugin files to my project but it is not updating the config.xml.
So before building your application, you have to edit the config.xml located at the root of your project folder.
You need to manually reference the plugin with the following:
and replace the x by the version of the sdk you will use.
Once the config.xml updated, you will be able to build the app for your targeted platform.
I now have my own version of the Phonegap Developer App with the Scandit plugin in place of the default barcode scanner plugin. And it works perfectly.
This plugin is awesome!
PhoneGap Developer App version: 1.7.2 (taken on Github)
I built a web-app using AngularJS + Angular Material and now want to deploy it to the AppStore (using Cordova I guess?)
What are the steps that I need to do to achieve this?
Install cordova
npm install -g cordova
Create a new cordova project.
cordova create hello com.example.hello HelloWorld
This will create new directory - hello and inside hello you will have your new cordova project - HelloWord, package name - com.example.hello
Add your angularjs app code to 'www' folder inside hello directory.
Now add iOS as a platform to your cordova project.
cordova platform add ios --save
If you need to access gallery, camera, or any other device feature, you will have to add a cordova-plugin for same.
For example to get access to device camera.
cordova plugin add cordova-plugin-camera
Read more about how you will handle events associated with camera inside your angular app. Go through that plugin's documentation.
I would recommend you to use ng-cordova for using cordova-plugins. Read more about ng-cordova here.
Now you will build your cordova project to generate .ipa file for iOS device.
cordova build ios
Inside your hello directory you will have a xcodeproj file -hello/platforms/ios/hello.xcodeproj open it in Xcode and run on an emulator to test.
Purchase your apple developer account and sign into your xcode with your apple account.
From Xcode you will get option to Archive And Publish your app to Appstore.
Few links to get started
App store documentation to know detailed publishing process here
Cordova documentation here
In my ionic application rest service doesn't work when i create apk file using below code
adb install -r platforms/android/build/output/apk/android-debug.apk
If i run application in browser:
ionic serve
then its work file
If I run application in mobile using below code
ionic run -l
then its work fine..
But once i create apk file and install in mobile then service does't work..
how can solve this problem??
please help
The most probable reason is that you don't have cordova-whitelist plugin. The newer version of cordova/ ionic requires for you to use this plugin
Steps:
Install the plugin
cordova plugin add cordova-plugin-whitelist
Update your config.xml to whitelist the allowed urls:
<allow-navigation href="*" />
Refer https://github.com/apache/cordova-plugin-whitelist for details
The rest web service is hosted locally on a development server or PC and running on a address like e.g. http://localhost:8888. Once compiling to an APK it will also be expecting the service address which obviously is not on the device itself.
Therefore you need to host the REST service locally on a development server or PC using a WIFI enabled network exposing the PC's IIS or Apache (which ever one you are using) or you can use cloud hosting and reference the newly created API address in the app's source before compiling the APK.
This ARTICLE provides a good explanation between the difference of ionic serve and run variances