meteor - phonegap using MeteorRider or "hijack DOM" approach - android

I've created a meteor.js app which I deploy to meteor hosting service.
I wanted also to make it a mobile app, so I started looking for solutions and came across with this Github repo.
MeteorRider, the approach is straightforward, get your meteor app going, then take your phonegap app srating and then "hijack" the DOM using jquery $.ajax request,
so this is what I've done:
meteor app running on meteor hosting, created phonegap app using phonegap
create my-app changed the www folder as the docs mention
changed the meteorUrl, changed phonegap confix.xml origin access to my host.
run locally on emulator using phonegap local run android.
and nothing happens..
Maybe someone has tried this? Or know how to get this working. I hate iframes this is way. I don't use cordova-phonegap and similar.

I haven't used Meteor with PhoneGap, but this is what I would do to narrow down where the problem is:
Ensure your site works on your device's Android browser (this is what PhoneGap uses inside of the native app).
Point the meteorUrl to a Meteor.js site you know works on your device's Android browser.
Point the meteorUrl to a MeteorRider site that works for other people (you may need to ask the MeteorRider author for this).
Ask the MeteorRider author for the most recent Meteor.js version that he has confirmed works with MeteorRider. You may find that there was a change in Meteor.js that broke it. For example, I could see the new standard browser-policy causing a problem.
Hopefully this will help, or spark an idea of another way to investigate the problem.

Related

How can I put a web site into a mobile native application?

First, I have a web app made with angular + angular material that looks like a mobile app, now I "ported" this webapp to a native mobile app using capacitor + cordova plugins and works fine, all the features work fine.
My deployment proces is:
Build angular app, sync to android, build android and then publish in play store (same for ios), it works, but, every time I make a change to my web app, I have to repeat this process and you know, the user has to download the new version of the app, install, and use, I would like to avoid this.
Since my app is web, located on a site (It can be accesses via web too) I would like to know if there is something that inside my webview opens the url of my site (without exiting the app, I tried making a redirection but it opens a web browser), so, the end user won't have to download the new version of the app every time I make a change and I won't have to upload the build to play store and app store.
I know that it can be done because my bank app does something like this but I don't know how to do it or how to search for it
How can I achieve this?
Thanks and sorry for my english, I hope I have explained what I want to do
"Live updates" are one way to solve this. Live updates allow you to send patches to your app and actually change the app code to some extent without going through app store review. Big updates will still have to go through app store review, but you can make lots of little updates "live" by using a live update service.
You can do live updates with Ionic. Ionic is open-source, but the live updates are part of the Ionic team's Appflow package, which is a paid service. Pricing currently starts at $499/month for 25,000 updates.
In this same space, there's Capgo, which is cheaper and works with Capacitor in general (does not require Ionic).
More info: Long discussion on this topic in the capacitor-community github repo
Ionic is the framework that would fit your use case. You can build apps in angular and ionic wraps it in a webview of native android apps. If you need to access native android feature, you can install capacitor lib too along with ionic. Capacitor is a library to interact with mobile's api (IOS and Android) with javascript.
Anoter approach to build native android apps with JS would be reactnative. It is different from ionic. You would have to be familiar with react sytax to get statrted easily. React native is not a webview app rather it is compiled to native platform code.
Look into flutter too. It uses dart but apps perform faster made with flutter and it can build both for android and IOS with same codebase
CONCLUSION
If you want to stay in angular code, go with IONIC

Easiest way to simulate Cordova plugins?

I'm a relative PHP newbie (10 months) and Javascript absolute novice, so please go easy on me.
I've just started playing with Cordova and have a couple of small apps for use internally within our small business that I could really do with, but testing my code is causing me grief. I've been using Intel XDK with the built in simulator, but it can't simulate SQLite or the FileTransfer plugin.
At the moment, the only way I can see of doing this in XDK would be to compile the app and transfer it to my Samsung mobile for testing, but this seems very cumbersome and will lead to everything taking much longer. I've just found Apache Ripple, but didn't want to spend a day looking into it to find there's a better tool.
Is anybody able to point me at a tutorial page that gives the easiest method for testing a Cordova app with plugin support, please? I tend to work from about 4 different computers, so something web-based that means I can pull the latest version of my code from Google Drive and start working with no setup hassle would be excellent, if it exists.
Cheers
Andy
The Ripple Emulator has similar coverage as the Cordova Simulator. Unlike Ripple, the Simulator can be extended to support specific plugins, but it will require writing simulation code to make that happen. See the cordova-simulate project for details on how to do that.
Otherwise, the next best option (and the most accurate) is to build the app and use remote Chrome DevTools to debug the app (see this XDK doc page for some help with setting that up). It is not necessary to rebuild your app to make this work. If you structure your code so that you can redefine key functions using the JavaScript console, you can actually debug quite a bit without performing a rebuild and reinstall.
Use the interactive JavaScript console to redefine functions within your app and then run those redefined functions directly from the console or restart your app, in situ, using the window.location.reload() function. An example of using this technique can be seen in this video, starting at about 18:30. The video is demonstrating the use of the weinre debugger, but the debugging technique can also be applied to remote CDT when debugging a built app.

Responsive Angular 2 web-app to mobile app

I have a responsive angular 2 wep-app that behaves like a mobile app when the screen resolution is reduced. Are there any tools that can convert the web-app to an apk mobile app?
Also, I was wondering if there's a mobile app template/project available online that works like a web browser but it can only navigate to one website?
Thanks.
There is a few ways you can do it . For myself , i created my web-app using ionic Framework . The language i used is in angular2 & typescript.
But the downfall for these, you might be needing some knoweledge on how ionic works.
BUT
Aside from that , the other easier way to do it is to use apache cordova to convert your web-app to apk mobile app.
Follow these steps # https://auth0.com/blog/converting-your-web-app-to-mobile/ and you do just fine.
Another thing to take note of ,
If you want to test your apk in an emulator , Dont use sdk emulator as it really slows down your laptop/desktop. Use GenyMotion instead.
You have to register and its free, it saves alot of time and run smoother . All you do is drag your apk file to genymotion.
Do also note that you will be needing Virtual Machine for your genymotion.
I hope with this, it will help you with coverting your web-app to mobile-app
Cheers :)

How to create an APK of a HTML5 to run on Android

I know that those kind of questions have been asked before, but I couldn't find a topic to help me.
I have been give a HTML5 game and I was asked to verify if I can run it on an Android tablet.
I'm a little bit confused with what I have to do? Should I create an Android project and import the file or is there an easier way to create an apk?
Thanks for your help.
You could look at Apache Cordova. This is a powerful environment made to support app development in HTML5. As such you should be able to literally copy your game resources over, run a build and have a full fledge Android App. Fun fact, provided you have access to OS X, Cordova will produce an iOS compatible app too.
If your game consists of HTML, CSS and JavaScript, such that it can be run off a modern web browser with no special plugins installed, rest assured it can run in an Android tablet.
You could access it directly from the tablet's browser or you can make an app (packaged in an APK and installed from it) which does essentially the same, but with a great benefit: the web page and the app can communicate (via JavaScript), enabling a richer experience.
Example of such communication: you're making an app for a web forum, and the link for "compose new message" opens an Android activity for writing that POSTs the result to the server, instead of constraining you to write in a small web browser form.
For more information on the subject, check out Android API Guides for Web Apps.

Ionic app not looking the same in Android Device as in Desktop Browser

I'm really new to ionic/AngularJS/Cordova app development so I'm facing some issues that someone with quite better comprehension on the subject than me could easily fix.
I successfully installed all the components needed to start developing with the already mentioned frameworks.
After installation, I started playing a little bit with some examples and managed to create a really simple app that just had a side menu.
When I was testing my really simple app using ionic serve command, the app launched in my browser (as it should) and worked they way I was expecting to.
My problem comes when I type the ionic run android command.
The app gets built and everything and after that it gets installed in my Android Virtual Device, which later launches the app with no errors.
But the thing is that the app running in my AVD doesn't look the same as in my browser. It looks as if some styles were missing or something.
I know it might be something really easy to fix that I'm just missing.
Thanks in advance. :)
Ionic framework renders the UI layout based on the platform the app is run to provide close to native look and feel. This is as per the design of the framework. If you want to control the rendering, i.e., to have the same look and feel across all platforms, you can make use of the $ionicConfigProvider service in your app and make appropriate changes. http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
Also to get a feel of how the UI looks in iOS and Android side by side you can use the below command
ionic serve --lab
Read this http://ionicframework.com/docs/cli/test.html for more options on ionic cli

Categories

Resources