Skip to content

Demonstration using the Symfony Framework + React.js Connecting with ImgUR API

Notifications You must be signed in to change notification settings

HericlisMartins/desygnerDemo

Repository files navigation

Desygner Demonstration

by. Hericlis Martins


This demonstration use the ImgUR API to search images and later save into a database.


News Features:

APCU Cache: I have implemented the cache using the APCU extention, using the Component Cache\Adapter\ApcuAdapter from symfony. *

Now it is impresendive do you include and enable the APCU extention in your PHP. Have a look at: https://www.php.net/manual/en/apcu.installation.php

Commit reference: #cca03cb

New endpoint of the ImageUR API:

/api/image/imgur/{*maxofImgs*}/**{cache state}**/{*keyword*}

Cache states:

	1 - Not use at all
	0  - Try to get from cache if not exists get the imgur json and save
	1  - Only accepts values from the cache.

Validation: Now the keyword received into the API endpoint /api/image/imgur/ is valitating using the Symfony\Component\Validator\

Commit reference: #3fd1067

Validation constraints:


Tech specifications:

  • PHP 7.4
  • MySQL
  • Symfony 5
  • React.js (Material-ui)

How to:

[Install]

The file .env.desygner is the file which have the IMGUR CLIENTID API, it is my clientID. I'm not sure if this still working, if needs please register a new code here https://api.imgur.com/oauth2/addclient

  • Install all dependencies composer install Back-end dependencies yarn install Front-end dependencies
[Using]
  • Start the symfony server symfony server:start

  • Compile the React javascript file using the WebPack encore

    yarn encore dev-server Auto load the front end into the broweser when you change the files

    yarn encore dev --watch You will have to manually update the page to see the changes

:tw-2757: I have detected that the imgur blocks the request from the ip numbers like 127.0.0.1 so to use the images show correctly you need to access from a virtual dns name like localhost:8000

@Symfony Microservice API.
[API endpoints]

/api/image/insertlibrary

Method: POST
Param: Json {"url":"", "title":"", "description":""}
Return: 'message' => ['text' => '', 'level' => '']
Description: Insert this JSON into the DB, It is validate using the Symfony Form Component.  `./Form/ImageType.php `

/api/image/readLibrary

Method: GET 
Param: null
Return: 'message' => ['text' => '', 'level' => '']
Description: Return the data from DB

/api/image/imgur/{max}/{cache state}/{keyword}

Method: GET 
Param: Max=number of images, Keyword= word to search, Cache State
Return: 'message' => ['text' => '', 'level' => '']
Description: Return the data from ImgUR

Test:

In order to learn how to use the symfony framework, I performed a single unit test on the API using the PHPUnit component. This test makes a request to the endpoint /api/image/readLibrary

./tests/ImageTest.php

class ImageTest extends TestCase

Start the test: php ./bin/phpunit ./tests/ImageTest.php

Faking a failure: There are two assertions response in this test model.

    $this->assertEquals(200, $response->getStatusCode());
    $this->assertEquals("application/json", $headers["content-type"][0]);

To fake a failure test just change the type of the return:

./Controller/ImageController.php

    $response = new Response(
        json_encode($arrayOfimgs),
        Response::HTTP_OK,
        ['content-type' => 'text/html']   < Uncomment this line
       // ['content-type' => 'application/json']  < Comment this line
    );

Future Features and Final Considerations.

It was amazing lern the @Symfony Framework developing a demonstration for this interview. I hope that this code meets the expectations of an interviewer and that this makes me possibly more likely to be hired. On the other hand I really enjoyed working with @Symfony, and I will probably use this again.

Improvements:

  • Back-end implement a Cache to the ImgUR returns.
  • Front-end (Create the controllers to interact with the cache, create alerts from return)

References:

About

Demonstration using the Symfony Framework + React.js Connecting with ImgUR API

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published