E-Canteen SMK Pembangunan Jaya YAKAPI

Mandatory setup Web Server

Map Configuration

Client should buy Map API from Google for enabling the maps into the panels.
Without buying those API’s client cannot load Google map into the panels. For
generating map api key you can watch this video. Now go to your admin panel
then “Third party APIs" menu, here you will find two inputs for map api key client
and map api key server. You can restrict the client with admin panel domain and the
server key with your server ip address. If you don’t want any restriction then you can
use single api key for both field.

Business Setup

In the admin panel we have a menu called Business Setup where you can set
your logo, timezone, country, time format, location, currency and many more
things.

Mail Configuration

Mail Configurations part admin can set his Mailer name, host, driver, user name,
Email Id and his own encryption method and password for this SMTP Mail setup. This
configuratin is used for sending password recovery mail for restaurant.

Firebase Configuration (for notification)

The Firebase Push Notification will send messages for every order status. If admin
turn on the status then with order status change customers, restaurant, delivery man
will get status notification and if he turned off that then no one will get that
message. To set up firebase notification goto admin panel Notification
settings menu.

Firebase live chat configuration setup:

1. Go to https://console.firebase.google.com/
2. If you don't have a project, create one.
3. Go to Add App from your project overview (if you have already an app for
web, skip step 3, 4, 5 & 6).
 4. Select Web for web setup credentials.
5. Register your app with an app nickname (checking firebase hosting is
optional).
6. From Add Firebase SDK, go to Use a <script> tag.
7. If you already have an app for web, go to Project Settings (beside the Project
Overview).
8. Under the General tab > Your apps > Web apps > YOUR_PROJECT
9. Copy the value
of apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId a
nd configure Firebase Chat Config from admin panel settings.

Payment Configuration

In this part Admin will introduced with the payment gateways. Cash on delivery,
Digital Payment like SSLCOMMERZ, Razor pay, Paypal, Stripe, Paystack, Senang Pay,
Flutterwave, MercadoPago, Payment accept are available for payment gateways. He
can make the necessary setup of making the status active and inactive of those
payment gateways as well.

SMS Module Configuration

SMS Module is used for SMS Gateways for OTP sending in the simplest way of user
verification. Customer will get OTP when they create their own account and for
password recovery.
Mandatory setup Mobile Apps
INFO

Same documentation for all related projects like Delivery man.

Run an existing flutter project on IDE

Change App Logo

You can generate app icon from this website https://app icon.co.

• Go to <project>/assets/image/ and replace logo.png with your own logo.

• Go to <project>/assets/image/ and replace logo_name.png with your
company name image.
• Then go to /android/app/src/main/res and replace all mipmap folder with
your <generated icon>/android folder.
• Again go to /ios/Runner and replace Assets.xcassets with your generated
Assets.xcassets folder.

Change App Name

1. You need to set your app name in three different place.

Open <project>/lib/util/app_constrants.dart and set the value
of APP_NAME

/lib/util/app_constrants.dart

static const String APP_NAME = ‘My App’;

2. Change the value of label

from <project>/android/app/src/main/AndroidManifest.xml

/android/app/src/main/AndroidManifest.xml

android:label="My App"

3. Change the value of CFBundleName from <project>/iOS/Runner/info.plist

/iOS/Runner/info.plist

<key>CFBundleName</key>
<string>My App</string>
Change Base URL

Must remember that don’t put slash(/) at the end of your base url. Use your admin
url as base url. First you have to install your admin panel. For example: If your admin
url is https://your_domain.com/admin then base url will
be https://your_domain.com. Open /lib/util/app_constrants.dart and
replace BASE_URL variable value with your own URL.

/lib/util/app_constrants.dart
static const String BASE_URL = 'https://your_domain.com';

Change App Package

First you have to find out the existing package name. You can find it out from top
of /app/src/main/AndroidManifest.xml file. Now right click on project folder from
android studio and click on replace in path. You will get a popup window with two
input box. In first box you have to put existing package name that you saw
in AndroidManifest.xml file previously and write down your preferred package name
in second box and then click on Replace All button.

Setup Firebase for Push Notification

First you have to change your package name. If you didn’t then follow this.

• Create your own firebase project

from https://console.firebase.google.com and also add an android app there
with your own package name and app name.

WARNING

Do not create multiple project if you have multiple app like User App, Delivery
App. Create only one project and add multiple app under project.

• Click register app and download google-services.json file from there.

• Copy that file and paste it under <project>/android/app/ folder.
• Create a totally white png logo for notification icon. Paste it
on <project>/android/app/src/main/res/drawable/ and
replace notification_icon.png with your whiter version logo.
• For IOS again create an app under same project and
download GoogleService-Info.plist and paste it
under <project>/iOS/ folder. Also follow this documentation for full setup for
IOS: https://firebase.flutter.dev/docs/messaging/apple-integration
 • Paste firebase server key in admin panel Notification Settings section. You can
get server key from Firebase project settings->Cloud Messaging->Server
Key.

After your setup please restart your IDE and uninstall your previously installed app
then run it. Also don’t try to test it on emulator or simulator. Emulator and simulators
are unable to get push. Use real device in this case.

Add Google Map API Key

• You need to generate the google API key. Visit this link
- https://developers.google.com/maps/documentation/embed/get-api-key
• You need to enabled mentione APIs: Direction API, Distance Matrix API,
Geocoding API, Maps SDK for Android, Maps SDK for iOS, Place API.
• You have to enable billing account. Visit this url for
activating: https://support.google.com/googleapi/answer/6158867?hl=en
• After generating API key, you have to put it on 3 different place for Android,
iOS and web.

For android, open <project>/android/app/src/main/AndroidManifest.xml and

place the value of com.google.android.geo.API_KEY

/android/app/src/main/AndroidManifest.xml
<meta-data android:name="com.google.android.geo.API_KEY"
android:value=“YOUR_MAP_API_KEY_HERE”/>

For iOS: open <project>/iOS/Runner/AppDelegate.swift and place the value

of GMSServices.provideAPIKey

/iOS/Runner/AppDelegate.swift
GMSServices.provideAPIKey(“YOUR_MAP_API_KEY_HERE")

For web: open <project>/web/index.html and place the value

of https://maps.googleapis.com/maps/api/js?key

/web/index.html
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_MAP_API_KEY_HERE"></s
cript>
Customization
Country Filter

• If you want your country only in country choosing dialog which we saw in
login, registration and forget password page, you have to set your default
country first from admin panel Business Setup section. Then
open <project>/lib/view/screens/auth/sign_in_screen.dart file and
search CodePickerWidget. Now add a parameter with value like this:

/lib/view/screens/auth/sign_in_screen.dart

countryFilter: [_countryDialCode]

TIP

Recommended tutorial is below 👇

• If you want to disable country choosing dialog the just

remove showDropDownButton: true, parameter and add one parameter like
this:

/lib/view/screens/auth/sign_in_screen.dart

enabled: false

Change onboarding text and graphics

I) Text: If you want to change onboarding text,

open <project>/assets/language/en.json and you will found some texts with key
named “make_your_choice_order”. You just need to change the values. Do not
change key.    Also do same things for <project>/assets/language/ar.json file also.

/assets/language/en.json
"make_your_choice_order": “YOUR_PREFERRED_TEXT”,

ii) Graphics: If you want to change graphics of on boarding page then go

to <project>/assets/image/ and replace onboard_1.png with your preferred image.
Must use same name and extension for your graphics.

Add New Local Language

• Go to /assets/language and press right button on language folder and create

new file and name it with your language code (.json). For example if your
 language is Bengali then you have to named your file as bn.json. You have to
name it with proper and valid language code otherwise app won’t work. For
getting language and country code you can visit this
url: https://docs.oracle.com/cd/E13214_01/wli/docs92/xref/xqisocodes.html
• Copy all data from en.json and paste it in your created file.
• Translate all English text placed here after colon(:) to your local language.
There texts are in key-value formatted. You have to translate value only not
key otherwise it won’t work. For example: “home”: “Home” -> “home”: “বাড়ি”
• Add your country picture on /assets/image folder.
• Open /lib/util/app_constrants.dart, scroll down to bottom and add one
more LanguageModel under languages array with
your imageUrl, languageName, countryCode and languageCode. Again must
remember that your language code and country code should valid otherwise
app won’t work. In image url field you have to put your image path
as assets/image/added_country_picture_name.extension. For example if
your added country picture name is bangladesh.png then path will
be assets/image/bangladesh.png.

Change App Color

• Open <project>/lib/theme/light_theme.dart file and set primary, accent

and etc. colours for light theme.
• In the same way open <project>/lib/theme/dark_theme.dart file and set
preferred primary, accent and etc. color for dark theme.

Change App Font

• Download you preferred font from internet. Google has many free font you
can check them: https://fonts.google.com/
• Unzip fonts and paste it them to <project>/assets/font/ folder.
• Mentioned them in <project>/pubspec.yaml file like: fonts:
o family: YOUR_FONT_FAMILY_NAME fonts:
▪ asset: assets/font/YOUR_FONT_FILE_NAME.ttf weight: YOUR_FONT_WEIGHT
• Replace font family name
in <project>/lib/theme/light_theme.dart, <project>/lib/theme/dark_theme
.dart and <project>/lib/util/styles.dart file.
App build & release
Build for Android

For debug build you can run command:

flutter build apk

You will get a larger merged apk with this. But you can split them with this command:

flutter build apk --target-platform android-arm,android-arm64,android-x64 -

-split-per-abi

Build file location: <project>/build/app/outputs/flutter-apk/ For deploying it

please follow this documentation: https://docs.flutter.dev/deployment/android

TIP

Recommended tutorial is below

Build for iOS

There are no general way to generate app for iOS. Apple doesn’t allow to install app
like this debug way. If you want to install it on your iOS device then you have to
deploy it on TestFlight or AppStore. For deploying it please follow this
documentation: https://docs.flutter.dev/deployment/ios