Hello,

Nectar has Single Page Application (SPA) architecture. For SEO, you have to add meta tags dynamically on page load or use Server Side Rendering solution such as Puppeteer https://pptr.dev

This is how SEO in SPA frameworks (Angular, Vue) works.

Thank You

Hello,

The initializeBackButton() function works only on Android Apps (APKs), as this is a native functionality. This works for both Hamburger and Tab Bar layout.

On Web Apps, we cannot access the device back button, so it uses (#!) URL navigation to go back, which only works for Hamburger Layout.

So,

1. For Android App (APK), back button works for both Hamburger & Tab Bar. 2. For Web App, back button works only for Hamburger layout.

Thank You

Regards, Praveen Mujawdiya

Hello,

As Nectar has Single Page Application (SPA) architecture, you cannot mix PHP and HTML code. To communicate with the server, you must have REST APIs written in PHP, which can be consumed in Nectar using AJAX. This is how the single page applications made using modern JS frameworks and cordova/phonegap apps work.

To manage user sessions you will need to implement JSON Web Tokens. If you have implemented Facebook login in any website, you might have noticed that after the user logins, you receive a TOKEN from facebook, which you use to make further requests on the user’s behalf to access their data. In the same way, JSON Web Tokens work. Once the user logins into your app, a unique token is created server-side and sent with the response. You save this token inside LocalStorage and use it to make further requests.

Please check this tutorial: https://www.sitepoint.com/php-authorization-jwt-json-web-tokens

Thank You

Hello,

Yes, you read it right in the comments section. Nectar is a SPA. You cannot use it for multi-pages application without AJAX. AJAX is the backbone of SPAs.

Moreover, if you want to use Nectar with ASP.NET as backend. You must have REST APIs written in .NET which can then be consumed in Nectar using AJAX.

Thank You

Regards, Praveen Mujawdiya

Hello,

Thank you very much.

Nectar does not support Wappler/Dreamweaver or any other visual editor. As these editors come with their own set of rules for generating the source code and config files, it becomes difficult to adapt to each of them.

Moreover, Nectar also uses some third-party tools and plugins, which are not supported by default in Wappler.

Therefore, I would recommend you to use text editor to work with Nectar.

Thank You

Regards, Praveen Mujawdiya

Hello,

Thank you for your interest in Nectar.

As I don’t know ASP.NET, I will only be able to provide you the PHP example.

Thank You

Regards, Praveen Mujawdiya

Hello,

1. Nectar has Single Page Application (SPA) architecture. You cannot mix PHP and HTML code. You must have REST APIs written in PHP which you can then access via AJAX from inside Nectar.

2. All the paths/routes in Nectar are relative. You just need to upload the www folder on your server and everything will work.

Thank You

Hello,

PHP file for Server-Sent Events API example is already included in Nectar. The file contains a minimal boilerplate code for sending data to the browser in a specific time interval.

Thank You

Nice. purchased

Thank you for purchasing Nectar.

If you need any support, kindly contact me at praveen.mujawdiya@gmail.com

Thank You

Hi,

Thank you very much.

To show and hide the tabbar on a particular page, the methods are app.toolbar.show(’.toolbar’) and app.toolbar.hide(’.toolbar’) respectively as mentioned in the Framework7 docs: https://v3.framework7.io/docs/toolbar-tabbar.html#toolbar-app-methods

If you check the tabbar demos of Nectar, you will see that tabbar is properly shown while navigating between pages.

The toggling (show/hide) of tabbar mainly depends on the flow of app, for example on home screen the tabbar is shown -> going to login screen hides the tabbar -> again going back to home screen shows the tabbar.

So please check that you are properly showing/hiding the tabbar according to your app flow.

Or you can share the link to your web app, so that I can check there what’s actually happening.

Thank You

Regards, Praveen Mujawdiya

Hello,

1. Yes, you can make HTML/PHP/MySQL website with Nectar intended for mobiles and tablets resolution. 2. Nectar will act as Frontend and PHP/MySQL will act as Backend. 3. As Nectar has Single Page Application architecture, you cannot mix HTML and PHP code. 4. For communicating with Backend, you must have REST APIs written in PHP and then you use AJAX to communicate with it.

Let me know if you have any questions.

Thank You

Regards, Praveen Mujawdiya

Hello,

This is for programmers only. You must have knowledge of web technologies to work with Nectar.

Thank You

knwoledge of what technologies?

1. For working on UI/UX part, you must know HTML, CSS, JavaScript, jQuery (for DOM manipulation)

2. For integration with backend or any other third party services you need to know AJAX, REST API, JSON Web Tokens

3. As you can also create Android and iOS apps with Nectar, you should know the basics of Cordova or PhoneGap

Hello,

1. Nectar comes with pre-compiled CSS only. You can find the LESS files here: https://github.com/framework7io/framework7/tree/v3

2. Once the user is successfully logged in, save the user identity (access_token) inside LocalStorage. Now we will need to write the logic for identifying the authorized user, so that we can redirect them to a particular screen when they open the app. A. Open assets/custom/js/routes.js B. Add this new parameter to the first object, ie, path: ’/’

beforeEnter: function (routeTo, routeFrom, resolve, reject) {
    var loggedIn = 1; /* Replace this line with the code which checks if user is logged in It means check for the access_token in local storage */
    if (loggedIn) {
        reject();
        app.views.current.router.navigate('/home'); /* Replace '/home' with the path where user will be redirected, if already logged in */
    }
    else {
        reject();
        app.views.current.router.navigate('/login'); /* The user is not logged in, and will be taken to login screen */
    }
} 

Thank You

Nice, thanks. And how to hide the tabbar or menu in the login screen?

Hello,

To hide the tabbar on a particular screen, for example login screen:

1. Open login.html 2. Inside pageInit event, add

app.toolbar.hide('.toolbar', false);

3. Once we complete the login process, we also need to show the tabbar again on subsequent pages. For that: 4. Add this code right after pageInit event handler:

pageBeforeRemove: function() {
var self = this;
app.toolbar.show('.toolbar', false);
}

Thank You

Hello,

Please check mail.

Thank You

Hello,

You can do this using $setState method of Virtual DOM. So whenever the AJAX method is successfully called, the page is rendered with new data without having to manipulate the DOM manually.

https://v3.framework7.io/docs/router-component.html#virtual-dom

Some examples are already provided in Nectar.

1. Open partials/screens/articles-list.html 2. When the page is initially loaded, the loadData() method is called. 3. Inside the loadData() method, we are fetching the data from a JSON file using AJAX. 4. When the data is successfully fetched, it is added to articles variable inside data and this populates the page with the data. 5. Now suppose, you want to make the AJAX call to fetch more data on clicking ‘Load More’ button (similar to pagination). Then call the loadData() method on button click event, and this will now populate the list with newly fetched data.

This is how it works.

It could be very helpful, if you explain me the scenario or what functionality you actually want.

If you need any assistance, kindly mail me at praveen.mujawdiya@gmail.com

Thank You

Regards, Praveen Mujawdiya

Hello,

1. Open assets/custom/js/init.js file 2. Inside var app = new Framework7({ 3. Add stackpages: true inside ‘view’ parameter

Thank You

I have done it but it is not working sir, till now when I visit next page and then back page then the functions of third page are automatically called what to do to stop calling functions of that page after coming out of that page

The case is:- 1. User visits dashboard 2. attempt a quiz 3. pause quiz for later use 4. then user navigates back to dashboard 5. navigates to another page assume blogs then open one post of blog 6. when he comes back to blog/dashboard page the functions 0f page where quiz is attempted are called automatically which i don’t want to be

Thanks for your response please respond ASAP.

Hello,

All the cordova plugins do not work inside web browser on Android or iOS. It depends on the browser/platform if they will work or not provided that the browser supports the API. Therefore clicking the button in iOS do not work, but works on Android.

Moreover cordova plugins are not meant to be used in web browsers. The should be used in apps only.

To make all the cordova plugins work you must first create APK for android and IPA for iOS, using Cordova CLI, PhoneGap CLI or PhoneGap Build. Then they will work perfectly on both Android and iOS phones.

Thank You

Regards, Praveen Mujawdiya

Hello,

When you come back to home screen from a particular page, then you must add:

app.toolbar.show('.toolbar');

Inside the pageBeforeRemove event of that page, as I mentioned in your previous comment. If it does not work, then:

1. Open partials/screens/home.html 2. Add the code below, right after pageInit event

pageReinit: function() {
    var self = this;
    app.toolbar.show('.toolbar');
});

Also in the pageInit event, add:

app.toolbar.show('.toolbar');

Thank You

Hello,

Thank you for purchasing Nectar and congratulations for starting your app development journey.

As for app development, we are using web technologies, you should have a basic understanding of HTML, CSS and JavaScript.

The information provided in Nectar documentation contains the steps to get your project up and running, covering the steps for configuring your app.

Along with this, links for all the third-party plugins’ documentation are provide in Dependencies & Plugins section.

As Nectar is mainly based on Framework7, you should first learn the concepts of Framework7 here https://v3.framework7.io/docs. This documentation is written keeping in mind the beginners.

It won’t take much time to learn as it has a very easy learning curve compared to other similar frameworks. You don’t need to be JavaScript Ninja to learn Framework7. Once you learn the basics, you will be able to create your first app in no time.

If you ever stuck at any point, just mail me at praveen.mujawdiya@gmail.com I will be glad to assist you.

Thank You

Regards, Praveen Mujawdiya

Hello,

To hide the tab bar on a particular page, please follow the steps below:

1. Open the page on which you want to hide tab bar, let’s say login.html 2. Add a class ‘no-toolbar’ to <div class="page"> 3. Add this event handler in <code><script></code> element

on: {
pageInit: function() {
var self = this;
app.toolbar.hide('.toolbar');
},
pageBeforeRemove: function() {
var self = this;
app.toolbar.show('.toolbar');
}

Thank You

Hello,

The upgrade to latest version of Framework7 is on the roadmap. But it will take some time for the release.

Thank You

1. how much time can you please tell me in days? 2. Can I make my app on this old version then can it be upgraded to new version when it comes without affecting my current design?

Hello,

1. The next upgrade will be based on Framework7 v5, which is currently under development. So it will take at least 3 months.

2. As long as you don’t need any v4 specific features, you can start working on your app with this version. However, the upgrade should not break the functionality of your app, but still you will have to make some changes in your code as per this migration guide. https://blog.framework7.io/migration-to-framework7-v4-89d1ce49f4c0.

Thank You