electron.js

Electron.js – Aplikacje desktopowe w JS cz. II – Gra w kulki

JavaScript, Programowanie

Piszemy grę w kulki

Uruchomienie projektu

Po skończonej konfiguracji środowiska, sprawdźmy czy wszystko działa poprawnie. Wpisz komendy:

yarn run build:watch

oraz

yarn start

Skrypt build:watch uruchamia nam transpilacje kodu na żywo ( flaga –watch) , natomiast yarn start uruchamia naszą aplikacje w electron.js.

Ekran powitalny

Kontroler dla widoków

Na początek możemy stworzyć kontroler do serwowania widoków. Może nazywanie tego kontrolerem jest zbyt na wyrost ale spójrzmy na poniższy kod.

const setView = (view) => {
const root = document.getElementById('root');
root.innerHTML = '';
root.appendChild(view());
}
export {setView};

Tworzę funkcję która przyjmuję za argument widok, następnie kontroler podpina ten widok pod element root w HTML.
Pozwoli nam to serwować użytkownikowi sceny np. ekran powitalny, planszę oraz ekran wyniku.
Jak widzisz funkcja setView() czyści element a dopiero później wstawia nasz widok.
Chcemy mieć pewność że po przełączeniu sceny znikną poprzednie widoki.

Pierwszy widok

Następnie tworzymy ekran powitalny. Na samym początku tworzę prostego div’a dodaje do niego klase „welcome” którą później będe stylować.

Dodajmy jeszcze jakąś wiadomość powitalną i guzik który przekieruje nas do kolejnego widoku.

import button from './../components/button';
import {setView} from './../controllers/viewController'
import gameView from './gameView';
const startView = () =>{   
const view = document.createElement('div');
view.className = 'welcome';
view.innerHTML = '
<h1> Gra w kulki </h1>
';
view.appendChild(button('startGame', 'start', 'btn btn__prime', setView, gameView));
return view;
}
export default startView;

Czas teraz połączyć widok i kontroler.  W pliku app.js importuje powyższe moduły i wywołuje kontroler przekazując mu widok.

import { setView } from './controllers/viewController';
import startView from './views/startView';
setView(startView);

Dodajmy do tego style i uzyskamy wówczas coś takiego:

kulki - okno powitalne

 

Tworzymy plansze

Czas na wykonanie planszy. W tym celu stworzymy klasy takie jak: Board, Tile oraz Ball. Ułatwi nam to tworzenie widoku oraz jego obsługę.

Będziemy chcieli uzyskać poniższy widok planszy.

gra w kulki - plansza

Na screenie widzicie obecną strukturę projektu w src/ znajdziemy katalogi takie jak:

  • controllers – będą obsługiwać logikę aplikacji i obsługiwać warstwę widoku.
  • components – elementy „pomocnicze” które będą wstrzykiwane do widoków lub też bardziej rozbudowane klasy które pomogą w tworzeniu gry.
  • views – widoki, ekrany które będą serwowane użytkownikowi.

Ekran gry

Kod pisałem na zmianę w różnych plikach więc najlepiej jak pokaże Wam efekt finalny. Jeśli chodzi o pisanie najlepiej budowac małe funkcjonalności i testować je na bieżąco.  Poniżej kod gameView.js:

 

import Board from './../components/Board';
import Color from './../components/Colors';
function gameView(){
const view = document.createElement('div');
view.className = 'gamePanel';
const board = new Board(12);
const colors = new Color();
board.boardGenerate(12).then((tiles)=>{
view.appendChild(tiles);
board.randomBallGenerate(12, colors);
})
return view;
}
export default gameView;

Oczywiście nie jest to jeszcze finalny widok planszy.
W tym poście opisze tylko generowanie początkowej planszy wraz z losowaniem kulek. Tak jak poprzednio tworzymy element widoku (linia 5) następnie nadajemy klasę (później oscylujemy to i dodamy flex-box by cała plansza ładnie się środkowała).  Tworzymy obiekt planszy do konstruktora podajemy wielkość planszy.

 

 

 

CDN…

electron.js

Electron.js – Aplikacje desktopowe w JS cz. I

JavaScript, Programowanie

Electron.js – wstęp, co to jest?

Electron.js to platforma programistyczna która pozwala pisać aplikacje desktopowe z użyciem technologii znanych z front-endu. Możemy więc pisać aplikacje desktopowe z użyciem języka JavaScript, wykorzystując technologie takie jak: React, Vue, Node.js oraz wielu innych.  Zacytuje fragment z dokumentacji:

„Electron jest otwartoźródłową biblioteką, stworzoną przez GitHub, aby umożliwić tworzenie multiplatformowych aplikacji z użyciem języków HTML, CSS oraz JavaScript. Electron osiąga to łącząc Chromium oraz Node.js w jednolite środowisko uruchomieniowe, którego aplikacje mogą być wydawane na MacOS, Windows oraz Linux.”

Z technologii tej korzystają takie aplikacje jak: Atom (edytor od Githuba), Discord (komunikator), Skype (komunikator), WhatsApp (komunikator), pełną listę możecie znaleźć tutaj.


Początek – jak zacząć?

Rozpoczynając projekt electron.js najlepiej użyć gotowego starter packa (lista boilerplate’ów). Wybór jest naprawdę duży – to tylko oficjalne templatki, na githubie znajdziecie dużo więcej przykładów stworzonych przez społeczność.  Wybór jest naprawdę szeroki od bardzo rozbudowanych przykładowych aplikacji zawierających React, Redux, React-Router i Webpacka (electron-react-boilerplate) po podstawowe i czyste projekty zawierające niezbędne minimum.

Na początek zacznijmy od czystego projektu. Ściągamy git clone https://github.com/electron/electron-quick-start

Wchodzimy do katalogu i instalujemy zależności yarn install lub npm install następnie uruchamiamy projekt yarn start.

Projekt składa się z 3 głównych plików:

  • package.json – Zbiór potrzebnych zależności do projektu i skryptów NPM/YARN.
  • index.html – Electron.js serwuje ten plik jako główne okno naszej aplikacji. Jest to punkt podłączenia naszych skryptów JS
  • main.js – Plik konfiguracyjny dla Electron.js. To tutaj serwowany jest statyczny plik html. Tutaj możemy modyfikować główne elementy aplikacji Electon np. wyswietlanie konsoli debugowania, poczatkowy rozmiar okna itp.

Pierwszy program

Utwórzmy katalog src/ – tutaj będziemy trzymać nasz kod źródłowy.  W pliku html natomiast utwórzmy element o id=”root” do niego podepniemy naszą aplikacje. Poniżej kod z index.html

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Game in marbles</title>
</head>
<body>
<div id="root"></div>
<script>
require('./src/app.js')
</script>
</body>
</html>

Teraz utwórzmy plik app.js w src/ i napiszmy proste „Hello World”.

document.getElementById('root').innerHTML = "Hello World";
Gdy odświeżymy (ctrl+R) naszą aplikacje (uruchomienie komendą yarn run) powinien pojawić się napis „Hello World”.
Świetnie! Jeśli wszystko działa możemy przejść do napisania prawdziwej aplikacji desktopowej w JS.

Piszemy grę w kulki

Czas żeby zacząć poważniejszy projekt. Spróbujemy wykonać grę w kulki, podobną możecie znaleźć na kurniku. Na początek nie będziemy korzystać z żadnych bibliotek typu React czy Vue, spróbujemy całą aplikację wykonać w czystym JavaScripcie korzystając ze składni ES6+.

Konfiguracja projektu pod ES6

Niestety rozwój języka wyprzedza obecne możliwości przeglądarek i środowiska  Node.js. Żeby używać najnowszej składni ES6+ powinniśmy użyć narzędzia które przetranspiluje nam kod w ES6 do starszej wersji języka. W tym celu wykorzystamy Webpacka.

Obecnie zaleca sie korzystanie z modułu babel-preset-env my jednak wykorzystamy trochę starszy sposób. Miałem problemy z konfiguracją Webpacka i preset-env – jedna paczka usuwała drugą.  Dlatego zainstalujmy sobie potrzebne zależności. Do pliku package.json dodajcie poniższe zależności:

"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"electron": "^2.0.0",
"webpack": "^3.5.5",
"webpack-node-externals": "^1.6.0"
}
oraz w module skryptów dodajcie poniższe komendy:
"scripts": {
"start": "electron .",
"build-client": "webpack --config webpack.config.js",
"build:watch": ".\\node_modules\\.bin\\webpack --config webpack.config.js --watch"
},

Została nam jeszcze konfiguracja webpacka, w katalogu projektu utwórz plik webpack.config.js z poniższym kodem:

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const config = {
entry:'./src/app.js',
output: {
path:path.resolve(__dirname, 'dist'),
filename:'app.bundle.js'
},
devtool:'#source-map',
module: {
rules: [
{
test: /\.js$/,
include:path.resolve(__dirname, 'src/'),
exclude:'/node_modules/',
loader:'babel-loader',
query: {
presets: ['es2015', 'es2016', 'es2017']
}
}
]
}
};
module.exports = config;

 

Teraz tylko w pliku index.html zmień lokalizacje skryptu na ./dist/app.bundle.js
Webpack korzystając z babela przetranspiluje nam kod ES6 do ES5 i utworzy plik wynikowy w katalogu dist/
Teraz mając przygotowane środowisko pracy możemy przystąpić do pisania gry w kulki. Powyższy kod dostępny jest w repozytorium na branchu init/

 

Dalszy ciąg w kolejnym wpisie…

REST wprowadzenie

REST – wprowadzenie

Programowanie
Spis treści:
  1.  Wprowadzenie. Dlaczego warto poznać REST i co to jest?
  2.  Dlaczego warto tworzyć API?
  3.  Jak działa REST?
  4.  Wady i zalety

 

Wprowadzenie. Dlaczego warto poznać REST i co to jest?

 

REST (Representational state transfer) – Jest to sposób budowy systemu według okerślonych zasad – wzorzec architektury. Dzięki tym zasadom możemy w prosty i szybki sposób zbudować bardzo sprawne API (Application Programming Interface), które wykorzystamy w naszym produkcje/aplikacji/systemie.
Jest to obecnie najpopularniejszy wzorzec architektury serwisów
z którego korzysta około 69% serwisów [1]. Między nimi możemy znaleźć serwisy takie jak: Netflix, Facebook, Instagram, Youtube, Slack i tysiące innych. Nie oznacza to że REST API przeznaczone jest tylko do dużych serwisów, w bardzo prosty sposób mozesz go zaimplementować nawet w prostych projektach.
Odpowiedzmy sobie najpierw na pytanie dlaczego tworzymy nasz serwis oraz kto korzysta z naszych usług?

Z naszego serwisu będą korzystać użytkownicy, współpracownicy, programiści albo też inne serwisy. Żeby umożliwić użytkownikom i serwisom korzystanie z naszych usług tworzymy pewien interfejs (API) przez który otrzymają od nas jakąś usługę (np. Wrzucenie filmu na YouTuba, wyświetlenie profilu na Instagramie, dostęp do nowego odcinka „Gry o tron”).

 

Architekturę typu REST używa się w serwisach które mają być „otwarte na świat”.  Możemy w prosty sposób udostępniać zasoby dla wielu klientów.  I tu muszę się zatrzymać. Mówiąc „otwarte na świat” nie mam na myśli „dostępne dla każdego”. Często jest tak ze to co widzi użytkownik jest tylko wierzchołkiem góry lodowej, wiele zapytań REST odbywa się między samymi serwisami i użytkownik nie wie że jego zapytanie wywołało serie wielu innych zapytań.
REST API jest powodem wzrostu popularności serwisów społecznościowych. Dzięki temu jedne serwisy/usługi mogą korzystać z drugiego serwisu bez większych problemów.  Mogę udostępnić ten artykuł na FB czy Twitterze za pomocą wtyczki która wstawi post na moja tablice w serwisie społecznościowym. Kolejnym przykładem jest serwis  accuweather.com  wiele innych aplikacji korzysta z danych które udostępnia ten serwis. Użytkownicy mogą nawet nie wiedzieć że korzystają z innych serwisów. Dla programistów natomiast architektura REST API oznacza szybką i łatwą integracje usług.

Dlaczego warto tworzyć API?

Przepraszam że czasem łącze pojęcia REST i API ale w kontekście serwisu te pojęcia ciągle z sobą współgrają. API to tylko interfejs natomiast REST to model architektury. Razem tworzą pewną funkcjonalność o którą nam chodzi.

Projektowanie i tworzenie API to wieloetapowy proces. Dobrze zaprojektowany interfejs wymaga wiele wysiłku i doświadczenia jednak wszystko to zwróci się podczas dalszej pracy nad serwisem. API tworzymy aby udostępnić użytkownikom lub innym serwisom pewne usługi które nasz serwis oferuje.

Co składa się na nasz interfejs (API)?

 

Specyfikacja według której komunikujemy się z serwisem (na przykładzie REST API).

 

Jako uzytkownik możemy poprosić o dostęp do zasobów. Mozemy je również edytować, dodawać i usuwać. (więcej o modelu CRUD będzie później)
np. GET nasz_serwis/api/users/adam wówczas pobierzemy dane użytkownika Adam, natomiast POST nasz_serwis/api/users/ doda nam uzytkownika
Dobrze, ale czy jako zwykły użytkownik moge edytować dane innego użytkownika? Tutaj wchodzą w gre pewne ograniczenia związane z serwisem. REST nie zapamiętuje stanu więc komunikacja i dostęp do zasobów odbywa się na zasadzie tokenów przyznawanych użytkownikom. Token to taki klucz dostępu który upoważnia Cię (lub grupę) dając pewne prawa do użytkowania zasobami. Warto wiedzieć że popularnym systemem (protokołem) autoryzacji jest Oauth lub nowsza wersja OAuth2.0.  Korzystają z tego serwisy takie jak Google czy Facebook.
Ograniczenie dostępu jest ważnym elementem naszego serwisu, pozwala na dodanie wpisu na tablicy ale tylko właścicielowi (albo również znajomym).  Być moze logowałeś się do jakiejś usługi za pomocą konta Google czy Facebook, wówczas musisz potwierdzić czy zezwalasz danej aplikacji na dostęp do jakiegoś zasobu np. dane osobowe, lista znajomych,  kontakty. Aplikacja wówczas uzyskuje token i za jego pomocą „w Twoim imieniu” może dokonywać zmian w tych chronionych zasobach.
Mamy możliwość obserwowania wykorzystania zasobów oraz ruchu w naszym serwisie. Np. Ile osób widziało dany produkt, a ile z nich go kupiło. Byli to użytkownicy smartphonów? W jakich godzinach przeglądali daną ofertę? Możliwość obserwacji zasobów jest bardzo ważna dla właścicieli serwisu. Netflix może badać popularność swoich programów albo określić kiedy i z jakich urządzeń był wzmożony ruch.
Niektóre serwisy wprowadzają ograniczenia techniczne które chronią serwisy przed przeciążeniem. Mogą to być limity zapytań czyli ile razy dany użytkownik lub aplikacja mogą użyć serwisu w ciągu godziny, miesiąca itd. Czasem określa się  koszt  danego zapytania i wyświetlenie będzie mniej kosztowne niż edycja. Dzięki ograniczeniom nasze API może być mniej przeciążone i podatne na ataki. Serwisy udostępniające API często wymagają wygenerowania klucza dostępu. Pozwala to serwisowi na przypisanie aplikacji/użytkownika do wykonywanych przez niego zapytań i naliczaniu kosztu.
Warto wspomnieć że na dobre API składa się dobra dokumentacja dzięki której jako twórcy, programiści, współpracownicy będziemy mogli łatwo zrozumieć dany system. Poniżej podam parę przykładów:

Wrócę jeszcze do projektowania interfejsu, dlaczego to jest takie ważne? Tutaj powinniśmy położyć największy nacisk gdyż jest to kluczowy element naszego serwisu. Powinniśmy zaplanować nasze cele biznesowe i dostarczyć takie API by spełniało nasze wymagania. Zmiana interfejsu po etapie projektowania jest czymś czego nie chcemy. Inne serwisy korzystające z API mogą odwoływać się do zasobu który nie istnieje. Ważne żebyś położył nacisk na przemyślaną architekturę swojego interfejsu, gdyż późniejsza jego zmiana może mieć wiele konsekwencji. Implementacje zaś możesz zmieniać dowolnie.

 

* Często powoływałem się w przykładach na Facebooka, prawda jest jednak taka że FB korzysta z GraphQL API a nie REST API. Jest to nowy standard i alternatywa dla modelu REST.  GraphQL pozwala na zagnieżdżone i bardziej elastyczne zapytania (możemy wysyłać zapytania o konkretne pola).

 

Ciekawy artykuł na temat GraphQL możecie przeczytać tutaj: http://devenv.pl/graphql-podstawy/ 
Podam parę ciekawostek [2]:
  • Ponad 30% internetowego ruchu sieciowego w najlepszym czasie antenowym w Stanach Zjednoczonych powiązane jest ze strumieniowaniem w serwisie Netflix, które jest zapewniane i zarządzane poprzez interfejsy API.
  • W 2015 roku firma Facebook odpowiadała za ponad 25% całkowitej liczby wyświetleń stron internetowych. Interfejsy API obsługują zarówno produkty tej firmy, jak i jej „ekosystem”.
  • Firma Salesforce.com stworzyła duży i rozbudowany „ekosystem” partnerów, udostępniając im podstawowe usługi w celu rozszerzania ich i wprowadzania do nich innowacji. Obecnie interfejs API serwisu Salesforce obsługuje większy ruch sieciowy niż witryna internetowa tej firmy. W połowie roku 2011 ponad 60% ruchu sieciowego kierowanego do tego serwisu trafiało do niego za pośrednictwem interfejsów API.
Jak widzisz stworzenie odpowiedniego interfejsu może sprawić że Wasza usługa nie tylko będzie łatwiejsza w użyciu przez Was samych, ale również będą z niej mogli skorzystać inne osoby lub serwisy. Dzięki temu serwisy takie jak twitter czy accuweather zyskały na tak dużej popularności.

 

 

 Jak działa REST?

 

REST opiera się na zapytaniach poprzez adresy URL wysyłanymi przez protokół HTTP. Pokaże to na przykładzie:
Mamy adres url (z serwisu Youtube) :
Podzielmy go na składowe:
  • https/http – protokół
  • www.youtube.com – host
  • channel – pewien zasób (zbiór)
  • UC29ju8bIPH5as8OGnQzwJyA – ID konkretnego kanału
Teraz spróbuj wkleić ten adres do przeglądarki:
(Polecam zainstalować wtyczke do wyświetlania plików JSON w przeglądarce np. JSON Viewer)
Mozesz sam rozkodować o co chodzi w podanym adresie dzięki dokumentacji YouTube na stronie :
Tak jak poprzednio mamy protokół i hosta ale nasze zapytanie wygląda zupełnie inaczej. Naszym hostem jest „googleapis” czyli serwis przez który Google udostępnia swoje API.
Następnie odwołujemy się do „/youtube/v3” jest to API serwisu YouTube w wersji 3.
Dalej mamy „/channel” jest to zasób w którym dokonujemy zapytania. Znak „?” oznacza nam zapytanie wszystko co po nim to argumenty naszego zapytania które mają postać „argument=wartosc” które połączone są spójnikiem „&”.
Tłumacząc nasz przykład: „part=snippet%2CcontentDetails%2Cstatistics” (%2C oznacza przecinek – możesz je stosować zamiennie) tutaj odwołujemy się konkretnie do danych do których chcemy uzyskać dostęp.
Jeśli w naszej aplikacji są nam potrzebne tylko statystyki, wówczas bierzemy tylko „part=statistics”. Dalej jest pole „id” czyli do jakiego konkretnie kanału odnosimy nasze zapytanie. Na końcu mamy „key” jest to mój unikalny numer klienta który utworzyłem by móc wykonywać zapytania. Google przyznało mi limity do wykorzystania i dzięki kluczowi może mnie zidentyfikować.
Mozesz utworzyć swój własny klucz poprzez platformę https://console.developers.google.com. Jeżeli chcesz zobacz API które udostępniają swój interfejs na stronie https://any-api.com/ . Zajrzyj do dokumentacji by sprawdzić mozliwości jakie udostępnia konkretne API, uzyskaj klucz dostępu i korzystaj! Możesz wykorzystać zewnętrzne narzędzia jak Postman. cURL lub dodatek do chrome REST client by tworzyć zapytania URL.

 

Jest jeszcze jedna rzecz o której chciałbym wspomnieć. Jest to kolejny skrót. CRUD czyli create\read\update\delete jest to koncepcja według której tworzone jest REST API. Udostępniamy użytkownikom tworzenie, odczytywanie, edycje i usuwanie zasobów. Do tego wykorzystujemy metody HTTP: POST, GET, PUT, DELETE więcej możecie poczytaj pod linkiem:
Dodatkowo każde nasze zapytanie wiąże sie z kodem odpowiedzi (zobacz: http://www.restapitutorial.com/lessons/restquicktips.html lub https://pl.wikipedia.org/wiki/Kod_odpowiedzi_HTTP )

Wady i zalety REST API

 

Zalety:

  • Niezależność od technologi i platform.
    Jeśli chcemy napisać aplikacje na androida a nasz REST serwer jest napisany w Node.js to nie jest problem. Korzystająć z API możesz wykorzystać funkcjonalności Twojego serwisu w Twojej aplikacji mobilnej napisanej w Javie.
  • Bezstanowy
    Możesz obsługiwać wielu klientów na raz dużo sprawniej niż przy wykorzystaniu innej architektury, serwer nie zapamiętuje stanu klienta. Dzięki temu serwis działa szybciej.
  • Łatwy dostęp
    Jeżeli informacje mają być udostępnione dużej ilości ludzi REST sprawdzi się idealnie. Przykładem są róznego rodzaju serwisy społecznościowe (facebook, twitter, youtube itd.)

    • Wsparcie dla formatu JSON (bez problemu możesz konwertować obiekty w format JSON który jest wspierany przez JS)
    • Możliwość tworzenie API w przystępny sposób. Możliwość tworzenia dokumentacji wraz z pisaniem kodu. (Np. Dodatek do Hapi.js)

Wady REST

  • Serwer nie zapamiętuje stanu klienta
    Jest to zaleta ale i wada. Komunikacja z serwerem i dostęp do niektórych funkcjonalności wymaga stosowanie tokenów które służą do autoryzacji żądania. Część funkcjolnalności (np. edycja profilu użytkownika, dodanie komentarza, dostęp do wraźliwych danych) nie są dostępne z głównego poziomu naszej aplikacji, wymagają pewnej autoryzacji. Jako że REST nie zapamiętuje stanu, nie wie czy uzytkownik jest zalogowany z tego to powodu autoryzacja odbywa się za pomocą tokenów. Serwisów takich nie używa się w miejscach gdzie potrzebne jest duże bezpieczeństwo. Na przykład systemy bankowe korzystają z architektury SOAP która jest bezpieczniejszym rozwiązaniem.Dodatkowo to klient jest zmuszony do zarządzania stanem aplikacji na podstawie otrzymanych odpowiedzi.
  • Komunikacja Klient-Serwer opiera się na pojedynczym żądaniu
    Dlatego kod aplikacji może się rozrosnąć w przypadku gdy chcemy wykonać parę zagnieżdżonych żądań. Np. Wyświetlić wiele komentarzy które są stronicowane.

[1] – [żródło: https://www.programmableweb.com/apis, ikonografika: https://visual.ly/community/infographic/computers/api]
[2] – [żródło: Książka, Interfejs API. Strategia programisty, autorzy: Daniel Jacobson, Greg Brail, Dan Woods]

 

 

unix początkujący

System Unix cz. I – wstęp

Programowanie

System Unix cz. I – wstęp

Spis treści:

Słowo wstępu

Poradnik ten tworzony jest na potrzeby studiów i część rozwiązań pomimo swojej akademickich natury może znaleść wiele ciekawych i praktycznych zastosowań. Kieruje go głównie do ludzi dopiero zaczynających swoja przygode z systemami rodziny UNIX. Każdy z nas kiedyś się uczył i zdaje sobie sprawę jak ważny jest dostęp do materiałów i wiedzy. Piękną rzeczą w IT jest otwartość na rozwój i współpracę, to na tych zasadach Linus Torvalds oparł swój system – Linux. Postaram się by ten mini-poradnik napisany był w przystępnym i praktycznym stylu. Uwagi i sugestie proszę kierować na adres patryk.nizio@gmail.com. Proszę abyś miał na uwadze że przedstawione tutaj rozwiązania nie zawsze będą najbardziej optymalne, a sposóbów rozwiązań danego zaganienia jest wiele.

Historia

Każdy z nas słyszał o Linuxie i jego dystrybucjach, mało kto natomiast zna krętą droge historii która doprowadziła do jego stworzenia. Wszystko zaczeło się w 1969 r. kiedy to grupka programistów po godzinach pracy, hobbystycznie zaczeła pisać system operacyjny. Wszystko działo sie w Bell Labs (oddział badawczy firmy AT&T ). Dennis Ritchi, Ken Thompson oraz paru ich kolegów po godzinach pracy pracowali nad nowym systemem operacyjnym, korzystąc z firmowego sprzętu. System (wówczas jeszcze bez nazwy) który napisali funkcionował wewnątrz firmy przez pare miesięcy. W 1971 roku zyskał nazwe UNIX jako gra słów do Multics. W 1972 roku został przepisany z assemblera na język C. Ciekawostką jest to ze język C powstał właśnie na potrzeby UNIXa.

W 1974 r. AT&T została uznana za monopolistę przez Departament Sprawiedliwości USA, zgodnie z wyrokiem sądu w postępowaniu antymonopolowym przeciwko firmie AT&T będącej właścicielem Bell Labs, miała ona zakaz wchodzenia na rynek komputerowy. Unix nie mógł być z tego powodu wydany jako produkt – firma miała obowiązek udostępnienia swoich niezwiązanych z telefonami technologii każdemu zainteresowanemu podmiotowi. I tak system ten stał sie popularny w srodowiskach akademickich, gdzie tworzono nowe rozwiązania i moduły.

W roku 1982 r. zakończył sie trwajacy od 1974 r. proces sądowy. Nowy wyrok anulował poprzednie zarządzenia, które zabraniały firmie wydania Uniksa jako produktu, dzięki czemu UNIX System V mógł zostać wydany na licencji komercyjnej. W tym czasie krążyło już wiele wersji i wariacji systemu, W latach 80 firmy tworzyły własne wersje systemu UNIX które komercializowali. Niespodobało się to firmie AT&T która powołała Unix Internacional, okres lat 90 to tzw. „wojna unixowa”. Ciągle wytaczane procesy omal nie doprowadziły do upadku całego systemu. W 1991 roku Linus Torvalds – fiński student zaczą prace nad Unix-podobnym systemem nazwanym póżniej Linux. Dzięki szybkiemu rozwojowi otwartego oprogramowania Linux zyskał na popularności i jest uzywany w różnych wersjach do dzisiaj.

Jeśli jesteś ciekaw jak rozwiajały się systemy rodziny UNIX zobacz poniższe drzewo rozwoju

System plików – Teoria

System plików jest to sposób reprezentacji plików na przestrzeni dyskowej. Dzięki niemu możemy tworzyć, usuwać, otwierać pliki i katalogi. Położenie danych mozemy określić podając do nich ścieżke.

 

  • Ścieżka względna – względem bieżącego katalogu (katalog roboczy), polecenie pwd wyswietla pełną ścieżkę do obecnego katalogu roboczego, na przykład: ./katalog1/text.txt

.. - przenosi nas do katalogu wyżej (dwie kropki). - to katalog w którym obecnie się znajdujemy (jedna kropka)

  • Ścieżka bezwzględna – ścieżka absolutna względem katalogu domowego np. /home/katalog1/katalog2/plik.txt

 

Żeby jednak zacząć poruszać się po systemie przybliże sposób wpisywania komend do konsoli. Polecenia (komendy) w systemie UNIX mogą zawierać „flagi, parametry” co to jest? Otóż są to opcje polecenia. Może lepiej będzie to przedstawić na przykładzie. Polecenie ls listuje nam zawartośc katalogu ale polecenie z flagą „-S” ls -S posortuje zawartość katalogu według rozmiaru pliku, zamiast domyslnego sortowania alfabetycznego. Największe pliki wyświetlane będą na początku. Żeby zobaczyć jakie flagi ma polecenie użyj wbudowaną instrukcje obsługi wpisując man [polecenie]

Uogólniony zapis poleceń możemy zapisać tak:

[polecenie] [parametry,flagi] [argumenty]

Na początku może wydawać Ci sie to troche skomplikowane, ale po pewnym czasie i oswojeniu z man’em zaczniesz swobodnie korzystać z konsoli. Poniżej podaje podstawowe polecenia które przydadzą się w poruszaniu się po systemie.

 Ważniejsze polecenia na początek:

cd [scieżka] – służy do przemieszczania się między katalogami

Przykład:

cd A/B – przechodzi do katalogu B który jest w katalogu A
cd .. – przechodzi do katalogu rodzica
cd – powraca do katalogu domowego

mkdir [nazwa_katalogu] – polecenie to służy do tworzenia katalogów

Przykład:

mkdir --mode=666 nowy_kat – polecenie tworzy katalog „nowy_kat” nadając mu od razu odpowiednie prawa dostępu

cp źródło1 źródło2 … źródło_N cel – kopiuje źródła 1,2,… N do cel (pewien katalog)

Przykład:

cp -r A D – kopiuje (rekurencja) zawartość katalogu A do katalogu D

mv – polecenie przeniesienia

Przykład:

mv /home/user /tmp – Przeniesienie katalogu /home/user do /tmp mv plik1 plik2 – zmienia nazwe z „plik1” na „plik2”

tree – wyświetla drzewo katalogów

rm -r – usuwa katalog wraz z podkatalogami (rekurencja)

rmdir – usuwa pusty katalog

clear – czyszczenie konsoli

touch – zmiany w pliku, np. zmiana daty, touch plik1 – tworzy pusty plik

ls [parametr] [katalog] – listowanie zawartości katalogu

man [nazwa_strony] – najważniejsza komenda podczas początków nauki, czyli manual – instrukcja obsługi. Objaśnienie komend i atrybutów np. man cd

System plików – Praktyka

Teraz będzie ciekawie, spróbujemy utworzyć kilka katalogów jedna komendą, pamiętajmy że “ .. ” – powraca do katalogu wyżej, komendą mkdir -p utworze katalog kuchnia z podkatalogami,

dyzio@student:~$ mkdir -p  kuchnia/lodowka/wodka_zimna/../jajka/../maslo/../../zamrazarka/wodka_bardzo_zimna/../pierogi/../../chlebak/chleb/   
dyzio@student:~$ tree kuchnia 
kuchnia
|-- chlebak
|   `-- chleb
|-- lodowka
|   |-- jajka
|   |-- maslo
|   `-- wodka_zimna
`-- zamrazarka
|-- pierogi
`-- wodka_bardzo_zimna

Prawa dostępu

Prawa dostępu to mechanizm określający uprawnienia w systemach unixowych. Po co nam prawa dostępu na naszym komputerze? Tutaj one nie są nam aż tak potrzebne. Należy jednak pamiętać że system Unix jest systemem z którego może korzystać wielu uzytkowników na raz (system wielodostępny). Co wiec gdy mamy wiele zasobów i wielu użytkowników? Wyobraź sobie serwer pewnej firmy, każdy z pracowników ma swoje konto z którego pracuje. Mamy również 3 grupy w firmie, szefostwo, księgowość i pracownicy. Pewien nieuczciwy pracownik wszedł w katalog pani Baśi z ksiegowości i w arkuszu z wypłatami dopisał jedno zero przy swojej wypłacie. Innym razem pewien śmieszek z działu analiz podmienił szefowi prezentacje dochodów rocznych na prezentacje zabawek erotycznych. Szef po dosyć wstydliwym wystąpieniu przed azjatyckimi inwestorami pomyślał że musi nadać uprawnienia swoim pracownikom. Dzięki uprawnieniom każdy z pracowników mógł dalej bez problemu korzystać ze swojego konta ale nie mógł np. zajrzeć w katalog pani Baśi. Szef dostał uprawnienia odczytu do katalogów pracowników by na bieżąco móc sprawdzić postęp danego projektu. Pracownik o imieniu Bartek pracował dzielnie, dzień i noc zamieniajac kawę w kod. Bartek chciął podzielić sie z zespołem postępami i udostępnił pewne pliki nadając im odpowiednie uprawnienia

Więc jak widzisz gdy użytkowników jest wiele i chcemy utrzymać pewien ład i porządek, powinniśmy korzystać z praw dostępu.

Wyróżniamy :

r (read) – prawo do odczytu
w (write) – prawo do zapisu
x (execute) – prawo do uruchamiania

Przykład: rw- // taki plik będzie można otworzyć, zapisać ale nie będzie można go uruchomić
Przykład: — //całkowity brak dostępu do katalogu/pliku
Przykład: r-x //tylko do odczytu, bez możliwosci usuwania i edycji

Uprawnienia Symboliczne

Prawa dostępu dostępu do plików i katalogów zmieniamy poleceniem chmod poniżej jego atrybuty:

Komu?Dowolna kombinacja

        u  (użytkownik)
g  (grupa)
O  (pozostali)
a  (wszyscy)
Co robimy?Tylko jedno

        +  (dodaj)
–  (odbierz)
=  (ustaw)
Jakie prawa?Dowolna kombinacja

        r  (odczyt)
w  (zapis)
x  (uruchamianie)

Sprawdź co oznacza ciąg znaków: (najedź myszką) |rwx|r-x|r–

 

Uprawnienia numeryczne

Jeżeli chcesz odebrać wszystkie prawa osobom które nie są członkami twojej grupy to uzyjesz polecenia: chmod O-rwx wiadomosc

Jest to tylko jeden sposób nadawania uprawnień, poznaliśmy już sposób symboliczny. Przejedzmy teraz do sposobu numerycznego, pokaże Wam prosty przykład a później wytłumaczę:

dyzio@student:~$ ls -l wiadomosc
-rw-r--r-- 1 dyzio geolgrp 0 2016-03-02 01:08 wiadomosc
dyzio@student:~$ chmod 666 wiadomosc
dyzio@student:~$ ls -l wiadomosc
-rw-rw-rw- 1 dyzio geolgrp 0 2016-03-02 01:08 wiadomosc

Sposób numeryczny wydaje się na pierwszy rzut oka bardziej skomplikowany jednak gdy nauczymy się przeliczać prawa dostępu będzie on praktyczny i wygodny, a sposób symboliczny będziemy stosować tylko w przypadkach gdy będziemy chcieli nadać pojedyncze uprawnienia np. chmod O+r

Jak zamienia się uprawnienia na liczby? W bardzo prosty sposób, na pewno każdy zna system binarny i ósemkowy i wie że liczba 101 (2) to 5 (8), wiec ciąg uprawnień rw-r–r– będzie liczbą 644, ciąg znakowy podzielmy sobie na 3 częsci: rw- | r– | r– w miejsca liter wstawiamy 1 a tam gdzie jest pusto stawiamy 0. Otrzymujemy liczbę 110100100, teraz podzielmy ja na 3 części 110 | 100 | 100 i każdą z tych części zamieńmy na liczbę ósemkowa wiedząc że waga od najstarszego (po lewej) to 4,2,1 (kolejne potęgi dwójki: 2^0=1, 2^1=2, 2^2=4) wiec otrzymamy liczbę 110->6 | 100->4 | 100->4 a więc 644.

Jakie prawa dostępu nadają poniższe wartości?

764 
664 
640

Przykład:

dyzio@student:~/sh$ ls -l
total 8
-rw-rw-rw- 1 dyzio geolgrp 122 2016-03-20 21:54 login.sh
-rwxr-xr-- 1 dyzio geolgrp  32 2016-03-20 21:03 skrypt.sh*
dyzio@student:~/sh$ chmod 774 login.sh
dyzio@student:~/sh$ ls -l
total 8
-rwxrwxr-- 1 dyzio geolgrp 122 2016-03-20 21:54 login.sh*
-rwxr-xr-- 1 dyzio geolgrp  32 2016-03-20 21:03 skrypt.sh*
dyzio@student:~/sh$ chmod 755 login.sh skrypt.sh
dyzio@student:~/sh$ ls -l
total 8
-rwxr-xr-x 1 dyzio geolgrp 122 2016-03-20 21:54 login.sh*
-rwxr-xr-x 1 dyzio geolgrp  32 2016-03-20 21:03 skrypt.sh*