Simplest CRUD - Ember web service (Web API) tutorial

Ember adapters
https://guides.emberjs.com/v3.15.0/models/customizing-adapters/

Serializer
https://guides.emberjs.com/v3.15.0/models/customizing-serializers/

The tutorial
https://medium.com/ember-ish/the-simplest-possible-ember-data-crud-16eacee33ae6

I am following the above tutorial...(27/4/20)

API + db all working well.


CORS issue was also fixed by using middleware.

Enable CORS in Lumen

• https://www.codementor.io/@chiemelachinedum/steps-to-enable-cors-on-a-lumen-api-backend-e5a0s1ecx
• https://medium.com/@afrimadonidinata/fix-error-cors-for-laravel-lumen-application-8ac24d85ea71
• https://stackoverflow.com/questions/36448134/enable-cors-in-lumen

But I still had issue in GET operation


The lady author says,

"If your POST request failed and this surprises you, a few different things could be wrong:"

I guess the issue is the json format.
https://guides.emberjs.com/v3.15.0/models/customizing-serializers/

My guess was right. Ember serializer default is JsonWAPISerializer. You have to change it to JsonSerializer to work with Lumen's default json formats without 'data' or 'attribute' name conventions.



Now /api/boardgames/1 is working.

But insert is still not working. Why?

Amazingly, the issue was in database. The sample Lumen API server code (not this tutorial) I downloaded from below required updated_at, created_at in each table. After updating the database, POST call to create new boardgame worked fine!!

Lumen tutorial:
https://auth0.com/blog/developing-restful-apis-with-lumen/

Now insert is working




16/5/20. At one stage, insert stopped working again, this time with CORS issue again.  My table had two date columns, middle ware was there (GET was still working). I found suspecious error in Lumen console. It seems my PHP in LInux(7.1) is not good enough for SImpony (lumen insert operation). The same code was working on my mac (php 7.2) fine?





 Why Delete not working?


I know it is an API error while returning the result. because when I refreshed the page, the record was deleted already. And it didn't show any error while debugging. Debugging was a bit tricky to find where to see.


Web API returns string and it was not a correct JSON format. You have to implement Ember serializer.

public function delete($id)

{

BoardGame::findOrFail($id)->delete();

return response('Deleted Successfully', 200);

}

As soon as I change Web API delete as below, Ember site started working.

https://stackoverflow.com/questions/28387693/ember-promise-destroyrecord-then-failing-on-successful-request

public function delete($id)

{

BoardGame::findOrFail($id)->delete();

//return response('Deleted Successfully', 200);

//below is working as well. but you don't seem to get $newContent.

// $newContent = [

// 'data' => 'deleted'

// ];

// return response()->json($newContent, 200);

//https://stackoverflow.com/questions/28387693/ember-promise-destroyrecord-then-failing-on-successful-request

return response('Deleted Successfully', 204);

}

Why update not working?



I found that Ember translates updates as 'PATCH' operation.

• I tried PATCH in postman it didn't work. 
• Also PUT operation had to use www-encode option (?). 
• There must be something special about PUT operation. 
• Google search 'ember use PUT instead of PATCH'. Then the below link, the 1st solution worked for me not the second. 
• So you have to convert PATCH to PUT operation with below code
• app/adapters/application.js

https://github.com/emberjs/data/issues/3870

export default DS.JSONAPIAdapter.extend({

host: 'http://localhost:8000/api',

updateRecord: function (store, type, snapshot) {

var data = {};

var serializer = store.serializerFor(type.modelName);

serializer.serializeIntoHash(data, type, snapshot, { includeId: true });

var id = snapshot.id;

var url = this.buildURL(type.modelName, id, snapshot, 'updateRecord');

return this.ajax(url, 'PUT', { data: data });

}

})

Summary

Make sure you put model() hook in the router not controller js.

Here is the completed Ember web API, the simplest one:
https://github.com/oneman93/ember-simplest-crud


I like to share my web service API as well, but because I did update in there for my personal stuff, I cannot share it. However, the Lumen tutorial above will be enough to start up a web service server.

-----------

Webservice other urls

youtube about ember data
https://www.youtube.com/watch?v=ljLxZw-XStw

mirage tutorial
https://guides.emberjs.com/v3.4.0/tutorial/ember-data/