Tag: app

Opublikowane w

Hosting Google Firebase: deploy App

      Pokażę jak mniej więcej można skorzystać z darmowego hostingu oferowanego przez Google. Oto kolejne kroki:

  1. Najpierw powinniśmy zainstalować Node.js:
    https://nodejs.org/en

2. Sprawdzenie instalacji w cmd lub terminalu.

3. Instalacja jakiegoś edytora, np. Visual Studio Code.

 

4. Uruchomienie strony Google Firebase.

5. Stworzenie projektu i nadanie mu jakiejś nazwy.

6. Kolejno instalacja firebase w konsoli, narzędzi firebase i zalogowanie się do serwisu.

 

7. I teraz możemy zainicjalizować szablon aplikacji i deployować aplikację na hosting.

Możemy wcześniej w katalogu public zedytować plik index.html. Na przykład tak jak poniżej.

Gotową aplikację możemy podejrzeć pod udostępnionym adresem URL.

Google Firebase to nie tylko hosting. Mamy tu też dostęp m.in. do bazy danych, autentykacji i wielu innych.

Opublikowane w

Zbudowanie aplikacji bazującej na React i Firebase: CRUD

Kolejne kroki:

  • Instalacja środowiska programistycznego np. ‘Visual Studio Code‘.
  • Instalacja Node.js.
  • Weryfikacja instalacji:

node -v

npm -v

  • Tworzenie projektu React JS:

npx create-react-app todoapp

cd todoapp

code .

npm start

  • Tworzenie projektu Firebase.
  • Tworzenie bazy danych dla aplikacji:
    a)klikamy ‘Firestore database‘
    b)następnie: ‘Start in test mode‘
    c) nadanie nazwy dla kolekcji
    d) dodanie jakichś przykładowych danych
  • Integracja Firebase z projektem React

npm install firebase

  • Stworzenie pliku konfiguracyjnego ‘firebase.js‘ w katalogu źródłowym. Tutaj dodajemy konfigurację z Firebase do połączenia:
    a) klikamy w ikonkę Web ”
    b) nadanie nazwy dla naszej aplikacji
    c) rejestracja aplikacji
    d) skopiowanie ‘firabaseConfig‘
//zawartość pliku 'firebase.js'
import { initializeApp } from "firebase/app"

const firebaseConfig = { //tutaj trzeba uzupełnić własną konfiguracją

  apiKey: "",

  authDomain: "",

  projectId: "",

  storageBucket: "",

  messagingSenderId: "",

  appId: ""

};

export const app = initializeApp(firebaseConfig);
//App.js
import './App.css';
import { Component } from 'react';
import { collection, deleteDoc, getDocs, getFirestore, addDoc, doc, setDoc } from 'firebase/firestore/lite';
import { app } from './firebase';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      notes: []
    }
  }

  async refreshNotes() {
    var notesList = [];
    const db = getFirestore(app);
    const notesCol = collection(db, 'notes');
    const notesSnapshot = await getDocs(notesCol);

    notesSnapshot.forEach(doc => {
      let note = doc.data();
      note.id = doc.id;
      notesList.push(note);
    });
    this.setState({ notes: notesList });
  }

  componentDidMount() {
    this.refreshNotes();
  }

  async addClick() {
    var newNotes = document.getElementById("newNotes").value;
    var newNotesObject = { description: newNotes };
    const db = getFirestore(app);
    const notesCol = collection(db, 'notes');
    await addDoc(notesCol, newNotesObject);
    this.refreshNotes();
  }

  async deleteClick(id) {
    const db = getFirestore(app);
    const notesRef = doc(db, 'notes/' + id);

    await deleteDoc(notesRef);
    this.refreshNotes();
  }

  async updateClick(id) {
    const updatedDescription = prompt("Enter the updated description:");
    if (!updatedDescription) return; // If user cancels the prompt

    const db = getFirestore(app);
    const notesRef = doc(db, 'notes', id);

    await setDoc(notesRef, { description: updatedDescription }, { merge: true });
    this.refreshNotes();
  }

  render() {
    const { notes } = this.state;
    return (
      <div className="App">
        <h2>Todoapp</h2>
        <input id="newNotes" /> 
        <button onClick={() => this.addClick()}>Add Notes</button>
        {notes.map(note =>
          <p>
            <b>* {note.description}</b>  
            <button onClick={() => this.deleteClick(note.id)}>Delete Notes</button>
            <button onClick={() => this.updateClick(note.id)}>Update Notes</button>
          </p>
        )}
      </div>
    );
  }
}

export default App;

Opcjonalnie/dodatkowo możemy:

  1. Zainstalować wtyczkę Visual Studio Extension: ‘Prettier-Code formatter‘ do sformatowania kodu żeby bardziej przejrzyście wyglądał
    skrót: ‘Ctrl + Shift + I’ do użycia po włączeniu wtyczki
  2. Instalacja rozszerzenia ‘Print‘, jeżeli chcemy wydrukować kod źródłowy.
Opublikowane w

Skrót do ulubionych aplikacji w pasku menu pod Ubuntu

Zainstalowane aplikacje za pomocą Centrum oprogramowania Ubuntu można łatwo dodać poprzez otwarcie Podglądu i wyszukanie odpowiedniej aplikacji lub poprzez wyświetlenie programów, kliknięcie na odpowiednią ikonę aplikacji PPM(prawym przyciskiem myszki) i wybranie dodania do Ulubionych.

Sprawa ma się trochę inaczej, gdy aplikację zainstalowaliśmy ręcznie poprzez komendę apt-get install lub ściągając odpowiedni pakiet zewnętrznie.
W takim przypadku, tworzymy odpowiedni plik skrótowy do aplikacji.
Przykładowy kod w skrócie z rozszerzeniem plik.desktop może wyglądać, m.in. następująco:

#!/usr/bin/env xdg-open

[Desktop Entry]
Version=1.0
Type=Application
Terminal=false
Exec=/path/to/application
Name=App name
Comment=Some comment
Icon=/path/to/icon

Nie zapominajmy o dodaniu praw dostępu do uruchamiania, chmod +x app.desktop. I gdy tworzymy plik na pulpicie systemowym możemy zezwolić na uruchamianie, poprzez co, mamy od razu skrót do aplikacji dostępny również na pulpicie.
Po zakończonej edycji pliku kopiujemy go do lokalizacji /usr/share/applications.
Oczywiście potrzebujemy do przekopiowania praw root-a.
Możemy wówczas otworzyć powyższą lokalizację w terminalu i wpisać odpowiednią komendę: sudo cp /home/user-name/Pulpit/app-name.desktop ./.

W ten sposób mamy dodany skrót do widocznych aplikacji w menu.
Teraz wystarczy wyświetlić lub wyszukać program kliknąć PPM i wybrać dodanie do ulubionych, a ikona aplikacji pojawi się w pasku menu. (pamiętajmy zawsze, że linux rozpoznaje wielkość liter, co ma duże znaczenie, bo możemy nie znaleźć naszego skrótu aplikacji).

Opublikowane w

Uruchomienie aplikacji Spring Boot na Heroku

Zgodnie z linkiem tworzymy szkielet Spring Boot. Na stronie Initializr dodajemy jako zależności “Spring Web”.
Możemy dodać jakąś nową klasę, żeby wyświetlała nam jakiś tekst, np. :

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class Example {

@RequestMapping("/")
String hello(){
return "Witaj świecie!";
}

public static void main(String[] args){
SpringApplication.run(Example.class,args);
}
}

Standardowo odpalamy aplikację i powinien wyświetlić nam się żądany tekst.

Gdy mamy już zainstalowanego Git-a i Heroku logujemy się:

$heroku login

Następnie tworzymy lokalne repozytorium i dodajemy pliki:

git init
git add .
git commit -m "initial commit"

Tworzymy aplikację komendą:

$heroku create

A potem wrzucamy kod do zdalnego repozytorium:
$git push heroku master

I otwieramy za pomocą polecenia:
$heroku open