Androidwoocommerce
Trending

How to Create a Food Delivery App With woocommerce

Afood delivery business is the perfect business option for those who prefer or may need to work from home. It is perfect for such as stay-at-home mothers. The same also holds true if you leave near the central business district, where the nearby offices are your possible market.

Depending on the features you are looking to add in your on-demand food delivery mobile app and the resources that it would require to get your app transformed from its idea stage to the launch phase

With This App You Can Sell Not Only Foods But Also All Kind Of Woocommerce Products.

We already Created a tutorial on HOW TO MAKE MULTIVENDOR WOOCOMMERCE FOOD ORDERING WEBSITE.  

 

Ionic offers a number of conveniences for mobile application development, covering over 3.2 percent of the whole mobile app market

In this tutorial we are making a multivendor food ordering Android App like zomato,swiggy, with WordPress WooCommerce and Ionic Framework. You can make this App without any technical or coding knowledge. Best part of this website is its completely built With  Woocommerce and its gps enabled.so a customer can places an order from there Location to nearest restaurants and also search based on location. A fixed commission will be get to the site owners and Remaining amount will be added to the restaurant owners.in this video session we are discussing about Setting Up the ionic Environment and making Android App

Ionic Framework

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like AngularReact, and Vue.

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Ionic Appflow.

Before Installing ionic Set up this things on your pc!

  • Installation of the JDK
  • Install Visual Studio Code
  • Install Android Studio-(optional)
  • Install GIT
  • Install Gradle-(6.4.1 Recommended)
  • Install ionic cordova

I’m up to something. They don’t want us to win. Mogul talk. Look at the sunset, life is amazing, life is beautiful, life is what you make it.

Installation of the JDK

JDK Installation Instructions for Windows

You run a self-installing executable file to unpack and install the JDK on Windows computers.

Install JDK on Windows computers by performing the actions described in the following topics:

Downloading the JDK Installer

 

Access Java SE Downloads page and click Accept License Agreement. Under the Download menu, click the Download link that corresponds to the .exe for your version of Windows.

Download the file jdk-13.interim.update.patch_windows-x64_bin.exe.

Note:

Verify the successful completion of file download by comparing the file size on the download page and your local drive. Alternatively, you can ensure that the downloaded file’s checksum matches the one provided on the Java SE Downloads page.

Running the JDK Installer

 

You must have administrator privilege to install the JDK on Microsoft Windows.
To run the JDK installer:
  1. Start the JDK 13 installer by double-clicking the installer’s icon or file name in the download location.
  2. Follow the instructions provided by the Installation wizard.
  3. After the installation is complete, delete the downloaded file to recover the disk space.

Installing the JDK Silently

Instead of double-clicking or opening the JDK installer, you can perform a silent, non interactive, JDK installation by using command-line arguments.

Install JDK in silent mode using the command:

jdk.exe /s

Note:

The notation jdk stands for the downloaded installer file base name, such as jdk-13_windows-x64_bin.exe.

Setting the PATH Environment Variable

It is useful to set the PATH variable permanently for JDK 13 so that it is persistent after rebooting.

If you do not set the PATH variable, then you must specify the full path to the executable file every time that you run it. For example:

C:\> "C:\Program Files\Java\jdk-13\bin\javac" MyClass.java

To set the PATH variable permanently, add the full path of the jdk-13\bin directory to the PATH variable. Typically, the full path is:

C:\Program Files\Java\jdk-13\bin
To set the PATH variable on Microsoft Windows:
  • Select Control Panel and then System.
  • Click Advanced and then Environment Variables.
  • Add the location of the bin folder of the JDK installation to the PATH variable in System Variables.

    Note:

    The PATH environment variable is a series of directories separated by semicolons (;) and is not case-sensitive. Microsoft Windows looks for programs in the PATH directories in order, from left to right.

    You should only have one bin directory for a JDK in the path at a time. Those following the first instance are ignored.

    If you are not sure where to add the JDK path, append it.

    The new path takes effect in each new command window that you open after setting the PATH variable.

    The following is a typical value for the PATH variable:

    C:\WINDOWS\system32;C:\WINDOWS;"C:\Program Files\Java\jdk-13\bin"

    Install Visual Studio Code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git

Download Visual Studio Code Now

Install Android Studio-(optional)

Android Studio is the official integrated development environment for Google’s Android operating system, built on JetBrains’ IntelliJ IDEA software and designed specifically for Android development.The fastest developer tools for building market-leading apps and accelerating performance. With an intelligent code editor, flexible build system, realtime profilers and emulators. Build rich experiences.

Download Android Studio Now

Install GIT

Installing on Windows
There are also a few ways to install Git on Windows. The most official build is available for download on the Git website. Just go to https://git-scm.com/download/win and the download will start automatically. Note that this is a project called Git for Windows, which is separate from Git itself; for more information on it, go to https://gitforwindows.org.

To get an automated installation you can use the Git Chocolatey package. Note that the Chocolatey package is community maintained.

Another easy way to get Git installed is by installing GitHub Desktop. The installer includes a command line version of Git as well as the GUI. It also works well with PowerShell, and sets up solid credential caching and sane CRLF settings. We’ll learn more about those things a little later, but suffice it to say they’re things you want. You can download this from the GitHub Desktop website.

Installing from Source
Some people may instead find it useful to install Git from source, because you’ll get the most recent version. The binary installers tend to be a bit behind, though as Git has matured in recent years, this has made less of a difference.

Download GIT Now

Install Gradle-(6.4.1 Recommended)

Installing manually

Step 1. Download the latest Gradle distribution-(6.4.1 Recommended)

The current Gradle release is version 6.7.1, released on 16 Nov 2020. The distribution zip file comes in two flavors:

If in doubt, choose the binary-only version and browse docs and sources online.

Need to work with an older version? See the releases page.

Step 2. Unpack the distribution

Linux & MacOS users

Unzip the distribution zip file in the directory of your choosing, e.g.:

$ mkdir /opt/gradle
$ unzip -d /opt/gradle gradle-6.7.1-bin.zip
$ ls /opt/gradle/gradle-6.7.1
LICENSE  NOTICE  bin  getting-started.html  init.d  lib  media
Microsoft Windows users

Create a new directory C:\Gradle with File Explorer.

Open a second File Explorer window and go to the directory where the Gradle distribution was downloaded. Double-click the ZIP archive to expose the content. Drag the content folder gradle-6.7.1 to your newly created C:\Gradle folder.

Alternatively you can unpack the Gradle distribution ZIP into C:\Gradle using an archiver tool of your choice.

Step 3. Configure your system environment

Install Ionic Cordova

With Node and NPM setup, let’s install the Ionic and Cordova CLI.

npm install -g ionic cordova

Note: The -g means this is a global install, so for Windows you will need to open an Admin command prompt. For Mac/Linux, you might need to run the command with sudo.

 

 

 

App Development

First You Have to Buy The source code & Unzip It

  1. Now Open Vs Code editor.Change your details in app/config.xml. Change id, name, description, author, email, href

<?xml version=’1.0′ encoding=’utf-8′?>
<widget id=”com.ionic.starter version=”0.0.1 xmlns=”http://www.w3.org/ns/widgets xmlns:cdv=”http://cordova.apache.org/ns/1.0>
<name>WooCommerce</name>
<description>An awesome WooCommerce app.</description>
<author email=”support@mstoreapp.com href=”http://mstoreapp.com/>Mstoreapp Team</author>

2.Open App source code

$ cd app

3.Add android and ios platform to your project

ionic cordova platform add android

Wordpress Plugin Installation

To install plugin mstoreapp-mobile-app for WordPress follow these steps.

Install Redux Frameworks. If you have not installed yet – https://wordpress.org/plugins/redux-framework/

  1. In Wordpress admin panel. Plugins > Add New > Upload plugin > Choose file Chose downloaded mstoreapp-mobile-app.zip file and Install and activate

OR

  1. Unzip downloaded mstoreapp-mobile-app.zip and Upload the mstoreapp-mobile-app folder to the wp-content/plugins/ directory.

  2. Activate the plugin through the Plugins menu in WordPress.

WooCommerce API
  1. It’s required to turn on the WordPress permalink on Settings > Permalinks

  2. Visit WooCommerce > Settings > Advanced > REST API tab and tick the Enable REST API Checkbox

  3. Visit WooCommerce > Settings > Advanced > Legacy API tab and tick the Enable Legacy REST API Checkbox

  4. Go to API WooCommerce > Settings > Advanced > REST API > Keys/Apps > Add Key

Select the user in user field and add a description. Choose level of access Read/Write. then select the button Generate API Key and WooCommerce will generate API keys for that user.

Now you should see two new keys, These two keys are your Consumer Key and Consumer Secret

Add url, api keys in app/src/providers/service/config.ts file.
url: any = ‘URL_PLACEHOLDER’;

consumerKey: any = ‘CONSUMER_KEY_PLACEHOLDER’;

consumerSecret: any = ‘CONSUMER_SECRET_PLACEHOLDER’;

Go to Wordpress > Mobile Options. Add Banners Blocks, Category Blocks, Product Blocks and Settings.

Now you can run your app
ionic serve
Once The App Compiled successfully Run The Command
ionic cordova build android

OneSignal Push Notification

Creating one signal app

Login or Signup in https://onesignal.com/

Add an app, Add you app name and click ADD APP

After that select platform and hit NEXT:

Next you need to get Firebase Server Key and Firebase Sender ID. You will get it with Following steps

In another browser tab Open Firebase Console https://console.firebase.google.com and sign in with your Google account.

Press “CREATE NEW PROJECT” or select an existing one below.

Enter a project name and press “CREATE PROJECT”.

Go to project OverView

Click Settings -> Project Settings -> Cloud Messaging

Copy server key And sender Id

And Add it in OneSignal app and click SAVE

Select your target SDK PhoneGap, Cordova, ionic and hit NEXT

Copy Your App ID

Add in OneSignal APP ID, Firebase Server Key and Firebase Sender ID in Wordpress -> Mobile App -> Settings

After that Build apk and Subscribe at least one user by launching your app on mobile. Then you need to hit check subscribed user and click DONE

Dynamic Blocks

This allow you to add Banner Blocks, Category Blocks and Products Blocks
Banner Blocks

Go to Wordpress > Mobile Options > Banner Blocks

  1. Status – will allow you to enable or disable blocks

  2. Title – This will allow you to add a title for the blocks

  3. Title align – Allow you to set the alignment of the title inside blocks. select none to hide the title

  4. Title Color – Color of text inside the block. Set Back or Dark color for a light background, Light color for dark back

  5. Background Color – Allow you to set background color for blocks

  6. Select Style – Allow you to set style slider, grid, or scroll (Horizontal scroll) for banners in the block

  7. Set Margin – Allow you to set-top, right, bottom, left margin for the block

  8. Set Padding – Allow you to set-top, right, bottom, left padding for the block

  9. Margin between banner – Allow you to set a gap between banners

  10. Enter Border Radius – Allow you to set border -radius for banners

  11. Set Width – Allow you to set the width in % of screen width for Banner. set 100 for one banner in a row. 50 for two banners in a row. 25 for 4 banners in a row.

  12. Sort Order – Allow you to set the sort order for blocks. Blocks will appear on the mobile app according to sort order. 0 comes on top and higher-order number comes last

  13. Banners – allow you to add multiple banners as block

    1. Link Type – Allow to link banner image to product, category, or post. enter product or category or post or stores ( for multivendor only ) in this field. leave blank if you don’t want to link banner

    2. Link Id – Allow you to set link id for the banner. Enter product id or category id or post id according to what you have entered in Link Type for stores Link id is not required to enter. in this field. leave blank if you don’t want to link banner

Category Blocks

Support banner blocks options as mentioned Banner Blocks

  1. Main Category id – Allow you to set main category id whose subcategory will appear in blocks

Products Blocks

Support banner blocks options as mentioned Banner Blocks

  1. Filter Product By – Allow you to set filter products by category id or product tag id

  2. Category id or Product tag id – Enter category id or Product tag id according to the previous option. Products under the category or tagged products will appear under blocks accordingly.

Flash Sale Blocks

Support banner blocks options as mentioned Banner Blocks

  1. Flash Sale End Date – Allow you to set an end date for flash sale

  2. Filter Product By – Allow you to set filter products by category id or product tag id

  3. Category id or Product tag id – Enter category id or Product tag id according to the previous option. Products under the category or tagged products will appear under blocks accordingly.

Geolocation

Geolocation works only for multivendor site and quick order or order now app

Enable location filter in Wordpress > Mobile Options > Geo Locations

Add google map API key in app > src index.html replace YOUR_API_KEY with your google map API key.

<script src=”https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places”></script>

Enable Geolocation API and Geocoding API for your google map API key

1) Login to your google cloud console – https://console.cloud.google.com/apis/library

2) Search for Geolocation API

3) Click on Geolocation API and enable it

4) Search for Geocoding API

5) Click on Geocoding API and enable it

6) Search for Places API

7) Click on Places API and enable it

Social Login

Read this document to avoid any mistake or conflict

READ THIS

Uncomment Facebook and GooglePlus import in src/app/app.module.ts and src/app/account/login/login.ts

//import { Facebook } from ‘@ionic-native/facebook/ngx’;

//import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

Uncomment Facebook and GooglePlus in providers section of src/app/app.module.ts

// Facebook,

// GooglePlus,

Uncomment GooglePlus, Facebook in constructor in src/app/account/login/login.ts file

/*private googlePlus: GooglePlus, private fb: Facebook*/

Uncomment Social login in src/app/account/login/login.ts file

/*googleLogin(){ this.googleLogingInn = true; this.googlePlus.login({}) .then(res => { this.googleStatus = res; this.api.postItem(‘google_login’, { “access_token”: this.googleStatus.userId, “email”: this.googleStatus.email, “first_name”: this.googleStatus.givenName, “last_name”: this.googleStatus.familyName, “display_name”: this.googleStatus.displayName, “image”: this.googleStatus.imageUrl }).subscribe(res => { this.status = res; if (this.status.errors) { this.errors = this.status.errors; } else if (this.status.data) { this.settings.customer.id = this.status.ID; if (this.platform.is(‘cordova’)){ this.oneSignal.getIds().then((data: any) => { this.form.onesignal_user_id = data.userId; this.form.onesignal_push_token = data.pushToken; }); this.api.postItem(‘update_user_notification’, this.form).subscribe(res =>{}); } if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){ this.settings.vendor = true; } this.navCtrl.navigateBack(‘/tabs/account’); } this.googleLogingInn = false; }, err => { this.googleLogingInn = false; }); this.googleLogingInn = false; }) .catch(err => { this.googleStatus = err; this.googleLogingInn = false; }); } facebookLogin(){ this.facebookLogingInn = true; this.facebook.login([‘public_profile’, ‘user_friends’, ’email’]) .then((res: FacebookLoginResponse) => { this.googleStatus = res; this.api.postItem(‘facebook_login’, { “access_token”: this.googleStatus.userId, }).subscribe(res => { this.status = res; if (this.status.errors) { this.errors = this.status.errors; } else if (this.status.data) { this.settings.customer.id = this.status.ID; if (this.platform.is(‘cordova’)){ this.oneSignal.getIds().then((data: any) => { this.form.onesignal_user_id = data.userId; this.form.onesignal_push_token = data.pushToken; }); this.api.postItem(‘update_user_notification’, this.form).subscribe(res =>{}); } if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){ this.settings.vendor = true; } this.navCtrl.navigateBack(‘/tabs/account’); } this.facebookLogingInn = false; }, err => { this.facebookLogingInn = false; }); this.facebookLogingInn = false; }) .catch(e => { this.googleStatus = e; this.facebookLogingInn = false; }); }*/

Uncomment Social login buttons in src/app/account/login/login.html file

<!–div>
<ion-row class=”login-div”>
<ion-col class=”col1″> <button ion-button outline full type=”submit” text-uppercase [disabled]=”disableSubmit” (click)=”facebookLogin()”>{{“Facebook” | translate}}</button> </ion-col>
<ion-col class=”col2″> <button ion-button outline full type=”submit” text-uppercase [disabled]=”disableSubmit” (click)=”gmailLogin()”>{{“Google” | translate}}</button> </ion-col>
</ion-row>
</div–>

Google Authentication

  1. Get your credentials from Google.

  2. Install the Google native plugin.

1. Get your credentials from Google.

Go to https://console.firebase.google.com and create a project.

Once project is added we need to create both ios and android app in firebase console https://console.firebase.google.com.

let’s start with the iOS one,

Choose your project. Click settings icon and then select project settings

Click on ADD APP and then choose platform

It will ask you an iOS Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate GoogleService-Info.plist file.

Click on Download GoogleService-Info.plist file, which is a config file for iOS.

After downloading GoogleService-Info.plist file click on Continue > Continue > FINISH.

Copy GoogleService-Info.plist file to your project root directory.

Once we add iOS app, we need to add Android app.

Click ADD APP and choose android platform

It will ask you an Android Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate google-services.json file

Click on Download google-services .json file, which is a config file for Android.

After downloading google-services.json file click on Continue > FINISH

Copy google-services.json file to your project root directory. that is app folder

Add CLIENT_ID in src/providers/config.ts file

2. Install the GooglePlus Cordova Plugin.

get REVERSED_CLIENT_ID in GoogleService-Info.plist file

Run following command to install GooglePlus Cordova plugin. CLIENT ID with REVERSE CLIEND ID

ionic cordova plugin add cordova-plugin-googleplus –variable REVERSED_CLIENT_ID=CLIENT_ID

npm install –save @ionic-native/google-plus

Facebook Authentication

More detail – https://ionicframework.com/docs/native/facebook https://github.com/jeduan/cordova-plugin-facebook4

Make sure you’ve registered your Facebook app with Facebook and have an APP_ID

1.First have to create a new Facebook App inside of the Facebook developer portal at https://developers.facebook.com/apps.

Retrieve the App ID and App Name

2.Add android and ios platform. Go to settings>basics as shown below and click +Add Platform.

Choose a platform

3.Fill required fields while adding android and ios platforms and save changes.

4.Final step, Change status of the app from development mode to Live .

Install the Cordova and Ionic Native plugins. where App ID and App Name are the values from the Facebook Developer portal.

ionic cordova plugin add cordova-plugin-facebook4 –variable APP_ID=”123456789″ –variable APP_NAME=”myApplication

npm install –save @ionic-native/facebook

Frequently asked questions (FAQ)

Internet Content not loading on android 9

Add android:usesCleartextTraffic=”true” in platform/android/app/src/main/AndroidManifest.xml file.

<uses-permission android:name=”android.permission.INTERNET” />
<application android:usesCleartextTraffic=”true” android:hardwareAccelerated=”true” android:icon=”@mipmap/ic_launcher” android:label=”@string/app_name” android:networkSecurityConfig=”@xml/network_security_config” android:supportsRtl=”true”>
Internet Content not on android mobile for non SSL site

Add you site Domain in app/resources/android/xml/network_security_config.xml file. Need to add this each time when you remove and add android platform. in the example below replace example.com with your domain

<?xml version=”1.0″ encoding=”utf-8″?>
<network-security-config>
<domain-config cleartextTrafficPermitted=”true”>
<domain includeSubdomains=”true”>localhost</domain>
<domain includeSubdomains=”true”>example.com</domain>
</domain-config>
</network-security-config>

How to change icon and splash screen?

Replace your icon (1024×1024 px png) and splash (2732×2732 px png, Graphics in center of 1024 sq px) in src/resources folder. Use the following command to generate icon and splash screen

ionic cordova resources

How to change the logo and other images?

Replace your logo and other images in src/assets/images/

ionic-app-scripts error

If you get error like node_modules\.bin\ionic-app-scripts’ is not recognized as an internal or external command

Try run following command

npm install @ionic/app-scripts@latest –save-dev

node-sass error

If you get error like Node Sass does not yet support your current environment

Try run following command

npm rebuild node-sass –force sudo npm install –save-dev –unsafe-perm node-sass

Error related to Node Modules

If you get any error like related to node modules. You can remove and npm install node modules by following commands

rm -rf node_modules

rm package-lock.json

npm install

ng is not recognized as internal or external command

Run following command to install angular cli

npm install -g @angular/cli

To update  ionic project

You can update your ionic project by following commands

npm install -i @ionic/angular@latest

Error at Execution failed for task

Run: 1.ionic cordova clean android 2.ionic cordova build android

Error at Can’t Build on Android AAPT

Run: 1. ionic cordova platform rm android

2. ionic cordova plugin add cordova-plugin-androidx

3. ionic cordova plugin add cordova-plugin-androidx-adapter

4. ionic cordova platform add android

Error at package android.support.v4.content does not exist

Run: 1. ionic cordova plugin add cordova-plugin-androidx

2. ionic cordova plugin add cordova-plugin-androidx-adapter

Error at ‘gradle’

Check : gradle -v If more than 6.4.1:

1. ionic cordova platform rm android.

2. ionic cordova platform add android@8.0.0

Error at ‘Could not find an installed version of Gradle’

Steps: 1 install gradle and go inside gradle folder->bin.

2 copy path till bin. (eg)C:\Program Files\gradle- 6.4.1\bin

3. goto Mycomputer(This pc)->Right click->Properties- >Advanced System Settings->Advanced- >Environment variables->User variables->select path->edit->paste

4. goto Mycomputer(This pc)->Right click->Properties- >Advanced System Settings->Advanced- >Environment variables->System variables->select path->edit->paste

Error at Failed to find ‘ANDROID_HOME’ (or) Error at Failed to find ‘ANDROID_SDK_ROOT

Steps: 1 Goto Android Sdk path and copy till sdk (eg)C:\Users\Admin\AppData\Local\Android\Sdk

2 Goto Mycomputer(This pc)->Right click->Properties- >Advanced System Settings->Advanced- >Environment variables->User variables->new

3 Enter: -> variable name:ANDROID_HOME. -> variable value:paste sdk path

Error at Failed to find ‘JAVA_HOME’

Steps: 1 Goto Java path and copy till jdk(version) (eg)C:\Program Files\Java\jdk1.8.0_241

2 Goto Mycomputer(This pc)->Right click->Properties- >Advanced System Settings->Advanced- >Environment variables->User variables->new

3 Enter: -> variable name:JAVA_HOME. -> variable value:paste java path

Mobile option is not visible in admin panel

Make sure you have installed redux frameworks – https://wordpress.org/plugins/redux-framework/.

Blank white screen after splash and taking more time to load

Debug apk takes time to load on some Android devices. while this is normal for debugging apk. Build –prod to load app faster.

ionic cordova build android –prod

Blank page on ionic serve

ionic serve –port 8080
Previous page 1 2 3 4 5 6 7 8 9 10

Related Articles

Back to top button