How to send HTTP PUT request using ionic2 native http plugin? - rest

I am trying to send an HTTP put request from an ionic 2 app using an http native plugin, however, from the doc, I see only post and get request methods are implemented.
First: I would like to know if http methods delete and putare not really implemented (as I might not be looking at right place in the docs).
Second: If those are not implemented, how we can generate put and delete from an ionic 2 app? Is it possible to do it at low level, yet without the need to do modification to the plugin native/library code?
Thanks in advance.
Update 1: There is a pull request for put, delete and postJSON implementation (https://github.com/wymsee/cordova-HTTP/pull/105), however from September 2016 till now April 2017 it is not merged with master.
Update 2: First I would like to thank #Jamil Hijjawi for the answer. That solved the problem. But in the way, I would like to mention the solution 2 requires some server configuration to get around CORS, so I chose the first one. Also there is a nice article https://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/ that explains how to use a cordova plugin that is not in "Ionic Native", I do recommend to go through it. I would like to point out a section, as:
The way in which you use a non Ionic Native plugin in Ionic 2 is the same as the way you would use it in any Cordova project, which is however the plugin’s documentation says you should use it. However, there are some extra steps you need to take because TypeScript will cause some problems.
Going further it explains that we need to declare the globally exported variable cordovaHTTP by the plugin in somewhere like declarations.d.ts so typescript knows about that. Once declared, no dependency injection is needed. Following is a code snippet I have used in a random Component function.
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private _platform: Platform
) {
this._platform.ready().then(() => {
// ========== We need this part
cordovaHTTP.put('http://192.168.0.5:8081/test-route', {
really: "Yea!"
}, {}, (res: any) => {
console.log(res);
}, (err: any) => {
console.log(err);
});
// ========== till here, as for the example of usage
});
}
}

Option 1:
The cordova-http plugin only support GET and POST, so if you want to use PUT install the plugin directly from the author who made the pull request repo https://github.com/spuentesp/cordova-HTTP using this command ionic plugin add https://github.com/spuentesp/cordova-HTTP
but there is no implemented declaration for these APIs from ionic-native, so you can declare cordovaHTTP namespace in declarations.d.ts and use the API you want
Option 2:
Use the Http service in angular
this.http.put(url, JSON.stringify(hero), {headers: headers}).map(res => res.json());
Http class doc https://angular.io/docs/ts/latest/api/http/index/Http-class.html

Related

Creating custom plugin for Converse.js 9.1.1

I downloaded conversejs 9.1.1 and I am trying to learn the plugin architecture by making my own custom plugin. I looked at the http-auth plugin here to see how to add a plugin.
https://github.com/conversejs/community-plugins/tree/master/packages/http-auth
To install the plugin it directs me to the instructions here:
https://m.conversejs.org/docs/html/plugin_development.html
I understand I have to modify my webpage to whitelist the plugin, but for some reason I can't grok a few things. Here is my awesome plugin which resides in a file called Hello-World.js
import { converse } from "#converse/headless/core";
const plugin = {
initialize() {
console.error("Hello World!")
}
}
if (typeof converse === "undefined") {
window.addEventListener(
'converse-loaded',
() => converse.plugins.add("Hello-World", plugin)
);
} else {
converse.plugins.add("Hello-World", plugin);
}
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
If it matters I am testing my plugin by running make serve in the conversejs directory and directing my web-browser (Chrome) to localhost:8000/fullscreen.html
Thanks, Wray
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
converse is available as a global once converse.js has been loaded via the <script> tag.
That's why there's the if (typeof converse === "undefined") { check at the end of the plugin. It waits for converse.js to be loaded if converse isn't yet defined.
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Most community plugins are developed in such a way that they're loaded separately via <script> tags. If you do it like that, it doesn't matter where they live.
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
You can do it like that if you want to include your plugin inside a custom build of Converse, then you can also import stuff from converse.
The alternative is to load your plugin separately via a <script> tag, but then you can't import stuff and have to use the converse global and the closured _converse object that is passed to your plugin's initialize function.

Provide REST API from Ionic App

is it possible to provide a REST API from an Ionic App?
I tried to install express, to receive REST calls, but no luck so far.
Background is, that I want to call from one Ionic2 app a method of another Ionic2 app.
I looked hours around but couldn't find a way to do such thing. I know this is not the common way, but it's necessary for my case, because it should replace push notifications in a quite dirty way (due to missing dev accounts and it's just for demonstration purpose)
Have you looked into the Ionic Native httpd plugin? This may provide what you are looking for with a few tweaks
Usage example straight from their docs:
import { Httpd, HttpdOptions } from '#ionic-native/httpd';
constructor(private httpd: Httpd) { }
...
let options: HttpdOptions = {
www_root: 'httpd_root', // relative path to app's www directory
port: 80,
localhost_only: false
};
this.httpd.startServer(options).subscribe((data) => {
console.log('Server is live');
});

Ionic 2 / Angular 2 Routing - Progressive Web App

I'm searching the web to find a solution to implement url routing in Ionic2, I can't seem to find a way to access a page using a URL.
Has it been implemented in Ionic 2?
Should the Angular 2 router be used? Does it work with Ionic 2?
I need to be able to get the physical url of a page within the web app; in order to be able to share it outside the web app.
Thank you,
I think you are looking for the Ionic service DeepLinker. That does not replace the FILO/NavController but provide a way to define and display specific views based on URLs.
In your main module add:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
]
})
]
The full documentation here.
Also, if you also release your PWA on the AppStore/Play Store, you can use the native plugin Ionic Deeplinks.
Ionic 2 uses a pile FILO schema for routing with his NavController methods ( like push, pop, setRoot). And you don't need to use a sequence for it like you would do with a Routing system, like to access page 2 i need to go through page 0 and 1, you can just push(NewPage) and it will work, so it gives you a much better control over your application pages and how they interact.
I've never seen anyone talking about using it. If the NavController uses the Angular 2 routing in its background i don't know, will search for this, but the Ionic NavController is easy to use and works very good on most cases, the only case it doesn't support yet is passing parameters back within his pop() method, for this i use a modal and style it totally like a normal page. You can also use setRoot instead of pop to pass data like so.
this.navCtrl.setRoot(MyPage, this.Data);
For more information please see the ionic 2 documentation on navigation

PlayFramework with Scala, WebJars, ReactJS and RequireJS?

I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.

Embed app built with ember-cli (where to specify rootElement?)

I need to embed an ember app made with ember-cli into an existing website.
Without ember-cli i would do this:
App = Ember.Application.create({
rootElement: '#app-container'
});
I am basically looking to include the generated assets into my page and not use the index.html file at all.. (The app needs to bind to a div not the body element..)
Wow. Cant believe I didn't try this already..
var App = Ember.Application.extend({
modulePrefix: 'kontrollpanel', // TODO: loaded via config
Resolver: Resolver,
rootElement: '#myapp'
});
I guess i was confused with the use of Application.extend() instead of the Application.create().
As to why ember-cli uses extend i found an answer here: SO: Why ember cli uses extend instead of create