SPIKE: Make Basic REST API Request

[nelsonic]

We will need to make API requests to our Phoenix Backend App in order to save data to the remote database. With that in mind we need to write a quick tutorial on how to make API requests in Flutter.

Todo

• [x] Create a new file in this repository called rest-api-tutorial.md and
• [x] Capture all the steps required to make a request to REST API

  If you need an example of a basic tutorial for inspiration, see: dwyl/learn-elm/tutorials/elm-ui

• [x] Make an HTTP Request to the Giphy API https://developers.giphy.com to
• [x] Display a random GIF in a Flutter App.

  You will need to obtain a Giphy API key (or borrow the key from the Elm example) This is the example in Elm: https://elm-lang.org/examples/cat-gifs

Potential useful links:

• [x] Official docs: https://flutter.dev/docs/cookbook/networking/fetch-data
• [x] Basic Tutorial: https://flutterawesome.com/how-to-integrate-rest-api-in-flutter
• [x] Extended tutorial: https://www.tutorialspoint.com/flutter/flutter_accessing_rest_api.htm

If you have any questions on any part of this, please ask by commenting below. If you are new to APIs or need a refresh/reminder, watch this video: https://github.com/dwyl/learn-api-design/issues/38

@miguelmartins17 in case you are wondering why this issue has the word "SPIKE" in the title, see: https://en.wikipedia.org/wiki/Spike_(software_development) 😉

[miguelmartins17]

@nelsonic Working on this one right now 😎

[miguelmartins17]

Links that may be helpful in resolving this issue.

https://pub.dev/packages/giphy_picker

https://flutter.dev/docs/cookbook/networking/fetch-data

[miguelmartins17]

It is not possible to use the same API key as it was in elm because of an authentication error.

[nelsonic]

failure + persistence = progress. 😉

[miguelmartins17]

Of course I'll get a new API key from the site and keep going until I get it.

[miguelmartins17]

I've got a new API key now.

[miguelmartins17]

This is the link that can help. When I have some progress I will comment here or in case I have more doubts I will open an issue.

https://stackoverflow.com/questions/53936739/how-to-control-gif-animation-in-flutter

[miguelmartins17]

@nelsonic I think the error was in using the API key. Where should I put ? Along with the link ?

[miguelmartins17]

@nelsonic I was looking at the example you did on elm but I can't figure out one thing where the API key is ?

[nelsonic]

@miguelmartins17 we need to investigate how to use Environment Variables in Dart/Flutter. That way you can include the API key in your app but not hard-code it. see: https://github.com/dwyl/learn-environment-variables/issues/20

[miguelmartins17]

@nelsonic I think I've now reached the point where I need help I haven't been able to get the random gifs to work

[nelsonic]

Ok. In a comment here on GitHub, describe what you are trying to achieve in as much detail as possible and exactly what you have already tried. Then, while I am editing/expanding your comment, you open an account on https://stackoverflow.com Once we have formulated the question, you will post the question on SO and I will make sure it has the correct tags/exposure so you get an answer. Having a good rating on SO is essential to working as a developer.

[miguelmartins17]

This is the repository I found at the github. I have to see the output of the application in order to understand if it is not incomplete.

https://github.com/kcarta/flutter-random-gif

[miguelmartins17]

@nelsonic The code didn't work for me. It doesn't show the gifs like it's loading. I'll try to change a few things to see if I can make it work.

[nelsonic]

@miguelmartins17 I tried to run it on my localhost and got the following error:

[!] Your app isn't using AndroidX.
    To avoid potential build failures, you can quickly migrate your app by following the steps on https://goo.gl/CP92wY.
/Users/n/.gradle/caches/transforms-1/files-1.1/support-compat-28.0.0.aar/f997e1c9b9354953b2226f6c368165b8/res/values/values.xml:133:5-70: AAPT: error: resource android:attr/fontVariationSettings not found.

/Users/n/.gradle/caches/transforms-1/files-1.1/support-compat-28.0.0.aar/f997e1c9b9354953b2226f6c368165b8/res/values/values.xml:133:5-70: AAPT: error: resource android:attr/ttcIndex not found.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Failed to process resources, see aapt output above for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                         1.9s
Gradle task assembleDebug failed with exit code 1

Followed the instructions on https://flutter.dev/docs/development/androidx-migration

When I attempted to run Refactor > Migrate to AndroidX I see the following:

There wasn't anything to change in the project ... but it still didn't run. 🙄

Then while reading /kcarta/flutter-random-gif/pubspec.yaml#L22 we see that it is using a package called giphy_client > https://github.com/brianegan/giphy_client This looks like a promising avenue of exploration. 💡

[miguelmartins17]

How can I push the files to GitHub except the one with the API key?

I'm trying to push the code to the GitHub but I don't want to put the file that contains the API key, how can I push without pushing that file. If I use . all the files go to Github.

[nelsonic]

@miguelmartins17 did you read https://github.com/dwyl/learn-environment-variables ? We use .env files in most of our projects and safely add the .env file to .gitignore.

The Dart/Flutter dotenv package: https://github.com/java-james/flutter_dotenv shows us that it's the same in Dart/Flutter. See: .gitignore#L74

[miguelmartins17]

@nelsonic Thanks, so I'm gonna do that, and I'm gonna push it to the GitHub.

[nelsonic]

Closing as the code created is now out-of-date. 😞