Giving native look to a meteor/cordova app with css, conditioning it to the platform build - css

I am developing an hybrid mobile app with Meteor and Cordova, and in order to have a native look I want to use two different stylesheets: Bootstrap material design for android and Ratchet for IOS.
What is the simplest way to conditionally include the respective css and javascript files? i.e. the command:
meteor run ios
should generate an app with the ios css, while:
meteor run android
should generate the app with android css.
If there is no simple way, is the Meteor team working on this issue?

This is what the merges-folder is for. Take a look at the documentation. Just search for Using merges to Customize Each Platform...

Related

React Native and using npm modules

So this is the case: we developed a web application. Now we are developing an app in React Native with Firebase, for iOS and Android... Is there a way to make use of the npm private module that we developed for the web application? Do we need to initialise firebase/app as well in typescript? Or is it really needed to develop a seperate module for android and a separate module for iOS?
So in this npm private module there are standardized ways for our company to get and set data in firestore.
Regards, Peter
As far as I understand it, every package from npm is mapped or linked to one in the respective operating system, that is Android and iOS in your case.
Is there a way to make use of the npm private module that we developed
for the web application?
Or is it really needed to develop a seperate module for android and a
separate module for iOS?
When there is no respective implementation for the operating system, that "translates" your npm package, it will not work.
Do we need to initialise firebase/app as well in typescript?
Yes indeed, also in react native you need to initialise firebase app.
So in this npm private module there are standardised ways for our
company to get and set data in firestore.
I cannot say why you did this in a custom way, if you use the "normal" firestore methods then maybe there is still a way to reuse some code? But that is hard to say from the outside.

How to include Android.Support.v4 in Xamarin Forms (iOS)?

I am using Visual Studio For Mac. My Xamarin Forms project is quite large and contains many content pages. Some of them will be only used in android project and some of them only used in iOS project. There is no problem when I compile the project into android. However, when I want to compile the project into iOS, it seems like did not accept anything related to android. Please refer to the screenshot. There is no way I can include the android specialised reference and compile into iOS project. So, any idea to deal with this? Maybe there is a way to force build the iOS project no matter what? The error from the screenshot is from the page that will be only used in android. So what I can do for now is delete the page when I want to compile as iOS and recreate the page when I want to used it for android. But there are plenty of them, it is too heavy for me to do this every time. Please help.
You can't call platform specific APIs at the .NET standard libraries that are used to host Xamarin.Forms code by default.
Basically you have those options:
1) using shared project instead of library and using conditional compiling (easier but it is now not available as the option when creating the project)
2) using dependency injection.

Polymer CLI and Firebase: what is the best build model?

Polymer CLI comes with several build options, including preset like es5-bundled.
I want to run my app on Firebase and have it compatible with older browser like IE11.
Are there specific build options that I should use?
I am using gulp after watching a video from the Google Polycast series
Building Firebase for production -- Polycasts #60
But the basic Polymer build should work as well without extra build options.

making ionic project with firebase on yeoman

there is yeoman generate for ionic and firebase and I know how to make them with yeoman-generator BUT I want ionic + firebase project.
some solution[1] [2] told me that making ionic project and add firebase js file by my hand, but I think firebasee can be added by bower or something easy way to go though.
should i generate inoic project and add firebase though bower?
should i generate firebase project and add ionic though bower?
which one is better way to make it? and what command should i use for this?
TLDR: Long story short, don't use yeoman. It's pretty easy to do it without yeoman.
I'd recommend setting up an ionic project, add the firebase.js files, link to it in your index.html, and add the firebase components to your module/relevant controllers. You'll find great step by step instructions here:
https://www.firebase.com/docs/web/libraries/ionic/guide.html
They won't tell you this up front, but you'll also want to look at the angularfire API here: https://www.firebase.com/docs/web/libraries/angular/api.html
In the Ionic guild they'll show you $firebaseArray, but that's it. For things like $firebaseObject, those docs are found in the angularfire API.
I'd forget yeoman to be honest. I'm sure you can set up custom projects for yeoman, but I wouldn't bother.

How to run a PhoneGap app with Sqlite in Ripple?

I have a phongap app with a sqlite plugin that runs in both android and iphone. When I try to run it in Ripple i get several errors depending on the inclusion of the cordova version and device I use. Non of them are working at all. In some comments in stackoverflow i've seen people running sqlite in phonegap under ripple.
I'm using the PG-SQLitePlugin-Android plugin in my project, which it acually only supports Phonegap 2.7.0+.
I've found that i can force Ripple to use 2.7.0 by calling it :
file://localhost/Users/----/----/----/www/index.html?enableripple=cordova-2.7.0
Ripple actually loads great after enabling access to file system through chrome.
When i include cordova-2.7.0.js in my script
The index.html pops me a pop up with the following text :
gap:["Device","getDeviceInfo","Device119187522"]
that i can accept or cancel, then 2 more dialogs appeare, if I accept it gets hanged.
the js console shows that cordova 2.7.0 is really running :
Falling back on PROMPT mode since _cordovaNative is missing. Expected for Android 3.2 and lower only. cordova-2.7.0.js:906
deviceready is not fired
When i include cordova-2.9.0.js in my script
It happens the same as 2.7
Falling back on PROMPT mode since _cordovaNative is missing. Expected for Android 3.2 and lower only. cordova-2.7.0.js:906
but this time I get this other errors
Failed to load resource file://localhost/Users/laullobetpayas/-------/---/------/www/cordova/cordova_plugins.json
Failed to load resource file://localhost/Users/-------/---/------/www/cordova/cordova_plugins.js
deviceready is not fired
When I don't include any cordova.js in my script
SQLitePlugin.js:31
Uncaught ReferenceError: cordova is not defined SQLitePlugin.js:34
Am I using the proper plugin ?
which is the propper version of cordova / device tu run with the plugin and ripple ?
Do i have to include the cordova.js in my project
Hel will be very apreciated, it's for a long time that I'm trying to solve this.
Thank you in advanced.
Phonegap plugins won't work with Ripple because the idea of a Phonegap plugin is that it provides a Javascript interface in order to execute native code. That means, in the case of Android, the Javascript will invoke native Java code and in the case of iOS, the Javascript will invoke native Objective-C.
Ripple is purely Javascript-based, so the Javascript part of the plugin has nothing to interface with.
In the case of the SQLitePlugin, for example, calling SQLitePlugin.close() results in the call:
cordova.exec(null, null, "SQLitePlugin", "close", [this.dbname]);
where SQLitePlugin is the native class name and close is the native function name.
If you want to use the same storage API across Android, iOS and Ripple, maybe consider using lawnchair with appropriate adapters.
As for the issues with Ripple and Phonegap 2.7.0/2.9.0, Ripple has not quite caught up with Phonegap, so you will get these popups and error messages in the console, but that will not stop your Phonegap app (without native plugins) running in Ripple. You can convince yourself of this with a simple test case like:
document.addEventListener("deviceready", function(){
alert("I'm alive");
});
But the answer is, yes, you do need to include cordova.js in order for it to work at all in Ripple.
The Cordova-SQLitePlugin is a drop-in replacement for the HTML5 SQL API, so when running inside Ripple you don't need to call the Cordova layer you can just replace calls to sqlitePlugin.openDatabase() with window.openDatabase(). I've not yet tested this with Ripple but it should work. There are some database size limitations but this is probably all you need for testing.
There several ways to test if your inside Cordova. You could create a shim for the openDatabase() method based on testing for Cordova on app startup.
Since your primary goal is really to do rapid testing of SQLite with Cordova (rather than specifically to use Ripple) I'd like to suggest another new alternative to using Ripple.
I wrote an app call Sencha Touch Live that can be used for rapid development of Cordova / HTML5 apps by allowing you to Live Edit and Debug the HTML/JS/CSS code on your mobile device simply by updating files on your development computer - so you can skip most recompile/redeploy/restart debugger time costs. It has tons of other cool features. I'm using it myself for SQLite app testing instead of Ripple or Weinre
Detailed overview and Step by Step Guides
Installation Guide
It's based on the code from Adobe's PhoneGap Developer App so core code is well tested. It's been extensively adapted and tuned for Sench Touch framework though it should also work for jQuery Mobile or any framework that places HTML5 code under the phonegap/www or cordova/www folder. Just start up the server in you PhoneGap or Cordova project folder.
For testing your SQL and controller logic, I recommend using Geny Motion emulator with a version of Android 4.4.x KitKat. Start up an recent version of Chrome on your desktop and once you get your app working on the emulator or real device open chrome://inspect and now you can use the full Chrome debugger on your remote device app. You can also use a recent version of Safari for OSX/iPhone Simulator testing.
You can watch a demo here (starts at the 5 min. mark). Yes! It needs a more polished video with less echoes but you'll get the idea:
https://www.youtube.com/watch?v=94J4HBB0f7I

Resources