Erro Server

Fala, Thiago! Tudo bom?

Meu bom, verifiquei a lógica e testei localmente seu código e ele está correto! Então, como mesmo assim o JsonServer está gerando erro, precisamos analisar outras possibilidades.

O erro diz "Unexpected token c in JSON at position 0", o que nos dá uma pista que a gente até consegue mandar a informação para o servidor, mas quando bate lá, algum caractere que não deveria existir aparece.

Para tentarmos resolver, vou pedir para você substituir a sua linha de post no JournalService por essa:

http.post(
      Uri.parse(getUrl()),
      body: json.encode({"content": content}),
      headers: {"Content-Type": "application/json; charset=UTF-8"},
    );

O que aconteceu aqui?

Como suspeitamos de algum problema com caracteres durante a conversão (seja do lado do cliente, seja do lado do servidor), vamos explicitamente definir alguns detalhes para essa comunicação:

Primeiro adicionamos um cabeçalho, uma meta-informação, que avisa explicitamente ao servidor que estamos enviando o conteúdo de fato em um formato JSON, e que a codificação de caracteres é UTF-8.

Sobre cabeçalhos, esse é um assunto que veríamos mais para frente mas, como foi necessário aqui, se você quiser se adiantar recomendo a leitura da documentação da MDN. Já falando de codificação de caracteres, em resumo, há várias formas do computador interpretar o texto que digitamos, você já deve ter ouvido falar de "Unicode" ou "UTF-8". Quando, por qualquer motivo, o cliente está em uma codificação e o servidor em outra, isso pode gerar problemas. Se tiver curiosidade de entender mais sobre codificação, recomendo esse artigo da USP.

E bom, agora que definimos no cabeçalho explicitamente para que o tipo do conteúdo de body seja um json, ele não aceita mais fazer a conversão automática de map para json que estávamos fazendo antes.

Ou seja, o método post passa a esperar uma string bem formatada como json de fato, e não mais um map. Por isso cercamos nosso trecho {"content": content} com um json.enconde(), que só funciona se importarmos o pacote 'dart:convert'.

No final, seu journal_service.dart deve ter ficado assim:

import 'dart:convert';

import 'package:http/http.dart' as http;

class JournalService {
  static const String url = 'http://172.30.1.46:3000/';
  static const String resource = 'learnhttp/';

  String getUrl() {
    return '$url$resource';
  }

  register(String content) {
    http.post(
      Uri.parse(getUrl()),
      body: json.encode({"content": content}),
      headers: {"Content-Type": "application/json; charset=UTF-8"},
    );
  }
}

Espero que isso resolva o seu problema! Se não resolver, por favor, me informe para podermos investigar mais a fundo.

Bons estudos!

Fala Ricarth , boa tarde!

Obrigado pelo retorno.

Agora o erro não aparece mais, porém, nada é escrito dentro do arquivo db.json

Olá!

Também estou na mesma situação, reescrevi o trecho do código porém ainda assim não reescreve o arquivo db.json

import 'dart:convert';
import 'package:http/http.dart' as http;

class JournalService{
  static const String url = "http://192.168.41.134:3000/";
  static const String resource = "learnhttp/";

  String getUrl(){
    return "$url$resource";
  }
  register(String content){
    http.post(
      Uri.parse(getUrl()),
      body: json.encode({"content": content}),
      headers: {"Content-Type": "application/json; charset=UTF-8"},
    );

  }
}

import 'package:flutter/material.dart';
import 'package:flutter_webapi_first_course/services/journal_service.dart';
import 'screens/home_screen/home_screen.dart';

void main() {
  runApp(const MyApp());
  JournalService service = JournalService();
  service.register("Olá mundo");
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Journal',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primarySwatch: Colors.grey,
          appBarTheme: const AppBarTheme(
            elevation: 0,
              backgroundColor: Colors.black,
              titleTextStyle: TextStyle(color: Colors.white))),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.light,
      initialRoute: "home",
      routes: {
        "home": (context) => const HomeScreen(),
      },
    );
  }
}

{
    "learnhttp":{}
}

Aparentemente, o curso está bem desatualizado e sem suporte para o aluno!

Fala pessoal!

Alguma mensagem é gerada no terminal que está rodando o json-server?

Por exemplo, testando o seu código, Vitória, eu recebi um 404 no terminal do json-server. O que, na verdade, não tem nada a ver com seu código, e sim com o fato que, nos meus testes, eu tinha esquecido de (re)adicionar o "endpoint/recurso" "learnhttp", como fizemos na atividade "Configurando o JSON Server". Corrigindo isso, seu código funcionou perfeitamente!

Por favor, me retornem se alguma mensagem aparece no terminal que está rodando o json-server e, se não aparecer nada, significa que a comunicação não está acontecendo entre sua máquina real e a máquina virtual, peço que verifiquem se deixaram passar alguma etapa de configuração, disponível aqui. É válido dizer que essa configuração foi pensada para o Windows e, outros Sistemas Operacionais podem ter outras especificidades.

Obrigadão!

Bom dia,

O problema com a comunicação com o servidor ocorreu apenas no primeiro teste com o Hello World, conforme o curso foi seguindo e criamos novos métodos e retiramos o teste do Hello Word, passou a funcionar e preencher os dados no db.json. Porém a mensagem que dava era que não estava encontrando: I/flutter ( 7990): Falha ao registrar: Not Found. Resumindo, para testar o learnhttp não deu certo, porém nos exemplos do journals e o restante do curso, registrou normalmente no db.json Não tenho certeza, mas pode ser algum problema no método criado para registrar a mensagem no learnhttp, como o curso avançou e modificamos o código, não tenho mais ele aqui.