How to have different views for Mobile and Web Version?

help
1

I just finished the Basic Tutorial of meteor because i want to use it for my Degree project and i tried the localmarket example and it have some of the functionalities that i want to implement, but the only thing that i didn’t understand is if i can have a “landing page” for web version and in the Mobile version the application itself ?

The thing is, i must have a web version with only a few functions of the mobile version (login to your account, see some basic info and edit some of it) and ofc the landing page. Is that possible?

Thanks.

2

Hmmm what i am doing now is write an meteor app for the web version i mean for the website and make another app that will have native feeling using famo.us, ionic etc and connect between them with DDP. this reduces the size of the app in the store.
mean while you can also try to compare
if(Meteor.isCordova)
// load templates for the mobile users if you want under same app

but the major problem will be the styles dependency between them and the mobile app becomes bit higher size.

Thanks

3

You need to write your app with packages and use api.addFiles with the wanted architecture (web.browser, web.cordova). See http://docs.meteor.com/#/full/pack_addFiles.

1 Like
4

But how u can share the same DB for example? i think about having 2 different versions of the app, but i don’t know how to connect with each other

5

I read about it in another question here in the forum, but, it will allow me to have like 2 complete different views (web/mobile) and share the server logic?

6

Yes.

What you do with this technique is telling Meteor when it build:

  • Use my_template_cordova.html for the native Cordova app: api.addFiles('my_template_cordova.html', {architecture: 'web.cordova'})
  • Use my_template_browser.html for the browser app (including mobile browsers): api.addFiles('my_template_browser.html', {architecture: 'web.browser'})

If you want to differentiate between mobile browsers and desktop browsers, that’s another story.

4 Likes
7

now i understand ! thank u so much !! I don’t care about the browser version because will be a responsive landing page ^^.

A off topic question, what happens when the mobile application don’t have internet connection? what happen to a logged user ? this session is lost? I’m asking coz at this moment i know that the mobile application only connect to a server don’t story anything (?) (i’m just learning so there’s a lot of things that i don’t understand)

8

Meteor tries to reconnect and it will queue up Method calls and database operations. So for shorter disconnects there should be no problem.

You can try it in Google Chrome by setting “Network connection” to “offline” in the “device mode” options.

9

write two sets of router and views , one for mobile,one for web

10

Another solution is to create 2 separate Meteor apps. You can share server logic by symlinking the server folder between your projects. (ln -s ~/meteorapp1/server ~/meteorapp2/server)

11

But what about the Database? i mean, both versions will use the same database

12

You can connect to the same db in production.

13

once you connect with DDP we can call the methods through the DDP and subscribe them as well.
DDP is simple, lightweight and powerful
eg,
webversion=DDP.connect(‘webversionUrl’);
someCollection=new Mongo.Collection(‘collectionName’,webversion);

// Now we can subscribe the data as
webversion.subscribe(‘getData’,someparams);

after the subscription is ready() we will have the data fetched to the someCollection mongo Collection in client side of mobile app

similary for calling the method of the webversion we can write as
webversion.call(‘methodName’, someparams, callbackFunction);

1 Like
14

Now i get it ! thank u so much, i will try it :grinning:

15

Thanks for point out this pattern!

My guess is that unless you check Meteor.isCordova in your router…then you have named templates with the same name in each of these files (my_template_cordova.html and my_template_browser.html). Is this the usecase? Well, the usecase of a very lazy person, such as myself :wink:

my_template_cordova.html (assuming I’m using meteroic:meteor-ionioc here):

<template name="mainLayout">
    {{#ionBody}}
        {{> ionNavBar}}
        {{#ionNavView}}
            {{> yield}}
        {{/ionNavView}}
    {{/ionBody}}
</template>

my_template_browser.html (assuming I’m using bootstrap here):

<template name="mainLayout">
   <div class="container">
       {{> myCustomNav}}
       {{> yield}} 
   </div>   
</template>

…and in a similar way sending only CSS specific to the target…

16

Hi Sanjo,
I want to differentiate between mobile and desktop browsers :smiley: since I want to include ionic only on mobile browsers and in cordova apps. Do you know how to distinguish between them?

something like web.cordova + web.mobile would be very useful!

17

There is the user agent sniffing technique where you serve different files based on the useragent header that the browser sends to the server. You can read more about this here: https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent. I have never used this.

1 Like