{"id":24419,"date":"2021-09-06T18:09:04","date_gmt":"2021-09-06T16:09:04","guid":{"rendered":"https:\/\/www.smsapi.pl\/blog\/?p=24419"},"modified":"2024-01-29T14:38:09","modified_gmt":"2024-01-29T13:38:09","slug":"biblioteka-javascript-sms-api","status":"publish","type":"post","link":"https:\/\/www.smsapi.pl\/blog\/podstawy\/biblioteka-javascript-sms-api\/","title":{"rendered":"Biblioteka JavaScript: SMS API"},"content":{"rendered":"\n<p><strong>Poznaj bibliotek\u0119 Javascript. Wysy\u0142anie SMS z JS jest prostsze ni\u017c Ci si\u0119 wydaje. W tym poradniku programisty znajdziesz zar\u00f3wno gotowe fragmenty kodu wraz z om\u00f3wieniem, jak i wyja\u015bnienie b\u0142\u0119d\u00f3w, na kt\u00f3re mo\u017cesz natrafi\u0107. <\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Poprzednio zaj\u0105\u0142em si\u0119 bibliotek\u0105 SMS API napisan\u0105 w j\u0119zyku <a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/biblioteka-php-sms-api\/\">PHP<\/a>. Czas na kontynuacj\u0119! Poznaj implementacj\u0119 w kolejnym j\u0119zyku. Tym razem bior\u0119 na warsztat Bibliotek\u0119 JavaScript. Do dzie\u0142a! Na pocz\u0105tku \u2013 sprostowanie. W styczniu 2021 wypu\u015bcili\u015bmy wersj\u0119 2.0.0 Biblioteki Javascript.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-secondary\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.smsapi.pl\/sms-api\" target=\"_blank\" rel=\"noreferrer noopener\">Biblioteki SMS API<\/a><\/div>\n<\/div>\n\n\n\n<p>Co si\u0119 zmieni\u0142o? Ca\u0142kiem sporo, poniewa\u017c wprowadza wsparcie dla j\u0119zyka TypeScript. Jest to stworzona przez Microsoft mniej znana \u201enadbud\u00f3wka\u201d dla JavaScriptu (fachowo: jest jego nadzbiorem). Oznacza to, \u017ce <strong>ka\u017cdy kod JavaScript jest poprawny r\u00f3wnie\u017c w TypeScripcie<\/strong>. Podstawowa r\u00f3\u017cnica polega na dodaniu statycznego typowania do ca\u0142kowicie dynamicznego JS. Poza tym TypeScript jako pierwszy zacz\u0105\u0142 wspiera\u0107 bardzo wa\u017cny mechanizm async\/await. Ale po kolei.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zanim zaczniesz pisa\u0107 program do wysy\u0142ki SMS\u2026<\/h2>\n\n\n\n<p>Potrzebujesz kilku krok\u00f3w przygotowa\u0144. Chodzi o <a href=\"https:\/\/www.smsapi.pl\/rejestracja\">za\u0142o\u017cenie i skonfigurowanie konta<\/a> w naszym serwisie. Da Ci to <strong>dost\u0119p do Panelu<\/strong>, w kt\u00f3rym mo\u017cesz zarz\u0105dza\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.smsapi.pl\/masowa-wysylka-sms\">masow\u0105 wysy\u0142k\u0105 SMS<\/a>;<\/li>\n\n\n\n<li>danymi do faktury;<\/li>\n\n\n\n<li>p\u0142atno\u015bciami za <a href=\"https:\/\/www.smsapi.pl\/kampanie-sms\">kampanie SMS<\/a>;<\/li>\n\n\n\n<li>nazwami nadawcy wiadomo\u015bci (<a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/branding-sms-skojarz-swoja-marke-z-wysylka-sms\/\">branding SMS<\/a>);<\/li>\n\n\n\n<li>list\u0105 kontakt\u00f3w;<\/li>\n\n\n\n<li>grupami odbiorc\u00f3w;<\/li>\n\n\n\n<li>tokenami OAuth 2 dla po\u0142\u0105czenia z API.<\/li>\n<\/ul>\n\n\n\n<p>Sam panel, jak wida\u0107, daje spore mo\u017cliwo\u015bci. Proces stworzenia nowego konta by\u0142 ju\u017c <a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/biblioteka-php-sms-api\/\" class=\"ek-link\">opisany w artykule o bibliotece SMS API w PHP<\/a>. Inne teksty i poradniki wideo na naszym blogu pokazuj\u0105 poszczeg\u00f3lne funkcje panelu \u2013 zajrzyj do zak\u0142adki <a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/\">SMSAPI od podstaw<\/a>. Skupmy si\u0119 teraz na bardziej programistycznym podej\u015bciu.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-blog-smsapi wp-block-embed-blog-smsapi\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"nfP3M5lTIi\"><a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/zrob-to-sam-jak-utworzyc-konto-testowe\/\">Zr\u00f3b to sam #01 \u2013 Jak utworzy\u0107 konto testowe? (poradnik wideo)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8222;Zr\u00f3b to sam #01 \u2013 Jak utworzy\u0107 konto testowe? (poradnik wideo)&#8221; &#8212; Blog SMSAPI\" src=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/zrob-to-sam-jak-utworzyc-konto-testowe\/embed\/#?secret=oicaC2DmBV#?secret=nfP3M5lTIi\" data-secret=\"nfP3M5lTIi\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Ca\u0142y kod naszej biblioteki jest podzielony na modu\u0142y, kt\u00f3re odpowiadaj\u0105 za poszczeg\u00f3lne funkcje. Ca\u0142o\u015b\u0107 znajdziesz na <a rel=\"noopener noreferrer nofollow\" href=\"https:\/\/github.com\/smsapi\/smsapi-javascript-client\" target=\"_blank\">GitHub SMSAPI<\/a>. Analiza poszczeg\u00f3lnych plik\u00f3w to oczywi\u015bcie najpewniejszy spos\u00f3b na nauczenie si\u0119 jej obs\u0142ugi. Jednak je\u015bli wolisz szybciej i nieco przyjemniej zapozna\u0107 si\u0119 z jej wykorzystaniem w praktyce \u2013 zapraszam do lektury!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wysy\u0142ka wiadomo\u015bci przez SMS API JavaScript<\/h2>\n\n\n\n<p>Podwalin\u0105 automatycznej obs\u0142ugi SMS s\u0105 metody HTTP. Trzon aplikacji do komunikacji z <a href=\"https:\/\/www.smsapi.pl\/sms-api\" target=\"_blank\" aria-label=\"SMS API (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">SMS API<\/a> stanowi klient HTTP, kt\u00f3ry formu\u0142uje te zapytania do serwera. Przyk\u0142adem takiego rozwi\u0105zania jest popularny Axios, napisany w JavaScripcie. W\u0142a\u015bnie z niego korzysta nasza Biblioteka. Dzi\u0119ki temu nie musisz dostarcza\u0107 w\u0142asnego klienta.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Przygotowanie do pracy z SMS API<\/h3>\n\n\n\n<p>Na pocz\u0105tku pracy z kodem b\u0119dziesz musia\u0142 dokona\u0107 inicjalizacji funkcji biblioteki. Nic prostszego!. Jedynym potrzebnym tu parametrem jest <strong>token autoryzacyjny<\/strong>, wygenerowany w panelu Klienta. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-blog-smsapi wp-block-embed-blog-smsapi\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"MCyRNnAJTV\"><a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/api-smsapi-od-podstaw-poradnik\/\">API SMSAPI od podstaw \u2013 poradnik programisty #01<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8222;API SMSAPI od podstaw \u2013 poradnik programisty #01&#8221; &#8212; Blog SMSAPI\" src=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/api-smsapi-od-podstaw-poradnik\/embed\/#?secret=TArJblX5Qe#?secret=MCyRNnAJTV\" data-secret=\"MCyRNnAJTV\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Kod inicjalizacji mo\u017ce za\u015b wygl\u0105da\u0107 na przyk\u0142ad tak:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import {SMSAPI} from 'smsapi';\nconst apiToken = '%SMSAPI_ACCESS_TOKEN%';\nconst smsapi = new SMSAPI(apiToken);<\/code><\/pre>\n\n\n\n<p>I to wszystko! Za konfiguracj\u0119 klienta ca\u0142kowicie odpowiada Axios.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Javascript: wysy\u0142anie SMS pojedynczego<\/h2>\n\n\n\n<p class=\"language-javascript\">A jak najpro\u015bciej wys\u0142a\u0107 wiadomo\u015b\u0107? Za pomoc\u0105 modu\u0142u o do\u015b\u0107 oczywistej nazwie <code>sms<\/code>. Mo\u017ce to wygl\u0105da\u0107 tak:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import {SMSAPI, MessageResponse} from 'smsapi'; \/\/ MessageResponse nie jest wykorzystany\n\nconst smsapi = new SMSAPI('&#91;token]');\n\nconst receiver = '+48111222333';\n\nconst message = 'Hello world!';\nsmsapi.sms.sendSms(receiver, message);<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Metoda <code>sendSms<\/code> jest asynchroniczna, zatem zwraca znany z JavaScriptu obiekt <code>Promise<\/code>. Opakowuje on z kolei obiekt <a href=\"https:\/\/github.com\/smsapi\/smsapi-javascript-client\/blob\/master\/src\/types\/MessageResponse.ts\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><code>MessageResponse<\/code><\/a>. Trzeba poczeka\u0107 na odpowied\u017a, \u017ceby jako\u015b skorzysta\u0107 ze zwr\u00f3conych danych. Z pomoc\u0105 przychodzi tu wi\u0119c mechanizm async\/await. Poni\u017csza funkcja po zako\u0144czonym wysy\u0142aniu wy\u015bwietli komunikat ze statusem:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function SendAndDisplayStatus(receiver, message) {\nconst response = await smsapi.sms.sendSms(receiver, message);\nconst response: MessageResponse = await smsapi.sms.sendSms(receiver, message); \/\/ Albo tak je\u015bli wykorzystujemy MessageResponse\n\nalert(response.list&#91;0].status);\n}<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Poszczeg\u00f3lne elementy zwracanego obiektu <code>response<\/code> s\u0105 analogiczne do odpowiedzi w formacie JSON, kt\u00f3r\u0105 opisuje <a href=\"https:\/\/www.smsapi.pl\/docs#2-pojedynczy-sms\">Dokumentacja API<\/a>. Mo\u017cliwe jest <strong>wysy\u0142anie SMS do wielu odbiorc\u00f3w<\/strong> naraz, st\u0105d element o nazwie <code>list<\/code>. Jego pola to m.in.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>status<\/code> \u2013 jeden ze <a href=\"https:\/\/www.smsapi.pl\/docs#18-lista-statusow-doreczenia\">status\u00f3w dor\u0119czenia wiadomo\u015bci<\/a>;<\/li>\n\n\n\n<li><code>id<\/code> \u2013 unikalny identyfikator w systemie SMSAPI;<\/li>\n\n\n\n<li><code>points<\/code> \u2013 koszt wysy\u0142ki, czyli liczba punkt\u00f3w pobranych z konta SMSAPI;<\/li>\n\n\n\n<li><code>number<\/code> \u2013 numer odbiorcy;<\/li>\n\n\n\n<li><code>dateSent<\/code> \u2013 data wysy\u0142ki.<\/li>\n<\/ul>\n\n\n\n<p>Widzisz wi\u0119c, \u017ce minimalna obs\u0142uga SMS w JavaScript dzi\u0119ki bibliotece SMS API zajmuje zaledwie dwie linijki kodu: <strong>utworzenie g\u0142\u00f3wnego obiektu SMSAPI<\/strong> i <strong>zlecenie wysy\u0142ki klientowi HTTP<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const smsapi = new SMSAPI('%SMSAPI_ACCESS_TOKEN%');\nsmsapi.sms.sendSms('+48111222333', 'Hello world!');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Wysy\u0142ka do wielu odbiorc\u00f3w \u2013 metody JavaScript<\/h2>\n\n\n\n<p>Przejd\u017amy dalej. Skoro planujesz programowo <strong>zautomatyzowa\u0107 wysy\u0142anie SMS do klient\u00f3w firmy<\/strong>, to pewnie potrzebujesz nieco wi\u0119cej mo\u017cliwo\u015bci. Dostarczanie identycznych wiadomo\u015bci do wielu odbiorc\u00f3w jednocze\u015bnie? Nic prostszego! Wystarczy tylko, \u017ce do tej samej funkcji zamiast numeru odbiorcy podasz ich list\u0119.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function SendMultipleAndDisplayStatuses(receivers, message) {\t\nconst response = await smsapi.sms.sendSms(receivers, message);\t\n \t\nfor (const respList of response.list) {\t\n alert(respList.status);\t\n}\t\n}\n\t\nSendMultipleAndDisplayStatuses(\t\n&#91;'+48111222333', '+48444555666'],\t\n'Hello receivers!'\t\n);<\/code><\/pre>\n\n\n\n<p>W Panelu Klienta \u0142atwo zauwa\u017cysz mo\u017cliwo\u015b\u0107 \u0142\u0105czenia odbiorc\u00f3w w grupy. Nasza biblioteka w JavaScripcie umo\u017cliwia skorzystanie z nich. Gdy ca\u0142a grupa ma dosta\u0107 t\u0119 sam\u0105 wiadomo\u015b\u0107, wystarczy u\u017cy\u0107:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function SendToGroupAndDisplayStatuses(group, message) {\t\nconst response = await smsapi.sms.sendSmsToGroup(group, message);\n\t\nfor (const respList of response.list) {\t\n alert(respList.status);\t\n}\t\n}\n\t\nSendToGroupAndDisplayStatuses('group_name', 'Hello group!');<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Je\u015bli argument <code>group<\/code> b\u0119dzie list\u0105, wszystko r\u00f3wnie\u017c wykona si\u0119 poprawnie. Program po prostu spr\u00f3buje wys\u0142a\u0107 SMS do wszystkich odbiorc\u00f3w z kilku grup.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dodatkowe opcje SMS-\u00f3w: personalizacja i planowanie<\/h3>\n\n\n\n<p>Przekaz jest lepiej odbierany, je\u015bli cz\u0142owiek czuje si\u0119 potraktowany indywidualnie. Tak drobna rzecz, jak zwrot po imieniu mo\u017ce by\u0107 pierwszym krokiem w udanym <a href=\"https:\/\/www.smsapi.pl\/sms-marketing\">marketingu SMS<\/a>. <\/p>\n\n\n\n<p><a href=\"https:\/\/www.smsapi.pl\/personalizacja\">Personalizacja<\/a> poszczeg\u00f3lnych wiadomo\u015bci oznacza nadanie poszczeg\u00f3lnym wiadomo\u015bciom bardziej osobistego charakteru. Nie musisz przy tym r\u0119cznie pisa\u0107 ka\u017cdego tekstu z osobna. W odpowiedniej <a href=\"https:\/\/ssl.smsapi.pl\/react\/sms-templates\" target=\"_blank\" rel=\"noopener\">sekcji Twojego panelu klienta<\/a> SMS API mo\u017cesz tworzy\u0107 szablony wiadomo\u015bci. Na przyk\u0142ad taki:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PackageSentTemplate: \u201eCze\u015b\u0107 &#91;%imie%], Twoje zam\u00f3wienie zosta\u0142o wys\u0142ane!\u201d <\/code><\/pre>\n\n\n\n<p>Element [%imie%] zostanie zamieniony na odpowiedni\u0105 tre\u015b\u0107, je\u015bli masz utworzon\u0105 baz\u0119 odbiorc\u00f3w. W ten prosty spos\u00f3b <strong>adresat automatycznie dostanie wiadomo\u015b\u0107 skierowan\u0105 bezpo\u015brednio do niego<\/strong>. Dost\u0119pnych rodzaj\u00f3w p\u00f3l jest naturalnie wi\u0119cej \u2013 opisali\u015bmy je w <a href=\"https:\/\/www.smsapi.pl\/docs#sms-do-grupy-z-bazy-kontaktow\">Dokumentacji<\/a>. W kodzie mo\u017cna skorzysta\u0107 z szablonu na przyk\u0142ad tak:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function NotifyPackageSent(receiver) {\t\nconst details = {\t\ntemplate: 'PackageSentTemplate'\t\n};\n\t\nawait smsapi.sms.sendSms(receiver, \"\", details);\t\n}<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Jak widzisz, pomin\u0105\u0142em tre\u015b\u0107 wiadomo\u015bci, poniewa\u017c jest zawarta w szablonie. Zmienna <code>details<\/code> jest typu <a href=\"https:\/\/github.com\/smsapi\/smsapi-javascript-client\/blob\/master\/src\/modules\/sms\/types\/SmsDetails.ts\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><code>SmsDetails<\/code><\/a>. Zawiera ona szereg dodatkowych danych, kt\u00f3re mog\u0105 by\u0107 do\u0142\u0105czone do wysy\u0142anych wiadomo\u015bci. Na przyk\u0142ad: kodowanie znak\u00f3w, data wys\u0142ania, maksymalna liczba cz\u0119\u015bci wiadomo\u015bci, u\u017cyty szablon i w\u0142asne parametry. Dok\u0142adniejsze opisy znajdziesz w <a href=\"https:\/\/www.smsapi.pl\/docs#2-pojedynczy-sms\">Dokumentacji<\/a>, w rozdziale o pojedynczej wysy\u0142ce.&nbsp;<\/p>\n\n\n\n<p class=\"language-javascript\">Przejd\u017amy dalej. Pole <code>date<\/code> z obiektu <code>SmsDetails<\/code> pozwala zaplanowa\u0107 wysy\u0142k\u0119 na przysz\u0142o\u015b\u0107. Jest to standardowy, JavaScriptowy obiekt typu Date, wi\u0119c mo\u017cna wykorzysta\u0107 go na przyk\u0142ad tak:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function ScheduleSms(receiver, message, futureDate) {\nconst details = {\ndate: futureDate\t\n};\n\t\nawait smsapi.sms.sendSms(receiver, message, details);\t\n}<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Ta niepozorna funkcja pozwoli Ci <a href=\"https:\/\/www.smsapi.pl\/blog\/wiedza\/czas-sie-liczy-jak-wybrac-odpowiedni-moment-na-wysylke-sms\/\">planowa\u0107 kampanie SMS<\/a>! Na wszelki wypadek w module <code>sms<\/code> znajdziesz funkcj\u0119, za pomoc\u0105 kt\u00f3rej mo\u017cesz anulowa\u0107 zaplanowane wys\u0142anie SMS-a. Oto jej sygnatura:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async removeScheduledSms(smsId: string | string&#91;]):\nPromise&lt;ScheduledSmsResponse&gt;<\/code><\/pre>\n\n\n\n<p class=\"language-javascript\">Przyjmowany parametr to unikalny identyfikator wiadomo\u015bci, kt\u00f3ry poznajesz w momencie wysy\u0142ki. Zwracaj\u0105 go metody <code>sendSms<\/code> i <code>sendSmsToGroup<\/code> \u2013 patrz wy\u017cej.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pole nadawcy SMS<\/h3>\n\n\n\n<p>Jest to kr\u00f3tki <strong>tekst wy\u015bwietlany zamiast numeru telefonu<\/strong> nadawcy. Dzi\u0119ki niemu odbiorca mo\u017ce natychmiast skojarzy\u0107, kto do niego pisze. Mo\u017ce to by\u0107 na przyk\u0142ad nazwa Twojej marki. W marketingu SMS to pierwsza okazja, \u017ceby zrobi\u0107 na kliencie dobre wra\u017cenie. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-blog-smsapi wp-block-embed-blog-smsapi\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ixOTQMiSWn\"><a href=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/branding-sms-skojarz-swoja-marke-z-wysylka-sms\/\">Branding SMS \u2013 jak ustawi\u0107 nazw\u0119 nadawcy w miejsce numeru telefonu?<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8222;Branding SMS \u2013 jak ustawi\u0107 nazw\u0119 nadawcy w miejsce numeru telefonu?&#8221; &#8212; Blog SMSAPI\" src=\"https:\/\/www.smsapi.pl\/blog\/podstawy\/branding-sms-skojarz-swoja-marke-z-wysylka-sms\/embed\/#?secret=lwvSrRjpE3#?secret=ixOTQMiSWn\" data-secret=\"ixOTQMiSWn\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Ze wzgl\u0119d\u00f3w bezpiecze\u0144stwa, pracownik SMSAPI r\u0119cznie zatwierdza ka\u017cd\u0105 now\u0105 nazw\u0119 nadawcy w godzinach pracy naszego biura. Mo\u017cesz ustawia\u0107 je w Panelu Klienta, a spo\u015br\u00f3d nich wybra\u0107 jedn\u0105 domy\u015bln\u0105. <\/p>\n\n\n\n<p class=\"language-javascript\">Od strony kodu obs\u0142uguje je modu\u0142 <code>sendernames<\/code>. Zawiera on kilka przydatnych metod do znajdowania, tworzenia i usuwania p\u00f3l nadawcy. Poni\u017csza funkcja dla przyk\u0142adu pokazuje, jak mo\u017cesz jawnie upewni\u0107 si\u0119, \u017ce SMS zostanie wys\u0142any z domy\u015blnym polem nadawcy.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>async function sendSmsWithDefaultSenderName(receiver, message) {\nconst senderNamesList = await smsapi.sendernames.get();\n\t\nfor (let elem of senderNamesList.collection) {\nif (elem.isDefault) {\nawait smsapi.sms.sendSms(receiver, message, {from: elem.sender});\t\nbreak;\t\n}\t\n}\t\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">B\u0142\u0119dy wys\u0142ania SMS<\/h2>\n\n\n\n<p class=\"language-javascript\">Aby zabezpieczy\u0107 Tw\u00f3j program przed nieprzyjemnymi niespodziankami, powiniene\u015b zawrze\u0107 w nim obs\u0142ug\u0119 b\u0142\u0119d\u00f3w. Wspomniany wy\u017cej Axios (klient HTTP) w razie niepowodzenia wys\u0142ania wiadomo\u015bci zwr\u00f3ci kod i wiadomo\u015b\u0107 b\u0142\u0119du. Kod biblioteki SMS API w takiej sytuacji rzuci wyj\u0105tkiem z obiektem b\u0142\u0119du typu <a href=\"https:\/\/github.com\/smsapi\/smsapi-javascript-client\/blob\/master\/src\/errors\/MessageError\/index.ts\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><code>MessageError<\/code><\/a>, kt\u00f3ry zawiera te dwie warto\u015bci. <\/p>\n\n\n\n<p class=\"language-javascript\">Szczeg\u00f3\u0142owe opisy kod\u00f3w b\u0142\u0119d\u00f3w znajdziesz w <a href=\"https:\/\/www.smsapi.pl\/docs#19-kody-bledow\">Dokumentacji<\/a>. Oto niekt\u00f3re, najcz\u0119\u015bciej spotykane:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>11 \u2013 zbyt d\u0142uga wiadomo\u015b\u0107 lub pojawi\u0142y si\u0119 znaki specjalne przy jednoczesnym u\u017cyciu parametru nounicode;<\/li>\n\n\n\n<li>12 \u2013 przekroczony limit cz\u0119\u015bci wiadomo\u015bci;<\/li>\n\n\n\n<li>13 \u2013 brak poprawnych numer\u00f3w odbiorc\u00f3w;<\/li>\n\n\n\n<li>14 \u2013 niepoprawne pole nadawcy;<\/li>\n\n\n\n<li>26 \u2013 za d\u0142ugi temat wiadomo\u015bci;<\/li>\n\n\n\n<li>101 \u2013 z\u0142e dane autoryzacji (b\u0142\u0119dny token);<\/li>\n\n\n\n<li>103 \u2013 brakuje punkt\u00f3w na koncie, aby wys\u0142a\u0107 wiadomo\u015b\u0107.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Inne modu\u0142y SMS API dla JavaScriptu<\/h2>\n\n\n\n<p class=\"language-javascript\">Jak ju\u017c na pocz\u0105tku wspomnia\u0142em, kod biblioteki podzielony jest na modu\u0142y. Powy\u017cej zapoznali\u015bmy si\u0119 z <code>sms<\/code> i <code>sendernames<\/code> \u2013 najwa\u017cniejszymi do wysy\u0142ki SMS. Niekt\u00f3re z pozosta\u0142ych modu\u0142\u00f3w to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>templates<\/strong> \u2013 s\u0142u\u017cy do obs\u0142ugi szablon\u00f3w wiadomo\u015bci.<\/li>\n\n\n\n<li><strong>contacts <\/strong>\u2013 do tworzenia i edytowania kontakt\u00f3w. Zawiera pomniejsze modu\u0142y do zarz\u0105dzania grupami kontakt\u00f3w oraz w\u0142asnymi, polami poszczeg\u00f3lnych kontakt\u00f3w.<\/li>\n\n\n\n<li><strong>mms<\/strong> \u2013 przy jego pomocy wy\u015blesz MMS w formacie SMIL.&nbsp;<\/li>\n\n\n\n<li><strong>profile<\/strong> \u2013 pozwala sprawdzi\u0107 dane Twojego konta w SMSAPI, takie jak liczba dost\u0119pnych punkt\u00f3w, dane u\u017cytkownika, typ p\u0142atno\u015bci.<\/li>\n<\/ul>\n\n\n\n<p>Brak w tym artykule miejsca, \u017ceby si\u0119 rozwleka\u0107 nad wszystkimi aspektami biblioteki Javascript do wysy\u0142ki SMS. Na koniec odsy\u0142am Ci\u0119, wi\u0119c do <a rel=\"noopener noreferrer nofollow\" href=\"https:\/\/github.com\/smsapi\/smsapi-javascript-client\" target=\"_blank\" class=\"ek-link\">repozytorium na GitHubie<\/a>, a konkretniej: plik\u00f3w test\u00f3w jednostkowych. Znajdziesz je w poszczeg\u00f3lnych podfolderach, zawsze pod nazw\u0105 index.spec.ts. Testy s\u0105 jednocze\u015bnie przyk\u0142adami zastosowania poszczeg\u00f3lnych metod \u2013 to najprostszy spos\u00f3b na nauk\u0119. Powodzenia!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Poznaj bibliotek\u0119 Javascript. Wysy\u0142anie SMS z JS jest prostsze ni\u017c Ci si\u0119 wydaje. W tym poradniku programisty znajdziesz zar\u00f3wno gotowe fragmenty kodu wraz z om\u00f3wieniem, jak i wyja\u015bnienie b\u0142\u0119d\u00f3w, na kt\u00f3re mo\u017cesz natrafi\u0107.<\/p>\n","protected":false},"author":3,"featured_media":24514,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[321],"tags":[315,230,223],"class_list":["post-24419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-podstawy","tag-biblioteka","tag-it","tag-api"],"_links":{"self":[{"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/posts\/24419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/comments?post=24419"}],"version-history":[{"count":31,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/posts\/24419\/revisions"}],"predecessor-version":[{"id":30060,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/posts\/24419\/revisions\/30060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/media\/24514"}],"wp:attachment":[{"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/media?parent=24419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/categories?post=24419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.smsapi.pl\/blog\/wp-json\/wp\/v2\/tags?post=24419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}