Using library from npm package #google/maps for Ionic 2 project? - node.js

this could be silly question from newcomer, but I wonder about can I use Node.js library with stack that Ionic 2 (Node package system with package.json , Angular 2, Cordova) provides. I found interesting for my project library from Google ( I need geocoding for some form validation).
For this moment I added this package to package.json with
npm install #google/maps --save
npm i
I created provider for client consuming, added
import {} from '#google/maps';
and understood that I need some sort of typings for TS:) Is it really an option to use separate from Ionic and Angular libraries or am I wasting my time?
Update
Thanks to #Ivaro18, I managed how to add typings to my project:
npm install #types/google-maps --save
Now I can make something like this:
import GoogleMapsLoader = require('google-maps');
GoogleMapsLoader.URL = 'https://maps.googleapis.com/maps/api/js';
GoogleMapsLoader.KEY = 'qwertyuiopasdfghjklzxcvbnm';
GoogleMapsLoader.LIBRARIES = ['geocode()', 'places'];
GoogleMapsLoader.CLIENT = 'yourclientkey';
GoogleMapsLoader.CHANNEL = 'myChannel';
GoogleMapsLoader.LANGUAGE = 'fr';
GoogleMapsLoader.REGION = 'GB';
GoogleMapsLoader.VERSION = '3.14';
GoogleMapsLoader.WINDOW_CALLBACK_NAME = '__google_maps_api_provider_initializator__';
#Injectable()
export class GoogleMapsClientProvider {
constructor(public http: Http) {
console.log('Hello GoogleMapsClientProvider Provider');
GoogleMapsLoader.createLoader();
};
}
I found about this here but I'm not sure how to use this stuff,e.g.
GoogleMapsLoader.KEY = 'qwertyuiopasdfghjklzxcvbnm';
GoogleMapsLoader.CLIENT = 'yourclientkey';
What is what? Someone tried this lib before? My mandatory task is to use geocoding for address validation.

Related

Vue Error - Can't resolve 'https' when importing package

I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.
Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.
cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs
Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):
const RaApi = require('raapijs');
export default {
name: 'App',
data: () => ({
api:null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
}
run `npm run serve' and get the error:
ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'
I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.
The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?
EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.
This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:
const RaApi = require('raapijs');
export default {
data: () => ({
api: null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
};
It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.
So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.

NodeJs to Typescript

I need to use nodejs library in my angular project but got example code in nodejs. I have installed library through npm command and import to my component. But it always show undefined.
npm install phenix-edge-auth --save
const TokenBuilder = require('phenix-edge-auth');
// Create a token to access a channel
const token = new TokenBuilder()
.withApplicationId('my-application-id')
.withSecret('my-secret')
.expiresInSeconds(3600)
.forChannel('us-northeast#my-application-id#my-channel.1345')
.build();
How to use this code with angular app?
Import it as angular way..
import * as TokenBuilder from 'phenix-edge-auth'

Question regarding NPM, ReactJS, and installed packages both globally, and locally

Question regarding NPM, ReactJS, and installed packages both globally, and locally. I have done quite of bit of searching and found no real resolution. Here's my main App component:
import React, { Component } from 'react'
// import ReactLogger from 'react-terminal-logger/console-logger'
import 'whatwg-fetch'
import Intro from '../Intro/Intro'
import './app.css'
// ReactLogger.config({
// visible: ['log', 'error', 'info', 'warn', 'logr'],
// save_logs: false,
// only_msg: true,
// port: 1234,
// stacktrace_hide: true,
// })
// ReactLogger.start()
class App extends Component {
state = {
series: [],
logs: [],
}
componentDidMount() {
// Hook(window.console, (log) => {
// this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
// })
fetch('http://api.tvmaze.com/search/shows?q=Vikings').then((response) => {
console.log(response)
// logr(response)
})
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">TV Series List</h1>
</header>
<Intro message="Here you can find all you most loved series!" />
The length of the series array is - {this.state.series.length}{' '}
</div>
)
}
}
export default App
Any time I install a package globally, so I can reuse it in other projects I end up with an error when I try to start the server. Such as the logging package (above) react-terminal-logger. I used the following steps:
npm install -g react-terminal-logger
added import and initialized components as per instructions
tried to use component (eg. logr(response))
I end up with the same error at compile time no matter what I installed globally and add to my project.
C:\Users\DawsonSchaffer\Documents\ProjectsDirectory\Projects\reactjsx-tutorial-old\node_modules\react-scripts\scripts\start.js:19
throw err;
[Error: ENOENT: no such file or directory, stat 'C:\Users\DawsonSchaffer\Application Data'] {
errno: -4058,
code: 'ENOENT',
syscall: 'stat',
path: 'C:\\Users\\DawsonSchaffer\\Application Data'
}
My global package prefix points to "C:\Users\DawsonSchaffer\AppData\Roaming\npm" which is the default. If I simply remove the components use by it commenting out everything works.
How do I resolve this? What is the proper way to install a new global package and add it to an existing project? What am I missing? Any help would be greatly appreciated.
One other note, if I install the component locally in my project it works fine. Overall point though is too not have to install it in every project.
Thanks
Dawson
The first thing to understand here is that the global install option of common JS package managers is not intended to facilitate shared project dependencies. To clarify, from NPM itself:
Installing a package globally allows you to use the code in the package as a set of tools on your local computer.
With that out of the way, the optimization you're looking for is a real one, but for different reasons than you may think. When thinking about dependency management, you're really thinking about a small subset of pros and cons related to deciding whether you want use a mono-repo, multi-repo (microservices) or some hybrid.
If you're dealing with entirely different projects that are using the same dependency, then ignore the previous paragraph as they should definitely each manage their own dependencies independently.
Maybe this answer could help you:
How do I install a module globally using npm?
Usually, global installation are meant to be for CLI tools or executable tools.
So I finally got it all straightened out. I uninstalled react, react-dom, and react-scripts from global; leaving me with only create-react-app. I created an empty project called react-boilerplate, and installed react, react-dom, react-scripts, and react-router-dom in the new project. I then uploaded to my GitHub account so I have a common starting point for new projects. Should have thought about this before but it took me a while to wrap my head around everything. Now I can update my boilerplate as needed, and use it to clone as a starting point for new projects. Yeah!
Thanks to everyone especially Dennis G for all his help!!
Dawson

SwaggerUI + NodeJs (Meteor)

I have a meteor app with a REST API by https://atmospherejs.com/simple/json-routes.
Now I want to document my API with SwaggerUI. I already used SwaggerUI in other projects and know you have to create a yaml or json sepc file, which then is being displayed by SwaggerUI.
So now I have discovered there are some existing swagger-ui packages for npm:
https://www.npmjs.com/package/swagger-ui
https://www.npmjs.com/package/swagger-ui-dist
which I installed by meteor npm install swagger-ui-dist --save-dev
But I have no clue what to do next or how to use them.
I am sure it must be something as simple as:
const swaggerui = require('swagger-ui');
swaggerui.specPath(pathToYaml);
swaggerui.url('/api-docs');
Can anyone help me with the first steps?

Building Ionic 3 app with Quickblox JS package give 'child_process' error

First of all, I created a blank project through the ionic blank project. Then added quickblox API javascript packages with npm :
npm install quickblox --save
Now when building this projects for ios or android with this command "ionic cordova build ios/android" I this error -- "Error: ./~/node-xmpp-client/lib/Client.js"
I have also added the node-xmpp-client package in my project by adding
npm install --save node-xmpp-client
Screenshot attached
I am still getting the same issue.
Please help this issue Thank you.
Edit: I made a Demo https://github.com/niccolofanton/quickblox-ionic3
Old answer:
I've found a solution, in your index.html put this:
Ionic:
<script>
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
var loadScriptAsync = function(path){
var jsScript = document.createElement("script");
jsScript.type = "text/javascript";
jsScript.async = false; //async is being set to false so that script will not immediately fire.
jsScript.src = path;
document.getElementsByTagName("body")[0].appendChild(jsScript);
}
loadScriptAsync("https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.11.0/quickblox.min.js");
}
</script>
Simple angular:
<script src="https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.11.0/quickblox.min.js"></script>
Then in your provider outside the class, under the imports:
declare var QB: any;
The full guide for Ionic/Cordova it's here:
https://quickblox.com/developers/Sample-webrtc-cordova

Resources