Forem: Taweechai Maklay

Appwrite secure open-source backend server for Flutter example app

Taweechai Maklay — Thu, 28 May 2020 17:31:52 +0000

Appwrite is an opensource backend that can use as web and mobile backend since it's already packed with developer must-use features e.g. account, database, object store which enough to develop an application for these days.

The first step installs the Appwrite backend ...

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/install/appwrite:rw \
    -e version=0.6.1 \
    appwrite/install

After docker running, open the Appwrite url http://localhost .

Signup user for console access(need to restrict when using in production).

Since Appwrite supported multiple projects so we create one for our testing.

Then we can access to project's console

Next, we will enable the project's mobile SDK, this example will use Flutter for example.

Add more app's package information.

Create new user for our example app testing (I've created the user with user: test01@test.com and password: 123456).

After added project and SDK information, we will create a database.

Add new database field's rule. This example model the data for note application.

An important part of the database is the collection's permission setting. This example will use '*' for 'read access' and leave 'write access' as empty to grant only collection's owner to update the collection's rule for example.

Next for the example application, I've pushed source code to github if you need to see source code.

netfirms / appnote

example flutter app with Appwrite backend

appwrite_example

Appwrite and Flutter example application project.

Getting Started

####Please install Appwrite backend and config app's url in 'app_state.dart' before run

####Android will use http://10.0.2.2/v1 as proxy to access to Appwrite from Android emulator

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/install/appwrite:rw \
    -e version=0.6.1 \
    appwrite/install

####For more information about Appwrite installation and Flutter SDK usage can follow links below

https://appwrite.io/docs/installation https://appwrite.io/docs/getting-started-for-flutter

View on GitHub

For Flutter, first, add Appwrite flutter package to project with official Appwrite document

The example application will have 4 functions

Login
List note
Create note
Edit note
Delete note

To play around with app, you login with user you created in admin console.

Once login completed you will see app page with blank note.

So let create one for example.

After added note's list state will be reloaded (since we use provider state management).

Then we checked in our Appwrite's database we can see the new note's data was added.

This Flutter app is just an example to show how easy that mobile and web developers. can take advantage of Appwrite and able to save more backend development time and paying more to the business and innovation.

More information about Appwrite available at https://appwrite.io/

Flutter app automate testing with Appium Flutter Driver

Taweechai Maklay — Sat, 02 Nov 2019 15:24:58 +0000

As tech person whom adopted flutter in tech portfolio (got much friction around this). The most question I've got is testing automation engineer did not know dart and appium not officialy support flutter, how can they write test for it, how can they do automate test with it? So I will share context about how we can test flutter application with appium-flutter-driver with a practical example.

Project setup

Since Flutter did not use native conponents, it's mean you need to define keys in all of your widget to made your widgets visible to appium-flutter-driver (also for normal flutter testing).

Be aware! your testing apk need to be "debug" or "profiling" package.

Example

Text(
  'Welcome to Home Page',
  key: Key('homeGreetingLbl'),
)

Add "enableFlutterDriverExtension()" before "runApp()"

void main() {
  enableFlutterDriverExtension();
  runApp(MyApp());
}

Add "test" and "flutter-driver" to pubspec.yml

dev_dependencies:
  test: any
  flutter_test:
    sdk: flutter
  flutter_driver:
    sdk: flutter

My tutorial was extended from TruongSinh Tran-Nguyen's tutorial, Big thank you to him. Installation can follow with his tutorial as below.

appium / appium-flutter-driver

Appium Flutter Driver is a test automation tool for Flutter apps on multiple platforms/OSes. Appium Flutter Driver is part of the Appium mobile test automation tool maintained by community

Appium Flutter Driver

Appium Flutter Driver is a test automation tool for Flutter apps on multiple platforms/OSes. Appium Flutter Driver is part of the Appium mobile test automation tool maintained by the community. Feel free to create PRs to fix issues/improve this driver.

Flutter Driver vs Appium Flutter Driver

Even though Flutter comes with superb integration test support, Flutter Driver, it does not fit some specific use cases, such as

Writing tests in other languages than Dart
Running integration test for Flutter app with embedded webview or native view, or existing native app with embedded Flutter view
Running tests on multiple devices simultaneously
Running integration tests on device farms that offer Appium support (Please contact the availability for each vendor)

Under the hood, Appium Flutter Driver uses the Dart VM Service Protocol with extension ext.flutter.driver, similar to Flutter Driver, to control the Flutter app-under-test (AUT).

Appium drivers for

…

View on GitHub

Let's test our app with appium-flutter-driver!

I've created demo application for our appium testing in github you can checkout and try

netfirms / flutter-appium-example

Appium-flutter-driver demo

Flutter example project for appium-flutter-driver.

View on GitHub

Project has flutter app project and "appium" directory for testing. In "appium" directory consist of

package.json - Package which is required by appium-flutter-driver.

{
  "name": "appium",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "appium-flutter-finder": "0.0.13",
    "webdriverio": "^5.15.0"
  },
  "scripts": {
    "start": "node test.js",
    "ios": "APPIUM_OS=ios npm start",
    "android": "APPIUM_OS=android npm start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "TruongSinh Tran-Nguyen <i@truongsinh.pro",
  "private": true,
  "license": "MIT"
}

test.js - This is main testing file.

const wdio = require('webdriverio');
const assert = require('assert');
const find = require('appium-flutter-finder');

const osSpecificOps = process.env.APPIUM_OS === 'android' ? {
  platformName: 'Android',
  deviceName: 'emulator-5554',
  // @todo support non-unix style path
  app: __dirname +  '/../build/app/outputs/apk/debug/app-debug.apk',
}: process.env.APPIUM_OS === 'ios' ? {
  platformName: 'iOS',
  platformVersion: '12.2',
  deviceName: 'iPhone X',
  noReset: true,
  app: __dirname +  '/../ios/Runner.zip',

} : {};

const opts = {
  port: 4723,
  capabilities: {
    ...osSpecificOps,
    automationName: 'Flutter'
  }
};

(async () => {
  console.log('Initial app testing')
  const driver = await wdio.remote(opts);
   assert.strictEqual(await driver.execute('flutter:checkHealth'), 'ok');
  await driver.execute('flutter:clearTimeline');
  await driver.execute('flutter:forceGC');

  //Enter login page
  await driver.execute('flutter:waitFor', find.byValueKey('loginBtn'));
  await driver.elementSendKeys(find.byValueKey('emailTxt'), 'test@gmail.com')
  await driver.elementSendKeys(find.byValueKey('passwordTxt'), '123456')
  await driver.elementClick(find.byValueKey('loginBtn'));

  //Enter home page
  await driver.execute('flutter:waitFor', find.byValueKey('homeGreetingLbl'));
  assert.strictEqual(await driver.getElementText(find.byValueKey('homeGreetingLbl')), 'Welcome to Home Page');

  //Enter Page1
  await driver.elementClick(find.byValueKey('page1Btn'));
  await driver.execute('flutter:waitFor', find.byValueKey('page1GreetingLbl'));
  assert.strictEqual(await driver.getElementText(find.byValueKey('page1GreetingLbl')), 'Page1');
  await driver.elementClick(find.byValueKey('page1BackBtn'));

  //Enter Page2
  await driver.elementClick(find.byValueKey('page2Btn'));
  await driver.execute('flutter:waitFor', find.byValueKey('page2GreetingLbl'));
  assert.strictEqual(await driver.getElementText(find.byValueKey('page2GreetingLbl')), 'Page2');
  await driver.switchContext('NATIVE_APP');
  await driver.back();
  await driver.switchContext('FLUTTER');

  //Logout application
  await driver.elementClick(find.byValueKey('logoutBtn'));
  driver.deleteSession();
})();

Run Appium (Android)

Change directory to "appium" folder.
Start appium server with command "appium" in console.
Start Android emulator (check your emulator address with "adb devices

Taweechais-MBP:~ taweechaimaklay$ adb devices
List of devices attached
emulator-5554   device

install required nodejs package

npm install

and change Android configuration in test.js") and run command

APPIUM_OS=android npm start

to start appium automation.

Testing result

Automated running application with appium-flutter-driver

Console output as below

Others Appium's command which I've tested.

//Enter value to tartget TextInput
await driver.elementSendKeys(find.byValueKey('telphoneEditTxt'), '1234567890')

//Wait for element visible
await driver.execute('flutter:waitFor', find.byValueKey('page2Btn'));

//Screen scrolling
await driver.execute('flutter:scrollIntoView', find.byValueKey('bottomSubmitBtn'), {alignment: 0.1});

//Using Native command and switch context back to flutter
await driver.switchContext('NATIVE_APP');
  driver.back();
await driver.switchContext('FLUTTER');

//Tap on widget element
await driver.elementClick(find.byValueKey('backBtn'));

Conclusion

I did not have strong opinion about appium-flutter-driver is the best way to do flutter app automate testing. But it help QA or automation tester to get familiar with flutter app testing since they can reuse their Appium which already mature to start automate flutter app testing and they can lower their guard about flutter which is very new platform and not much test tooling for it. By the way for flutter developer I think flutter-driver is enough for automate testing (since they already know dart :)). That all from me, comment, question and suggestion is welcome.

Flutter approach in micro-frontend

Taweechai Maklay — Sun, 25 Aug 2019 20:21:25 +0000

I’ve started Flutter development just a few months ago. Working as a technical lead I have to find possibility and feasibility in new technology for business solutions. I’ve to start discovery Flutter with a build from scratch app, everything fine, I can develop the same app which took 2–3 weeks within 1 week with just basic Flutter knowledge, by the way, it has pros and cons. But this article is not about that. We will talk about “Can Flutter be a micro frontend for a mobile application?” Since simple knowledge about Flutter for me is Rendering Engine with Dart … So I try to find are we able to integrate Flutter widget to native or not? Do search and find the “Add-to-app” topic, it still under preview. Fine, so I discovered it and try it. First time so painful… after a few nights with it. I can get shape. I can display widget in the same native screen, open a new full fresh flutter page within the native application. So let’s see in architecture and tech perspective. Below is an example of the Android native-flutter application as below.

For example app, I’ve developed a native app that has embedded 2 Flutter widget, 1 Flutter activity and 1 native map view in it. Let’s get into the detail of each widget
Weather forecast widget, this Flutter widget which I borrowed from albertopeam/flutter-weather project, it can display forecast weather and consume forecast data from open weather API. All the things packed into itself code no widget code involved in the native package except UI injection code.
Flutter image carousel. This one is the simple one which displays just 3 pictures and if we click on the picture it will send message to Native to move native map location.
Native map view, it just native map view.
Flutter slider image Activity. This one is a separate native screen that just renders Flutter page widget.

Knowledge which we are using

Simple Android app development (View, Layout, Activity).
Flutter Platform-Channel.
Flutter widget development.

micro frontend term

Native-Flutter Hybrid frontend approach as an example application.

From my example, you can see we can add more and more possibilities for a native app with the power of Native-Flutter in the form of micro frontend term.

Conclusion
I think flutter can be one of a solution if you have a growing team that has a broad of people in frontend development technology. Flutter is Flutter it design mindset, Dart is just provided structure for it to make Flutter alive. There is should no war between Native vs Flutter or Native vs Native-Flutter. Be pragmatics, in a positive way of using a micro frontend approach with Native-Flutter it can give you control at Native level (security, performance, and native service usage), easy to onboard another frontend tech in two teams, shorter time for uncertainly feature development and many more. Hope this article can give you some idea.
Any thoughts and comments are welcome.
Peace