Updated 8 August 2024
In this user guide for How to Build Laravel eCommerce Mobile App on Flutter, we will be explaining to you the procedure to install the open-source eCommerce app on the server end and the app end.
You can also check the video for a better understanding –
Follow the below-mentioned steps in sequence –
1: You need to check on your server that you have installed the latest Bagsito version 2.0.0 which can be downloaded via Git Hub.
You can check the Bagisto Installation User Guide for detailed information.
The Laravel platform, which is open-source and headless, utilizes a GraphQL-based API to provide incredibly fast, dynamic, and customized shopping experiences.
1 |
composer require bagisto/graphql-api dev-main |
After that, Add the below line inside the modules index in the config/concord.php file
1 |
\Webkul\GraphQLAPI\Providers\ModuleServiceProvider::class, |
3: Find the file app/Http/Kernel.php from the root and add these two middlewares inside the $middleware array:
1 2 |
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class, |
4: Find the file config/auth.php from the root and the below code inside guard:
1 2 3 4 5 6 7 8 9 |
'api' => [ 'driver' => 'jwt', 'provider' => 'customer', ], 'admin-api' => [ 'driver' => 'jwt', 'provider' => 'admin', ], |
5: Find a file config/auth.php from root and bellow code inside providers:
1 2 3 4 5 6 7 8 9 |
'customer' => [ 'driver' => 'eloquent', 'model' => Webkul\GraphQLAPI\Models\Customer\Customer::class, ], 'admin' => [ 'driver' => 'eloquent', 'model' => Webkul\GraphQLAPI\Models\Admin\Admin::class, ], |
6: Add the JWT_TTL (JWT time to live) & JWT_SHOW_BLACKLIST_EXCEPTION entries in the .env file:
1 2 |
JWT_TTL=525600 JWT_SHOW_BLACKLIST_EXCEPTION=true |
7: To install and publish the assets and configurations, run the below command from the root in the terminal –
1 |
php artisan bagisto-graphql:install |
Now to use the graphql-playground for testing the APIs –
1 |
http://your-domain.com/graphiql |
You can also use the Postman for testing the APIs:
1 |
http://your-domain.com/graphql |
That’s it, now just execute the project on your specified domain.
After making the sever end configurations, now we will proceed to the app end installation part.
First of all, you need to make sure that the below-mentioned things are installed –
It is recommended that you run a simple Hello World program in Flutter first before proceeding further so that you are sure that the environment is properly set up.
After going through the above procedures, now on your local system terminal, you have to –
1 |
git clone https://github.com/bagisto/opensource-ecommerce-mobile-app.git |
Navigate to the project’s directory and run the below command.
1 |
cd <repository-name> |
Now, run the following command to install the required packages.
1 |
flutter pub get |
Physical Device
Emulator
Change the base URL as per your store
Path: lib/utils/server_configuration.dart
1 |
static const String baseUrl = ‘....’<span class="pl-k">;</span> |
Note: Add the value of the complete URL ending with the GraphQL API endpoint. E.g – https://example.com/graphql
Use the below command to build and run the project.
1 |
flutter run |
Change the Theme for your app
Path: lib/utils/mobikul_theme.dart
1 2 |
static const Color primaryColor = Color(<span class="pl-k">***********</span>)<span class="pl-k">;</span> static const Color accentColor = Color(<span class="pl-k">***********</span>)<span class="pl-k">;</span> |
Replace “google-services.json”.
Replace “GoogleService-Info.plist”.
Helpful Articles
Android →Generating Google-Service File To Enable FCM(Firebase Cloud Messaging) In The Android Application.
iOS → Generating A New GoogleService-Info.Plist File For The FCM Based Project For IOS App.
Android
iOS
For Homepage Header Title – Go to ‘assets/language/en.json’ (Note: Here, “en” in en.json refers to the languages that would be supported within the application)
For adding Lottie as Splash Screen
1 |
static const String splashLottie = <span class="pl-s"><span class="pl-pds">"</span>assets/lottie/splash_screen.json<span class="pl-pds">"</span></span><span class="pl-k">;</span> |
To add an Image as a Splash Screen
1 |
static const String splashImage = <span class="pl-s"><span class="pl-pds">"</span>assets/images/splash.png<span class="pl-pds">"</span></span><span class="pl-k">;</span> |
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.