I have developed a sample ionic 2 application which runs without any issues in my windows 10 system.
This application also makes cross domain AJAX calls.
I have also created an apk file , and was able to install the apk in my android mobile. But the only problem I am facing is that the mobile app is not able to
make cross domain AJAX calls.
In config.xml I have also included
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
and
<allow-navigation href="*" />
And I have also configured my other application to which this app makes ajax calls for CORS.
Any idea what could be the issue or how to debug it ?
Related
I have deployed a simple web app and deployed to https://rockdove.centralindia.cloudapp.azure.com:82/. This page has the link to teams app sdk and also has initialized the teams app. im trying to load it inside teams app in my organization using this manifest file. i can upload and install the app but the app is not loading. The index file and manifest used for test is attached here.
Here are a few things to look at:
I don't think you can pass anything to microsoftTeams.initialize(), so remove the 'window' parameter
I've not tested whether the 'validDomains' allows custom ports, but it might not - try put the entry without the ':82', and then also remove entries 2 & 3, so it's only 'rockdove.centralindia.cloudapp.azure.com'
I'm trying to build my first Nativescript vue app based on/complimenting a previously existing web app. In that app I use the FlipClock.js.
I'd like to find a way to continue using this library for simplicity and consistency on the UI in my native app. There is a vue-flipclock component, but it still generates HTML which creates errors in the NativeScript app.
CONSOLE LOG file:///app/vendor.js:34096:14: '{NSVue (Vue: 2.5.17 | NSVue: 2.2.0)} -> CreateElement(div)'
***** Fatal JavaScript exception - application has been terminated. *****
Is there someway I can make this work inside the NativeSCript app, or do I need to find a different component altogether?
No, you can't use any plugin that depends on browser specific features / HTML DOM in NativeScript environment where your UI is totally native.
You might use a WebView if you want to load simple web app that might showcase the flipclock.
I'm currently building a web app using Laravel 5.1 and would like to start creating a native application so that my users can use their phones. I have decided that using the Ionic Framework is likely the best approach for the app and just have a few questions on marrying the two together.
I've got routes in Laravel that looks like this example:
app.dev/geckos - This is a GET request.
Which takes the currently authenticated user, uses their ID and fetches all geckos that match their user ID. It does return a blade view however.
I assume that when working with something like Ionic, the GET request would need to return JSON instead on order to loop through properly?
Is there a way that I can alter my controller to serve JSON based on if the route was something like this instead:
app.dev/api/v1/geckos
Both routes would use the GeckoController#index method, ideally I just don't want to repeat the code.
I'm fairly new to Laravel and very new to Ionic. So if I'm over complicating this theory please let me know.
Any information is appreciated on this,
Andy
Another solution which I used is to have 1. application in Laravel, which is a RESTful JSON API. Then you would have 2. Web app (in AngularJS) and 3. Mobile app in Ionic (which is based on AngularJS).
So you will create two separate applications, mobile and web, which both communicate with the same JSON API. The web would be a single-page AngularJS application, so that way you can reuse all the Angular services which communicate with the API, maybe even some controllers between your mobile Ionic and Web application.
You will save some time when creating two separate responses for mobile/web application, since you would create only one: JSON response. AngularJS will take care of rendering in both applications, that way you won't have to create separate templates for web applications in Blade, instead make all the rendering using Angular in both applications. There will be some nuances in rendering of the same content in Web and Mobile app, but it would only require creating separate js directives/css styles/html templates for both applications, using Blade you wouldn't be able to reuse any view related code between applications. Also you will be able to use the same Authentication method for both applications.
To sum up, this solution should be cleaner then your solution because you will be able to reuse backend entirely between the applications, reuse a lot of fronted stuff (like input validation code, services, filters,..), reuse Authentication and introduce looser coupling and have much clearer structure then the ugly response type switch in controllers.
EDIT:
So this can be a rough example of the structure of such project:
1. API - REST in Laravel, returning JSON
-Controllers
-Session // actions CREATE, DELETE
-User // actions CREATE, VIEW, UPDATE, DELETE..
-Gecko
2. JS application - Angular App, for both mobile and web app
-common //controllers, services, filters - most of the frontend logic which reusable between both applications
-controllers.js
-services.js
-filters.js
-mobile //this part can be hosted on some server or part of the mobile application
-app.js //separate configs for mobile app
-controllers.js //controllers only for mobile app
-directives.js
-web
-app.js //separate configs for web app (links to HTML template URLS,...)
-controllers.js //controllers only for web app
-directives.js
-services.js //or even services only for web app
3. WEB APP
-HTML Templates - bunch of static .HTML files
-Home
-Login
-Register
-Gecko
-Gecko Views...
-Some index file with layout template, which includes everything from js/common and js/web, entry point to your web application
4. MOBILE APP
-www
-index.html // must include everything from js/common and js/mobile
-templates
-Gecko
-Gecko Views...
But the structure may vary significantly, depending on what part of mobile application you want to have hosted on web server and which should be available offline, or how you want to host it, how detailed the structure might be..
Doing this would be messy because your single controller action will be returning two totally different responses.
However if you go down this route, you could add an additional header to the request from the mobile app, and then check for this to switch the response.
I need to make AJAX calls to a webpage from my phonegap app.
For Android I needed to add the page in phonegap.xml.
For iPhone I also added an ExternalHosts in phonegap.plist.
Where do I have to add my webpage for windows phones?
Whitelisting is currently not supported for WP7. See this related question:
What is the state of whitelisting in phonegap 1.3.0?
However, the WP7 PhoneGap implementation already has a JavaScript shim for XHR requests to files within local storage, so I am assuming that a whitelist is possible and will come in time.
Why not add it to JIRA for PhoneGap (Callback / Cordova!)
https://issues.apache.org/jira/browse/CB
There is a issue on Callback 1.4.1, use this fix to make xhr reqs work:
https://github.com/cordova/cordova-windows-phone/issues/1
There is a work a round for this in my follow up question. Andrei Schneider wrote a native cross domain call. See:
Workaround for missing whitelist in phonegap for windows phone
I'm continuing my research on solutions for our organization for our mobile app strategy. There's two somewhat conflicting requirements:
it should be a web app in that all updates for users are immediate as we update the app on the server
the app should leverage native UI widgets and native device features as much as possible
With PhoneGap, the process appears to be that you'd normally keep the UI on the device, as part of the compiled app, and you'd hit your server via AJAX to deal with the data updates and submissions. That then gives you access to the native device's UI widgets and features using the PhoneGap API into their hooks.
However, in doing that, we lose bullet point one.
My question is if one can, using PhoneGap, create a 'web view' within the app that would allow us to keep the UI on our server (the app then pretty much becomes a custom browser). And, if so, could our UI still access the device's native functionality via PhoneGap's API or is that only accessible if we compiled our UI code?
A similar question came up on the PhoneGap Google Group recently.
One thing that came up was that you are unlikely to pass app store certification if you are loading UI and core functionality from a remote server as this invalidates much of the purpose of certification.
If you're going to do this, you should set up web services that return the content you want to display to users. Then you can use jQuery Mobile and PhoneGap to take the content returned from the server and display it on the application with the appropriate native UI widgets and features that you want.
So use jQuery Mobile to hit your server for data using something like:
var fileUrl = "http://www.mywebserver.com/servedevice?data=current&selection=fresh";
$.ajax({
url: fileUrl,
dataType: "html",
success: function( html ) {
// If the call succeeds, do something with the return value here
}
});
There are many other ways you can handle it including JSONP methods. See the documentation for details:
http://api.jquery.com/jQuery.ajax/
Another approach would be to point your HTML file at a server for the JavaScript, just like a CDN file load. Then, your app's JavaScript would be loaded at runtime instead of bundled into the app. However, when it actually runs, it is running within the PhoneGap WebView so it has access to all of the PhoneGap APIs.
This is the jQuery Mobile example:
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>