How can I use it in Web application? #286

jaweii · 2019-11-08T05:39:52Z

Can you give me a example?

joaoarmando · 2019-11-25T11:39:16Z

Hey, did you figure out how to use it?

jaweii · 2019-11-25T11:56:21Z

Now I'm not use the repository, I use the JS package and link parse.min.js in my index.html.
But I think my solution is not good, I need to write different code in different platform.

joaoarmando · 2019-11-25T11:58:29Z

Oh, i think i'll use the rest api. The parse server never initialize in my case.

jaweii · 2019-11-25T12:09:05Z

I'll give you my code to reference later.

jaweii · 2019-11-25T12:25:03Z

My solution

pubspec.yaml:
js: ^0.6.0

Add parse js sdk to index.html like this:

<body>
  <script src="https://npmcdn.com/parse@2.9.0/dist/parse.min.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
  <script>
    Parse.serverURL = 'https://server.xxx.com/parse'
    Parse.initialize('APP_ID', 'CLIENT_SECRET')
    Parse.Config.get().then(_ => console.log('Parse Server: Connected'))
  </script>
</body>

I write the following code in lib/js/parse.dart ( I'm not implemen all features):

@JS('Parse')
library parse;

import 'package:js/js.dart';
import 'dart:html';
import 'dart:async';

@JS('Query')
class ParseQuery {
  ParseQuery(this.className);
  final String className;

  external ParseQuery include(List<String> list);
  external ParseQuery equalTo(String key, dynamic value);
  external Promise<List<ParseObject>> find();
  external Promise<ParseObject> first();
  external ParseQuery limit(num limit);
  external ParseQuery descending(String key);
  external ParseQuery ascending(String key);
  external ParseQuery select(List<String> keys);
}

@anonymous
@JS('window.Promise')
class Promise<T> {
  Promise();
  external Promise then(void function(T res));
}

@JS('Object')
class ParseObject {
  ParseObject(this.className);
  final String className;
  external String get id;
  external dynamic set(String key, dynamic value);
  external dynamic get(String key);
}

@JS('File')
class ParseFile {
  external String url();
}

Now I can user some Parse-JS-SDK methods through the parse.dart:

models/home.dart:

import 'package:PROJECT_NAME/js/parse.dart';
  ... ...
  Future<dynamic> fetchAlbums() async {
    loadingAlbums = true;
    notifyListeners();
    final query = ParseQuery('Albums');
    query.include(['hero']);
    Completer completer = Completer();
    query.find().then(completer.complete);
    final List<ParseObject> res =
        (await completer.future).cast<ParseObject>().toList();
    loadingAlbums = false;
    albums = res ?? [];
    notifyListeners();
    return albums;
  }

That's all.

maxifuchs · 2019-12-13T17:52:49Z

I found a much better solution.
The good thing about this plugin is that it is completely written in dart and barely uses any platform channels.
Therefore basically the whole codebase already supports flutter web.
The only problems are the coreStore and a database that is used in the example.
The coreStore problem is fixable with a new version of the shared_preferences plugin which supports web.
The database problem is not so easy to fix, because it currently depends on the path_provider plugin, which doesn't support web yet. But I for example dont need this functionality.

I already did this in my branch, or just fork this repository and change it in the pubspec.yaml to ^0.5.6

I also had to enable cors on my parse server, otherwise I just got XMLRequest errors.
But enabling cors was very easy, just follow the instructions

Now the plugin is working absolutely fine in my flutter app and thats a much better solution than using the javascript library

mregandla · 2019-12-18T13:38:36Z

@maxiundtesa hive implementation of coreStore may help. It supports cross-platform which includes web.

jackhax · 2019-12-31T17:46:48Z

I found a much better solution.
The good thing about this plugin is that it is completely written in dart and barely uses any platform channels.
Therefore basically the whole codebase already supports flutter web.
The only problems are the coreStore and a database that is used in the example.
The coreStore problem is fixable with a new version of the shared_preferences plugin which supports web.
The database problem is not so easy to fix, because it currently depends on the path_provider plugin, which doesn't support web yet. But I for example dont need this functionality.

I already did this in my branch, or just fork this repository and change it in the pubspec.yaml to ^0.5.6

I also had to enable cors on my parse server, otherwise I just got XMLRequest errors.
But enabling cors was very easy, just follow the instructions

Now the plugin is working absolutely fine in my flutter app and thats a much better solution than using the javascript library

How to enable CORS for my parse server?

jackhax · 2020-01-10T05:41:06Z

How to download ParseFile on flutter web???

gorillatapstudio · 2020-05-08T16:52:02Z

I found a much better solution.
The good thing about this plugin is that it is completely written in dart and barely uses any platform channels.
Therefore basically the whole codebase already supports flutter web.
The only problems are the coreStore and a database that is used in the example.
The coreStore problem is fixable with a new version of the shared_preferences plugin which supports web.
The database problem is not so easy to fix, because it currently depends on the path_provider plugin, which doesn't support web yet. But I for example dont need this functionality.

I already did this in my branch, or just fork this repository and change it in the pubspec.yaml to ^0.5.6

I also had to enable cors on my parse server, otherwise I just got XMLRequest errors.
But enabling cors was very easy, just follow the instructions

Now the plugin is working absolutely fine in my flutter app and thats a much better solution than using the javascript library

How's the web implementation now? Are all the issues you pointed out solved already? I'd like to give it a try.

fischerscode · 2020-10-15T10:13:15Z

2.0.0 should fully support web, even through pub.dev does not label it like this.
For more information, see the 2.0.0 migration guide.

fischerscode added the close soon label Oct 15, 2020

fischerscode closed this as completed Oct 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I use it in Web application? #286

How can I use it in Web application? #286

jaweii commented Nov 8, 2019

joaoarmando commented Nov 25, 2019

jaweii commented Nov 25, 2019

joaoarmando commented Nov 25, 2019

jaweii commented Nov 25, 2019

jaweii commented Nov 25, 2019 •

edited

Loading

maxifuchs commented Dec 13, 2019

mregandla commented Dec 18, 2019 •

edited

Loading

jackhax commented Dec 31, 2019

jackhax commented Jan 10, 2020

gorillatapstudio commented May 8, 2020

fischerscode commented Oct 15, 2020

How can I use it in Web application? #286

How can I use it in Web application? #286

Comments

jaweii commented Nov 8, 2019

joaoarmando commented Nov 25, 2019

jaweii commented Nov 25, 2019

joaoarmando commented Nov 25, 2019

jaweii commented Nov 25, 2019

jaweii commented Nov 25, 2019 • edited Loading

maxifuchs commented Dec 13, 2019

mregandla commented Dec 18, 2019 • edited Loading

jackhax commented Dec 31, 2019

jackhax commented Jan 10, 2020

gorillatapstudio commented May 8, 2020

fischerscode commented Oct 15, 2020

jaweii commented Nov 25, 2019 •

edited

Loading

mregandla commented Dec 18, 2019 •

edited

Loading