O tutorial completo do PWA do MongoDB Node.js Express.js


Eu sempre gostei de tutoriais que mostram exemplos práticos. Eles ajudam a entender como usar o código para realmente criar aplicativos no ambiente de produção. Então eu poderia usar esse conhecimento para construir o meu. Neste tutorial, vamos armazenar mundo geolocalização dados em um Coleção Mongo.

Verificação de saída meu livro JavaScript Grammar para uso comum JavaScript.

XBOX em Oferta

Ou simplesmente Siga me no twitter para codificar anúncios tutoriais etc.

Abra o demonstração deste tutorial em infinitesunset.app aplicativo de fotografia ao vivo.

Abri todo esse projeto no GitHub

Verifica código-fonte completo para este servidor Express.js SSL MongoDB. Este é um bom ponto de partida para alguém que está tentando fazer com que o Mongo trabalhe no host remoto. ⭐Star it, 🍴 bifurque-se, ⤵️baixe ou ✂️copiar e colar isto.

O que é o Mongo?

O nome Mongo foi retirado da palavra Humongonos.

No contexto do armazenamento, pode significar lidar com grandes quantidades de dados. E é para isso que servem os bancos de dados. Eles fornecem uma interface para crio, ler, editar (atualizar) e excluir grandes conjuntos de dados (como dados do usuário, Postagens, comentários, coordenadas de localização geográfica e assim por diante) diretamente do seu Node.js programa.

Por “completo”, não quero dizer documentação para cada função Mongo. Em vez disso, uma instância de Código Mongo usado como um exemplo do mundo real ao construir um PWA.

Um Mongo coleção é semelhante ao que tabela está em um banco de dados MySQL. Exceto no Mongo, tudo é armazenado em um objeto semelhante ao JSON (mas também usa o BSON para armazenar _Eu iria propriedade semelhante a como o MySQL armazena chave de linha exclusiva.)

Instalando o Mongo e operações básicas

No terminal no Mac ou bash.exe em Windows 10, efetue login no seu host remoto com ssh root@xx.xxx.xxx.xx (substitua o xcom o endereço IP do seu host.) Então use CD para navegar para o diretório do projeto no host remoto (/ dev / app) por exemplo.

Instale o serviço Mongo em todo o sistema:

sudo apt-get install -y mongodb

o -y diretiva responderá automaticamente “sim” para todas as questões de instalação.

Precisamos iniciar o serviço mongo depois disso (explicado na próxima seção.)

Mongo Shell.

Assim como MySQL tem um shell de linha de comando onde podemos criar tabelas, usuários etc. Mongo também tem sua própria concha para criar coleções, mostrar bancos de dados, e assim por diante.

Primeiro precisamos começar Serviço Mongo:

sudo service mongodb start

Se você precisar Pare servidor mongo, você pode fazer isso com:

sudo service mongodb stop

(mas não faça isso, precisamos do serviço em execução para a próxima parte!)

Para entrar no shell do Mongo, digite o mongo comando no seu cli / bash:

mongo

Você verá o seu bash mudar para > personagem. Vamos digitar usar comando para criar um novo (ou mude para o existente) um novo banco de dados:

> use users
switched to db users

Tipo> db para verificar se realmente mudamos para Comercial base de dados:

> db
users

Vamos dar uma olhada em todos os bancos de dados existentes executando show dbs comando:

> show dbs
admin  0.000GB
local  0.000GB

Mesmo que tenhamos criado Comercial banco de dados na etapa anterior, não está nesta lista. Por quê? Isso porque não adicionamos nenhuma coleção ao banco de dados. Isso significa que Comercial realmente existe, mas não será mostrado nesta lista até que uma coleção seja adicionada.

Adicionando coleção Mongo

Vamos adicionar um novo coleção para Comercial base de dados. Lembre-se de que uma coleção no mongo é equivalente a um tabela no MySQL:

db.users.insert({name:"felix"})

Acabamos de inserir uma coleção no banco de dados dos usuários.

Vamos correr > mostre dbs agora:

> show dbs
admin  0.000GB
local  0.000GB
users  0.000GB

Simplesmente inserindo um objeto semelhante a JSON no Comercial banco de dados criou um “tabela.“Mas no Mongo é apenas parte do baseado em documentos modelo. Você pode inserir mais objetos nesse objeto e tratá-los como faria linhas/colunas no MySQL.

Instalando o pacote Mongo NPM

npm install mongodb --save

Gerando os dados

Antes de analisarmos os métodos Mongo, vamos decidir o que queremos armazenar no banco de dados. Vamos dar uma olhada sistema de coordenadas do mundo. É bem diferente do cartesiano. O ponto central aqui está localizado relativamente próximo Lagos, Nigéria:

Latitude e Longitude visualizado. [0,0] O ponto está localizado no centro do sistema de coordenadas com o eixo indo para a esquerda e para baixo na direção negativa. A localização geográfica do HTML5 cuidará do cálculo automático da sua localização com base no seu endereço IP. Mas ainda precisamos convertê-lo para 2D na imagem. Crédito de imagem.

A parte dianteira

Coletando os dados.

HTML5 fornece localização geográfica pronta para uso e nos fornece latitude e longitude desde que o cliente concorde em compartilhar essas informações. O código a seguir criará uma caixa de mensagem pop-up em computadores e dispositivos móveis solicitando que o usuário “permita” compartilhar o local. Se o usuário concordar, ele será armazenado em lat e lon variáveis:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        let lat = position.coords.latitude;
        let lon = position.coords.longitude;
    }
}

Bem, isso é um ótimo começo.

Mas isso não é suficiente. Precisamos convertê-lo para o sistema de coordenadas 2D HTML5 entende. Precisamos desenhar marcadores de localização em cima da imagem do mapa! Então eu escrevi isso simples World2Image função que cuida disso:

function World2Image(pointLat, pointLon) {
    const mapWidth = 920;
    const mapHeight = 468;
    const x =  ((mapWidth / 360.0) * (180 + pointLon));
    const y =  ((mapHeight / 180.0) * (90 - pointLat));
    return [x, y];
}

Simplesmente dividimos as dimensões da imagem do mapa por 360 e 180, respectivamente, e depois as multiplicamos por 180 + pointLong e 90 – pointLat para ajustar para o centro. E nosso código final que converte latitude / longitude em Coordenadas 2D vai parecer:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        let lat = position.coords.latitude;
        let lon = position.coords.longitude;
        let xy = World2Image(lat, lon);
        let x = xy[0];
        let y = xy[1];
    }
}

No seu aplicativo, é claro, você pode usar os dados que desejar. Precisamos apenas de um conjunto significativo para demonstrar um exemplo prático de um potencial aplicativo de fotografia do pôr do sol ao vivo.

Coloque o código acima entre

Nota...você não precisa renderizar seus dados exatamente dessa maneira. Se você estiver usando a biblioteca React, vá em frente e use componentes. Não importa. Aqui eu usei JavaScript vanilla apenas para este exemplo. O que importa são as solicitações de busca e que estamos processando o objeto JSON retornado contendo dados de localização na tela. Você não precisa usar a tela. Você poderia ter usado apenas os elementos DIV para cada marcador.

Abra o demonstração deste tutorial em Eunfinitesunset.app aplicativo de fotografia ao vivo.

Abri todo esse projeto no GitHub

Verifica código-fonte completo para este servidor Express.js SSL MongoDB. Este é um bom ponto de partida para alguém que está tentando fazer com que o Mongo trabalhe no host remoto. ⭐Star it, 🍴 bifurque-se, ⤵️baixe ou ✂️copiar e colar isto.

Resultado final (veja também em execução ao vivo em www.InfiniteSunset.app )

Dados de localização geográfica em HTML5 exibidos visualmente após serem carregados de MongoDB.

Obrigado pela leitura, espero que você tenha achado este tutorial do Mongo esclarecedor.

Confira meu livro de codificação Gramática JavaScript para mais.

Verificação de saída meu livro JavaScript Grammar para uso comum JavaScript.

Ou simplesmente Siga me no twitter para codificar anúncios tutoriais etc.

alguma coisa





Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *