Problem
Hi, I recently migrated an ionic cordova project to ionic capacitor following this guide.
I got everything working except for the Watermarkjs library, which I use to watermark pictures taken with the camera of an Android device.
The library used to work fine before the migration, but now everytime I use the functions defined in that library I get this log in Logcat:
Capacitor: Handling local request: http://localhost/9j/4AAQSkZJRgABAQAAAQABAAD
It seems the function is not being called properly.
Code
async takePicture(fieldId){
const image = await Camera.getPhoto({
quality:20,
allowEditing:false,
resultType: CameraResultType.Base64,
source: CameraSource.Prompt
});
let finalImage = await this.addTextWatermark(image.base64String); //problem begins here
console.log("Image with watermark, " finalImage); // this is never printed out in logcat
}
// Function that adds a watermark
// reference: http://brianium.github.io/watermarkjs/text.html
addTextWatermark(base64String){
let result = await watermark([base64String])
.dataUrl(watermark.text.lowerLeft( 'Watermark text', '48px Josefin Slab', '#ffffff', 0.9) )
.then( image => {
return image;
}).catch(error => {
return "error";
})
return result;
}
What I've tried...
Adding watermarkjs script in angular.json scripts section and running npx cap copy, as suggested in this StackOverflow question
angular.json (excerpt)
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": [
"./node_modules/watermarkjs/dist/watermark.js" <----- Added script here
]
} ...
Using different input types for the watermark() function. (file, blob, etc.)
I think the problem is related to not importing the functions properly.
If the library is incompatible with ionic capacitor...
Does anyone know a workaround for this problem?
Related
I'm trying to run a simple test, trying to add ionic and capacitor to an already existing angular project. I have managed to make it work and run correctly but when I add the SSL command to the CLI so that the server runs with HTTPS the app no longer loads and everything I can just see is a blank screen. Moreover if I access the URL manually from the browser everything loads correctly. Could it be there's something wrongly configured in Android Studio or the ionic/capacitor files? I have tried different configurations and different emulated devices w/ different Android versions but there's no use, I haven't been able to make it work. I would certainly appreciate if someone could help me with this...
Running ionic capacitor run android --livereload --external
https://i.stack.imgur.com/ljfUT.png
https://i.stack.imgur.com/8LxNV.png
When I add the --ssl flag to the CLI ionic capacitor run android --livereload --external --ssl
https://i.stack.imgur.com/fS0jV.png
https://i.stack.imgur.com/D3sLL.png
https://i.stack.imgur.com/3v5Bx.png
Capacitor.config
import { CapacitorConfig } from '#capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'iotest',
webDir: './android/www',
bundledWebRuntime: false
};
export default config;
Angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"cli": {
"defaultCollection": "#ionic/angular-toolkit"
},
"schematics": {
"#ionic/angular-toolkit:component": {
"styleext": "scss"
},
"#ionic/angular-toolkit:page": {
"styleext": "scss"
}
},
"projects": {
"iotest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "./android/www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "./node_modules/ionicicons/dist/ionicicons/svg",
"output": "./svg"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "iotest:build:production"
},
"development": {
"browserTarget": "iotest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "iotest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "iotest"
}
Ionic.config
{
"defaultProject": "iotest",
"projects": {
"iotest": {
"name": "iotest",
"integrations": {
"capacitor": {}
},
"type": "angular"
}
}
}
Angular
Angular CLI: 12.1.4
Node: 16.14.0 (Unsupported)
Package Manager: npm 8.3.1
OS: win32 x64
Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1201.4
#angular-devkit/build-angular 12.1.4
#angular-devkit/core 12.1.4
#angular-devkit/schematics 12.1.4
#angular/cli 12.1.4
#schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Warning: The current version of Node (16.14.0) is not supported by Angular.
NPM
Version 8.3.1
My goal is to make it run with SSL since in a future I will need to apply this to an app that needs to be run with HTTPS
From capacitor.config.ts make change like this:
{
...
server: {
url: 'https://your-local-ip:8100' // like: 192.168.1.66:8100
androidScheme: 'https',
clearText: true // just for test
}
...
}
then open two terminal and run
this command's:
ionic cap run android -l --external --ssl
from second terminal run:
ionic serve 0.0.0.0 --ssl
after all if you still see blank page, open a browser from mobile device and go to https://your-host-ip:8100, then make sure the url is trusted.
SDK Version: 43.0.0
Platforms(Android/iOS/web/all): Android
Hello, I'm using expo-auth-session in the managed workflow to collect Instagram user data through its official API, it's working fine on the development environment (through the "expo run:android" command), but once a build APK is created when the user makes the authorization process and the redirect starts there is a popup asking “Open with” and two options for my app, the first one works perfectly the second one goes back to the app but does nothing, I didn't test on IOS.
Here is the image that represent it:
Click here to see
When I was developing I tried to do the google sign-in process but was stuck in the same error, partially resolved by implementing google native sign-in. I verified my schemes in app.json but didn`t identify wrong on it, as follows:
app.json:
{
"expo": {
"name": "Secreet",
"slug": "secreet",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"scheme": "com.davidtmiranda.secreet",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"usesAppleSignIn": true,
"bundleIdentifier": "com.davidtmiranda.secreet",
"googleServicesFile": "./GoogleService-Info.plist",
"config": {
"googleSignIn": {
"reservedClientId": "com.googleusercontent.apps.--------------------"
}
}
},
"android": {
"versionCode": 1,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.davidtmiranda.secreet",
"googleServicesFile": "./google-services.json"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
also, my authSession code looks like this:
webBrowser.maybeCompleteAuthSession();
const useProxy = Platform.select({ web: false, default: true });
const client_id = ---;
const redirect_uri = "https://auth.expo.io/#davidtmiranda/secreet";
const scope = "user_profile";
const site =
"https://api.instagram.com/oauth/authorize?client_id=" +
client_id +
"&redirect_uri=" +
redirect_uri +
"&scope=" +
scope +
"&response_type=code&state=1";
const discovery = { authorizationEndpoint: site };
const [request, response, promptAsync] = useAuthRequest(
{
redirectUri: makeRedirectUri({
useProxy,
native: redirect_uri,
}),
scopes: [scope],
clientId: String(client_id),
},
discovery
);
useEffect(() => {
if (response?.type === "success") {
...
}
}, [response]);
function GetInstagramID() {
return promptAsync({
useProxy,
});
}
Any suggestions about how to solve this problem? I believe it is schema-related but could not identify what is wrong.
Maybe you can try to remove scheme in the app.json
"scheme": "com.davidtmiranda.secreet",
and it will change appAuthRedirectScheme in the android/app/build.gradle
manifestPlaceholders = [appAuthRedirectScheme: 'com.davidtmiranda.secreet']
It solves my issue.
I have made an app for Teams that I want to use to display an adaptive card to the user when they pick an item from the list of search results. In order for this to happen, I need to trigger some code after the user selects a result. This works as expected from the Teams client, as well as in the browser, but from native mobile Teams app, the code is not triggered when selecting an item from the list of results.
const preview = CardFactory.heroCard( obj.package.name );
preview.content.tap = { type: 'invoke', value: { description: obj.package.description } };
The following pictures show the app working in a browser on the computer:
The list of results from the browser on PC
The expected adaptive card showing correctly on browser
And this is how it looks from the mobile perspective:
The list of results from mobile app
The result of selecting the same item from the list
The code used to display this has not been modified, except providing a bot to host it, and was found from Microsoft's bot samples on GitHub:
https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/typescript_nodejs/50.teams-messaging-extensions-search
The code in question looks as follows:
export class TeamsMessagingExtensionsSearchBot extends TeamsActivityHandler {
public async handleTeamsMessagingExtensionQuery( context: TurnContext, query: any ): Promise<any> {
const searchQuery = query.parameters[ 0 ].value;
const response = await axios.get( `http://registry.npmjs.com/-/v1/search?${ querystring.stringify( { text: searchQuery, size: 8 } ) }` );
const attachments = [];
response.data.objects.forEach( ( obj: any ) => {
const heroCard = CardFactory.heroCard( obj.package.name );
const preview = CardFactory.heroCard( obj.package.name );
preview.content.tap = { type: 'invoke', value: { description: obj.package.description } };
const attachment = { ...heroCard, preview };
attachments.push( attachment );
} );
return {
composeExtension: {
attachmentLayout: 'list',
attachments,
type: 'result'
}
};
}
public async handleTeamsMessagingExtensionSelectItem( context: TurnContext, obj: any ): Promise<any> {
return {
composeExtension: {
attachmentLayout: 'list',
attachments: [ CardFactory.thumbnailCard( obj.description ) ],
type: 'result'
}
};
}
}
Is this expected?
Thanks
Edit: Adding the manifest JSON used here:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "9211fa66-f930-414d-861a-40f18f7f1490",
"packageName": "com.teams.sample.teamsmessagingextensionssearch",
"developer": {
"name": "teamsStartNewThreadInChannel",
"websiteUrl": "https://www.microsoft.com",
"privacyUrl": "https://www.teams.com/privacy",
"termsOfUseUrl": "https://www.teams.com/termsofuser"
},
"icons": {
"outline": "icon-outline.png",
"color": "icon-color.png"
},
"name": {
"short": "Search Messaging Extension",
"full": "Microsoft Teams Search Based Messaging Extension"
},
"description": {
"short": "Sample demonstrating a Search Based Messaging Extension",
"full": "Sample Search Messaging Extension built with the Bot Builder SDK"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "9211fa66-f930-414d-861a-40f18f7f1490",
"scopes": [
"personal",
"groupchat",
"team"
],
"supportsFiles": false,
"isNotificationOnly": false
}
],
"composeExtensions": [
{
"botId": "9211fa66-f930-414d-861a-40f18f7f1490",
"canUpdateConfiguration": true,
"commands": [
{
"id": "searchQuery",
"context": [
"compose",
"commandBox"
],
"description": "Test command to run query",
"title": "Search",
"type": "query",
"parameters": [
{
"name": "searchQuery",
"title": "Search Query",
"description": "Your search query",
"inputType": "text"
}
]
}
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": []
}
We are able to re-pro the issue at our end. Raised a bug.We are tracking the bug internally, we don't have ETA to share when it will be fixed. Will update once it is fixed.
I am trying to develop an application and I am having trouble getting it to build once I added dotenv.
In my app.config.js I have
import "dotenv/config";
const API_URL = process.env["API_URL"] || "";
const API_VERSION = process.env["API_VERSION"] || "";
const MIRAGE_ENABLED = process.env["MIRAGE_ENABLED"] === "true" ? true : false;
const NODE_ENV = process.env["NODE_ENV"];
export default {
name: "My Application",
version: "0.0.0",
extra: {
API_URL,
API_VERSION,
MIRAGE_ENABLED,
NODE_ENV,
},
};
in my app.json I have:
{
"expo": {
"name": "my-application",
"slug": "my-application",
"owner": "my-expo",
"privacy": "unlisted",
"version": "0.0.0",
"orientation": "landscape",
"icon": "./assets/images/icon.png",
"sdkVersion": "37.0.0",
"platforms": ["ios"],
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "io.company.my-application",
"buildNumber": "0.0.0"
}
}
}
After reading the documentation I am more confused than before. The output of expo build is:
Failed to read config at: .../app.config.js
ConfigError: Failed to read config at: .../app.config.js
at Object.getDynamicConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/#expo/config/src/getConfig.ts:37:9)
at getConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/#expo/config/src/Config.ts:121:62)
at validateAsync (/#expo/xdl#58.0.12/src/project/Doctor.ts:438:24)
at Object.validateWithoutNetworkAsync (/#expo/xdl#58.0.12/src/project/Doctor.ts:419:10)
at /Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:644:35
at Command.<anonymous> (/Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:331:7
which is no help at all. Searching for Failed to read config at: .../app.config.js yielded no results whatsoever.
What am I doing wrong? What is the best practice for configuration using expo in this manner? Any help would be greatly appreciated.
To begin with, you need to override the app.json with your envirionment variables in app.config.js. To override the js object you can use separator operator, and to give "extra" variables you can use extra key. Let me give an example:
import 'dotenv/config'
export default ({config}) => {
const appConfig = ({
...config,
version: process.env.VERSION,
//override anything you want
extra: {
API_URL: process.env.API_URL,
//...
}
});
return appConfig;
}
This will attach the process env variables to your manifest. If you have any read errors about app.config.js, it's possible that you didn't install the dotenv package. Let me know.
first, you'll need to install the module 'dotenv' using the command npm i dotenv
Then, in your app.config.js file, provide the configuration in the arguments to the exported function:
import 'dotenv/config'
export default ({config}) => {
const appConfig = ({
...config,
version: process.env.VERSION,
//override anything you want
extra: {
API_URL: process.env.API_URL,
//...
}
});
return appConfig;
};
I have a Teams application where I need to use local storage (IndexedDB).
All works fine with the most common browsers: Chrome, Firefox but when I try to use the application with the Android app for Teams, something goes wrong: "It is necessary for the correct functioning of the app to allow access to IndexedDB".
Android Version: 10 - WebView Version: 81.0.4044.138
From my point of view is something relative to the permissions for local storage with WebView
This is my code:
if (window.indexedDB) {
var request = indexedDB.open('__mydb', 2);
request.onerror = function (event) {
alert('It is necessary for the correct functioning of the app to allow access to IndexedDB.');
};
request.onsuccess = function (event) {
mydb = event.target.result;
try {
console.log('Database opened, checking existence of table');
var objectStore = mydb.transaction([tableName], 'readwrite')
.objectStore(tableName);
console.log('Table exists. Proceeding to save data');
saveTokenDataIndexedDB(objectStore);
console.log('All done, going to app');
goToApp();
} catch (e) {
console.log(e);
}
};
}
This is the manifest file of my Teams application:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
"manifestVersion": "1.0",
"packageName": "XXXXXX",
"id": "29bcd6f4-XXXXXX-4111-820b-XXXXXXXXXXX",
"version": "0.1",
"developer": {
"name": "XXXXXXXXXXXXX",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "XXXXXXXXXXXX"
},
"description": {
"short": "XXXXXXXXXXXXX",
"full": "XXXXXXXXXXXXXXXX"
},
"icons": {
"outline": "XXXXXXXXXXXX_outline.png",
"color": "XXXXXXXXXXXXX_color.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=XXXXX-eadc-4020-XXXX-edea2c24753b%26forceLocale={locale}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"staticTabs": [
{
"entityId": "XXXXX",
"name": "XXXXXXXXX",
"contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=XXXXXXXXX-eadc-4020-b4e2-XXXXXXXb%26forceLocale={locale}",
"scopes": [
"personal"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "XXXXXXXX-eadc-4020-b4e2-XXXXXXXXXX"
}
}
I'm stuck with this, if somebody can give me a clue I will be grateful.
Regards